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

android xml rounded-corners

Edit Report

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.

frame

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_hei


                        
                        
                            answered 2011-11-29T15:10:08.950

Android XML rounded clipped corners

1 Answer

Your Answer