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

Jeremy Haberman picture Jeremy Haberman · May 14, 2011 · Viewed 8.6k times · Source

My goal:

Figure 1: The 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
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
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

Joss Stuart picture Joss Stuart · Jan 5, 2012

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.