rounded corners - How can I work around Android issue 9161, where bottomRightRadius and bottomLeftRadius are swapped?

Question

My goal:

Figure 1: The Goal

So, before I knew about the issue, here's what I tried.

First, a base layout:

<LinearLayout
    android:orientation="horizontal"
    android:layout_below="@id/heading"
    android:layout_marginTop="10dp"
    android:layout_width="@dimen/horizontal_two_button_width"
    android:layout_height="@dimen/button_height_small" >

    <Button
        android:id="@+id/button_one"
        android:layout_width="0dp"
        android:layout_weight="1.0"
        android:layout_height="fill_parent"
        android:padding="10dp"
        style="@style/ButtonText"
        android:background="@drawable/button_left_green" />

    <Button
        android:id="@+id/button_two"
        android:layout_width="0dp"
        android:layout_weight="1.0"
        android:layout_height="fill_parent"
        android:padding="10dp"
        style="@style/ButtonText"
        android:background="@drawable/button_right_green" />      

</LinearLayout>

The 'button_left_green' drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_left_green_pressed"
        android:state_pressed="true" />
    <item android:drawable="@drawable/button_left_green_focused"
        android:state_focused="true" />
    <item android:drawable="@drawable/button_left_green_default" />
</selector>

And, for example, the 'button_left_green_default' drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/shadow" />
            <corners
                android:radius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="0dp"
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="0dp" />      
        </shape>
    </item>
    <item
        android:bottom="19dp"
        android:top="1dp"
        android:left="1dp"
        android:right="1dp" >

        <shape android:shape="rectangle">
            <gradient
                android:startColor="@color/button_left_green_top_gradient_start"
                android:endColor="@color/button_left_green_top_gradient_end"
                android:angle="270" />

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

    <item
        android:top="19dp"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp" >

        <shape android:shape="rectangle" >
            <solid android:color="@color/button_left_green_bottom_gradient" />

            <corners
                android:radius="5dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="0dp" />
        </shape>
    </item>
</layer-list>

So, after all that, I got the image in Figure 2:

Figure 2: Take One

After double-checking the definition of the bottom corners, I was convinced I was crazy until I found the known issue: http://code.google.com/p/android/issues/detail?id=9161

I'd rather not just swap them, 'cause then if/when the issue is fixed, the buttons will be broken in newer versions.

One idea I had was to leave the actual buttons as regular rectangles (i.e. no corner radii) and wrapping both buttons with a rounded rectangle. I added a background drawable to the LinearLayout which had rounded corners, but the button corners overlapped the edge of the LinearLayout rounded edge (see Figure 3).

Figure 3: Take Two

How can I keep the button's background within the bounds of its parent's background drawable? Or do you have any other suggestions on how to work around the bug?

Answer 1

Another solution is to create another folder called "drawable-v12".

In here put the correct radius (so bottomLeftRadius, topLeftRadius), and in the original drawable folder put in the swapped values. Then 3.1+ will use the v12 folder, and pre 3.1 versions will use the drawable folder.