logo

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 is the root element—it is not needed when the is nested inside an <item>.

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
. The minimum level allowed for this item.

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:

AUTHOR: Vikas Hiran
No Comments

Sorry, the comment form is closed at this time.