How can I reproduce these buttons found in the official Twitter app?

Question

How do I reproduce the two buttons at the bottom of the Twitter app in this screenshot (Update and Cancel)? You can see a similar design pattern in the official Facebook app too when creating a Facebook message. Are they created with 9 patch images or is it something easier than that (setting a background color and somehow keeping border/state press color changes to orange).

This would be really simple if Twitter had open sourced their official Android app like they said they would (but never did).

Answer 1

Okay, I found out a way to do something very similar without using 9 patches thanks to this question.

Screenshot:

Activity layout (just the bottom part):

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0.75dp"
        android:background="@color/grey"   
        >
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dip"
        android:orientation="horizontal"
        android:background="@color/NavyBlue"
        >
            <!-- Buttons -->
            <Button 
                android:id="@+id/btn_UpdateAlert" 
                android:text="Update Alert"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:textColor="@color/CarolinaBlue"
                android:textStyle="bold"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="5dp"
                />
            <Button
                android:id="@+id/btn_Cancel"
                android:text="Cancel"   
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:textColor="@color/CarolinaBlue"
                android:textStyle="bold"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="10dp" 
                android:layout_marginLeft="5dp"
                android:layout_marginRight="10dp"
                />
    </LinearLayout>

Drawable button: res/drawable/button.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="@color/yellow1"
                android:endColor="@color/yellow2"
                android:angle="270" />
            <stroke
                android:width="0.75dp"
                android:color="@color/grey" />
            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="@color/orange1"
                android:startColor="@color/orange2"
                android:angle="270" />
            <stroke
                android:width="0.75dp"
                android:color="@color/grey" />
            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="@color/NavyBlue"
                android:startColor="@color/NavyBlue"
                android:angle="270" />
            <stroke
                android:width="0.75dp"
                android:color="@color/grey" />
            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Answer 2

You could either use a 9-patch or you could look into creating your own custom components using the guidelines Google has in the SDK: http://developer.android.com/guide/topics/ui/custom-components.html.

It's basically just specifying XML tags to describe how you want your custom View to look like.