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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With