Android Tutorial Part II

Adding the UI

Next, we add the necessary UI components to wouldya_activity.xml. We will add the following elements:

1. Add an ImageView to hold the second Celebrity’s image.
2. Add a TextView for the second Celebrity’s name.
3. Add an ImageButton to play the game.
4. Add an ImageButton that is used to select the gender preference for the user.

The complete code of the file is given here. You entered much of it in the Part I of the tutorial, but we repeat it here for context and reference:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/wouldYaView">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/leftCelebImageView"
                android:layout_width="100dip"
                android:layout_height="150dip"
                android:background="@drawable/mystery2" 
                android:layout_marginBottom="10dip" 
                android:layout_marginRight="10dip"
                android:onClick="celebrityWasPicked"
            />
            <TextView
                android:id="@+id/leftCelebTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Medium Text"
                android:textAppearance="?android:attr/textAppearanceSmall" 
                android:hint="Celebrity 1"
            />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/rightCelebImageView"
                android:layout_width="100dip"
                android:layout_height="150dip"
                android:background="@drawable/mystery3" 
                android:layout_marginBottom="10dip" 
                android:layout_marginLeft="10dip"
                android:onClick="celebrityWasPicked"
            />
            <TextView
                android:id="@+id/rightCelebTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Medium Text"
                android:textAppearance="?android:attr/textAppearanceSmall" 
                android:hint="Celebrity 2"
            />
        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-50dip"
        android:gravity="center_horizontal">
        <ImageButton
            android:id="@+id/playAgainImageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:src="@drawable/button_go" 
            android:onClick="playAgain"
        />
    </LinearLayout>
    <TextView
        android:id="@+id/pickOneTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Pick One!"
        android:textAppearance="?android:attr/textAppearanceLarge" 
    />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_marginTop="0dip">
    <ImageButton
        android:id="@+id/toggleGenderImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/button_gender_both" 
        android:layout_marginLeft="30dip"
        android:onClick="toggleGender"
    />
    </LinearLayout>
</LinearLayout>

The Scene should now look like this:

Lastly, make sure and connect up your UI components in the onCreate method of the WouldYaActivity class. Note: Some of these were set in Tutorial Part I, but we will include them here again for convenience.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.wouldya_layout);
    m_leftCelebImageView      = (ImageView)   findViewById(R.id.leftCelebImageView);
    m_rightCelebImageView     = (ImageView)   findViewById(R.id.rightCelebImageView);
    m_leftCelebNameTextView   = (TextView)    findViewById(R.id.leftCelebTextView);
    m_rightCelebNameTextView  = (TextView)    findViewById(R.id.rightCelebTextView);
    m_playAgainImageButton    = (ImageButton) findViewById(R.id.playAgainImageButton);
    m_toggleGenderImageButton = (ImageButton) findViewById(R.id.toggleGenderImageButton);
    m_playAgainImageButton.setVisibility(View.INVISIBLE);
    loadCelebrities();
}

Now, when you run the application, it will first load and populate the WouldYaActivity view.

Final result: successfully retrieved a random Celebrity, a second random and unique Celebrity and populated the UI:

Note: when this Scene loaded, we are not authenticated which shows that you are able to retrieve objects anonymously.

When you click on a Celebrity button with image (either the topCelebrityButton or bottomCelebrityButton), then a WouldYa is created and persisted to your app's API. If successful, the bottomResponseLabel and bottomResponseLabel labels appear as well as the playAgainButton which will loadCelebrities again when clicked.

Summary

In this part of the tutorial, we have explored how to create simple and more complex queries that will greatly enhance the performance and reliability of our application by reducing the amount of data handling the client is required to do by using simple language queries to filter result sets down to the information that the client needs.

Next, we will begin using events to extend the application further in Tutorial Part III.

NEXT: Part III, Event Handlers