This chapter gives a brief description of Drawable resources. What you need to know is the various types of Drawable resources and their usage scenarios. Common types are Bitmap File, Nine Patch Drawable, StateList Drawable, Gradient Drawable.
Drawable resources refer to graphics that can be drawn on the screen and retrieved or applied to other XML resources with attributes such as android:drawable and android:icon using API s such as getDrawable(int). There are many different types of Drawable objects
- Bitmap File: Bitmap file (.png,. jpg or. gif), corresponding to Bitmap Drawable
- Nine-Patch File: A png file with a stretchable area that allows you to resize graphics according to content, corresponding to Nine Patch Drawable
- Layer List: Manage other Drawable arrays of drawable objects, which are drawn in array order, so a large number of elements are drawn at the top, corresponding to Layer Drawable
- State List: This XML file refers to different bitmap graphics for different states (for example, pressing buttons to use different graphics), corresponding to StateList Drawable
- Level List: This XML file is used to define Drawable objects that manage a large number of alternative drawable objects, each of which allocates the largest number of alternatives, corresponding to - Level List Drawable
- Transition Drawable: This XML file defines a Drawable object that can stagger and fade out between two renderable object resources, corresponding to Transition Drawable
- Inset Drawable: This XML file is used to define drawable objects that insert other drawable objects at specified distances.
- Clip Drawable: This XML file defines a Drawable object that is tailored to other Drawable objects, corresponding to ClipDrawable
- Scale Drawable: This XML file is used to define Drawable that changes the size of other Drawables, corresponding to Scale Drawable
- Shape Drawable: This XML file is used to define geometric shapes (such as colors and shapes), corresponding to Gradient Drawable.
Bitmap
Bitmap image. Android supports bitmap files in three formats,.png (preferred),.jpg (acceptable),.gif (not recommended)
Bitmap File
Bitmap files refer to. png,. jpg or. gif files. When we save these files to res/drawable/directory, Android will be their common Drawable resources.
Compiled resource data type: BitmapDrawable
Examples:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/image"/>
Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.image);
XML Drawable
XML Drawable is a resource defined in an XML file, specifying a bitmap file. It's actually an alias for the original bitmap file. XML can specify other properties, such as jitter and cascade
Compiled resource data type: BitmapDrawable
Grammar:
<?xml version="1.0" encoding="utf-8">
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/filename"
android:antialias=["true" | "false"]
android:dither=["true" | "false"]
android:filter=["true" | "false"]
android:gravity=["top" | "center" | "bottom" | "left" | "right" | ...]
android:mipMap=["true" | "false"]
android:tileMode=["disable" | "clamp" | "repeat" | "mirror"]
/>
Nine-Patch File
NinePatch is a PNG image in which you can define the stretchable area of Android scaling when the content of the view exceeds the image boundary of the normal range.
Compiled resource data type: NinePatchDrawable
Examples:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/filename">
XML Nine-Patch
XML Nine-Patch is a resource defined in XML. XML can specify jitter for images
Compiled resource data type: NinePatchDrawable
Grammar:
<?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"] />
Layer List
Each Drawabel object in the Layer Drawable list is drawn in the order of the list, the last object in the list is drawn at the top, and each drawable object consists of one or more.
File location: res/drawable/filename.xml
Compiled resource data type: Layer Drawable
Grammar:
<?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/android_red"
android:gravity="center" />
</item>
<item android:top="10dp" android:left="10dp">
<bitmap android:src="@drawable/android_green"
android:gravity="center" />
</item>
<item android:top="20dp" android:left="20dp">
<bitmap android:src="@drawable/android_blue"
android:gravity="center" />
</item>
</layer-list>
State List
StateListDrawable is a Drawable object defined in XML. According to the state of the object, it uses many different images to represent the same graph. During each state change, the state list is traversed from top to bottom and the first item option matching the current state is used
Compiled resource data type: StateListDrawable
Grammar:
<?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_hovered=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_checkable=["true" | "false"]
android:state_checked=["true" | "false"]
android:state_enabled=["true" | "false"]
android:state_activated=["true" | "false"]
android:state_window_focused=["true" | "false"] />
</selector>
Examples:
<?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" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="@drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="@drawable/button_focused" /> <!-- hovered -->
<item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
Level List
Use setLevel() to set the level of Drawable objects to manage other Drawable objects
Compiled data resource type: LevelListDrawable
Grammar:
<?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>
Examples:
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@drawable/status_off"
android:maxLevel="0" />
<item
android:drawable="@drawable/status_on"
android:maxLevel="1" />
</level-list>
Transition Drawable
TransitionDrawable is a fade-out Drawable object that can be staggered between the middle Drawable objects. Each Drawable has one element and several components. More than two are not supported. To call startTransition() forward and reverTransition() backward
Compiled data resource type: TransitionDrawable
Grammar:
<?xml version="1.0" encoding="utf-8"?>
<transition
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" />
</transition>
Examples:
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/on" />
<item android:drawable="@drawable/off" />
</transition>
<ImageButton
android:id="@+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/transition" />
ImageButton button = (ImageButton) findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
drawable.startTransition(500);
Insert Drawable
Compiled data resource type: InserDrawable
Grammar:
<?xml version="1.0" encoding="utf-8"?>
<inset
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:insetTop="dimension"
android:insetRight="dimension"
android:insetBottom="dimension"
android:insetLeft="dimension" />
Clip Drawable
The clipping width and height of sub-renderable objects are controlled according to the level and the gravity used to control their position in the whole container. Usually used to implement projects such as progress bars.
Compiled data resource type: ClipDrawable
Grammar:
<?xml version="1.0" encoding="utf-8"?>
<clip
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:clipOrientation=["horizontal" | "vertical"]
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"] />
Scale Drawable
Used to change Drawable size
Compiled resource data type: ScaleDrawable
Grammar:
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"]
android:scaleHeight="percentage"
android:scaleWidth="percentage" />
Shape Drawable
Used to define shapes and colors
Compiled resource data type: Gradient Drawable
Grammar:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="float"
android:centerY="float"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>