How to manage backgrounds? Shapes, Layered Lists etc.

The drawable resource directory in Android resources is a testament to the fluency of Android's declarative architecture. The collection of links here and a few notes that I made here demonstrate how to manage view backgrounds in Android using various xml files in the drawable directory: Shapes, Layered Lists etc. Read further for more details.

satya - Fri Aug 24 2012 13:19:58 GMT-0400 (Eastern Daylight Time)

Android background drawables shapes layered lists

Search for: Android background drawables shapes layered lists

satya - Fri Aug 24 2012 13:21:37 GMT-0400 (Eastern Daylight Time)

Looks like we have more ways of constructing drawables: See these docs link

satya - Fri Aug 24 2012 13:29:46 GMT-0400 (Eastern Daylight Time)

This is pretty cool. you can do this


<?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:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

satya - Fri Aug 24 2012 14:26:19 GMT-0400 (Eastern Daylight Time)

Here is an example of a layered list


<?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>

satya - Fri Aug 24 2012 14:28:28 GMT-0400 (Eastern Daylight Time)

Scaling


<item android:drawable="@drawable/image" />

This scales to the container.

satya - Fri Aug 24 2012 14:29:11 GMT-0400 (Eastern Daylight Time)

and this doesn't


<item>
  <bitmap android:src="@drawable/image"
          android:gravity="center" />
</item>

Notice the bitmap sub element.

satya - Fri Aug 24 2012 14:33:24 GMT-0400 (Eastern Daylight Time)

Here is an example of a conditionally applying a drawable


<?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>

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

satya - Fri Aug 24 2012 14:36:35 GMT-0400 (Eastern Daylight Time)

Controlling levels programmatically


<?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>

Then you can use setLevel or setImageLevel on the Drawable object

satya - Fri Aug 24 2012 14:38:13 GMT-0400 (Eastern Daylight Time)

setLevel api

Specify the level for the drawable. This allows a drawable to vary its imagery based on a continuous controller, for example to show progress or volume level.

If the new level you are supplying causes the appearance of the Drawable to change, then it is responsible for calling invalidateSelf() in order to have itself redrawn, and true will be returned from this function.

Parameters: level The new level, from 0 (minimum) to 10000 (maximum). Returns

Returns true if this change in level has caused the appearance of the Drawable to change (hence requiring an invalidate), otherwise returns false.

satya - Fri Aug 24 2012 14:50:40 GMT-0400 (Eastern Daylight Time)

Clip drawable is pretty cool


<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/android"
    android:clipOrientation="horizontal"
    android:gravity="left" />

<ImageView
    android:id="@+id/image"
    android:background="@drawable/clip"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />

ImageView imageview = (ImageView) findViewById(R.id.image);
ClipDrawable drawable = (ClipDrawable) imageview.getDrawable();
drawable.setLevel(drawable.getLevel() + 1000);

satya - Fri Aug 24 2012 14:51:11 GMT-0400 (Eastern Daylight Time)

Then you may progressively get

satya - Fri Aug 24 2012 14:54:09 GMT-0400 (Eastern Daylight Time)

Here is how you use the setlevel to change the scaling


<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/logo"
    android:scaleGravity="center_vertical|center_horizontal"
    android:scaleHeight="80%"
    android:scaleWidth="80%" />

satya - Fri Aug 24 2012 14:55:46 GMT-0400 (Eastern Daylight Time)

ShapeDrawable is improved


rectangle
oval
line
ring

satya - 2/21/2014 10:19:42 AM

Drawables now support, in addition to various image foramt


StateList: Different images for different states
LevelList: Images that can progress through levels
Transitions: Image that can transition from one to another
Insets: One that insets another image
Clip Drawable: It is a level drawable that clips another
Scale Drawable: A drawable that scales another based on level
Shape drawable: backgrounds (rectangle, oval, line, ring)