Hello, Android

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

</RelativeLayout>

As you can see, this defines two elements: <RelativeLayout> and <TextView>. RelativeLayout is a subclass of ViewGroup that defines the position of its children relative to each other. TextView is a subclass of View that represents a standard text field component. We’ll survey the most common UI elements and later in this book.

All of the attributes in the android namespace determine various properties of the associated element. For example, android:layout_width="match_parent" makes the RelativeLayout stretch to the same size as its parent (in this case, the main window of the app). The available attributes and values for each type of element are listed in the documentation for the corresponding class (e.g., View, ViewGroup, RelativeLayout, TextView). The value of android:text is a reference to a string resource, which we’ll explain in a moment.

Adding a Button

But first, we’re going to simplify the default layout a bit and change it to a single button, centered on the screen. Replace the existing activity_main.xml with the following:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    tools:context=".MainActivity" >

     <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_next" />

</RelativeLayout>

We’ve done two things here. First, we replaced the <RelativeLayout>’s padding attributes with android:gravity. This tells it to center all of its child views. Second, we changed the <TextView> element to a <Button> and gave a new value to its android:text attribute.

Unfortunately, you won’t be able to compile the project to see the button just yet. Instead, you’ll see an error message next to the android:text attribute saying something about a missing resource, which can be seen in the following figure:

Defining String Resources

When designing layouts for Android, you’ll rarely want to hardcode the value of button titles, labels, and other text fields into the layout’s XML file. Instead, you define string resources in a separate file and link to it from within the layout. This extra layer of abstraction makes it possible to reuse the same layout file with different string resources. For instance, you can display shorter instructions when in portrait mode versus landscape mode, or display English, German, Arabic, or Chinese instructions based on the device’s locale.

<string name="button_next">Next Page</string>

The name attribute defines the identifier for the resource. Eclipse should stop complaining about the missing resource, and you should now be able to successfully compile your project. In the emulator, you should see a button in the center of the screen with Next Page as its title:

<Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_next"

        android:onClick="nextPage" />

Logging Output

To figure out if our button is working, let’s log a message to the console whenever the button is tapped. Instead of Java’s conventional System.out.println(), we’ll use the Log class that is included with the Android platform. This is the preferred way to output messages to the console in Android apps due to its well-defined priority levels, which let you easily filter different types of messages. The most common Log methods are listed below from highest priority to lowest:

private static final String TAG = "MainActivity";

And, as with any other Java class, we need to import the Log class before we can use it, so add the following import statements to the top of MainActivity.java (we’ll need the View class, too):

import android.util.Log;

import android.view.View;

Then, implement the nextPage() method to output a debug message, like so:

public void nextPage(View view) {

     Log.d(TAG, "Switching to next page");

}

Remember that this is the name of the method that we hooked up in activity_main.xml, so it should get called every time the user clicks the button. Any method used as an android:onClick target needs to have the above signature (that is, it must be public, return void, and accept a single View object as a parameter). The parameter is a reference to the UI component that initiated the call, which in this case is the button that the user pressed.

You should now be able to compile your project, tap the button, and see the above message in the LogCat panel at the bottom of the IDE. This is where all log messages will be displayed when launching your application from within Eclipse. To display the LogCat panel, click Window, Show View, Android, and select LogCat.

import android.content.Intent;

Then, change the nextPage() method to the following:

public void nextPage(View view) {

     Intent intent = new Intent(this, SecondActivity.class);

     startActivity(intent);

}

After creating the intent, we can pass it to the built-in startActivity() function to execute it. The result should be a transition to the second activity when you click the Next Page button in the first activity. Right now, the second activity is just a static text field that says "Hello world!", but we’ll change that in the upcoming section.

Another Button

In this section, we’ll add another button to the main activity, then we’ll pass the selected button to the second activity for display. Change activity_main.xml to the following:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    tools:context=".MainActivity" >

     <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_red"

        android:onClick="nextPage" />

     <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_blue"

        android:onClick="nextPage" />

</LinearLayout>

Note that both buttons will call the same nextPage() method when the user taps them. This requires two new string resources: button_red and button_blue. In strings.xml, go ahead and add these resources:

<string name="button_red">Red Pill</string>

<string name="button_blue">Blue Pill</string>

You can delete the button_next element since we’ll no longer be using it. Before we start passing data with Intent objects, lets make sure we can tell which button was pressed using a simple Log message. In MainActivity.java, change the nextPage() method to the following:

public void nextPage(View view) {

     Intent intent = new Intent(this, SecondActivity.class);

     Button button = (Button)view;

     String message = button.getText().toString();

     Log.d(TAG, message);

     startActivity(intent);

}

All this does is fetch the title of the button via the getText() method and displays it via a Log.d() call. You’ll also need to import the Button class at the top of the file:

import android.widget.Button;

Now, when you compile the app, you should see two buttons in the top-left corner.

public void nextPage(View view) {

     Intent intent = new Intent(this, SecondActivity.class);

     Button button = (Button)view;

     String message = button.getText().toString();

     intent.putExtra(EXTRA_MESSAGE, message);

     startActivity(intent);

}

The intent.putExtra(EXTRA_MESSAGE, message); line adds the button’s title to the Intent object, which we can later retrieve via the EXTRA_MESSAGE constant. We still need to define this constant, so be sure to include the following at the top of the MainActivity class:

public static final String EXTRA_MESSAGE = "com.example.helloandroid.MESSAGE";

We’ve now successfully encoded some data to send from the main activity to the second activity. Next, we need to allow the second activity to receive this information. This requires two steps:

@Override

protected void onCreate(Bundle savedInstanceState) {

     super.onCreate(savedInstanceState);

     setContentView(R.layout.activity_second);

     Intent intent = getIntent();

     String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

     Log.d(TAG, message);

}

The onCreate() method is a special method defined by the Activity class. The Android framework invokes onCreate() whenever an Activity is started, and by overriding it in subclasses, we can add custom initialization behavior. For now, you can think of it as the constructor method for an Activity instance, but we’ll refine this concept a little bit in the next chapter.

The last three lines fetch the Intent data we sent from MainActivity.java and display it with Log.d(). The getIntent() method is another method defined by the Activity class which simply returns the Intent instance that started the activity. Then, we use the Intent class’s getStringExtra() method to find the value associated with the MainActivity.EXTRA_MESSAGE key. Note that defining the key as a constant in MainActivity.java is a best practice, as it lets the compiler make sure the key is typed correctly. There are similar methods for other data types (e.g., getFloatExtra() returns a float value).

The above method still needs access to the Intent and Log classes, so add the following lines to the top of SecondActivity.java:

import android.content.Intent;

import android.util.Log;

We also need to define another TAG variable in SecondActivity.java:

private static final String TAG = "MainActivity";

You should now be able to compile the project. Click either of the buttons, and have SecondActivity log the selected button title:

<TextView

        android:id="@+id/selected_title"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

The id attribute is necessary when you want to access a UI element from elsewhere in the application. The plus sign in @+id is only necessary when first defining the UI element (if you wanted to reference it from another UI file, you would not need it). The selected_title portion defines the unique ID of the element, which can be used as follows (define this in SecondActivity.java):

protected void onCreate(Bundle savedInstanceState) {

     super.onCreate(savedInstanceState);

     setContentView(R.layout.activity_second);

     Intent intent = getIntent();

     String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

     TextView textField = (TextView)findViewById(R.id.selected_title);

     textField.setText(message);

}

The global findViewById() method is defined by the Activity class, and it returns a View instance that has the supplied ID. Note that we have to cast the return value to a TextView so we can use the setText() method to display the selected button. The R.id.selected_title snippet is the conventional way to refer to UI components defined in XML files. The R class is generated automatically when you compile your project, and the framework populates it with constants for each element with an android:id attribute. This method of using static constants to refer to UI elements eliminates the possibility of referencing undefined elements (e.g., from a misspelled or omitted ID in the layout file).

Note that you’ll have to import the TextView class for the above onCreate() method to compile:

import android.widget.TextView;

One common mistake for Android beginners is to call findViewById() before calling setContentView(). The latter must be called first, otherwise findViewById() will return null.

The second view should now display either “Red Pill” or “Blue Pill” depending on which button you tapped in the main activity page. To switch between buttons, use the Back button on the device to return to the main page and select the one you want to test.  As you can see in the following image, selecting the Blue Pill button will display its text.