42

I have a RecyclerView that expands the following grid item :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/children_tile_border"
    android:layout_marginTop="@dimen/children_tile_border"
    android:clickable="true"
    android:focusable="true"
    android:background="?selectableItemBackground"
    tools:ignore="RtlHardcoded">

        <com.example.app.ui.widget.SquareImageView
            android:id="@+id/child_picture"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:layout_alignParentBottom="true"/>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="68dp"
            android:background="@color/tile_text_background"
            android:gravity="center_vertical"
            android:layout_alignParentBottom="true">

            ..............
        </LinearLayout>
</RelativeLayout>

But the ripple effect doesn't appear unless I set the SquareImageView's visibility to invisible. It seems the ripple effect is drawn below the SquareImageView. How can I can I make it drawn over the SquareImageView?

Binoy Babu
  • 16,699
  • 17
  • 91
  • 134

6 Answers6

68

add below code to your parent layout 

android:clickable="true"
android:focusable="true"
android:background="?attr/selectableItemBackground"

if you want custom ripple effect add this ripple_custom.xml in your drawable-v21 

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

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

to support older version add ripple_custom.xml in drawable 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorHighlight" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>
Jinu
  • 8,665
  • 4
  • 32
  • 37
  • 2
    not working for me. I have a RelativeLayout item root with the above configurations : http://pastebin.com/fy3RcfCm, using android support library v23 – Koustuv Sinha Dec 12 '15 at 19:46
  • Is it working for you on all devices. I tried setting android:background="?android:attr/selectableItemBackground" to layout inside RecyclerView but it not works – Sagar Trehan Dec 24 '15 at 12:10
  • @Sagar Trehan some times in your child of parent will take click event i think that's the issue – Jinu Jan 06 '16 at 13:07
  • @Jinu I have a ImageView along with other views in item of ListView. When I gave above selector to ImageView ripple effect works but it does not appear because ImageView content is covering selector. For solving this I wrapped ImageView inside a RelativeLayout and add one more view in it covering width and height of ImageView in z order. I gave click event to this view and selector background. Applying these changes ripple effect appear correctly. But I dont want to introduce a new View doing this. Please suggest – Sagar Trehan Jan 07 '16 at 06:23
13

Change:

android:background="?selectableItemBackground"

To:

android:background="?android:attr/selectableItemBackground"

And add this to your SquareImageView

android:clickable="false"
Enzokie
  • 7,365
  • 6
  • 33
  • 39
9

We can wrap RecyclerView Item inside FrameLayout and set android:foreground property to it. Checkout following link for details. It works for me pretty well.

Community
  • 1
  • 1
Sagar Trehan
  • 2,401
  • 2
  • 24
  • 32
4

If you have a CardView + ImageView
just insert in CardView

android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"

And for RelativeLayout + ImageView
Insert in RelativeLayout

android:clickable="true"
android:focusable="true"
android:background="?attr/selectableItemBackground"

Or

android:focusable="true"
android:background="?attr/selectableItemBackground"

This codes worked for me

Mahdi Hossaini
  • 111
  • 1
  • 4
1

Your SquareImageView is filling up the entire space (width is match_parent and height is wrap_content) and so the SquareImageView receives the click event.

What worked in my case was setting the clickable state of all objects in your RelativeLayout to false:

android:clickable="false"

Just make sure your RelativeLayout handles the click event in your activity. In my code I set the RelativeLayout to a view v and set an onClick Listener on it to handle the CheckBox within my List item.

v.setOnClickListener(this);

Hopefully this helps anyone who reads it.

Kevin Kopf
  • 13,327
  • 14
  • 49
  • 66
Hugo Mulder
  • 61
  • 3
1

Above answers are correct. but I want to recommend the usage of android:foreground instead as it shows the ripple infront of the imageView.

On your root view, add the following.

android:foreground="@drawable/ripple_effect_color_primary"
android:clickable="true"
android:focusable="true"

I know it's a pretty late answer to such old thread. But who knows, someone might actually find it useful.

Sami Adam
  • 76
  • 3