Android: give a webview rounded corners?

Question

I'm trying to give my webView rounded corners.

Here is my code:

rounded_webview.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#000"/>
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

And here is my webView:

<WebView
        android:id="@+id/webView1"
        android:layout_width="293dp"
        android:layout_height="142dp"
        android:layout_gravity="center_horizontal"
        android:padding="5dip"
        android:background="@drawable/rounded_webview"/>

But it simply won't work. Corners are not rounded...

Answer 1

This is a little quirk of Webview, it has a default background color of white, drawn in front of any drawables. You'll need to use the following code to make it transparent and show your drawable background:

WebView webview = (WebView)findViewById(R.id.webView1);        
webview.setBackgroundColor(0);

Answer 2

The only way is wrap WebView element by other view (FrameLayout for example), and apply rounded corners background on external view. Example:

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dip"
        android:paddingBottom="10dip"
        android:paddingLeft="1dip"
        android:paddingRight="1dip"
        android:background="@drawable/white_rounded_area"
        >
    <WebView
            android:id="@+id/web_view"
            android:layout_width="300dip"
            android:layout_height="400dip"
            android:layout_gravity="center"
            />
</FrameLayout>

Where paddingTop and paddingBottom equals radius from drawable/white_rounded_area , paddingLeft and paddingRight equals stroke width drawable/white_rounded_area .

Minus of this approach is top an bottom rounded panels can have different background color with web page inside WebView, especially when page scrolled.

Answer 3

try this

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
         android:shape="rectangle" >

    <corners 
       android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
       android:topLeftRadius="10dp" android:topRightRadius="10dp"/>

      <stroke
        android:color="@drawable/black"
        android:width="3dp"/>

</shape>

Answer 4

I use an image that looks like a picture frame, where I give the frame the rounded corners. I lay this picture frame over the view I'm trying to give the rounded corners to.

This gets over the problem in iBog's solution of background panels not working nicely.

---

The trick is to use a RelativeLayout ; place your layout inside it. Below your layout, add another ImageView , setting its background to a suitable masking image frame. This will draw that on top of your other layout.

In my case, I made a 9Patch file which was a grey background, with a transparent rounded rectangle cut out of it.

This creates the perfect mask for your underlying layout.

The XML code could be something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content" android:layout_width="fill_parent">

    <!-- ... INSERT ANY VIEW HERE ... -->

    <!-- FRAME TO MASK UNDERLYING VIEW -->
    <ImageView android:layout_height="fill_parent" 
        android:layout_width="fill_parent" 
        android:background="@drawable/grey_frame"
        android:layout_alignTop="@+id/mainLayout"
        android:layout_alignBottom="@+id/mainLayout" />

</RelativeLayout>

---

The full details can be found in my original answer here:

• Android XML rounded clipped corners

Answer 5

None of the solutions worked for me. It worked for me. Before loading data you need to set

webView.getSettings().setUseWideViewPort(true);

and applied you're drawable in XML file.

It worked for me.

Answer 6

You can use a CardView to contain the webview, and you just need to add the corner radius that you want with with app:cardCornerRadius :

    <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardCornerRadius="10dp">                    // HERE

            <WebView
                android:id="@+id/webView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

    </android.support.v7.widget.CardView>

And that's all

Answer 7

Wrap the WebView with a FrameLayout, then set background , clipToOutline and outlineProvider attributes on it

<FrameLayout
    android:layout_width="350dp"
    android:layout_height="400dp"
    android:background="@drawable/rounded_rectangle"
    android:clipToOutline="true"
    android:outlineProvider="background">

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>