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...

You may try to add a rounded dummy view on webView... So it'll stay beyond and seem rounded. — yahya, Jul 26 '12 at 18:25
The cleanest solution imho is to implement a WebView class. I posted a simple copy paste solution here: https://stackoverflow.com/a/60084819/990129 — muetzenflo, Feb 05 '20 at 22:09

georgiecasey · Answer 1 · 2012-10-18T14:09:07.620

28

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);

edited Oct 18 '12 at 14:09

answered Aug 13 '12 at 02:08

georgiecasey

21,793
11
65
74

iBog · Accepted Answer · 2012-09-20T07:39:40.043

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.

Simply setting background and padding on the WebView is technically the right way and this proposed answer is technically just a workaround. However, this "right way" doesn't work because of a bug: https://stackoverflow.com/questions/9170042/how-to-add-padding-around-a-webview — Benjamin Basmaci, Jun 17 '19 at 11:13

score 13 · Answer 3 · answered Mar 12 '19 at 19:16

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

score 4 · Answer 4 · answered Jul 26 '12 at 18:18

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>

score 0 · Answer 5 · edited May 23 '17 at 11:46

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.

frame

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

score 0 · Answer 6 · answered Apr 18 '18 at 13:19

0

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.

answered Apr 18 '18 at 13:19

Harsh Shah

2,162
2
19
39

score 0 · Answer 7 · answered Sep 16 '22 at 15:46

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>

Android: give a webview rounded corners?

7 Answers7

Linked