RecyclerView item touch to highlight

Question

I am using a RecyclerView and I am not able to see any feedback when I touch on the item of the RecyclerView. How do I achieve it?

I am trying to show a feedback to the user when they are touching the row of RecyclerView. Something like a ripple effect.

I want to know how to achieve it in a specific row of the RecyclerView.

This is the recycler view's custom row layout.

<?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="50dp"
    android:id="@+id/drawer_row"
    android:background="?android:attr/selectableItemBackground"
    android:clickable="true">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="30dp"
        android:layout_marginStart="30dp"
        android:layout_toEndOf="@+id/navigation_image"
        android:layout_toRightOf="@+id/navigation_image"
        android:textSize="17sp" />

    <ImageView
        android:id="@+id/navigation_image"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="30dp"
        android:layout_marginStart="30dp" />

    <TextView
        android:id="@+id/horizontal_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true"
        android:background="#F1F1F1" />


</RelativeLayout>

This is the layout of the Activity having the RecyclerView

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/windowBackground">


    <RelativeLayout
        android:id="@+id/nav_header_container"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/ic_drawer_header">

        <ImageView
            android:id="@+id/circle_imageview"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/profile_pic"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="John Doe"
            android:textSize="20sp"
            android:textColor="#ffffff"
            android:layout_below="@+id/circle_imageview"
            android:layout_alignLeft="@+id/circle_imageview"
            android:layout_alignStart="@+id/circle_imageview"
            android:layout_marginTop="5dp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Transaction Technologies"
            android:layout_below="@+id/textView"
            android:layout_alignLeft="@+id/textView"
            android:layout_alignStart="@+id/textView"
            android:textColor="#ffffff"
            android:layout_marginTop="5dp" />

    </RelativeLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/drawerList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/nav_header_container" />


</RelativeLayout>

I just need to highlight/give feedback of the row which is being touched by the user. How do I achieve it?

Thanks in advance.

possible duplicate of [RecyclerView onClick](http://stackoverflow.com/questions/24471109/recyclerview-onclick) — Satyen Udeshi, Aug 03 '15 at 05:10

score 9 · Answer 1 · answered Aug 03 '15 at 05:26

9

You need to add android:focusable="true" in your custom row item for RecyclerView

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/drawer_row"
    android:background="?android:selectableItemBackground"
    android:focusable="true"
    android:clickable="true" >
</RelativeLayout>

answered Aug 03 '15 at 05:26

Rohit Suthar

2,635
1
22
27

are u change background attribute ? – Rohit Suthar Aug 03 '15 at 05:35
sorry, what do you mean ? – Bullionist Aug 03 '15 at 05:36
2

Recylcer View Need to add `android:focusable="true"` for focus do focus on particluar view and `android:clickable="true"` use for allow click on click on row. background effect is comming by `android:background="?android:selectableItemBackground"` on row parent view.. – Rohit Suthar Aug 03 '15 at 05:42

Anirudh Sharma · Answer 2 · 2015-08-03T05:41:11.203

You can add a Ripple effect by using THIS LIBRARY.Include it in your Gradle files using.

compile 'com.thomsonreuters:rippledecoratorview:+'

Simply put your row layout in a RippleDecoratorView.For eg:

<com.thomsonreuters.rippledecoratorview.RippleDecoratorView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:layout_margin="4dp"
  rdv:rdv_rippleColor="@android:color/holo_blue_dark"
  rdv:rdv_rippleAnimationFrames="60"
  rdv:rdv_rippleAnimationPeakFrame="15"
  rdv:rdv_rippleMaxAlpha="0.8"
  rdv:rdv_rippleAnimationDuration="600"
  rdv:rdv_rippleRadius="50dp">



  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/drawer_row"
    android:background="?android:attr/selectableItemBackground"
    android:clickable="true">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="30dp"
        android:layout_marginStart="30dp"
        android:layout_toEndOf="@+id/navigation_image"
        android:layout_toRightOf="@+id/navigation_image"
        android:textSize="17sp" />

    <ImageView
        android:id="@+id/navigation_image"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="30dp"
        android:layout_marginStart="30dp" />

    <TextView
        android:id="@+id/horizontal_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true"
        android:background="#F1F1F1" />


</RelativeLayout>

</com.thomsonreuters.rippledecoratorview.RippleDecoratorView>

Or you can use any of these libs acc to your requirement:

1>https://github.com/balysv/material-ripple

2>https://github.com/siriscac/RippleView

3>https://github.com/traex/RippleEffect

I just want the user to get some feedback, when they are touching on a recycler row. This does not work. — Bullionist, Aug 03 '15 at 05:13
Something like a ripple effect, which clicking on an row of the recyclerview. — Bullionist, Aug 03 '15 at 05:16
I have having problem, putting this inside my row layout. Can you show me how to do that ? — Bullionist, Aug 03 '15 at 05:30
@ShaikMDAshiq have you added a click listener to your views and see if click is actually received? — Anirudh Sharma, Aug 03 '15 at 05:51

score 1 · Answer 3 · edited May 23 '17 at 12:31

I can help you but I will need some feedback from you as well. In the onCreateVIewHolder inside your recycler View adapter you must have defined textViews and assigned it to the elements inside the sample recycler view. Add this. Make sure you define the layout outside the function so its accessible throughout the class

RelativeLayout layout;

layout=(RelativeLayout)view.findViewById.(R.layout.drawer_row)

Then go to you recycler view adapter and in the onBindViewHolder define

holder.layout.setOnClickListener(new View.OnClickListener() {

 @Override

 public void onClick(View v) {

 // Handle onClick event

     }
  });

In the onClick event you can add any kind of feedback you want to the user to experience such as starting a new activity, toasts, messages or in this case a ripple effect. You can use a custom library for ripples such as these

Ripple effect for lollipop views

https://android-arsenal.com/details/1/980

https://github.com/balysv/material-ripple

Thanks. You were close. Actually, we should be using onTouch listener. — Bullionist, Aug 03 '15 at 05:54
Thats true. Either way the format of implementing it is the same. If you want to add touch events to the individual images or texts within each recyclerview row then define their onClick / onTouch listener in the same way. — Varun Agarwal, Aug 03 '15 at 06:49

score 0 · Answer 4 · answered Aug 03 '15 at 06:00

0

Ripple effects are not supported in pre-Lollipop devices.

Still use this material-ripple

compile 'com.balysv:material-ripple:1.0.2'

Apply ripple on holder.drawView

MaterialRippleLayout.on(holder.drawerView)
           .rippleColor(Color.RED)
           .create();

Or you can apply from xml

<com.balysv.materialripple.MaterialRippleLayout
    android:id="@+id/ripple"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Button inside a ripple"/>

</com.balysv.materialripple.MaterialRippleLayout>

answered Aug 03 '15 at 06:00

Azim Ansari

1,378
11
20

I did this holder.drawerView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { MaterialRippleLayout.on(holder.drawerView) .rippleColor(Color.RED) .create(); } }); – Bullionist Aug 03 '15 at 06:09
and then, it is sizing the view to wrapcontent. – Bullionist Aug 03 '15 at 06:09
Look at the demo project in library. He had applied Ripple effect on Recycler row item. And not like you. See [this](https://github.com/balysv/material-ripple/blob/master/demo/src/main/java/com/balysv/materialripple/demo/DemoRecyclerActivity.java) – Azim Ansari Aug 03 '15 at 06:37

RecyclerView item touch to highlight

4 Answers4