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

Sporran

You may try to add a rounded dummy view on webView... So it'll stay beyond and seem rounded. – Guava

The cleanest solution imho is to implement a WebView class. I posted a simple copy paste solution here: https://mcmap.net/q/584355/-android-custom-webview-with-rounded-corners – Fotheringhay

Answer 1

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.

Yovonnda

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: #9170542 – Tideway

Answer 2

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

Prestissimo

Answer 3

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

Warfarin

Answer 4

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>

Languor

Answer 5

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

Johanson

Answer 6

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.

Barling

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>

Bhopal