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.

ilfilflA BEH4B«54pm


> 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, specifying a percentage of the Drawable's width and height, respectively, using nn% notation.

To apply the scaling and rotation at run time, use the setLevel method on the View object hosting the Drawable to move between the start and finish values (0 to 10,000).

When moving through levels, level 0 represents the start angle (or smallest scale result). Level 10, 000 represents the end of the transformation (the finish angle or highest scaling).

Listing 4-19 shows Scale and Rotate Drawable XML definitions, while Listing 4-20 demonstrates how to manipulate them in code after they have been assigned to an Image View.

LISTING 4-19: Resource files for a Rotate Drawable and Scale Drawable

Available for download on

<!-- Rotation Drawable Resource --> <?xml version="1.0" encoding="utf-8"?>

<rotate xmlns: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="" android:drawable="@drawable/icon" android:scaleHeight="100%" android:scaleWidth="100%"

LISTING 4-20: Applying rotation and scale Drawable transformations in code

Available for download on

ImageView rotatinglmage = (ImageView)findViewByld(; ImageView scalinglmage = (ImageView)findViewByld(;

// 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);

Mobile Apps Made Easy

Mobile Apps Made Easy

Quick start guide to skyrocket your offline and online business success with mobile apps. If you know anything about mobile devices, you’ve probably heard that famous phrase coined by one of the mobile device’s most prolific creators proclaiming that there’s an app for pretty much everything.

Get My Free Training Guide

Post a comment