17. Drawables

17.1. Drawables

A instance of a Drawable resource is a general concept for a graphic which can be drawn. The simplest case is a bitmap file, which would be represented in Android via a BitmapDrawable class. Bitmaps are typically stored in one of the "res/drawable" folders. The Android project creation wizard creates several of these folders per default, you can provide different sized files for different resolutions of Android devices. If you only provide
In additional to graphical files, Android supports XML drawables and 9-patch graphics. XML drawables are used to describe shapes (color, border, gradient), State and Transitions and more.
9-patch graphics are used to define which part of a graphic should be increased if the View which uses this graphic is larger then the graphic.

17.2. Shape Drawables

Shape Drawables are XML files which allow to define a geometric object with colors, borders and gradients which can get assigned to Views. The advantage of using XML Shape Drawables is that they automatically adjust to the correct size.
The following listing shows an example of a Shape Drawable.

    
<?xml version="1.0" encoding="UTF-8"?>
<shape
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <stroke
  android:width="2dp"
  android:color="#FFFFFFFF" />
 <gradient
  android:endColor="#DDBBBBBB"
  android:startColor="#DD777777"
  android:angle="90" />
 <corners
  android:bottomRightRadius="7dp"
  android:bottomLeftRadius="7dp"
  android:topLeftRadius="7dp"
  android:topRightRadius="7dp" />
</shape>
   

You could for example assign that drawable to the background property of your layout.

    
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/myshape"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
  >
    </EditText>

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/celsius" >
        </RadioButton>

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/fahrenheit" >
        </RadioButton>
    </RadioGroup>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/calc" 
        android:onClick="myClickHandler">
    </Button>

</LinearLayout>
   

17.3. State Drawables

State drawables allow to define states. For each state a different drawable can get assigned to the View. For example the following defines different drawables for a button depending on its state.

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

 <item android:drawable="@drawable/button_pressed"
  android:state_pressed="true" />
 <item android:drawable="@drawable/button_checked"
  android:state_checked="true" />
 <item android:drawable="@drawable/button_default" />

</selector>
   

17.4. Transition Drawables

Transition Drawables allow to define transitions which can be triggered in the coding.

    
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/first_image" />
 <item android:drawable="@drawable/second_image" />
</transition>
   

    
final ImageView image = (ImageView) findViewById(R.id.image);
final ToggleButton button = (ToggleButton) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(final View v) {
  TransitionDrawable drawable = (TransitionDrawable) image.getDrawable();
  if (button.isChecked()) {
   drawable.startTransition(500);
  } else {
   drawable.reverseTransition(500);
  }
 }
});
   

17.5. 9 Patch Drawables

9 Patch drawables are drawables which have a one pixel additional border. On the top and left you define the area which should grow if the drawable is to small for the View.
On the right and bottom side you define where a text should be placed if this Drawable is used on a View which can write text on it, e.g. a Button.
The ADT supplies the "draw9patch" program in the "android-sdk/tools" installation folder, which makes it easy to create 9 patch drawables.