Android RecyclerView Item Click Listener With Ripple Effect

By | December 21, 2015

We have seen how to create and set-up Items for RecyclerView and we have also tutorial on combination of  RecyclerView With CardView but we haven’t seen the implementation of click listener for items of RecyclerView ,There is no API call for setting  up click listener for RecyclerView item like that of ListView . In this tutorial we will be seeing how to  implement click listener for items of RecyclerView With Ripple Effect.

Android RecyclerView Ripple Item Click

Below Video is the demonstration of Item Click Listener for RecyclerView With Ripple Effect.

Build Gradle

Add the following lines to the dependencies section in your project’s build.grade file and sync . It includes design support library , recyclerView library .

dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile 'com.android.support:appcompat-v7:23.0.1'
 compile 'com.android.support:design:23.0.1'
 compile 'com.android.support:recyclerview-v7:23.0.1'
}

Drawable

Ripple effect works on Android Device with level 21 and above , Unfortunately It Won’t Work below API level 21(Pre-Lollipop) , so we will create custom_bg.xml file in drawable-v21 and also in drawable.

file : drawable-v21/custom_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/holo_blue_light">

    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

file : drawable/custom_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape>
            <solid android:color="@android:color/holo_blue_light"></solid>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@android:color/white"></solid>
        </shape>
    </item>
</selector>

XML Layout

Create a XML Layout “activity_main.xml” and modify as below , This Layout includes below “content_main” XML Layout.
file :activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.tutorialsbuzz.recyclerviewitemclick.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

Create a XML Layout “content_main.xml” and modify as below, This Layout Contains RecyclerView Inside Relative Layout .
file :content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.tutorialsbuzz.recyclerviewitemclick.MainActivity"
    tools:showIn="@layout/activity_main">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

Create a XML Layout “list_row.xml” and modify as below. This XML Layout Represents the Items of RecyclerView.

file :list_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/custom_bg"
    android:orientation="vertical">

    <TextView
        android:id="@+id/list_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Callback Interface

Create an Interface “ClickListener” with one abstract method itemClicked , We will be using this interface as callback interface for RecyclerView Item click.

file : ClickListener.java

public interface ClickListener {
    public void itemClicked(View view, int position);
}

RecyclerView Adapter

We have already seen how to set-up , so will skip on item set-up and will be explaining on setting on click for items of RecyclerView.

  • Create a class RVAdapter and Create a Inner Class ItemViewHolder .
  • Declare a ClickListener Variable Inside RVAdapter.
  • Have a method setClickListener method inside RVAdapter , This is used for initializing the ClickListener
  • Inside the Constructor of Inner Class , set up the onClicklistener for itemView and override the onClick method inside this method we make a call to itemCliked method of ClickListener Interface.

file : RVAdapter.java

package com.tutorialsbuzz.recyclerviewitemclick;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.ItemViewHolder> {

    private List<String> mItems;
    private ClickListener clicklistener = null;

    public RVAdapter(List<String> mItems) {
        this.mItems = mItems;
    }

    public class ItemViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

        private TextView mTextView;

        public ItemViewHolder(View itemView) {
            super(itemView);

            itemView.setOnClickListener(this);

            mTextView = (TextView) itemView.findViewById(R.id.list_item);
        }

        @Override
        public void onClick(View v) {
            if (clicklistener != null) {
                clicklistener.itemClicked(v, getAdapterPosition());
            }
        }
    }

    public void setClickListener(ClickListener clicklistener) {
        this.clicklistener = clicklistener;
    }

    @Override
    public void onBindViewHolder(ItemViewHolder itemViewHolder, int i) {
        itemViewHolder.mTextView.setText(mItems.get(i));
    }

    @Override
    public ItemViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_row, viewGroup, false);
        ItemViewHolder itemViewHolder = new ItemViewHolder(view);
        return itemViewHolder;
    }

    @Override
    public int getItemCount() {
        return mItems.size();
    }

}

MainActivity

Create a MainActivity and set up the content of this activity with above defined XML Layout and set-up the RecyclerView Implement the ClickListener Interface and override the itemClicked method inside this method we will create intent object start Launch new Activity

file : MainActivity.java

package com.tutorialsbuzz.recyclerviewitemclick;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements ClickListener {

    private RecyclerView recyclerview;
    private RVAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerview.setLayoutManager(layoutManager);

        ArrayList<String> items = new ArrayList<String>();
        for (int i = 0; i < 100; i++) {
            items.add("TextView_" + i);
        }
        adapter = new RVAdapter(items);
        recyclerview.setAdapter(adapter);

        adapter.setClickListener(this);
    }

    @Override
    public void itemClicked(View view, int position) {

        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        intent.putExtra("ItemPosition",position);

        startActivity(intent);
    }
}

Launch Activity On Recycler Item Click

On Click of item we will be launching new activity so set-up a new activity which will launched on click of items of RecyclerView.

XML Layout

file : second_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textview_01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="36sp" />

</RelativeLayout>

Activity

file : SecondActivity.java

package com.tutorialsbuzz.recyclerviewitemclick;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

public class SecondActivity extends AppCompatActivity {

    TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.second_activity);

        mTextView = (TextView) findViewById(R.id.textview_01);

        Intent intent = getIntent();
        int position = intent.getIntExtra("ItemPosition", -1);

        mTextView.setText("Item Positionn " + position + "  Clicked");

    }
}

More Tutorial On RecyclerView

  1. RecyclerView With Scrolling Behaviour.
  2. RecyclerView With CardView.
  3. RecyclerView Item Filter.
  4. RecyclerView Item Filter With Animation.
  • Amazing. That's called easy to understand and implement tutorial.

    Could you please write a tutorial on Material Transition ?
    Like when switching between Activities and Fragments

  • First off I want to say excellent blog! I had a quick question which I’d like to ask if you do not mind.
    I was interested to find out how you center yourself
    and clear your mind prior to writing. I have had
    a hard time clearing my mind in getting my thoughts out.
    I do take pleasure in writing but it just seems like the first 10
    to 15 minutes are wasted just trying to figure out how to begin. Any suggestions or hints?
    Many thanks!

  • En el mercado hay varias empresas que fabrican botellas de steel pero
    casi todas son de aluminio, por lo que tampoco son recomendables.

  • Pingback: Android RecyclerView With CardView - TutorialsBuzz()