Создаем кнопку со своим дизайном

В начале определимся с состояниями кнопки. Кнопка может быть нажата или нет, иметь фокус или нет. Несколько состояний:

+ фокус, + нажата
+ фокус, - нажата
- фокус, + нажата

Изображения состояний кнопки готовы. Если мы применим одну из них к нашей кнопке на форме через свойствоBackgroud, то увидим нечто похожее на следующее:

Мы видим что изображение на кнопке растягивается неправильно. Для того что бы картинка растягивалась корректно, ее нужно преобразовать к специальному формату NinePatch.





NinePatch - это графический формат растровых картинок которые Андроид будет автоматически растягивать в зависимости от размера виджета в котором она указана в качестве фонового рисунка. Если же проще, то NinePatch - это PNG картинка у которой добавлена рамка толщиной в один пиксель и файл сохранен с расширением .9.png. Все картинки кладутся в папку res/drawable/ вашего проекта. Рамка используется для определения области, которая будет растянута.

В поставке Android SDK, есть отдельная утилита для рисования полосок, находится она в папкеsdk/tools/draw9patch. Запускаем ее, открываем картинку для нашей кнопки и дорисовываем рамку как показано на рисунке ниже:

Проделываем тоже самое с остальными картинками, которые мы поместим на кнопку. Копируем все три файла в папку вашего проекта /res/drawable

Замечание: нарисовать полоски можно в любом графическом редакторе поддерживающим png. Для эффекта нажатия кнопки, исходную картинку для нажатия сдвинуть на 1-2 пикселя вниз, но при этом все 3 картинки должны быть одного размера.
Как сделать, что бы на каждое событие отображалась соответствующая картинка?
Будем это делать через drawable xml. Создаем файл myb_states.xml в /res/drawable и описываем поведение кнопки:

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true"

       android:state_pressed="false"

       android:drawable="@drawable/myb_focused" />

    <item android:state_focused="true"

       android:state_pressed="true"

          android:drawable="@drawable/myb_active" />

    <item android:state_focused="false"

       android:state_pressed="true"

       android:drawable="@drawable/myb_active" />

    <item android:drawable="@drawable/myb_inactive" />

</selector>

Далее нашей кнопке (которая на форме) в качестве фонового рисунка указываем нашу созданную xml. То есть свойство Background кнопки устанавливаем в @drawable/myb_states.
Xml код кнопки:

<Button android:id="@+id/Button01" android:layout_width="wrap_content"

  android:layout_height="wrap_content" android:layout_margin="30px"

  android:layout_gravity="center_horizontal" android:text="Своя кнопка"

  android:textColor="#fff" android:background="@drawable/myb_states">

</Button>

Источник: http://androidteam.ru/