Start a new Activity from a ListView

Android Custom Lists: 1 2 3 4 5 6 7 8

When a user taps on one of your list items, you'll want to take them elsewhere. This could be a map, a web page showing more information about the item (think recipe and recipe instructions) or, in our case, a bigger image of the item selected.

You've created new Activities in previous sections. So right-click your app name in the Project Explorer window on the left. From the menu that appears, select New > Activity > Empty Activity. For the Activity name, type BigImage. Make sure Generate Layout File is checked and click Finish.

Click on the activity_big_image.xml tab to get at the layout. The only thing we need here is an ImageView. From the Images category of the Palette, drag an ImageView onto your layout (or onto the Component Tree). Again, you'll get the Resources dialogue box popping up. You can select one of your flags from the list. It doesn't matter which one as this is a placeholder image.

You can add constraints from the ImageView to the edges of the screen. Change the ID property to bigFlagImage:

Properties for an ImageView

For the contentDescription, you can either type some text directly into the textbox here, or add a string resource. We're leaving it blank, though.

Let's go to the code for this new Activity.

Just as we've done previously, we can set up a listener to listen out for taps and clicks on our list Items.

Click back on your MainActivity.java file. Set up the following listener for your myListView ListView. Add it to the onCreate method, just below your setAdapter line:

myListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override
public void onItemClick(AdapterView parent, View v, int position, long id) {

}

});

As usual, if you get any red text, add the missing libraries by pressing ALT + ENTER on your keyboard. (If that doesn't resolve the issue, add import android.view.View; and import android.widget.AdapterView; to the top of your code.)

The listener is called setOnItemClickListener, and it sets up a new OnItemClickListener for the AdapterView. The method implemented for this listener is called onItemClick. The only parameter between its round brackets that we need is the position one. This can get us the position in our array of the item that was clicked. Here's the first line to go in your onItemClick method:

RowItem list_row = myRowItems.get(position);

Our array is called myRowItems. We're using the position variable to get all the information from the row that was selected. We're then storing it all in a variable called list_row. This list_row variable needs to be a RowItem type, which is our class that we created to get and set row items.

We can now set up the Intent. Add this line below the previous one:

Intent bigFlagIntent = new Intent( getApplicationContext( ), BigImage.class );

You might get red text for Intent, so you'll need to do the ALT + ENTER thing again. Or add import android.content.Intent; to the top of your code.

You've created Intents before, so we won't explain them here. But notice that the context passed in is getApplicationContext again. In previous lessons, we just used this as the context. The name of the class that we're passing to the Intent is the one we've just set up - BigImage.class.

To pass the big image name over to our new Activity, we can add a putExtra line. This one:

bigFlagIntent.putExtra( "IMAGE_NAME", list_row.getBigImageName() );

The key name we've came up with is IMAGE_NAME. We're using list_row.getBigImageName to get the name of the big image.

Finally, for this listener, we need to start the Activity:

startActivity( bigFlagIntent );

Your onCreate method should look like this:

Setting up a listner for a ListView

We can now write code for the new Activity.

Click back on your BigImage.java file. In the onCreate method, just after the setContentView line, add this to get a new intent:

Intent flagIntent = getIntent( );

(If Intent turns red, use ALT + ENTER again.)

Next, we need to get the name of that big image we passed in. Here's the line you need:

int big_flag_int = flagIntent.getIntExtra("IMAGE_NAME", 0);

The thing to notice about this line is that the big_flag_int variable we're setting up is an integer, and that we're using getIntExtra. You may think that, because we're passing in the name of a big image, we'd need a String variable.

However, behind the image name, there's an ID for each of your drawable resources. This ID is an integer value, and it's this ID integer that gets passed, rather than the String name of the image.

In between the round brackets of getIntExtra is our key name, IMAGE_NAME. The 0 on the end is a default value that is required. Miss it out and you'll get errors.

Next, we need to grab a reference to that ImageView we placed on the layout. Add this line:

ImageView myImage = (ImageView) findViewById(R.id.bigFlagImage);

(ALT + ENTER for any red text for ImageView, or add import android.widget.ImageView; at the top of the code.)

Finally, set an image resource for the myImage ImageView with this line:

myImage.setImageResource( big_flag_int );

Your code should look like this:

Java code for a second Android activity

Test it out. Select any of the small flag images in your list. It should lead to a new Activity where the big version will be displayed. Incidentally, if you want to get back to the list after a big image is displayed, click the arrow in the bottom left of the emulator:

Emulator showing a running Android app

And that's just about it for a custom list view. In a later section, you'll be exploring the WebView control, and you could have one of these as the second Activity, instead of an ImageView. But you have the basics in place!

Now that we've finished all the coding for a ListView app, and got everything up and running quite well, we can have a look at how to style the rows in the list. You'll learn about colour values and gradients, and how to add these to an XML file. You'll then apply your custom colours to your list. That's all in the next lesson below.