Drawable resources represent graphical elements that can be rendered on screen and retrieved via APIs like getDrawable(int). They can be applied to XML attributes such as android:drawable and android:icon. Various drawable types include:
- Bitmap Files: Image files (.png, .jpg, .gif) that create
BitmapDrawableobjects - Nine-Patch Files: Scalable PNG images (.9.png) that generate
NinePatchDrawableinstances - Layer Lists: Drawables that manage arrays of other drawables, drawn in order with the highest index on top, creating
LayerDrawable - State Lists: XML files referencing different images for various states (e.g., pressed buttons), producing
StateListDrawable - Level Lists: XML definitions for drawables managing multiple alternatives with maximum levels, creating
LevelListDrawable - Transition Drawables: XML resources defining cross-fade animations between two drawables, generating
TransitionDrawable - Inset Drawables: XML files specifying drawables inset by specific distances from container boundaries
- Clip Drawables: XML definitions for drawables that clip other drawables based on level values, creating
ClipDrawable - Scale Drawables: XML resources that resize other drawables according to current level, producing
ScaleDrawable - Shape Drawables: XML files defining geometric shapes with colors and gradients, creating
GradientDrawable
Color resources can also function as drawables in XML. For example, when creating state list drawables, you can reference color resources using android:drawable="@color/green".
Bitmap Resources
Android supports bitmap formats including PNG (preferred), JPG (acceptable), and GIF (discouraged). Bitmap files can be referenecd directly by filename or through XML alias resources.
During build processing, the aapt tool automatically optimizes bitmap files through lossless compression. True-color PNGs with fewer than 256 colors may be converted to 8-bit PNGs using color palettes. To prevent optimization when reading images as bitstreams, place images in the res/raw/ directory instead.
Direct Bitmap Files
File Location: res/drawable/filename.png (.png, .jpg, or .gif)
Compiled Resource: Resource pointer to BitmapDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Example: After saving an image as res/drawable/app_icon.png, this layout XML applies it to a view:
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/app_icon" />
Application code to retrieve the image as a Drawable:
// Java
Drawable iconDrawable = ResourcesCompat.getDrawable(getResources(), R.drawable.app_icon, null);
// Kotlin
val iconDrawable: Drawable? = ResourcesCompat.getDrawable(resources, R.drawable.app_icon, null)
XML Bitmap Definitions
XML bitmaps are resources defined in XML files that point to bitmap files, functioning as aliases with additional properties like dithering and tiling.
File Location: res/drawable/filename.xml
Compiled Resource: Resource pointer to BitmapDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Syntax:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@[package:]drawable/drawable_resource"
android:antialias=["true" | "false"]
android:dither=["true" | "false"]
android:filter=["true" | "false"]
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"]
android:mipMap=["true" | "false"]
android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />
Example:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/background_pattern"
android:tileMode="repeat" />
Nine-Patch Resources
Nine-patch images are PNG files with defined scalable regions that allow Android to stretch images when view content exceeds normal boundaries.
Direct Nine-Patch Files
File Location: res/drawable/filename.9.png
Compiled Resource: Resource pointer to NinePatchDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Example: After saving as res/drawable/button_background.9.png:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button_background" />
XML Nine-Patch Definitions
File Location: res/drawable/filename.xml
Compiled Resource: Resource pointer to NinePatchDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Syntax:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@[package:]drawable/drawable_resource"
android:dither=["true" | "false"] />
Example:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/dialog_background"
android:dither="false" />
Layer List Drawables
LayerDrawable manages arrays of other drawables, drawing them in sequence with the last item appearing on top.
File Locasion: res/drawable/filename.xml
Compiled Resource: Resource pointer to LayerDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Syntax:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@[package:]drawable/drawable_resource"
android:id="@[+][package:]id/resource_name"
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension" />
</layer-list>
Example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="@drawable/base_layer"
android:gravity="center" />
</item>
<item android:top="15dp" android:left="15dp">
<bitmap android:src="@drawable/overlay_layer"
android:gravity="center" />
</item>
</layer-list>
State List Drawables
StateListDrawable uses different images for various object states, selected based on the first matching state condition.
File Location: res/drawable/filename.xml
Compiled Resource: Resource pointer to StateListDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Syntax:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize=["true" | "false"]
android:dither=["true" | "false"]
android:variablePadding=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource"
android:state_pressed=["true" | "false"]
android:state_focused=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_enabled=["true" | "false"] />
</selector>
Example:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed" />
<item android:state_focused="true"
android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />
</selector>
Level List Drawables
LevelListDrawable manages multiple alternative drawables, each with maximum level values. When setting a level via setLevel(), the drawable with android:maxLevel greater than or equal to the passed value loads.
File Location: res/drawable/filename.xml
Compiled Resource: Resource pointer to LevelListDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Syntax:
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/drawable_resource"
android:maxLevel="integer"
android:minLevel="integer" />
</level-list>
Example:
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/battery_low" android:maxLevel="20" />
<item android:drawable="@drawable/battery_medium" android:maxLevel="60" />
<item android:drawable="@drawable/battery_full" android:maxLevel="100" />
</level-list>
Transition Drawables
TransitionDrawable enables cross-fade animations between two drawable resources.
File Location: res/drawable/filename.xml
Compiled Resource: Resource pointer to TransitionDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Syntax:
<?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>
Example:
// Java
TransitionDrawable transition = (TransitionDrawable) imageView.getDrawable();
transition.startTransition(300);
// Kotlin
val transition = imageView.drawable as TransitionDrawable
transition.startTransition(300)
Shape Drawables
Shape drawables define geometric shapes with colors, gradients, and strokes in XML files.
File Location: res/drawable/filename.xml
Compiled Resource: Resource pointer to GradientDrawable
Resource Reference:
- Java:
R.drawable.filename - XML:
@[package:]drawable/filename
Syntax:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<gradient
android:angle="integer"
android:startColor="color"
android:endColor="color"
android:type=["linear" | "radial" | "sweep"] />
<corners android:radius="dimension" />
<stroke
android:width="dimension"
android:color="color" />
<solid android:color="color" />
</shape>
Example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FF3366CC"
android:endColor="#FF003366"
android:angle="90"/>
<corners android:radius="12dp" />
<stroke android:width="2dp" android:color="#FFFFFFFF" />
</shape>