Question

I have LinearLayout with shape background and WebView inside. How to cut WebView along the border of the shape?

I want WebView fit in the shape and so WebView will not have any acute angles.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="5dip" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg_border"
    android:orientation="vertical" >

    <WebView android:id="@+id/webview" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" />

    </LinearLayout>
</LinearLayout>

bg_border.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
<stroke
    android:width="1dp"
    android:height="1dp"
    android:color="@color/border" />

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

Answer 1

I would bet you can only simulate that. Create another shape with a (smaller) radius, and make it white. Put that around your web view. This obviously won’t work if the page you’re looking at is not white.

Also, you don’t need to define topLeft/bottomRight/etc if you already define “radius” and all the values are the same.

UPDATE
Ideas. Both of them involve a source image LIKE this: http://www.noiseindustries.com/downloads/misc/FxFactoryHelp/pluginguide/generators/roundedrectangle/files/ni-rounded-rectangle.jpg

Just make sure the border is MUCH smaller. 3-5 pixels. The white center should be transparent, not white.

1) Create a RelativeLayout, and create images for the sides and corners. With the layout and images, basically lay out the images so you “draw” a border. Don’t put anything in the center. Create a FrameLayout, put the webview in, then put the RelativeLayout on top. Hopefully, the touch events in the center will fall through to the webview, but still give you a soft border around the edges.

2) Create a 9-patch image that basically looks the same as the border described in 1. Do the same FrameLayout described in 1, and add the Webview. On top of that, add a CUSTOM view. Set the background to the 9-patch, and make sure the custom view passes on all of its touch events.

I suspect #1 would be easier to implement, but who knows?