Drawable Resources
A drawable resource is a general concept for a graphic that can be drawn to the screen and which you can retrieve with APIs such as getDrawable(int) or apply to another XML resource with attributes such as android:drawable and android:icon. There are several different types of drawables. We will be explaining some of them, those we always use in business. 
1. XML Bitmap
An XML bitmap is a resource defined in XML that points to a bitmap file. The XML can specify additional properties for the bitmap such as dithering and tiling.
Note: You can use a <bitmap> element as a child of an <item> element
XML file must be saved in res/drawable floder. The filename is used as the resource ID.
Elements:
<Bitmap>
Defines the bitmap source and its properties.
Attributes:
xmlns:android
String. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“. This is required only if the
android:src
Drawable resource. Required. Reference to a drawable resource.
android:antialias
Boolean. Enables or disables antialiasing.
android:dither
Boolean. Enables or disables dithering of the bitmap if the bitmap does not have the same pixel configuration as the screen
android:filter
Boolean. Enables or disables bitmap filtering. Filtering is used when the bitmap is shrunk or stretched to smooth its apperance.
android:gravity
Keyword. Defines the gravity for the bitmap. The gravity indicates where to position the drawable in its container if the bitmap is smaller than the container.
Example
XML file saved at res/drawable/bitmap.xml:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/icon"
android:tileMode="repeat" />
This layout XML applies the drawable to a View:
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/bitmap" />
2. State List
A StateListDrawable is a drawable object defined in XML that uses a several different images to represent the same graphic, depending on the state of the object. For example, a Button can exist in one of several different states (pressed, focused, or neither) and, using a state list drawable, you can provide a different background image for each state.
You can describe the state list in an XML file. Each graphic is represented by an <item> element inside a single <selector> element. Each <item> uses various attributes to describe the state in which it should be used as the graphic for the drawable.
XML file must be saved in res/drawable floder. The filename is used as the resource ID.
Elements:
<selector>
Required. This must be the root element. Contains one or more <item> elements.
Attributes:
xmlns:android
String. Required. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“.
android:dither
Boolean. “true” to enable dithering of the bitmap if the bitmap does not have the same pixel configuration as the screen ; “false” to disable dithering. Default is true.
<item>
Defines a drawable to use during certain states, as described by its attributes. Must be a child of a <selector> element.
Attributes:
android:drawable
Drawable resource. Required. Reference to a drawable resource.
android:state_pressed
Boolean. “true” if this item should be used when the object is pressed (such as when a button is touched/clicked); “false” if this item should be used in the default, non-pressed state.
android:state_focused
Boolean. “true” if this item should be used when the object has input focus (such as when the user selects a text input); “false” if this item should be used in the default, non-focused state.
android:state_enabled
Boolean. “true” if this item should be used when the object is enabled (capable of receiving touch/click events); “false” if it should be used when the object is disabled.
Example
XML file saved at res/drawable/state_list.xml:
<?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:state_enabled="true"
android:drawable="@drawable/back_selected" />
<item android:state_pressed="true"
android:state_enabled="true"
android:drawable="@drawable/back_selected" />
<item android:state_enabled="true"
android:state_focused="false"
android:state_pressed="false"
android:drawable="@drawable/back" />
<item android:drawable="@drawable/back" />
</selector>
This layout XML applies the state list drawable to a Button.
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/state_list" />
Run the application and output would be:
1) When the Button is pressed or focused, following will image will appear
2) For normal state
3. Layer List
A LayerDrawable is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.
Each drawable is represented by an <item> element inside a single <layer-list> element.
XML file must be saved in res/drawable floder. The filename is used as the resource ID.
Elements:
<layer-list>
Required. This must be the root element. Contains one or more <item> elements.
Attributes:
xmlns:android
String. Required. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“.
<item>
Defines a drawable to place in the layer drawable, in a position defined by its attributes. Must be a child of a <selector> element. Accepts child <bitmap> elements.
Attributes:
android:drawable
Drawable resource. Required. Reference to a drawable resource.
android:id
Resource ID. A unique resource ID for this drawable. To create a new resource ID for this item, use the form: “@+id/name“. The plus symbol indicates that this should be created as a new ID.
android:top
Integer. The top offset in pixels
android:right
Integer. The right offset in pixels.
android:bottom
Integer. The bottom offset in pixels.
android:left
Integer. The left offset in pixels.
All drawable items are scaled to fit the size of the containing View, by default. Thus, placing your images in a layer list at different positions might increase the size of the View and some images scale as appropriate. To avoid scaling items in the list, use a <bitmap> element inside the <item> element to specify the drawable and define the gravity to something that does not scale, such as “center“. For example, the following <item> defines an item that scales to fit its container View:
<item android:drawable="@drawable/image" />
To avoid scaling, the following example uses a <bitmap> element with centered gravity:
<item>
<bitmap android:src="@drawable/image"
android:gravity="center" />
</item>
Example
XML file saved at res/drawable/layers.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="@drawable/bottom_image"
android:gravity="center" />
</item>
<item android:top="20dp" android:left="20dp">
<bitmap android:src="@drawable/top_image"
android:gravity="center" />
</item>
</layer-list>
This layout XML applies the drawable to a View:
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/layers" />
Run the application & output screen would be
4. Level List
A Drawable that manages a number of alternate Drawables, each assigned a maximum numerical value. Setting the level value of the drawable with setLevel() loads the drawable resource in the level list that has a android:maxLevel value greater than or equal to the value passed to the method.
XML file must be saved in res/drawable floder. The filename is used as the resource ID.
Elements:
<level-list>
This must be the root element. Contains one or more <item> elements.
Attributes:
xmlns:android
String. Required. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“.
<item>
Defines a drawable to use at a certain level.
Attributes:
android:drawable
Drawable resource. Required. Reference to a drawable resource.
android:maxLevel
Integer. The maximum level allowed for this item.
android:minLevel
Integer
Example
XML file saved at res/drawable/layers.xml:
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@drawable/back"
android:maxLevel="0" />
<item
android:drawable="@drawable/back_selected"
android:maxLevel="1" />
</level-list>
This layout XML applies the drawable to a View
<ImageView android:id="@+id/iv"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/level_list" />
java code will look like:
package com.mobisys.android.drawable_resources;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
public class DrawableActivity extends Activity {
/** Called when the activity is first created. */
ImageView iv;
int level;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
iv=(ImageView)findViewById(R.id.iv);
level=0;
iv.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(level==0){
iv.setImageLevel(1);
level=1;
}
else{
iv.setImageLevel(0);
level=0;
}
}
});
}
}
Run the application & click on image
Again click on image:
5. Shape Drawable
This is a generic shape defined in XML.
XML file must be saved in res/drawable floder. The filename is used as the resource ID.
Elements:
<shape>
The shape drawable. This must be the root element.
Attributes:
xmlns:android
String. Required. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“.
android:shape
Keyword.Defines the type of shape. Valid values are: Rectangle, line, Oval , ring.
The following attributes are used only when android:shape=”ring”
android:innerRadius
Dimension.The radius for the inner part of the ring (the hole in the middle), as a dimension value
android:thickness
Dimension.The thickness of the ring, as a dimension value
android:useLevel
Boolean. “true” if this is used as a LevelListDrawable. This should normally be “false” or your shape may not appear.
<corners>
Creates rounded corners for the shape. Applies only when the shape is a rectangle.
Attributes:
android:radius
Dimension.The radius for all corners, as a dimension value . This is overridden for each corner by the following attributes.
android:topLeftradius
Dimension.The radius for the top-left corner, as a dimension value
android:topRightradius
Dimension.The radius for the top-right corner, as a dimension value
android:bottomLeftradius
Dimension.The radius for the bottom-left corner, as a dimension value
android:bottomRightradius
Dimension.The radius for the bottom-right corner, as a dimension value
<gradient>
Specifies a gradient color for the shape.
Attributes:
android:angle
Integer.The angle for the gradient, in degrees. 0 is left to right, 90 is bottom to top. It must be a multiple of 45. Default is 0.
android:centerColor
Color.Optional color that comes between the start and end colors, as a hexadecimal value.
android:endColor
Color.The ending color, as a hexadecimal value
android:startColor
Color.The starting color, as a hexadecimal value
android:type
Keyword.The type of gradient pattern to apply. Valid values are: linear, radial, sweep
android:useLevel
Boolean.”true” if this is used as a LevelListDrawable.
<padding>
Padding to apply to the containing View element (this pads the position of the View content, not the shape).
Attributes:
android:left
Dimension.Left padding, as a dimension value.
android:top
Dimension.Top padding, as a dimension value
android:right
Dimension.Right padding, as a dimension value
android:bottom
Dimension.Bottom padding, as a dimension value
<size>
The size of the shape.
Attributes:
android:height
Dimension.The height of the shape, as a dimension value
android:width
Dimension.The width of the shape, as a dimension value
<solid>
A solid color to fill the shape.
Attributes:
android:color
Color.The color to apply to the shape, as a hexadecimal value
<stroke>
A stroke line for the shape.
Attributes:
android:width
Dimension.The thickness of the line, as a dimension value
android:color
Color.The color of the line, as a hexadecimal value
Example 1-Rectangle
XML file saved at res/drawable/gradient_box.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FFFF0000"
android:endColor="#80FF00FF"
android:angle="45"/>
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
<corners android:radius="2dp" />
</shape>
This layout XML applies the shape drawable to a View:
<TextView android:id="@+id/tv"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Rectangle Shape"
android:background="@drawable/gradient_box"/>
This application code gets the shape drawable and applies it to a View:
TextView tv1=(TextView)findViewById(R.id.tv); tv1.setBackgroundDrawable(getResources().getDrawable(R.drawable.gradient_box));
Output will look like:
Example 2-Oval
XML file saved at res/drawable/gradient_box.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:startColor="#FFFF0000"
android:endColor="#80FF00FF"
android:angle="0"/>
<padding android:left="20dp"
android:top="20dp"
android:right="20dp"
android:bottom="20dp" />
</shape>
This layout XML applies the shape drawable to a View
<TextView android:id="@+id/tv"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Oval Shape"
android:background="@drawable/gradient_box"/>
This application code gets the shape drawable and applies it to a View
TextView tv1=(TextView)findViewById(R.id.tv); tv1.setBackgroundDrawable(getResources().getDrawable(R.drawable.gradient_box));
Output will look like this:
Example 3-Line
XML file saved at res/drawable/gradient_box.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp"
android:color="#FFFF0000"/>
<size android:height="5dp" />
</shape>
This layout XML applies the shape drawable to a View:
<TextView android:id="@+id/tv"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:background="@drawable/gradient_box"/>
This application code gets the shape drawable and applies it to a View:
TextView tv1=(TextView)findViewById(R.id.tv); tv1.setBackgroundDrawable(getResources().getDrawable(R.drawable.gradient_box));
output will look like this:
Example 4-Ring
XML file saved at res/drawable/gradient_box.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="4"
android:thicknessRatio="10"
android:useLevel="false">
<size android:width="100dp"
android:height="100dp" />
<gradient
android:startColor="#FFFF0000"
android:endColor="#80FF00FF"
android:angle="0"/>
This layout XML applies the shape drawable to a View:
<TextView android:id="@+id/tv"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/gradient_box"/>
This application code gets the shape drawable and applies it to a View:
TextView tv1=(TextView)findViewById(R.id.tv); tv1.setBackgroundDrawable(getResources().getDrawable(R.drawable.gradient_box));
Output will look like this:
