Android Tutorial Android Tutorial Part III

View the Project on GitHub FatFractal/hoodyoodoo

Add the TopCelebrity Scene

Note: No client code is required for an event handler as it creates only API functionality and cannot be accessed by the client directly. However, the data that is created in the TopCeleb resource can be accessed by the client.

Since the TopCeleb resource uses the Celebrity object type, there is no need to define another class in the client code, To use it in the application, we need to add a new Scene, and then populate it with data that is created for us by the event handler in TopCeleb.

First, we add a new activity. We will call this activity TopCelebActivity, in the package com.hoodyoodoo.droidapp.activity.

Next, we create a new layout called top_celeb_layout.xml. We can now add the UI components we need to this scene. We will add the following:

  1. Add an ImageView to display the image for the celebrity.
  2. Add a TextView to display the name of the celebrity.
  3. Add two TextViews that will display “Was Selected” and Was Rejected”.
  4. Add two TextViews that will display the actual results for “Was Selected” and Was Rejected”.

The code for the file is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >
  <ImageView
      android:id="@+id/topCelebImageView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:src="@drawable/mystery2" />
  <TextView
      android:id="@+id/celebrityNameTextView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Medium Text"
      android:textAppearance="?android:attr/textAppearanceMedium" />
  <TableLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="15dip"
      android:padding="15dip">
      <TableRow
          android:id="@+id/selectedTableRow"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" >
          <TextView
              android:id="@+id/selectedTextView"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="10dip"
              android:gravity="right"
              android:text="Was selected"
              android:textAppearance="?android:attr/textAppearanceMedium" />
          <TextView
              android:id="@+id/selectedValueTextView"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginLeft="10dip"
              android:gravity="left"
              android:text="Selected Count"
              android:textAppearance="?android:attr/textAppearanceMedium" />
      </TableRow>
      <TableRow
          android:id="@+id/rejectedTableRow"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" >
          <TextView
              android:id="@+id/rejectedTextView"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="10dip"
              android:gravity="right"
              android:text="Was rejected"
              android:textAppearance="?android:attr/textAppearanceMedium" />
          <TextView
              android:id="@+id/rejectedValueTextView"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginLeft="10dip"
              android:gravity="left"
              android:text="Rejected Count"
              android:textAppearance="?android:attr/textAppearanceMedium" />
      </TableRow>
      </TableLayout>
</LinearLayout>

When you are done, the scene should look like this...

We can now complete the TopCelebActivity implementation. First, we add the following instance variables:

private ImageView m_topCelebImageView;
private TextView m_celebrityNameTextView;
private TextView m_selectedValueTextView;
private TextView m_rejectedValueTextView;
private FatFractal ff = Hoodyoodoo.getFF();

Now, we implement some methods. We want to retrieve the latest top celebrity object, so we create a getTopCelebrity method:

public void getTopCelebrity() {
    try {
        Celebrity topCeleb = ff.getObjFromUri("/ff/resources/TopCelebrity");
        if (topCeleb != null) {
            if (topCeleb.getImageData() != null) {
                Bitmap bm = BitmapFactory.decodeByteArray(topCeleb.getImageData(), 0, topCeleb.getImageData().length);
                m_topCelebImageView.setImageBitmap(bm);
            }
            String name = "";
            if (topCeleb.getFirstName() != null) name = topCeleb.getFirstName();
            if (topCeleb.getLastName() != null) name = name + " " + topCeleb.getLastName();
            m_celebrityNameTextView.setText(name);
            if (topCeleb.getSelectedCount() != null) m_selectedValueTextView.setText(topCeleb.getSelectedCount().toString());
            if (topCeleb.getRejectedCount() != null) m_rejectedValueTextView.setText(topCeleb.getRejectedCount().toString());
        } else {
            System.out.println("getTopCelebrity did not retrieve a Celebrity");
        }
    }
    catch (FFException e) {
        e.printStackTrace();
    }
}

Then, we need to call getTopCelebrity in the onResume method:

public void onResume() {
    super.onResume();
    getTopCelebrity();
}

Now, make sure and connect up your UI components in top_celeb_layout.xml for the TopCelebActivity elements:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.top_celeb_layout);
    m_topCelebImageView             = (ImageView) findViewById(R.id.topCelebImageView);
    m_celebrityNameTextView         = (TextView)  findViewById(R.id.celebrityNameTextView);
    m_selectedValueTextView         = (TextView)  findViewById(R.id.selectedValueTextView);
    m_rejectedValueTextView         = (TextView)  findViewById(R.id.rejectedValueTextView);
}

As usual, we need to declare our new Activity in AndroidManifest.xml. Add the following to the application element:

<activity android:name="com.hoodyoodoo.droidapp.activity.TopCelebActivity" />

Add a Tab

Finally, we need to tell our Tab Activity about the new Scene. We therefore need to make some additions to the HoodyoodooActivity class. First, add another constant to refer to the new tab:

public static final String TAB_TOP_CELEB_TAG   = "TopCeleb";

Next, after the code for creating the two other tabs in onCreate, add the following:

// Tab for TopCeleb
TabSpec topCelebritySpec = tabHost.newTabSpec(TAB_TOP_CELEB_TAG);
topCelebritySpec.setIndicator("TopCeleb", getResources().getDrawable(R.drawable.icon_top_celeb_tab));
Intent topCelebrityIntent = new Intent(this, TopCelebActivity.class);
topCelebritySpec.setContent(topCelebrityIntent);

Finally, add the following line to add the tab to the tab host:

tabHost.addTab(topCelebritySpec);

For reference, we reproduce the complete class here:

public class HoodyoodooActivity extends TabActivity {
    public static final String TAB_WOULDYA_TAG     = "WouldYa";
    public static final String TAB_ADD_CELEB_TAG   = "AddCelebrity";
    public static final String TAB_TOP_CELEB_TAG   = "TopCeleb";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        TabHost tabHost = getTabHost();

        // Tab for WouldYa
        TabSpec wouldYaSpec = tabHost.newTabSpec(TAB_WOULDYA_TAG);
        wouldYaSpec.setIndicator("WouldYa", getResources().getDrawable(R.drawable.icon_wouldya_tab));
        Intent wouldYaIntent = new Intent(this, WouldYaActivity.class);
        wouldYaSpec.setContent(wouldYaIntent);

        // Tab for Add Celebrity
        TabSpec addCelebritySpec = tabHost.newTabSpec(TAB_ADD_CELEB_TAG);
        // setting Title and Icon for the Tab
        addCelebritySpec.setIndicator("AddCelebrity", getResources().getDrawable(R.drawable.icon_celebrity_tab));
        Intent addCelebrityIntent = new Intent(this, CelebrityActivity.class);
        addCelebritySpec.setContent(addCelebrityIntent);

        // Tab for TopCeleb
        TabSpec topCelebritySpec = tabHost.newTabSpec(TAB_TOP_CELEB_TAG);
        topCelebritySpec.setIndicator("TopCeleb", getResources().getDrawable(R.drawable.icon_top_celeb_tab));
        Intent topCelebrityIntent = new Intent(this, TopCelebActivity.class);
        topCelebritySpec.setContent(topCelebrityIntent);

        // Adding all TabSpec to TabHost
        tabHost.addTab(wouldYaSpec); // Adding wouldYaSpec tab
        tabHost.addTab(addCelebritySpec); // Adding addCelebrity tab
        tabHost.addTab(topCelebritySpec); // Adding topCelebrity tab
    }
}

That’s it!

Now, as soon as ratings are being captured in WouldYa’s, then the topCeleb will be populated by the event handler and can be viewed in this scene.

Final result: We successfully created a TopCelebrity on the API from an event handler. We have also added a scene to display the results.

Katy Perry

NEXT: Part IV, Server Extensions