Introduction To Android Drawable

Android Drawable, a very interesting component of  Android . Before we proceed to depth let us get a brief idea of “Drawables”. So, what is drawable? Is it in anyway related to drawing?
In a little way, yes, it is.
A closer look at this word “Drawable” will help you notice, drawable is a combination of two words ‘ draw + able ‘.  A simpler definition of the word “Drawable” would be “something that can be drawn”.
Now, let us take a deeper dive into drawable.
Android Drawable is a class. So according to it if you want to draw something or need to insert any image, you need to extend this class. And Android just declares this class to be abstract because each coder might have their own ways of implementing. So you can access the methods of Drawable class in your own way.
In case if you do not know what an abstract class is, let me explain. It is the class having only method declaration, without any method definition. We can also say that the class has no body.

Here is a more appropriate definition of drawable as “a general abstraction for something that can be drawn”. Most of you, who have little knowledge of Android might think that Drawable is a folder containing images inside the “res” folder. It is true, however, it is not limited to just that. The drawable class provides a generic API “(getDrawable(int))” that can be used by a different variety of visual images. Now let’s discuss the types of Drawables.

Types of Android Drawable:

1. Bitmap:  Android supports bitmap file in three formats namely .png(preferred), .jpg(acceptable), .gif(discouraged). The location of these kinds of images are shown:
   2. Nine Patch: To understand this let’s take an example of a two-wheeler.

   Think of your vehicle stand’s spring. It is in the non-stretched mode when you are riding while when your bike is resting it gets back to stretched mode which means it is changing its size according to the requirement.The drawable works in similar fashion.
   A NinePatch is a png image in which you can define stretchable regions so that when the content inside it exceeds then it can also stretch its size.As in the above figure, according to our defined stretchable regions, it is changing its size to match the requirement.
   But when to use this?  
   You can use this type of a drawable image as a background of view so that when the view grows, the 9 patch image also stretches to wrap its content.
   Location: The location of this png image is the same as that of a bitmap. But how do you identify which image is bitmap and which is 9 patch?  Well, you can identify it when it gets saved in “res/drawable/filename.9.png”.
   3. Layer List: Do you remember “STACK”.  We’ll take the example of a stack to understand the layer list. The stack is used to store similar data type and follows the rule LIFO (Last in First Out).Layer list in a way is very similar to the stack implementation. An object of drawable, it manages an array of other drawable’s i.e many images can be stored into a single layer-list and is stored in LIFO fashion.
   Note: It is a .xml file which is used to store images which are already stored in a drawable folder. It may be Bitmap or 9 patch.
   Let’s look at an example to understand this:Note: Here <item> represent a single entry in the list or single item.
   android:top, android:left, android:right, android:bottom: All are offset in pixels defined in their particular direction.
   Here is the example.Location: res/drawable/filename.xml
   It can be used from resource Id.
   4. State List: It is an object of Drawable that is defined in XML and uses several images to represent a single graphic. Let’s take an example like there is a button widget in an activity. You press the button, hover it and do nothing with it. Similarly, suppose there is a check box, so you check it and uncheck it.Thus, we can say that it helps us to know the state of the widget. It is defined in a XML file and each graphic (widget) is defined by the <item> element inside a single <selector> element. All the item can use the, attribute to define the state. Let us have a look at the syntax.

   5.  Transition Drawable:

     It is used to define the time to cross-fade between the two drawable images.
   Suppose you are going through your images inside the gallery by swiping the images. So when you swipe the first image it becomes fade and the other image comes into the view. The time between this event is known as the transition, you can also set the transition according to you.

   Note: In this, we have taken two drawable images and set one to “on” and other to “off” as you swipe the first image it automatically sets to “off” and second one to “on”.

   6. Inset Drawable: This is used to set a border to an image related to its background by a specific distance set by the inset.

   SyntaxAs shown in the figure, background in green and we are setting the border by attributes insetTop, insetBottom, insetRight, insetLeft, so that the red border can be seen by us.
   We use insert when we need a background of a view smaller than the view’s actual bound.

   7. CLIP Drawable: It is drawable defined in XML that clips (hold just like a paper clip) another drawable, which is based on the current location of the first drawable. In this scenario first drawable is termed as the parent drawable and clipped drawable is termed as the child.

   So you can control how much the child gets clipped with respect to the width and height. You can also control the gravity of the child.

   9: Shape Drawable: It is a geometric shape defined in XML.
   gradient: Specifies gradient backgrounds
   solid:    Specifies solid background color
   padding:  Specifies padding between the edge of the shape and its contents
   size:     Specifies the width and height
   stroke:   Specifies a stroke line around the edge of the shape

   Let’s look at the example to understand it better,
   XML file saved at res/drawable/gradient_box.xml:

   Keep visiting www.acadgild.com for more interesting articles on Android Training.