RecyclerView - II, adding onClick to list items

We have a RecyclerView that displays a list of Github Repositories, but we might want to display more details of each of the repositories in the future, so we want each of the list items to react to our clicks. Let's see how we can do that. You can get the code for everything we have done up till now, here to follow along.

Overview

Setting up onClick in a RecyclerView is not as straightforward as setting up onClick on a button, but once you create it yourself it makes a lot more sense. What we are doing here is calling interface’s function in the ViewHolder’s onClick and defining what this function will do in the activity by implementing the interface in the activity.

1. Create an interface ListItemClickListener with an onClickListItem(can be named anything) method.
2. Create a ListItemClickListener member variable of the adapter called mOnClickListener.
3. Add a ListItemClickListener as a parameter to the constructor and store it in mOnClickListener
4. Implement View.OnClickListener in the ViewHolder class and add itemView.setOnClickListener(this); in the ViewHolder constructor.
5. Override onClick in the ViewHolder class and get the position being clicked using getAdapterPosition() and use the position to call mOnClickListener.onListItemClick(position), the function in the interface we created.
6. In the activity where the RecyclerView was created implement the ListItemClickListener interface.
7. Fix the adapter initialization since we changed the adapter constructor in the activity onCreate.
8. Override onClickListItem(int position) and use the position of the item clicked to do something with it. Since the data to the RecyclerView is usually passed from the same activity, we can use the position to get data of the item that is clicked.

In the Adapter

In the adapter class we add the following

    interface ListItemClickListener{
        void onListItemClick(int position);
    }

and create a member variable of type ListItemClickListener

    final private ListItemClickListener mOnClickListener;

and the change the constructor of the adapter to accept a parameter of type ListItemClickListener, in our case we create one since we did not have one.

    public RepositoryAdapter(ListItemClickListener onClickListener){
        this.mOnClickListener = onClickListener;
    }

implement onClickListener in the ViewHolder class

    public class RepositoryAdapterViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener

add itemView.setOnClickListener(this); to the constructor

    public RepositoryAdapterViewHolder(@NonNull View itemView) {
        super(itemView);
        ...
        ...
        itemView.setOnClickListener(this);
    }

and then override onClick in the ViewHolder, since we implement View.OnClickListener

        @Override
        public void onClick(View v) {
            int position = getAdapterPosition();
            mOnClickListener.onListItemClick(position);
        }

In the Activity

Now we just need to implement the interface we just created in the activity and fix the RecyclerView Adapter initialization

public class MainActivity extends AppCompatActivity implements RepositoryAdapter.ListItemClickListener

then fix adapter initialization:

    mRepositoryAdapter = new RepositoryAdapter(this);

and the finally override onListItemClick

    @Override
    public void onListItemClick(int position) {
        Toast.makeText(this, mRepos[position].getName(), Toast.LENGTH_SHORT).show();
    }

List Items are now clickable!

When we click on an item a Toast with the name of the repository is displayed. We could start a new activity with details of the activity, but to start an activity we need to create an intent. Intents can be used to start an activity in your own app or in some other app. In the next post let’s explore Intents.

You can find the code for everything we have done in this post here.

Hopefully, you feel more comfortable using RecyclerView. If you find any errors, have feedback, or just want to say hi please don’t hesitate to leave a comment below.