Android User Interface Development: Animating Widgets and Layouts

Jason Morris

February 2011


Android User Interface Development: Beginner's Guide

Android User Interface Development: Beginner's Guide

Quickly design and develop compelling user interfaces for your Android applications

  • Leverage the Android platform's flexibility and power to design impactful user-interfaces
  • Build compelling, user-friendly applications that will look great on any Android device
  • Make your application stand out from the rest with styles and themes
  • A practical Beginner's Guide to take you step-by-step through the process of developing user interfaces to get your applications noticed!
        Read more about this book      

(For more resources on this subject, see here.)

Animations are an important element in the user interface design of a modern application. However, it's also easy to overuse animations in your designs. A general guideline for animation use in a non-game application is—only animate user interactions and notifications, and keep the duration short so that it doesn't impact the user's experience negatively. For a game, more animation is generally acceptable (or even expected).

Layout animations and transitions provide useful status information to the user. When using a screen transition you tell your user what has just happened, or what is about to happen. Different transitions signify different events to your users, knowing what transition to use for each different activity will let your users know what kind of action is about to be taken. Layout animations are an important part of your user feedback, leaving them out or using the wrong one in the wrong place can leave your users irritated, or slightly confused ("change dazed"). Using the right animations will improve user experience, and can even speed up their use of the application by giving them brief cues as to what they are expected to do next.

Using standard Android animations

Any View or ViewGroup object in Android can have an animation attached to it. animations are generally defined as application resources in an XML file, and Android provides a few useful defaults in the android package. Android also includes several View classes which are designed specifically to handle animations. With these classes you will find that they have layout attributes which allow you to set a particular types of animations that will be used upon certain actions. However, animations are generally not specified in a layout file, instead they rely on the Java code to set and start Animation objects.

The main reason why animations are not normally specified as part of the layout XML is very simple—when should they run? Many animations can be used as a response to user input, letting the user know what's happening. Most animations will in some way or the other be triggered by a user's action (unless they are there to serve as a notification). Thus you will need to specify both—which animation to run on a widget, and the signal about when the animation should run. The default Android animations will begin animating immediately, while other animation structures may have a scheduled delay before they start.

Time for action – animating a news feed

We'll start of by creating a selector Activity and a simple NewsFeedActivity. In a news feed, we'll animate the latest headlines "in and out" using a timer. For this example we'll be working with some of the default animations provided by Android and driving the process mainly through the layout resources.

  1. Create a new project to contain the animation examples from this article, with a main Activity named AnimationSelectionActivity:

    android create project -n AnimationExamples -p AnimationExamples
    -k com.packtpub.animations -a AnimationSelector -t 3

  2. Open the res/layout/main.xml layout file in an editor or IDE.
  3. Clear out the default content of the layout resource.
  4. Declare a vertical LinearLayout consuming all the available screen space:


  5. Create a Button labeled News Feed to link to the first animation example:

    <Button android:id="@+id/news_feed"
    android:text="News Feed"/>

  6. Create a new layout resource file named news.xml.
  7. Declare a vertical LinearLayout containing all of the available screen space:


  8. Add a TextSwitcher object to the LinearLayout, specifying the "in" and "out" animations to the default "slide" animations:


  9. Open the res/values/strings.xml file in an editor or IDE.
  10. Declare a string-array named headlines with elements for some mock news headlines:

    <string-array name="headlines">
    <item>Pwnies found to inhabit Mars</item>
    <item>Geeks invent \"atoms\"</item>
    <item>Politician found not lying!</item>
    <!-- add some more items here if you like -->

  11. In the generated root package, declare a new Java source file named
  12. Register the NewsFeedActivity class in your AndroidManifest.xml file:

    <activity android:name=".NewsFeedActivity" android:label="News
    Feed" />

  13. The new class should extend the Activity class and implement Runnable:

    public class NewsFeedActivity
    extends Activity implements Runnable {

  14. Declare a Handler to be used as a timing structure for changing the headlines:

    private final Handler handler = new Handler();

  15. We need a reference to the TextSwitcher object:

    private TextSwitcher newsFeed;

  16. Declare a string-array to hold the mock headlines you added to the strings.xml file:

    private String[] headlines;

  17. You'll also need to keep track of which headline is currently being displayed:

    private int headlineIndex;

  18. Override the onCreate method:

    protected void onCreate(final Bundle savedInstanceState) {

  19. Invoke the onCreate method of Activity:


  20. Set the content view to the news layout resource:


  21. Store a reference to the headline string-array from the strings.xml application resource file:

    headlines = getResources().getStringArray(R.array.headlines);

  22. Find the TextSwitcher widget and assign it to the field declared earlier:

    newsFeed = (TextSwitcher)findViewById(;

  23. Set the ViewFactory of the TextSwitcher to a new anonymous class that will create TextView objects when asked:

    newsFeed.setFactory(new ViewFactory() {
    public View makeView() {
    return new TextView(NewsFeedActivity.this);

  24. Override the onStart method:

    protected void onStart() {

  25. Invoke the onStart method of the Activity class:


  26. Reset the headlineIndex so that we start from the first headline:

    headlineIndex = 0;

  27. Post the NewsFeedActivity as a delayed action using the Handler:

    handler.postDelayed(this, 3000);

  28. Override the onStop method:

    protected void onStop() {

  29. Invoke the onStop method of the Activity class:


  30. Remove any pending calls to the NewsFeedActivity:


  31. Implement the run method which we'll use to swap to the next headline:

    public void run() {

  32. Open a try block to swap the headline inside.
  33. Use the TextSwitcher.setText method to swap to the next headline:


  34. If the headlineIndex is past the total number of headlines, reset the headlineIndex to zero:

    if(headlineIndex >= headlines.length) {
    headlineIndex = 0;
    }Animatng Widgets and Layouts

  35. Close the try block, and add a finally block. In the finally block, post the NewsFeedActivity back onto the Handler queue:

    finally {
    handler.postDelayed(this, 3000);

  36. Open the auto generated AnimationSelector Java source in an editor or IDE.
  37. The AnimationSelector class needs to implement OnClickListener:

    public class AnimationSelector
    extends Activity implements OnClickListener {

  38. In the onCreate method, ensure that the content view is set to the main layout resource created earlier:


  39. Find the declared Button and set its OnClickListener to this:


  40. Declare the onClick method:

    public void onClick(final View view) {

  41. Use a switch to determine which View was clicked:

    switch(view.getId()) {

  42. If it's the news feed Button, then use the following case:


  43. Start the NewsFeedActivity using a new Intent:

    startActivity(new Intent(this, NewsFeedActivity.class));

  44. Break from the switch statement, thus finishing the onClick method.

What just happened?

The TextSwitcher is an example of an animation utility View. In this case it's the perfect structure to swap between the news headlines, displaying one headline at a time and animating a transition between each of the texts. The TextSwitcher object creates two TextView objects (using the anonymous ViewFactory class). When you use the setText method, the TextSwitcher changes the text of the "of screen" TextView and animates a transition between the "on screen" TextView and the "of screen" TextView (with the new text content displayed).

The TextSwitcher class requires that you specify two animation resources for it to work with, in order to create its transition effect:

  • Animate text onto the screen
  • Animate text of the screen

In the previous case, we made use of the default slide_in_left and slide_out_right animations. Both of these are examples of translation-based animations due to the fact that they actually alter the "on screen" position of the TextView objects in order to create their effect.

        Read more about this book      

(For more resources on this subject, see here.)

Using flipper and switcher widgets

The first example of this article made use of the TextSwitcher class, an animating View class in the standard Android API. There are several other animation utility classes, some of which you may have encountered before (such as ImageSwitcher). Both TextSwitcher and ImageSwitcher are related classes, and both inherit from the more generic ViewSwitcher class.

The ViewSwitcher class is a generic animation tool, and defines the ViewFactory interface that we implemented anonymously in the previous example. A ViewSwitcher is a ViewGroup with only two child View objects. One is displayed on the screen, while the other is hidden. The getNext utility method allows you to find out which is the "of screen" View object.

While you generally use a ViewFactory to populate a ViewSwitcher, you have the option to populate it manually. You could have populated the TextSwitcher in the example by using the addView method that is inherited from ViewGroup.

Android User Interface Development: Animating Widgets and Layouts

Using the ImageSwitcher and TextSwitcher implementations

The ImageSwitcher and TextSwitcher classes are specialized implementations of the ViewSwitcher that understand the type of View objects they contain. When you invoke the setText method of the TextSwitcher object, it's much like invoking the following code snippet on a ViewSwitcher containing two TextView children:

((TextView)switcher.getNext()).setText("Next text to display");

TextSwitcher can be used to display content such as (as in the example) a news feed, or as with the Android notification area, to display text content that doesn't ft into a single line. Displaying multiple lines in a TextSwitcher is particularly effective when the animation runs the text upwards, causing the text to appear to scroll upwards behind the TextSwitcher object.


An ImageSwitcher is most commonly used in a gallery, slide show, or similar structure. You could also use an ImageSwitcher to allow the user to select from a small list of images, for example a short list of login avatars.

Have a go hero – populating the TextSwitcher

As an alternative to populating the TextSwitcher with a ViewFactory in the news feed example, try populating it in the XML layout resource. Remember that it requires exactly two TextView child widgets. If you get this right, try giving each of the two TextView objects different font colors and styles.

Animating layout widgets

Using the animation utility widgets such as TextSwitcher and ImageSwitcher can allow you to display much more information over time than you could fit on the screen at a time. ViewGroup objects can also be animated without any serious modification through the LayoutAnimationController class. However, in this case, animation needs to be added in your Java code.

A LayoutAnimationController is best used to create "entry" or "exit" effects on a ViewGroup as it appears or just before it disappears of the screen. The controller simply starts a specified animation on each of the View children of a specified ViewGroup. However, it doesn't have to do it all at the same time, or in a sequential order. You can easily configure a LayoutAnimationController to leave a slight delay between the starting of an animation on each child widget, creating a staggered effect.

If applied correctly to a LinearLayout, you could achieve a result similar to the one illustrated in the following diagram:

Android User Interface Development: Animating Widgets and Layouts

Time for action – animating a GridView

The GridView class has its own LayoutAnimationController specifically designed to animate it in terms of rows and columns, allowing more complex effects than can be achieved with a standard LayoutAnimationController. For this next part of the "animations" example we're going to build a lovely color selector out of a GridView. When the selector first appears on the screen, each color swatch will fade in, starting in the top left corner and ending on the bottom right corner.

  1. Start by declaring a new Java source file in the root package of your project named, which will generate the color swatches for the GridView.
  2. The ColorAdapter needs to extend BaseAdapter to take care of the boiler plate Adapter requirements:

    public class ColorAdapter extends BaseAdapter {

  3. The ColorAdapter will be created with a specified number of rows and columns, the same numbers which will be displayed on the GridView:

    private final int rows;
    private final int cols;

    public ColorAdapter(int rows, int cols) {
    this.rows = rows;
    this.cols = cols;

  4. The number of items that the ColorAdapter will provide is the number of rows multiplied by the number of columns:

    public int getCount()
    return rows * cols;

  5. The ID of a color is the position or index at which it's found:

    public long getItemId(int pos) {
    return pos;

  6. We use a utility method to compose the color from an index in the "list." For this function we make use of the HSVtoRGB method in the Android Color class:

    private int getColor(int pos) {
    float h = (float)pos / (float)getCount();
    return Color.HSVToColor(new float[]{h * 360f, 1f, 1f});

  7. The item at an index in the Adapter model is returned as it's color value:

    public Object getItem(int pos) {
    return getColor(pos);

  8. To create the color swatch View objects, we implement the getView method of Adapter as usual:

    public View getView(int pos, View reuse, ViewGroup parent) {

  9. The View we return is going to be an ImageView object, so we either re-use the one given by the parent widget, or create a new one:

    ImageView view = reuse instanceof ImageView
    ? (ImageView)reuse
    : new ImageView(parent.getContext());

  10. We make use of the ColorDrawable class to fill the ImageView with the color specified by our getColor utility method:

    view.setImageDrawable(new ColorDrawable(getColor(pos)));

  11. The ImageView needs to have its android.widget.AbsListView. LayoutParams set, and then it can be returned to the GridView for display:

    view.setLayoutParams(new LayoutParams(16, 16));
    return view;

  12. Create a new XML layout resource file named res/layout/colors.xml to hold the declaration of the GridView that will act as the color selector.
  13. The contents of the colors.xml layout file are just a single GridView widget:

    android:layout_height="fill_parent" />

  14. Define another new Java source file in the root package of your AnimationExamples project. Name this one
  15. The new class declaration should extend Activity:

    public class ColorSelectorActivity extends Activity {

  16. Override the onCreate method as normal, and set the content view to the colors XML layout resource you just wrote:

    protected void onCreate(Bundle savedInstanceState) {

  17. Now you can load the default Android "fade in" animation using the handy AnimationUtils class from the android.view.animation package:

    Animation animation = AnimationUtils.loadAnimation(
    this, android.R.anim.fade_in);

  18. In order to animate the GridView correctly, you need to instantiate a new GridLayoutAnimationController object, passing it the "fade in" animation:

    GridLayoutAnimationController animationController =
    new GridLayoutAnimationController(
    animation, 0.2f, 0.2f);

  19. Now look for the GridView which you have declared in the colors.xml file:

    GridView view = (GridView)findViewById(;

  20. Set the number of columns in the GridView to 10 (note that we didn't do this in the XML layout resource as you normally would):


  21. When you set the adapter of the GridView to a ColorAdapter, you also need to know the number of columns, and the easiest way to do this is to keep both in Java:

    view.setAdapter(new ColorAdapter(10, 10));

  22. The view object is now ready for the GridLayoutAnimationController:


  23. In order to start the animation when the screen is displayed, we override the onStart method. It is in here that we look up the GridView again and start the animation:

    protected void onStart() {

  24. In order to integrate this new example with the other animation examples, you'll need to open the res/layout/main.xml file in an editor or IDE.
  25. Add a new Button to the end of the LinearLayout, the one we'll use to start the color selection example:

    <Button android:id="@+id/colors"
    android:text="Color Selector" />

  26. Open the AnimationSelector source file in your editor or IDE.
  27. After setting the OnClickListener of the news_feed Button, find and set the OnClickListener of the new colors Button in the same way:


  28. In the onClick method, after the switch case for the news_feed Button, add another switch case for the new colors Button, and start the ColorSelectorActivity:

    startActivity(new Intent(this, ColorSelectorActivity.class));

  29. Open the AndroidManifest.xml file in your editor or IDE.
  30. At the bottom of the <application> section, register the new ColorSelectorActivity:

    <activity android:name=".ColorSelectorActivity"
    android:label="Your Favorite Color" />

What just happened?

The new example makes use of the GridLayoutAnimationController to start each "fade in" animation a fraction of a second after the previous one started. This creates a fluid effect of each color swatch appearing slightly after the ones to the left and below of itself.

When you instantiate a GridLayoutAnimationController, it requires you to provide the animation and two parameters which indicate the amount of time between starting animations for the next row, or the next column. The delay given is not specified in a "direct" time format, but instead by how long the given animation takes to complete. In our case, if the animation took one second to complete, the delay between each animation starting would be 200 milliseconds, since the delay is specified as 0.2.

The fact that we animate the swatches just as this Activity becomes visible, effectively makes this a transition animation, introducing the user to this new screen. For these types of animations, it's imperative to take as little time as possible while still giving a pleasing introduction. When you run the new example you should get an animation similar to the ones illustrated in the following images:

Android User Interface Development: Animating Widgets and Layouts

Creating Custom Animations

So far we've explored using Android's stock animations with the normal widgets, but what about applying a custom animation to a widget that isn't built for animations? Android includes support for four basic animation types that can be applied to View objects:

  • translate/Move
  • Rotate
  • Scale
  • Alpha/Transparency

These different animation structures can be applied by themselves, or merged together in an animation set where any combination of the three can be run at the same time. By creating an animation with a delay time before it starts, you can create complex animations by having simple sets of animations follow each other.

Like so many things in Android, the easiest way to create your own custom animations is to define it in a resource XML file. The elements in the animation format used by Android correspond directly to the classes in the android.animation.view package. An animation file can also reference animations in other animation resources, which makes it much easier to compose complex animations and re-use simple animations.

        Read more about this book      

(For more resources on this subject, see here.)

Time for action – writing a custom animation

Writing a custom animation is very simple, but not entirely intuitive. For this section you'll define a custom animation which will increase the size of its animated widget by a factor of five, while at the same time fading it until its entirely transparent.

  1. Create a new XML resource file named res/anim/vanish.xml and open it in an editor or IDE.
  2. The root element of the animation file will be an animation set element:

    <set xmlns:android="">

  3. In the <set> element, declare an element to define the scale up animation:

    <scale />

  4. The duration of the scale up animation needs to be set as 300 milliseconds:


  5. The animation starts to scale from the original size:


  6. The scale animation needs to increase the size by a factor of 5.0:


  7. We want the scale to expand from the center of the widget:


  8. The last part of the <scale> element defines the acceleration curve of the animation. Here we want the scale up to decelerate as it runs:


  9. Next, define a new element to handle the fade out part of the animation:

    <alpha />

  10. The duration of the fade out animation is also 300 milliseconds:


  11. We start with no transparency:


  12. The fade out ends with a completely invisible widget:


  13. The fade out should accelerate as it runs, so we use an accelerate interpolator:


What just happened?

This is a relatively simple animation set, but its effect is visually pleasing. Keeping the animation at 300 milliseconds is quick enough to not interfere with the user's interaction, but just long enough to be seen in full by the user.

When defining animations in an animation <set> element, each non-set sub animation needs to have its duration defined. The <set> element has no concept of its own duration. However, you can define a single interpolator for the entire set to share.

The <scale> animation will by default, scale the widget using the top-left corner as the "pivot" point, causing the widget to grow to the right and downward, but not left and upward. This causes a lopsided animation which is not very appealing. In the preceding example, the scale animation runs with the pivot at the center of the animated widget.

Android User Interface Development: Animating Widgets and Layouts

Time for action – making a Button vanish

So how can we apply the nice shiny animation to a Button object? The Button object doesn't have an animation attribute, and so you can't just reference it from the layout resource file. What we want, is the animation to run when the Button widget is clicked.

  1. Create a new layout resource file named res/layout/vanish.xml and open in an editor or IDE.Animatng Widgets and Layouts
  2. At the root of the new layout, declare a RelativeLayout element:


  3. The Button needs to be nice and large, and centered on the screen. For this we give it some inner padding:

    <Button android:id="@+id/vanish"
    android:text="Vanish" />

  4. Create a new Java source file in the root package of the AnimationExamples project named
  5. The new class needs to extend Activity and implement the OnClickListener interface:

    public class VanishingButtonActivity extends Activity
    implements OnClickListener {

  6. Override the onCreate method and invoke the Activity.onCreate method to perform the required Android setup:

    protected void onCreate(Bundle savedInstanceState) {

  7. Set the content view to the new vanish layout resource:


  8. Find the Button widget declared in the XML layout resource and set its OnClickListener:

    Button button = (Button)findViewById(;

  9. Implement the onClick method of OnClickListener:

    public void onClick(View clicked)

  10. Load the Animation from the resource file:

    Animation vanish = AnimationUtils.loadAnimation(
    this, R.anim.vanish);

  11. Start the Animation on the Button object:


  12. Open the AndroidManifest.xml file in an editor or IDE.
  13. Declare the VanishingButtonActivity at the end of the <application> section with a display label:

    <activity android:name=".VanishingButtonActivity"
    android:label="Vanishing Button" />

  14. Open the res/layout/main.xml layout resource in your editor or IDE.
  15. Add a new Button to the end of LinearLayout to activate the VanishingButtonActivity:

    <Button android:id="@+id/vanish"
    android:text="Vanishing Button" />

  16. Open the AnimationSelector Java source file in your editor or IDE.
  17. At the end of the onCreate method, fetch the new vanish Button from the layout and set its OnClickListener:


  18. In the onClick method, add a new switch case to start the VanishingButtonActivity:

    startActivity(new Intent(
    this, VanishingButtonActivity.class));

What just happened?

The addition of the preceding example will display a single Button in the middle of the screen. When clicked, the Button will be mutated by the vanish animation for 300 milliseconds. When it is complete, the animation won't have any effect on the Button anymore. This is an important characteristic of animations—when they are complete, the widget they have animated is returned to its original state.

It's also important to note that it's not the widget itself that is modifed by an animation, but rather the state of the Canvas it's painted on. This is much the same concept as modifying the state of Graphics or Graphics2D object in Java AWT, or Swing before a widget uses the Graphics object to paint itself.

In the following images you can see the effect that animation has on the Button when it's clicked. The Button is actually re-painted for each frame in the animation, and remains entirely active during that time.

Android User Interface Development: Animating Widgets and Layouts


In this article, we explored the various methods by which you can apply animations to various parts of your user interface. We explored how some widgets are designed to animate themselves. Layouts can be animated for transitions in and out of an Activity.

Several simple animations are available by default in the Android resource, but ultimately creating your own animations and applying them to your user interface manually creates, by far, the most visually appealing and user-friendly experience for your users.

Many applications on a mobile device need to present a large amount of information on the screen, and present it in such a way that it can be easily absorbed.

Further resources on this subject:

You've been reading an excerpt of:

Android User Interface Development: Beginner's Guide

Explore Title