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!

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.

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

Open the res/layout/main.xml layout file in an editor or IDE.

Clear out the default content of the layout resource.

Declare a vertical LinearLayout consuming all the available screen space:
<LinearLayout

android_orientation="vertical"
android_layout_width="fill_parent"
android_layout_height="fill_parent">

Create a Button labeled News Feed to link to the first animation example:
<Button android_id="@+id/news_feed"
android_layout_width="fill_parent"
android_layout_height="wrap_content"
android_layout_marginBottom="10dip"
android_text="News Feed"/>

Create a new layout resource file named news.xml.

Declare a vertical LinearLayout containing all of the available screen space:
<LinearLayout

android_orientation="vertical"
android_layout_width="fill_parent"
android_layout_height="fill_parent">"

Add a TextSwitcher object to the LinearLayout, specifying the "in" and "out" animations to the default "slide" animations:
<TextSwitcher
android_id="@+id/news_feed"
android_inAnimation="@android:anim/slide_in_left"
android_outAnimation="@android:anim/slide_out_right"
android_layout_width="fill_parent"
android_layout_height="wrap_content"
android_text=""/>

Open the res/values/strings.xml file in an editor or IDE.

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>

</string-array>

In the generated root package, declare a new Java source file named NewsFeedActivity.java.

Register the NewsFeedActivity class in your AndroidManifest.xml file:
<activity android_name=".NewsFeedActivity" android_label="News
Feed" />

The new class should extend the Activity class and implement Runnable:
public class NewsFeedActivity
extends Activity implements Runnable {

Declare a Handler to be used as a timing structure for changing the headlines:
private final Handler handler = new Handler();

We need a reference to the TextSwitcher object:
private TextSwitcher newsFeed;

Declare a string-array to hold the mock headlines you added to the strings.xml file:
private String[] headlines;

You'll also need to keep track of which headline is currently being displayed:
private int headlineIndex;

Override the onCreate method:
protected void onCreate(final Bundle savedInstanceState) {

Invoke the onCreate method of Activity:
super.onCreate(savedInstanceState);

Set the content view to the news layout resource:
setContentView(R.layout.news);

Store a reference to the headline string-array from the strings.xml application resource file:
headlines = getResources().getStringArray(R.array.headlines);

Find the TextSwitcher widget and assign it to the field declared earlier:
newsFeed = (TextSwitcher)findViewById(R.id.news_feed);

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

Unlock access to the largest independent learning library in Tech for FREE!

Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

Renews at €18.99/month. Cancel anytime

Override the onStart method:
protected void onStart() {

Invoke the onStart method of the Activity class:
super.onStart();

Reset the headlineIndex so that we start from the first headline:
headlineIndex = 0;

Post the NewsFeedActivity as a delayed action using the Handler:
handler.postDelayed(this, 3000);

Override the onStop method:
protected void onStop() {

Invoke the onStop method of the Activity class:
super.onStop();

Remove any pending calls to the NewsFeedActivity:
handler.removeCallbacks(this);

Implement the run method which we'll use to swap to the next headline:
public void run() {

Open a try block to swap the headline inside.

Use the TextSwitcher.setText method to swap to the next headline:
newsFeed.setText(headlines[headlineIndex++]);

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

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

Open the auto generated AnimationSelector Java source in an editor or IDE.

The AnimationSelector class needs to implement OnClickListener:
public class AnimationSelector
extends Activity implements OnClickListener {

In the onCreate method, ensure that the content view is set to the main layout resource created earlier:
setContentView(R.layout.main);

Find the declared Button and set its OnClickListener to this:
((Button)findViewById(R.id.news_feed)).
setOnClickListener(this);

Declare the onClick method:
public void onClick(final View view) {

Use a switch to determine which View was clicked:
switch(view.getId()) {

If it's the news feed Button, then use the following case:
case R.id.news_feed:

Start the NewsFeedActivity using a new Intent:
startActivity(new Intent(this, NewsFeedActivity.class));

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.