Как я могу воспроизвести эти кнопки, найденные в официальном приложении Twitter?

Question

Как воспроизвести две кнопки в нижней части приложения Twitter на этом снимке экрана (Обновление и Отмена)?Подобный шаблон дизайна можно увидеть и в официальном приложении Facebook при создании сообщения Facebook.Созданы ли они с 9-ю патч-изображениями или это что-то более простое (установка цвета фона и какое-то изменение цвета печати границ / состояния на оранжевый).

Это было бы действительно просто, если бы Twitter открыл свой официальный источникAndroid-приложение, как они сказали (но никогда не делали).

Answer 1

Хорошо, я нашел способ сделать что-то очень похожее, не используя 9 патчей благодаря этому вопросу .

Скриншот:

Макет активности (только нижняя часть):

    <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>

Кнопка для рисования: 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

Вы можете использовать 9-патч или создать собственные компоненты, руководствуясь рекомендациями Google в SDK: http://developer.android.com/guide/topics/ui/custom-components.html.

По сути, это просто указание тегов XML для описания того, как должен выглядеть ваш пользовательский вид.