Hour 1. Getting Started: Creating a Simple App

The goal of this hour is to jump into Android development. To do this, you first need to set up a development environment. With the introduction of the Android Developer Tools (ADT) Bundle download, this process has become much easier for new Android developers. With the development environment in place, you will create a simple app and then modify it. This process will introduce you to the tools for creating user interfaces, running test apps, and debugging code.

Download the ADT Bundle by following the download links provided on http://developer.android.com/sdk/index.html. Installation and environment setup instructions are available for both Windows and Macintosh machines.

The ADT Bundle is a zipped file. After you download and unzip it, you see the folder structure shown in Figure 1.1. Running the Eclipse application starts the development environment.

Looking at Figure 1.1, you see that two main folders exist:

Eclipse contains the Eclipse Integrated Development Environment and related tools.

The sdk folder contains a number of subfolders, including tools, platforms, and platform tools.

Figure 1.2 shows the app start-up screen for Android developer tools after you’ve installed the bundle. When you use the tools installed by the ADT Bundle, you are using Eclipse. (This book refers to the development environment as Eclipse.)

Eclipse is a blank slate to start your app development efforts. You add projects for each app you want to create. The discussion starts with a simple app and looks closely at what can be automatically generated.

1. In Eclipse, choose File, New, and Android Application Project.

2. Fill in Hour1App for the Application Name. The Project Name and Package Name will be filled in automatically.

Your screen should look like what’s shown in Figure 1.4.

3. Click Next. On the screen that appears, choose the checkbox to create a custom icon and create an activity. Your screen will look like Figure 1.5.

4. Click Next. The icon screen appears. You can accept the default icon and choose an activity type for the app. Choose a Blank Activity and click Next. Your screen should look like Figure 1.6. Click Finish.

The project might take a minute or two to load, but your formally empty Eclipse ADT is starting to look full! Figure 1.7 shows the project in full. On the left, you see the Package Explorer for the Hour1App. Many folders have been created. The highlighted item is called activity_main.xml. The center of the screen shows a graphical representation of this XML file.

You just generated a simple app that shows the screen defined in the XML layout. There are methods in Java code to show that screen. To see the Java code, in the Package Explorer, expand the src folder and select the MainActivity.java file. Your screen should look like Figure 1.8.

In Figure 1.8, you can see that MainActivity extends a class called Activity. There are two methods: onCreate and onCreateOptionsMenu(). In the onCreate() method, you see the link between your source code and the XML layout file. A call is made to setContentView() with a reference to R.layout.activity_main. That is the XML file that you created.

You use the onCreateOptionsMenu() that is generated for handling menu items. Hour 7, “ActionBar and Menu Navigation,” covers this in more detail.

GO TO HOUR 3, “EXPLORING AN ANDROID PROJECT AND RESOURCES,” to learn more about resources.

1. Highlight Hour1App and right-click it with a mouse to show a list of options. You can also press the Control key and click a Mac. Choose Run As, and then Android Application (see Figure 1.9).

2. When you receive the error message “Android AVD Error,” you can choose whether to create a new Android Virtual Device. Choose Yes.

An Android Virtual Device (AVD) is required to run the emulator. It defines the specifics of a device for testing in the emulator. Many different devices are available and you can create custom configurations. Creating a new AVD with the defaults provided is easy.

To do this, in the Android Virtual Device Manager screen:

1. Choose New to create a new AVD.

2. Select a device from the drop-down menu and give this AVD a name.

In Figure 1.10, the device selected is a Galaxy Nexus and the AVD Name is “GalaxyNexus.”

Now you can close the AVD Manager and run the app again. It should successfully run in the emulator using the Galaxy Nexus Android Virtual Device.

LISTING 1.1 Button Defined in XML Layout

Click here to view code image

---

 1:  <Button
 2:    android:id="@+id/button1"
 3:    android:layout_width="wrap_content"
 4:    android:layout_height="wrap_content"
 5:    android:layout_alignParentBottom="true"
 6:    android:layout_alignParentRight="true"
 7:    android:layout_marginBottom="17dp"
 8:    android:layout_marginRight="15dp"
 9:    android:text="Button" />

---

The goal is to accept the information entered into the EditText and plop it into the TextView when the Button is clicked. The first step in doing that is making a connection between the user interface and the code. The second step is to add an action to the Button.

You need to modify the code that was generated. Select the MainActivity.java file in Eclipse. You modify the code in the onCreate() method, but first add the necessary imports for the user interface elements.

The new import statements are the following:

Click here to view code image

import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

The complete list of imports is as follows:

Click here to view code image

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

These Java classes are included in Android in the widget package.

Add the code to the onCreate() method to associate the resources from the layout file with the code. Listing 1.2 shows the onCreate() method. Lines 5 through 9 define an EditText, TextView, and Button that you can now use in your code. The findViewById() method makes the association Line 4 tie this Activity to the XML layout file named activity_main.xml in the res/layout folder in your project. Lines 5–8 refer to the ids of each of the resources defined in that file.

LISTING 1.2 Referring to UI Widgets in Code

Click here to view code image

---

1:  @Override
2:    protected void onCreate(Bundle savedInstanceState) {
3:    super.onCreate(savedInstanceState);
4:    setContentView(R.layout.activity_main);
5:    EditText e =  (EditText)findViewById(R.id.editText1);
6:    TextView t =  (TextView)findViewById(R.id.textView1);
7:    Button b =  (Button)findViewById(R.id.button1);
8:  }

---

Listing 1.2 sets you up to read the data from the EditText field and populate the TextView when the Button is clicked. Listing 1.3 shows the code to do this.

LISTING 1.3 Responding to the Button Click

Click here to view code image

---

1:  @Override
2:    protected void onCreate(Bundle savedInstanceState) {
3:    super.onCreate(savedInstanceState);
4:    setContentView(R.layout.activity_main);
5:    final EditText e =  (EditText)findViewById(R.id.editText1);
6:    final TextView t =  (TextView)findViewById(R.id.textView1);
7:    Button b =  (Button)findViewById(R.id.button1);
8:    b.setOnClickListener(new OnClickListener() {
9:       public void onClick(View v) {
10:      t.setText(e.getText());
11:    }
12:   });
13: }

---

You add the final modifier to the declarations on lines 5 and 6. Final variables are not changed after they are assigned. That is true in this case, and it allows you to use these variables in the code for the Button. If the variable e is not declared final, you see this error in Eclipse:

Click here to view code image

Cannot refer to a non-final variable e inside an inner class defined in a different
method

This error occurs on line 10. In line 10, you use the variable e, but you are in an inner class. Line 8 declares a new instance of the class OnClickListener(). Using a variable that might change in a separate class like this is not allowed. By declaring e as a final variable, you can use it because you are assured it is not changing. You can also make the EditText a field in the class that would have global scope and be visible to all methods.

The code to update the TextView from the EditText field occurs on line 10. The text is read from variable e and set in variable t. Line 10 is in the onClick() method for Button b. Setting the onClickListener() in line 8 tells Button b to listen for clicks. When a click on the Button occurs, the onClick() method of the OnClickListener fires and the code runs to update the TextView.

Make these modifications, and run the app in the emulator to watch the interaction occur.

A. The ADT Bundle is the quickest and easiest way to start Android development, but if you have an existing Eclipse instance or are using an IDE other than Eclipse, you should be able to install the Android SDK, platform, and platform tools as separate pieces and continue to use the development environment that you are familiar with.

Q. Should I use the visual tool for creating user interfaces?

A. Generally, yes, but this chapter just introduces this tool. As you learn more about Android layouts, you might find yourself using both the tool and modifying XML directly.

2. How do you add a Button to the screen using the visual tool?

2. Just drag and drop the Button from the palette to the app canvas.