Android Session4

Android: Session 4PowerOfTwo

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:

ANDROID: SESSION-4

APPING-MASTERS-2013-VERDIER

PAGE 1 OF 6

We are also going to tweak the The MainActivity class. Instead of being a regular Activity, we are going to subclass 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.

public class MainActivity extends ListActivity

ANDROID: SESSION-4


PAGE 2 OF 6

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:

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.

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 fillMaps = new ArrayList(); for (int i = 0; i < 200; i++) { HashMap map = new HashMap(); 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);}

ANDROID: SESSION-4


PAGE 3 OF 6

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:

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);}

ANDROID: SESSION-4


PAGE 4 OF 6

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:

Step 6: Parameter retrieval

Use the following code in your PowerDetailActivity class to retrieve your parameter:

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.

Intent intent = new Intent(this, fr.epita.poweroftwo.PowerDetailActivity.class);intent.putExtra("numberVal", position);startActivity(intent);

Bundle bundle = getIntent().getExtras();int number = bundle.getInt("numberVal", 0);

ANDROID: SESSION-4


PAGE 5 OF 6

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

ANDROID: SESSION-4


PAGE 6 OF 6

Documents

Android Session4