Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Android Studio for beginners, Part 2: Explore and code the app

Jeff Friesen | Aug. 24, 2016
Use Android Studio's project editor to write your first animated Android app

android beginners2

In Part 1 of this beginner's introduction to Android Studio, you set up Android Studio in your development environment and got to know the project workspace. Now in Part 2 you'll code your first app. The animated mobile app consists of a single activity, which presents Google's Android robot character and a button for animating the character. Clicking the button causes the character to gradually change color from green to red to blue, then back to green. While the app isn't especially useful, writing it will help you get comfortable with using Android Studio. In Part 3 you'll compile and run the app using an Android device emulator and a 7" HD Kindle Fire tablet.

Getting started with Android Studio's project editor

I introduced the Android Studio project workspace at the end of Part 1. The project workspace includes the project editor, which is where you'll write the code and specify resources for mobile apps in Android Studio. The project editor is shown in Figure 1.

androidstudiop2 fig1

Figure 1. Android Studio's project editor

You'll use the tabs to navigate between Java source files, XML resource files, and other files. You can add a tab for a project file by double-clicking the file's name in the project window.

As shown in Figure 1, you currently should have two tabs in your project editor: (the skeletal Java source code for the app's main activity) and main.xml (the default XML-based layout for the app's main activity). is the current open tab.

The W2A example app

The W2A app consists of a main activity that displays the Android robot character and a button. When the user presses the button, the robot animates through a series of colors. In this section, we'll explore the activity's source code and resources.

Exploring and coding

The activity's source code is stored in the file, presented in Listing 1.

Listing 1.

package ca.javajeff.w2a;



import android.os.Bundle;

import android.view.View;

import android.widget.Button;
import android.widget.ImageView;

public class W2A extends Activity
   AnimationDrawable androidAnimation;

   public void onCreate(Bundle savedInstanceState)
      ImageView androidImage = (ImageView) findViewById(;
      androidAnimation = (AnimationDrawable) androidImage.getBackground();
      final Button btnAnimate = (Button) findViewById(;
      View.OnClickListener ocl;
      ocl = new View.OnClickListener()
         public void onClick(View v)


1  2  3  4  5  6  Next Page 

Sign up for CIO Asia eNewsletters.