Android XML rounded clipped corners

Question

I've setup a LinearLayout with the following drawable background:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="#CCFFFFFF"/>
</shape>

The problem I'm having is within the LinearLayout I have another LinearLayout element that sits at the bottom of it's parent. Since that doesn't have rounded corners its corners extend past the parents bottom left and right corners.

The drawable background on the Child LinearLayout looks like this:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:src="@drawable/pedometer_stats_background" 
    android:tileMode="repeat"   
/>

The issue looks like this: http://kttns.org/hn2zm on the device the non-clipping is more apparent.

What is the best method to accomplish the clipping?

Answer 1

2018 Update

A lot has changed in the last 7 years.

The best way to handle this type of layout these days is to use CardView which has built in support for rounded corners and many other newer UI features as well.

Apply the cardCornerRadius property to set the corners to round.

<android.support.v7.widget.CardView
    .......
    app:cardCornerRadius="16dp">

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

---

Original

I needed iPhone-style rounded layouts, with a grey background behind them. (sigh - always copying the iPhone)

I was frustrated I couldn't find a way to mask a layout. Most of the answers here say to use a background image, but this is not what I needed.

---

Edit: Previous answer suggested using a FrameLayout and setting the android:foreground drawable. This introduced some strange padding into the view. I have updated my answer to use simpler RelativeLayout technique.

---

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.

XML code is below - this is a normal layout XML file:

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

    <!-- this can be any layout that you want to mask -->
    <LinearLayout android:id="@+id/mainLayout"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" android:orientation="vertical"
        android:background="@android:color/white">

        <TextView android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:layout_gravity="center"
            android:text="Random text..." />

    </LinearLayout>

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

Note the ImageView at the bottom, aligned top & bottom to the main layout, with the masking image set:

• android:background="@drawable/grey_frame"

This references my 9Patch file - and masks the underlying layout by being drawn in the foreground.

Here is an example showing the grey rounded corners over a standard layout.

hth