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: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" />


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: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 an <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 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:android
String. 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: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 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: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 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: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:radiusM
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

<gradients>

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 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));


Do you have any product idea or business need?

Unit Testing using Mockk.io

Unit Testing using mockK.io in Kotlin

Learn about unit testing using mockk.io in Kotlin.

Apples In-App Purchase

Hands-On Implementation of Apple’s In-App Purchases On Ruby Based Server

Information about Languages & Tools, Server Configuration and Endpoint & API Setup and many more.

Multi User Chat

Features of Multi User Chat (Group Chat) in Android

Features allows users to visible multiple chatrooms on one or more screens.