Ripple effect does not work in RelativeLayout

Question

I'm trying to implement ripple effect in a RelativeLayout on API 22 but it doesn't show up. However the same ripple works in a Button.

The code for my ripple drawable is as follows:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#d1c4e9">
    <item android:id="@android:id/mask"
        android:drawable="@android:color/white" />
    <item android:drawable="@drawable/rect"/>
</ripple>

Code for Relative Layout is as follows:

<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="match_parent"
    tools:context=".MainActivity"
    android:background="@drawable/ripple">
</RelativeLayout>

After this the ripple is set as a background on Button and RelativeLayout. The ripple on button works great but it doesn't show up on the RelativeLayout at all.

Can anyone tell me what am I doing wrong?

Raghunandan: yes, its in drawable-v21 and works perfectly for a button but not for relative layout — Varun Kumar, Aug 11 '15 at 11:30
@VarunKumar what happens when you click on `RelativeLayout`. Do you any other child views taking focus??. Post your relative layout code. the xml. lets see if we can reproduce your problem — Raghunandan, Aug 11 '15 at 11:33
@Raghunandan Nothing happens when I click on the RelativeLayout. — Varun Kumar, Aug 11 '15 at 11:37
@Raghunandan I even get the background color which I have set by help of rect drawable inside the ripple drawable given in the code above. But ripple does not take place when I click on the relative layout — Varun Kumar, Aug 11 '15 at 11:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/86693/discussion-between-raghunandan-and-varun-kumar). — Raghunandan, Aug 11 '15 at 11:45

score 34 · Accepted Answer · answered Aug 11 '15 at 11:47

34

Adding this attribute android:clickable="true" works. Tested on Nexus 5

answered Aug 11 '15 at 11:47

Raghunandan

132,755
26
225
256

score 9 · Answer 2 · answered Jan 07 '16 at 04:23

9

In addition to what Rahunandan said, if you are using appcompat-v7 support library you also need to add android:background="?attr/selectableItemBackground" .

answered Jan 07 '16 at 04:23

Ali Kazi

1,561
1
15
22

how are you supposed to add another background attribute when you already have one??? – Wale Jun 01 '19 at 11:19
1

If you already have a background attribute you can set a foreground attribute instead. Try experimenting with what works best for your UI. Try setting the existing background as foreground and the `selectableItemBackground` as background. If setting foreground doesnt work for you, you can add a `LinearLayout` outside of your view and set `android:background="?attr/selectableItemBackground"` on the `LinearLayout`. Hope that makes sense. – Ali Kazi Jun 03 '19 at 00:34
you're right, it does help big time! So what I did was just to set it as my foreground, I have actually done that before but the color I used was not obvious, now It does. Thanks. – Wale Jun 03 '19 at 10:51

score 8 · Answer 3 · edited Dec 10 '17 at 13:01

8

This attributes in the layout.

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

edited Dec 10 '17 at 13:01

Derlin

9,572
2
32
53

answered Nov 03 '17 at 14:11

Vic

171
1
7

score 1 · Answer 4 · answered Dec 08 '21 at 08:57

1

For me, this works (API 23 and above)

    android:background="@drawable/your_background"
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground"

answered Dec 08 '21 at 08:57

tuanvn91

1,159
1
6
8

anand krish · Answer 5 · 2017-06-08T13:14:54.677

In my case ripple effect is working after the first click, but for first click it didn't work for me. Have changed the background selector file with android:state_activated="true" and in main.xml android:clickable="true" then it's work fine for all time.

selector.xml (under res\drawable\selector.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:drawable="@drawable/card_bg_pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:state_activated="true" android:drawable="@drawable/card_bg_focused" android:state_enabled="true" android:state_focused="true"/>
<item android:state_activated="true" android:drawable="@drawable/card_bg_selected" android:state_enabled="false" android:state_selected="true"/>
</selector>

In activity_main.xml

 <com.mysample.RecyclingImageView
    android:id="@+id/imageview_overlay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/selector"
    android:clickable="true"/>

what do you mean? there doesn't seem to be a ripple here. – srrvnn Nov 21 '17 at 15:03 — srrvnn, Nov 21 '17 at 15:03

Ripple effect does not work in RelativeLayout

5 Answers5