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

Answer 2

API level 21 (Lollipop) added View.setClipToOutline. From Android documentation on Defining Shadows and Clipping Views:

To clip a view to the shape of a drawable, set the drawable as the background of the view ... and call the View.setClipToOutline() method.

I tested this by setting a parent View's background to a GradientDrawable with a corner radius, and child Views are correctly cropped to match the same rounded corners of the parent.

Answer 3

What your describing sounds like this:

<LinearLayout android:shape="rounded">
   <LinearLayout android:background="@drawable/pedometer_stats_background">
   </LinearLayout>
</LinearLayout>

And the inner layout is pushing outside the rounded corners because it isn't rounded. You'll have to round the corners of your bitmap. If you have a repeating bitmap you'll want to look at defining a nine-patch drawable. Round your corners then define the portion of the graphic that can expand.

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

It'd be nice if we could just add a bitmap to the shape drawable and have that be applied as a skin over whatever shape we're drawing. And, I bet if you know what your doing you could create a Shape subclass that draws a bitmap, but that's not included in Android out of the box unfortunately.