Drawable Resources

There are several new types of Drawables resources — including shapes and transformative and composite Drawables — and be shown how to use these resources to create user interfaces that are independent of screen size and resolution.

Drawables: Color,Shape,Gradient, Composite, Transformative, Layer, State List, LevelList, NinePatch

Color Drawable:
A ColorDrawable, the simplest of the XML-defined Drawables, lets you specify an image asset based on a single solid color. Color Drawables are defined as XML files using the <color> tag in the Drawable resources folder.
<color xmlns:android="http://schemas.android.com/apk/res/android" android:color="#FF0000"/>

Shape Drawable:
Shape Drawable resources let you define simple primitive shapes by defining their dimensions, background, and stroke/outline using the <shape> tag.

Each shape consists of a type (specified via the shape attribute), attributes that define the dimensions of
that shape, and subnodes to specify padding, stroke (or outline), and background color values.
Android currently supports the following shape types as values for the shape attribute:
oval A simple oval shape.
 rectangle Also supports a <corners> subnode that uses a radius attribute to create a rounded rectangle.
ring Supports the innerRadius and thickness attributes to let you specify, respectively, the inner radius of the ring shape and its thickness. Alternatively, you can use innerRadiusRatio and/or thicknessRatio to define the ring’s inner radius and thickness as a proportion of its width.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#f0600000"/>
<stroke android:width="10dp" android:color="#00FF00"/>
<corners android:radius="15dp" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp"/>
</shape>

Gradient Drawable:
A GradientDrawable lets you design complex gradient fills. Each gradient defines a smooth transition
between two or three colors in a linear, radial, or sweep pattern.

Gradient Drawables are defined using the <gradient> tag as a subnode within a Shape Drawable definition. Each Gradient Drawable requires at least a startColor and endColor attribute and supports an optional middleColor.

Using the type attribute you can define your gradient as one of the following:
linear The default gradient type, it displays a straight color transition from startColor to endColor at an angle defined by the angle attribute.
radial Draws a circular gradient from startColor to endColor from the outer edge of the shape to the center. It requires a gradientRadius attribute that specifies the radius of the gradient transition in pixels. It also optionally supports centerX and centerY to offset the location of the center of the gradient. Because the gradient radius is defined in pixels it will not be dynamically scaled for different pixel densities. To minimize banding, you may need to specify different gradient radius values for different screen resolutions.
sweep Draws a sweep gradient that transitions from startColor to endColor along the outer edge of the parent shape (typically a ring).


Composite Drawables:
Use composite Drawables to combine and manipulate other Drawable resources. Any Drawable  resource can be used within the following composite resource definitions, including bitmaps, shapes, and colors. Similarly, these new Drawables can be used within each other and assigned to Views in the same way as all other Drawable assets.


Transformative Drawables:
You can scale and rotate existing Drawable resources using the aptly named ScaleDrawable and RotateDrawable classes. These transformative Drawables are particularly useful for creating progress bars or animating Views.

ScaleDrawable Within the <scale> tag, use the scaleHeight and scaleWidth attributes to define the target height and width relative to the bounding box of the original Drawable. Use the scaleGravity attribute to control the anchor point for the scaled image.
RotateDrawable Within the <rotate> tag, use fromDegrees and toDegrees to define the start and end rotation angle around a pivot point. Define the pivot using the pivotX and pivotY attributes,

<!-- Rotation Drawable Resource -->
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/icon" android:fromDegrees="0" android:toDegrees="90"
android:pivotX="50%" android:pivotY="50%" />

<!-- Scale Drawable Resource -->
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/icon" android:scaleHeight="100%" android:scaleWidth="100%"/>

Applying rotation and scale Drawable transformations in code
ImageView rotatingImage = (ImageView)findViewById(R.id.RotatingImageView);
ImageView scalingImage = (ImageView)findViewById(R.id.ScalingImageView);
// Rotate the image 50% of the way to its final orientation.
rotatingImage.setImageLevel(5000);
// Scale the image to 50% of its final size.
scalingImage.setImageLevel(5000);

Layer Drawable:
A LayerDrawable lets you composite several Drawable resources on top of one another. If you define an array of partially transparent Drawables you can stack them on top of one another to create complex
combinations of dynamic shapes and transformations.

Similarly, you can use Layer Drawables as the source for the transformative Drawable resources
described in the preceding section, or the State List and Level List Drawables that follow.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bottomimage"/>
<item android:drawable="@drawable/image2"/>
<item android:drawable="@drawable/image3"/>
<item android:drawable="@drawable/topimage"/>
</layer-list>

State List Drawables:
A State List Drawable is a composite resource that enables you to specify a different Drawable to display based on the state of the View to which it has been assigned. Most native Android Views use State List Drawables, including the image used on Buttons and the background used for standard List View items.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:drawable="@drawable/widget_bg_normal"/>
<item android:state_pressed="true" android:drawable="@drawable/widget_bg_pressed"/>
<item android:state_focused="true" android:drawable="@drawable/widget_bg_selected"/>
<item android:drawable="@drawable/widget_bg_normal"/>
</selector>

Level List Drawables:
Using a Level List Drawable you can effectively overlay several Drawable resources, specifying an
integer index value for each layer.

To select which image to display in code call setImageLevel on the View displaying the Level List
Drawable resource, passing in the index of the Drawable you wish to display.
imageView.setImageLevel(5);

The View will display the image corresponding to the index with an equal or greater value to the one
specified. Level List Drawables are particularly useful when creating Widget layouts.

NinePatch Drawable:
NinePatch (or stretchable) images are PNG files that mark the parts of an image that can be stretched.
NinePatch images must be properly defined PNG files that end in .9.png. The resource identifier for
NinePatches is the file name without the trailing .9.png.

A NinePatch is a variation of a PNG image that uses a one-pixel border to define the area of the image
that can be stretched if the image is enlarged. To create a NinePatch, draw single-pixel black lines that
represent stretchable areas along the left and top borders of your image. The unmarked sections won’t
be resized, and the relative size of each of the marked sections will remain the same as the image size
changes.

Resources in Android

Application resources are stored under the res/ folder of your project hierarchy. In this folder, each of the available resource types can have a subfolder containing its resources.

There are seven primary resource types that have different folders: simple values, drawables, layouts, animations, XML, styles, and raw resources.

This process also creates an R class file that contains references to each of the resources you include in your project. This lets you reference the resources in your code, with the advantage of design time syntax checking.

In all cases, the resource file-names should contain only lowercase letters, numbers, and the period (.) and underscore (_) symbols.

1) Simple Values:
Supported simple values include strings, colors, dimensions, and string or integer arrays. All simple values are stored within XML files in the res/values folder.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">To Do List</string>
<color name="app_background">#FF0000FF</color>
<dimen name="default_border">5px</dimen>
<array name="string_array">
<item>Item 1</item>
<item>Item 2</item>
<item>Item 3</item>
</array>
<array name="integer_array">
<item>3</item>
<item>2</item>
<item>1</item>
</array>
</resources>


Dimensions are most commonly referenced within style and layout resources. They’re useful for creating layout constants such as borders and font heights. To specify a dimension resource use the <dimen> tag, specifying the dimension value, followed by an identifier describing the scale of your dimension:

px (screen pixels), in (physical inches), pt (physical points), mm (physical millimeters), dp (density-independent pixels relative to a 160-dpi screen), sp (scale-independent pixels)

Styles and Themes:
Style resources let your applications maintain a consistent look and feel by enabling you to specify the
attribute values used by Views. The most common use of themes and styles is to store the colors and
fonts for an application.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="BaseText">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#111</item>
</style>
<style name="SmallText" parent="BaseText">
<item name="android:textSize">8sp</item>
</style>
</resources>

Drawables:
Drawable resources include bitmaps and NinePatch (stretchable PNG) images. They also include complex composite Drawables, such as LevelListDrawables and StateListDrawables that can be defined in XML. 


Layouts:
Layout resources let you decouple your presentation layer by designing user interface layouts in XML rather than constructing them in code. The most common use of a layout is for defining the user interface for an Activity. Once defined in XML, the layout is ‘‘inflated’’ within an Activity using setContentView, usually within the onCreate method.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World!"/>
</LinearLayout>


Animations:
Android supports two types of animation. Tweened animations can be used to rotate, move, stretch and fade a View; or you can create frame-by-frame animations to display a sequence of Drawable images.

Tweened animation is stored in a separate XML file in the project’s res/anim folder. An animation can be defined for changes in alpha (fading), scale (scaling), translate (movement), or rotate (rotation).

Frame-by-frame animations let you create a sequence of Drawables, each of which will be displayed for a specified duration, on the background of a View.

Menus:
Create menu resources to further decouple your presentation layer by designing your menu layouts in XML rather than constructing them in code. Menu resources can be used to define both Activity and context menus within your applications, and provide the same options you would have when constructing your menus in code. Once defined in XML, a menu is ‘‘inflated’’ within your application via the inflate method of the MenuInflator Service, usually within the onCreateOptionsMenu method.