Android: give a webview rounded corners?

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

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.

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

Leave a Comment