Android Drawables

Android supports XML drawables and 9-patch graphics.  The XML drawables helps to specify shapes, color, border, gradient, State and Transitions. The 9-patch helps to specify which part of a graphic should be increased if the View which uses this graphics is larger than the graphic. For drawing shapes and images we are using a custom 2D graphics library. The android.graphics.drawable package contains the common classes for drawing in two dimensions. Here we are using some Interfaces, Classes and Enums.

Interfaces

  1. Animatable: – Interface that drawables supporting animations should implement.
  2. Drawable.Callback:- Implement this interface if you want to create an animated drawable that extends Drawable.

Classes

1)      AnimationDrawable: – An object used to create frame-by-frame animations, defined by a series of Drawable objects, which can be used as a View object’s background.

2)      BitmapDrawable: – A Drawable that wraps a bitmap and can be tiled, stretched, or aligned.

3)      ClipDrawable:- A Drawable that clips another Drawable based on this Drawable’s current level value.

4)      ColorDrawable:-A specialized Drawable that fills the Canvas with a specified color.

5)      Drawable: – A Drawable is a general abstraction for “something that can be drawn.” Most often you will deal with Drawable as the type of resource retrieved for drawing things to the screen; the Drawable class provides a generic API for dealing with an underlying visual resource that may take a variety of forms.

6)      Drawable.ConstantState:- This abstract class is used by Drawables to store shared constant state and data between Drawables.

7)      DrawableContainer: – A helper class that contains several Drawables and selects which one to use.

8)      DrawableContainer.DrawableContainerState:- A ConstantState that can contain several Drawables.

9)       GradientDrawable: – A Drawable with a color gradient for buttons, backgrounds, etc.

10)   InsetDrawable: – A Drawable that insets another Drawable by a specified distance.

11)   LayerDrawable: – A Drawable that manages an array of other Drawables.

12)   LevelListDrawable: – A resource that manages a number of alternate Drawables, each assigned a maximum numerical value.

13)   NinePatchDrawable: – A resizable bitmap, with stretchable areas that you define.

14)  PaintDrawable: – Drawable that draws its bounds in the given paint, with optional rounded corners.

15)  PictureDrawable: – Drawable subclass that wraps a Picture, allowing the picture to be used wherever a Drawable is supported.

16)  RotateDrawables: – A Drawable that can rotate another Drawable based on the current level value.

17)  ScaleDrawable: – A Drawable that changes the size of another Drawable based on its current level value.

18)  ShapeDrawable: – A Drawable object that draws primitive shapes.

19)  ShapeDrawable.ShaderFactory:- Base class defines a factory object that is called each time the drawable is resized (has a new width or height).

20)  StateListDrawable: – Lets you assign a number of graphic images to a single Drawable and swap out the visible item by a string ID value.

21)  TransitionDrawable: – An extension of LayerDrawables that is intended to cross-fade between the first and second layer.

Enums

1)      GradientDrawable.Orientation:-Controls how the gradient is oriented relative to the drawable’s bounds

We can extend Drawable classes and to create different drawable graphics.  There are three ways to define and instantiate a Drawables. They are,

1)      Using an image saved in our project

2)      Using an XML files that defines the property

3)      Using normal class constructors

This method includes normal constructor operation.

1)      Using an image saved in our project

It’s a simple way to add graphics. It works on by referencing an image file from our project resources. PNG (preferred), JPG (acceptable) and GIF (discouraged) etc are the commonly used supported file types.

Eg: – To use an image resource, just add your file to the res/drawable/ directory of your project. From there, you can reference it from your code or your XML layout. Either way, it is referred using a resource ID, which is the file name without the file type extension (E.g., my_image.png is referenced as my_image).

Eg: –

LinearLayout mLinearLayout;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Create a LinearLayout in which to add the ImageView
mLinearLayout = new LinearLayout(this);
// Instantiate an ImageView and define its properties
ImageView i = new ImageView(this);
i.setImageResource(R.drawable.my_image);
i.setAdjustViewBounds(true); // set the ImageView bounds to match the Drawable's
dimensions
i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
// Add the ImageView to the layout and set the layout as the content view
mLinearLayout.addView(i);
setContentView(mLinearLayout);  }

If we want to handle our image resource as a drawable object, we will create a Drawable from the resource.

Eg: –

 Resources res = mContext.getResources();
Drawable myImage = res.getDrawable(R.drawable.my_image);

The XML snippet below shows how to add a resource Drawable to an ImageView in the XML layout

Eg: –

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tint="#55ff0000"
android:src="@drawable/my_image"/>

2)      Using an XML files that defines the property

The most commonly used drawables are,

  1. Shape Drawables
  2. State Drawables
  3. Transition Drawables
  4. 9 Patch Drawables

Shape Drawables

This type of drawables permits to specify a geometric object with colors, borders, and gradients which can get assigned to Views.

Advantage:-

It automatically adjusts to the correct size.

Eg: –

<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#FFFFFFFF" />
<gradient
android:endColor="#DDBBBBBB"
android:startColor="#DD777777"
android:angle="90" />
<corners
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>

We have to assign drawables to the background property of our layout.

Eg: –

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/myshape"
android:orientation="vertical" >
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
</EditText>
<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/celsius" >
</RadioButton>
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fahrenheit" >
</RadioButton>
</RadioGroup>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/calc"
android:onClick="myClickHandler">
</Button>
</LinearLayout>

State Drawables

State drawables helps to specify states and for each state a variety of drawables can get assigns to the View.

Eg: –

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_pressed"
android:state_pressed="true" />
<item android:drawable="@drawable/button_checked"
android:state_checked="true" />
<item android:drawable="@drawable/button_default" />
</selector>

Transition Drawables

Transition drawables permits to specify transactions which can be changed in the coding.

Eg: –

<?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>
final ImageView image = (ImageView) findViewById(R.id.image);
final ToggleButton button = (ToggleButton) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(final View v) {
TransitionDrawable drawable = (TransitionDrawable) image.getDrawable();
if (button.isChecked()) {
drawable.startTransition(500);
} else {
drawable.reverseTransition(500);
}
}
} );

9 Patch Drawables

9 Patch drawables permits a one pixel additional border. On the top and left we can define the area which should grow if the drawable is too small for the View.  On the right and bottom side you define where a text should be placed if this drawable is used on a View which can write text on it.

Eg: – Button

The ADT supplies the “draw9patch” program which makes it easy to create 9 patch drawables.

Eg: – 9-Patch file