ANDROID: SESSION-4

APPING-MASTERS-2013-VERDIER

Android: Session 4
PowerOfTwo
In this exercise, well display the first 200 power-of-two numbers in a list and well display a detailed view
of the formula in another activity.

Step 1: Setting up the list

The activity_main.xml file only needs to have a ListView widget. You need to use the id list for this
ListView because the Activity is going to look for it. Here the code for your XML:

PAGE 1 OF 6

ANDROID: SESSION-4

APPING-MASTERS-2013-VERDIER

<?xml version="1.0" encoding="utf-8"?>

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawSelectorOnTop="false" />

We are also going to tweak the The MainActivity class. Instead of being a regular Activity, we are going
to subclass ListActivity.
public class MainActivity extends ListActivity

When the only widget in the activity is a ListView, its easier to use a ListActivity (especially if you want
to bind an existing array of data to your list, directly in the XML).
If you want to display a TextView on top of your list, youll have to switch back to a regular Activity.

Step 2: creating the row UI

We have to define how the data will be displayed in the list. Well be using a second xml file to design our
row UI.
Add a new Other... -> Android XML layout file to your layout folder. Name it stantard_list_item.xml.
You can use the relative layout to design your cell. Here is a screenshot of the UI (the green arrows being
the relations between the widgets):

You need to give an id to the widget you want to display data into. In our case, we need to display the
number on the TextView on the left and the result of the power on the right TextView, so use the
number id and the powerResult id.

PAGE 2 OF 6

ANDROID: SESSION-4

APPING-MASTERS-2013-VERDIER

Step 3: Linking the UI and the data

The next step is to use our row design in our list. Put the following code in your PowerOfTwoActivity:
protected void onCreate(Bundle savedInstanceState)
{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// create the grid item mapping

String[] from = new String[] { "col_0"};
int[] to = new int[] { R.id.number };

// prepare the list of all records

List<HashMap<String, String>> fillMaps = new ArrayList<HashMap<String, String>>();
for (int i = 0; i < 200; i++)
{

HashMap<String, String> map = new HashMap<String, String>();

map.put("col_0", String.valueOf(i));

fillMaps.add(map);
}

ListAdapter adapter = new SimpleAdapter(this, fillMaps, R.layout.stantard_list_item,

from, to);

// Bind to our new adapter.

setListAdapter(adapter);

The from array contains tags that are going to be referenced in the data that we use to display our
power-of-two ListView.
The to array contains widget ids that are linked to the tags declared in the from.
The ListView uses the fillMaps list of data to know what to display inside the rows. Each entry in the
list contains the data for one row in the ListView. The data for a row is made of a map containing all the
value to display linked to a tag previously declared in our from array.
Next we create an adapter to link all those previously declared data to a layout.
The last step is to set our ListView to use this adapter.
Launch your application. It should display a list containing only the number on the left.
Modify the code to display the result inside the right TextView.

PAGE 3 OF 6

ANDROID: SESSION-4

APPING-MASTERS-2013-VERDIER

Step 4: Detailed formula

We want to display a detailed view when the user click on a row. To do this we need a new activity and
the related layout.
Add a new power_detail.xml android XML layout file. Create the following UI inside it:

To add a new activity to your application, in AndroidManifest.xml file add the following code inside the
application node:
<activity android:name="PowerDetailActivity"></activity>

Then add a new subclass of android.app.Activity named PowerDetailActivity.

This PowerDetailActivity job is to inflate the power.detail layout, read the parameter that has been
passed to it (the value of the number the user clicked on for example) and set the text for the 2 TextView.
For the time being, well only inflate the xml:
public void onCreate(Bundle savedInstanceState)
{

super.onCreate(savedInstanceState);

setContentView(R.layout.power_detail);
}

PAGE 4 OF 6

ANDROID: SESSION-4

APPING-MASTERS-2013-VERDIER

Step 5: Start the activity

The ListView provides the onListItemClick method to monitor the users click on the rows.
To start a new activity we are going to use an Intent to which we are going to add an extra param
containing the value whose power of two we want to display
y.
Add this code to your onListItemClick method:
Intent intent = new Intent(this, fr.epita.poweroftwo.PowerDetailActivity.class);
intent.putExtra("numberVal", position);
startActivity(intent);

Step 6: Parameter retrieval

Use the following code in your PowerDetailActivity class to retrieve your parameter:
Bundle bundle = getIntent().getExtras();
int number = bundle.getInt("numberVal", 0);

You can now finish the application and display the number and its power of two.

Step 7: Factoring
To make of application more generic we want to be able to display a list x power y (instead of only x
power 2).
Create a PowerOf class with the following fields:
number
exponent
result

Your field must be private and final.

Create a constructor that take the number and the exponent, store them and store the result.
Create an array of PowerOf objects and display them.

PAGE 5 OF 6

ANDROID: SESSION-4

APPING-MASTERS-2013-VERDIER

Now that your list is able to display your data, you need to modify your PowerDetailActivity to support
the power of n.

PAGE 6 OF 6