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.
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. XML file must be saved in res/drawable folder. The filename is used as the resource ID.
Note: You can use a <bitmap> element as a child of an <item> element
Elements
Defines the bitmap source and its properties.
<Bitmap> Attributes
xmlns:androidString. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“. This is required only if the is the root element—it is not needed when the is nested inside an <item>.
android:srcDrawable resource. Required. Reference to a drawable resource.
android:antialiasBoolean. Enables or disables antialiasing.
android:ditherBoolean. Enables or disables dithering of the bitmap if the bitmap does not have the same pixel configuration as the screen
android:filterBoolean. 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" />
State List
A StateListDrawable is a drawable object defined in XML that uses 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:androidString. Required. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“.
android:ditherBoolean. “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 an <selector> element.
Attributes
android:drawable
Drawable resource. Required. Reference to a drawable resource.
android:state_pressedBoolean. “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_focusedBoolean. “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_enabledBoolean. “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 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>Layer List
Required. This must be the root element. Contains one or more <item> elements.
Attributes
xmlns:androidString. Required. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“.
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:topInteger. The top offset in pixels
android:rightInteger. The right offset in pixels.
android:bottomInteger. The bottom offset in pixels.
android:leftInteger. 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 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" />
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 folder. 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:androidString. 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:maxLevelInteger. The maximum level allowed for this item.
android:minLevelInteger. The minimum level allowed for this item.
Example
<?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 this
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;
}
}
});
}
}Shape Drawable
This is a generic shape defined in XML.
XML file must be saved in res/drawable folder. The filename is used as the resource ID.
Elements
<shape>
The shape drawable. This must be the root element.
Attributes
xmlns:androidString. Required. Defines the XML namespace, which must be “http://schemas.android.com/apk/res/android“.
android:shapeKeyword.Defines the type of shape. Valid values are: Rectangle, line, Oval , ring.
The following attributes are used only when android:shape=”ring”
android:innerRadiusDimension.The radius for the inner part of the ring (the hole in the middle), as a dimension value
android:thicknessDimension.The thickness of the ring, as a dimension value
android:useLevelBoolean. “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:radiusMDimension.The radius for all corners, as a dimension value . This is overridden for each corner by the following attributes.
android:topLeftradiusDimension.The radius for the top-left corner, as a dimension value
android:topRightradiusDimension.The radius for the top-right corner, as a dimension value
android:bottomLeftradiusDimension.The radius for the bottom-left corner, as a dimension value
android:bottomRightradiusDimension.The radius for the bottom-right corner, as a dimension value
<gradients>
Specifies a gradient color for the shape.
Attributes
android:angleInteger.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:centerColorColor.Optional color that comes between the start and end colors, as a hexadecimal value.
android:endColorColor.The ending color, as a hexadecimal value
android:startColorColor.The starting color, as a hexadecimal value
android:typeKeyword.The type of gradient pattern to apply. Valid values are: linear, radial, sweep
android:useLevelBoolean.”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:leftDimension.Left padding, as a dimension value.
android:topDimension.Top padding, as a dimension value
android:rightDimension.Right padding, as a dimension value
android:bottomDimension.Bottom padding, as a dimension value
<size>
The size of the shape.
Attributes
android:heightDimension.The height of the shape, as a dimension value
android:widthDimension.The width of the shape, as a dimension value
<solid>
A solid color to fill the shape.
Attributes
android:colorColor.The color to apply to the shape, as a hexadecimal value
<stroke>
A stroke line for the shape.
Attributes
android:widthDimension.The thickness of the line, as a dimension value
android:colorColor.The color of the line, as a hexadecimal value
Example 1 - Rectangle
<?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));
Example 2 -Oval
<?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));
Example 3 - Line
<?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));
Example 3 - Ring
<?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));
.png)
