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.

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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>