Android XML rounded clipped corners

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

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

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"?>

The issue looks like this: on the device the non-clipping is more apparent.

What is the best method to accomplish the clipping?


What your describing sounds like this:

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

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.

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.