Home and Learn: Android Course
Android RecyclerView - Detect List Item Clicks
In the previous two lessons, we've designed a flag list app and written java code to get it working. However, you'll have noticed that nothing happens when you click on one of your flag items. What we'd like to do is to go to a new page (activity) when a flag is clicked. This will then have more information about that flag.
Our RecyclerView Adapter java class has a couple of methods built into it to detect clicks. First, though, we need to create an Activity that will launch when we click a flag item on our list.
Create New Android Activity
Right click the app folder in the Project Files area to the left of Android Studio. From the menu that appears, select New > Activity > Empty Views Activity. As the Activity Name, type FlagActivity (all one word). Make sure Java is the selected language and click Finish. Android Studio will create two files for you, activity_flag.xml and FlagActivity.java.
In the editor, select the activity_flag.xml file. Drag an ImageView widget onto the Component Tree or the blank activity. You'll see the Pick a Resource dialog box appear. Select one of your big flags as the resource. It doesn't matter which one. Set some constraints for the image. It should all look like something this:
Note the id for the image - imageView. This is the default name. We'll leave as it is. The constraints we've add tie the image to the center of the screen.
You could design something more sophisticated for this activity. For example, we could have added a TextView to add some text about the flag. Or we could have designed a fancy card, like we did in a previous section. But, as we're keeping it simple, we'll stick with just displaying a big version of the selected flag.
If you go back to your RecyclerViewAdapter java code for a moment. Notice the code at the bottom that refers to clicks:
// CATCH THE CLICK/TAP
void setClickListener(ItemClickListener itemClickListener) {
this.clickListen = itemClickListener;
}
// onItemClick METHOD INSIDE THE INTERFACE DETECTS
CLICK EVENTS
public interface ItemClickListener {
void onItemClick(View view, int position);
}
We have a method called setClickListener and an interface called ItemClickListener. Inside of the interface is a method called onItemClick. We'll need to refer to these methods to implement our click detection.
Go back to your MainActivity.java file. Just below the setAdapter line, add this code:
adapter.setClickListener(new MyRecyclerViewAdapter.ItemClickListener() {
@Override
public void onItemClick(View view, int position) {
}
});
You can see we've used setClickListener, ItemClickListener, and onItemClick. Your onCreate method should look like this (the new code is on lines 33 to 38, in the image above):
In between the curly brackets of the onItemClick method is where you place the code to launch a new activity.
The first thing we can do is to get a reference to our RowItem ArrayList:
public void onItemClick(View view, int position) {
RowItem list_row = myRowItems.get(position);
}
Our ArrayList is called myRowItems. We can use the position variable to get the position of an item in our myRowItems ArrayList. This is placed in the variable called list_row. It allows us to grab any of the values from our RowItem class. For example:
String heading = list_row.getHeading();
String subheading = list_row.subHeading();
Aside
If you wanted to, you could add another getter and setter to the RowItem class. These could set and get some extra info about the flag:
private String bigText;
public void setBigText(String someText) {
this.bigText = someText;
}
public String getBigText() {
return this.bigText;
}
In your fillArrayList method, you could then add a new item:
RowItem row_one = new RowItem();
row_one.setHeading("France");
row_one.setSubHeading("Flag of France");
row_one.setBigText("SOME MORE INFO HERE");
You'd need a TextView on your activity_flag.xml file. The TextView could be used receive the more info text. (We'll add the code to do this at the end.)
End Aside
However, all we want to do is to grab the big image. So, add this Intent to your onItemClick code, just below the RowItem line:
Intent bigFlagIntent = new Intent( MainActivity.this, FlagActivity.class );
We did Intents in a previous lesson, so won't go over it again.
Next, we can use putExtra to send data to the FlagActivity.class file. Add this line:
bigFlagIntent.putExtra( "IMAGE_NAME", list_row.getBigImageName() );
IMAGE_NAME is just a label. You can call it almost anything you like. After a comma, we have this:
list_row.getBigImageName()
This is a method in our RowItem class - getBigImageName. We're sending this to the new activity.
Finally, start the activity by adding this line:
startActivity(bigFlagIntent);
Your code should look like this (the new lines are on lines 37 to 39, in the image below):
You can't try it out just yet.
Go back to your FlagActivity.java file. We've used putExtra to put data into the activity. We now need to get the data back out. Add these lines, then, to the onCreate method:
Intent flagIntent = getIntent();
int big_flag = flagIntent.getIntExtra( "IMAGE_NAME", 0 );
ImageView myImage = (ImageView) findViewById(R.id.imageView);
myImage.setImageResource(big_flag);
If you get red flagged, click inside of Intent. Press ALT + ENTER on your keyboard to add the import line. Do the same for ImageView. If that doesn't work for you, add these two lines to the top of the code, with the other import lines:
import android.content.Intent;
import android.widget.ImageView;
And here's what the code should look like:
So, we set up an Intent using getIntent. The Intent we've set up is called flagIntent. The second line is of type int. And we don't use getExtra, like we did last time, but getIntExtra. That's because, behind the scenes, the image is actually referenced by an integer.
The last two lines get a reference to that ImageView widget we placed on the activity_flag.xml file, the one we left on the default name of imageView. After that, we need to set the Image Resource to point to our big_flag.
Now we can test it out. (We'll come back to how you would add some extra info about the flag.)
Run your app. Click an item on your list. It should take you to a new activity where the big version of the flag is displayed:
Going back to adding some extra information to the activity, instead of just having a flag, you would add this line to the MainActivity.java file:
bigFlagIntent.putExtra( "FLAG_INFO", list_row.getBigText() );
This assumes you added the new methods to the RowItem file, and added new lines to your fillArrayList method.
Go back to your activity_flag.xml file. Add a TextView to the activity, just below the image:
The id for the TextView has been changed to textExtraInfo. Now add these lines to the FlagActivity.java file:
String big_text = flagIntent.getStringExtra("FLAG_INFO");
TextView myText = (TextView) findViewById(R.id.textExtraInfo);
myText.setText(big_text);
When you run the app and click on a flag, you'll see the extra info:
OK, we'll leave it there and move on. In the next section, we'll take a closer look at Android layouts.
< Custom Adapter | Android Layouts >
Back to the Android Contents Page