4. Кнопка, ресурси, xml

Зовнішній вид нашої кнопки бажає кращого. Сьогодні ми трохи над нею попрацюємо.
Є у нас така-собі звичайна кнопка, нічим не примітна, ніяк не виділяється. Виглядає ось так:

А описана ось так:

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Play"
        android:id="@+id/button"
        android:layout_below="@+id/imageView"
        android:onClick="pause"
        android:layout_centerHorizontal="true"
        />

Трохи видозмінимо її. Для початку додамо декілька ресурсів: розмір тексту в файл dimens.xml і сам текст, якщо він у вас ще не там в strings.xml.

<dimen name="btnTextSize">24sp</dimen>
<string name="Play">Play</string>

sp — Scale-independent Pixels одиниця виміру, що основана на відношенні діагоналі екрану до його роздільної здатності та на системних налаштуваннях розміру шрифту.

 <Button

        android:textStyle="italic|bold"                 курсив

        android:textSize="@dimen/btnTextSize"    посилання на ресурс розміру шрифту

        android:gravity="center|center_vertical"  положення тексту зліва, вертикально по центру

        android:layout_width="match_parent"      заповнити "предка"

        android:layout_height="wrap_content"     розмір відносно вмісту кнопки

        android:text="@string/Play"                    посилання на ресурс тексту

        android:id="@+id/button"                       створення посилання на кнопку

        android:layout_below="@+id/imageView"   знизу відносно зображення

        android:onClick="pause"                         виклик методу після натискання

        android:layout_centerHorizontal="true"     розміщення горизонтально посередині

        />

Завантажимо декілька зображень. Перше переіменовуємо на rama.9.png. Це особливий тип зображень nine-patch drawable, що може змінювати свою форму відносно зображення, тобто розтягуватися в залежності від потреб, зазвичай використовується як фон. Саме так ми його і будемо використовувати. Зберегти це зображення необхідно в одну з папок drawable.
Наступне зображення помістимо в drawable-hdpi і назвемо його musicico.png.

<Button
        android:background="@drawable/rama"              посилання на ресурс рамки
        android:drawableLeft="@drawable/musicico"        посилання на ресурс іконки
        android:textStyle="italic|bold"
        android:textSize="@dimen/btnTextSize"
        android:gravity="center|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/Play"
        android:id="@+id/button"
        android:layout_below="@+id/imageView"
        android:onClick="pause"
        android:layout_centerHorizontal="true"

        />

Задамо відступ в нашому RelativeLayout щод кнопка не зливалася з краями екрану і все не виглядало так дико і потворно.

android:padding="6dp"

dp - Density-independent pixel міра що задає однакове маштабування на різних пристроях, заснована на тому ж відношенні діагоналі і роздільної здатності. Звичайно, ми може вказати px (pixel) але тоді на кожному пристрої буде різний відступ. На одних пристроях замалий, а на інших завеликий.

Вже не погано, але можна краще. Кнопка може бути "не натиснутою", "натиснутою", і "в фокусі" (натиснутою в даний момент, коли ви тримаєте на ній палець). Але біда в тому, що ми не можемо в тексті одної кнопки вказувати background декілька разів. Отже доведеться створити окремий файл background для кнопки. 
В папці drawable створимо файл button_background.xml. res->new->android resourse file тип drawable, кореневий ресурс - selector.

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

</selector>

і точно те ж саме зробимо для іконки

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/musicico_inv" android:state_pressed="true" />
    <item android:drawable="@drawable/musicico" />

</selector>

Текст залишається чорним і не читається не темному фоні. Зробимо файл-ресурс і для кольору. why not?
В каталог color додаємо файл text_color.xml з таким вмістом.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_pressed="true" />
    <item android:color="#484848" />
</selector>

Кнопка виглядає так:

  <Button
        android:textColor="@color/text_color"
        android:background="@drawable/button_background"
        android:drawableLeft="@drawable/button_image"
        android:textStyle="italic|bold"
        android:textSize="@dimen/btnTextSize"
        android:gravity="center|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/Play"
        android:id="@+id/button"
        android:layout_below="@+id/imageView"
        android:onClick="pause"
        android:layout_centerHorizontal="true"
        />

Вийшло багатувато тексту. А якщо трба зробити 10 таких кнопок? Ну його в баню стільки писати. Перенесемо весь цей непотріб в стиль.

Після таких маніпуляцій текст кнопки скоручується до невпізнанності.

<Button
        android:text="@string/Play"
        android:id="@+id/button"
        android:onClick="pause"
        style="@style/btn_style" />

Все що можна ми винесли до стилю.

<style name="btn_style">
        <item name="android:textColor">@color/text_color</item>
        <item name="android:background">@drawable/button_background</item>
        <item name="android:drawableLeft">@drawable/button_image</item>
        <item name="android:textStyle">italic|bold</item>
        <item name="android:textSize">@dimen/btnTextSize</item>
        <item name="android:gravity">center|center_vertical</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_below">@+id/imageView</item>
        <item name="android:layout_centerHorizontal">true</item>
    </style>

і отже при додаванні наступної подібної кнопки нам не треба писати все занова, просто додамо

style="@style/btn_style"

і все готово.

Да прибуде з вами сила.