Android Tutorial Part I

The WouldYaActivity

Now, set up the Scene to play the game. Start by retrieving a random Celebrity that was saved to the API and displaying it on a new tab, which we will link to a new activity, WouldYaActivity. What’s a WouldYa, you ask? You'll find out in part II of the Tutorial! But for now...

Add the UI

First, we will create a new layout file called wouldya_layout.xml and add the necessary UI components:

1. ImageView to hold the Celebrity image.
2. TextView for Celebrity name.

Enter the following code in the layout file:

<?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"
            />
            <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>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-50dip"
        android:gravity="center_horizontal">
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_marginTop="0dip">
    </LinearLayout>
</LinearLayout>

And the Activity should look like this:

We also have to add some resources for the tab appearance, to the appropriate res/drawable directories. Add the file icon_wouldya_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_play_blue"
    android:state_selected="true" />
    <item android:drawable="@drawable/button_play_gray" />
</selector>

The WouldYaActivity Class

Next, add a new activity class, WouldYaActivity. First, add the following data members:

private Celebrity   m_leftCeleb;
private ImageView   m_leftCelebImageView;
private TextView    m_leftCelebNameTextView;
private FatFractal ff = Hoodyoodoo.getFF();

The naming of the members anticipates the addition of another celebrity, which we do in Section II.

Next, we create the methods we need in WouldYaActivity.

We want to use a single CRUD method that will retrieve all the objects needed from the API at once.

This line of code returns all objects found at that API collection. We will create the loadCelebrities method to test this out.

private void loadCelebrities() {
    try {
        List celebArray = ff.getArrayFromUri("/Celebrity");
        int r = new Random().nextInt(celebArray.size());
        m_leftCeleb = celebArray.get(r);
        m_leftCelebNameTextView.setText(m_leftCeleb.getFirstName() + " " + m_leftCeleb.getLastName());
        if (m_leftCeleb.getImageData() != null) {
            Bitmap bm = BitmapFactory.decodeByteArray(m_leftCeleb.getImageData(), 0, m_leftCeleb.getImageData().length);
            m_leftCelebImageView.setImageBitmap(bm);
        }
    } catch (FFException e) {
        e.printStackTrace();
    }
}

This code does the following:

1. Retrieves all of the Celebrity objects from the API anonymously and populates the results to celebArray using a synchronous method.
2. Selects a random Celebrity object from celebArray and sets it to m_leftCeleb.
3. Sets the text field of m_leftCelebNameTextView to the concatenation of the celebrity's first and last names.
4. Sets the background image for m_leftCelebImageView using a bitmap created from the image data from m_leftCeleb.

Now, connect up your UI components from wouldya_layout.xml. Add the following onCreate method:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.wouldya_layout);
    m_leftCelebImageView      = (ImageView)   findViewById(R.id.leftCelebImageView);
    m_leftCelebNameTextView   = (TextView)    findViewById(R.id.leftCelebTextView);
    loadCelebrities();
}

Finally, as always, we need to declare our new Activity in AndroidManifest.xml. Add the following to the application element:

When you run the app, it loads and populates the WouldYaViewController Scene. Then, if everything is working right, it successfully retrieves a Celebrity object, randomly, and populates the UI.

Side note: You may notice, when this Scene loads, the end-user is not yet authenticated. Until the end-user attempts to affect data on the API, they may retrieve objects anonymously.

Summary

In this tutorial, we have created our unit tests for all CRUD actions for a our very own Celebrity class we created as well as authentication without having to translate in and out of NSDictionary objects or use some other third party object models. We have used both synchronous as well as asynchronous methods within the tests to make sure they operate correctly.

Another key concept that we have demonstrated is the power of creating a complex object. In this case, an object with a blob (an image) that is seamlessly persisted and retrieved from the API. There is virtually no limit to the objects that you can exchange with your API. In fact, one could easily persist CelebrityActivity if one wanted to.

We have also built a Scene that Creates a Celebrity and a second one that Retrieves it. The CelebrityActivity Scene shows a nice pattern for authentication and the WouldYaActivity shows that you can retrieve objects from NoServer APIs anonymously which is very convenient for the developer and can greatly improve the end user experience with your application.

NEXT: Tutorial Part II, Using Queries