Собственный фон для элементов

В принципе этот приём рассматривался в примерах с виджетами и носит обобщающий характер. Мы можем создать собственный фон для различных элементов управления, таких как TextView, ImageButton, Button и др.

Создаём в папке res/drawable/ новый файл, например, custombackground.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:angle="180" android:endColor="#FF00FF" android:startColor="#FF0000" />

            <stroke android:width="3dp" android:color="@android:color/background_dark" />

            <corners android:radius="3dp" />

            <padding android:bottom="10dp" android:left="50dp" android:right="50dp" android:top="10dp" />
        </shape></item>
    <item android:state_focused="true"><shape>
            <gradient android:angle="180" android:endColor="@android:color/background_dark" android:startColor="@android:color/background_light" />

            <stroke android:width="3dp" android:color="@android:color/background_dark" />

            <corners android:radius="3dp" />

            <padding android:bottom="10dp" android:left="50dp" android:right="50dp" android:top="10dp" />
        </shape></item>
    <item><shape>
            <gradient android:angle="180" android:endColor="@android:color/background_dark" android:startColor="@android:color/background_light" />

            <stroke android:width="3dp" android:color="@android:color/background_dark" />

            <corners android:radius="3dp" />

            <padding android:bottom="10dp" android:left="50dp" android:right="50dp" android:top="10dp" />
        </shape></item>

</selector>

Для демонстрации добавим в проект нужные виджеты и атрибуте android:background у каждого элемента пропишем наш созданный фон:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/custombackground"
        android:clickable="true"
        android:text="Это TextView" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/custombackground"
        android:text="Это кнопка" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/custombackground"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

Запускаем и смотрим на результат. Мы прописали различные градиенты в разных состояниях элемента: в обычном, в фокусе, при нажатии. На скриншоте видно, что при нажатии на первый элемент, фон у него меняется на другой.

Позиционирование фона

Кроме общего атрибута android:background у видов существуют отдельные атрибуты android:drawableLeft/drawableTop/drawableRight/drawableBottom, позволяющие задать рисунок для отдельной части фона - слева, сверху, справа, снизу.

В качестве простейшей демонстрации будем использовать готовый значок приложения для фона.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_launcher"
        android:text="Button with drawableLeft" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/ic_launcher"
        android:text="EditText with android:drawableRight" />

    <CheckBox
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/ic_launcher"
        android:text="CheckBox with android:drawableTop" />

</LinearLayout>

Реклама