Android ripple effect overridden by selected state

Question

After I searched for a while, I could not find the answer to this question ...

I have a recycler view with elements that, when selected, have a red background and white text (previously the background is white and the text is black). For this, I use a selector.

I recently tried to add a ripple effect, but if I don’t click on an element, the background of the element will immediately turn red without ripple. I assume this is because the state of the state_selected selector overrides the ripple to sate_pressed?

Does anyone know if there is a way around this? Here is the selector code I'm using:

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/holo_red_dark" > <item> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/ripple" android:state_pressed="true"/> <item android:drawable="@android:color/holo_red_dark" android:state_selected="true"/> <item android:drawable="@android:color/white"/> </selector> </item> </ripple> 

Thanks in advance!

Answer 1

To create a selector background that has a ripple effect and shows the selected status, I do the following:

Start by defining a highlight color with some transparency:

• values ​​/colors.xml

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="selector_color">#660000ff</color> </resources> 

You probably want to have compatibility before Lellopop. Place a typical old school selector inside an accessible folder:

• hood / selector _background.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/selector_color" android:state_pressed="true"/> <item android:drawable="@color/selector_color" android:state_selected="true"/> <item android:drawable="@android:color/transparent"/> </selector> 

Then add the following layer to drawable-v21 folder:

• draw-v21 / selector_background.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <selector> <item android:state_selected="true" android:drawable="@color/selector_color" /> <item android:drawable="@android:color/transparent" /> </selector> </item> <item> <ripple android:color="@color/selector_color"> <item android:id="@android:id/mask"> <color android:color="@android:color/white" /> </item> </ripple> </item> </layer-list> 

Now you can use @drawable/selector_background for your selector.

Answer 2

It’s better if you close the recyclerview view in FrameLayout and set android: background = "? SelectableItemBackground" from FrameLayout and the child layout FrameLayout background = "@ drawable / background"

background.xml

 <item android:drawable="@color/red" android:state_selected="true"/> <item android:drawable="@color/red" android:state_focused="true"/> <item android:drawable="@color/red" android:state_pressed="true"/> <item android:drawable="@color/white"/> 

And then the child layout should have the android attribute : duplicateParentState = "true"

Answer 3

So, I have another case where I had to use a selector, as well as a list of layers for this

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true"> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorRipple"> <item> <layer-list> <item> <shape android:shape="rectangle"> <solid android:color="@color/grey_very_light" /> </shape> </item> <!-- ripple color --> <item android:bottom="1dp"> <shape android:shape="rectangle"> <solid android:color="@color/c_unread_notifications_item" /> </shape> </item> </layer-list> </item> </ripple> </item> <item> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorRipple"> <item> <!-- ripple color --> <layer-list> <item> <shape android:shape="rectangle"> <solid android:color="@color/grey_very_light" /> </shape> </item> <item android:bottom="1dp"> <shape android:shape="rectangle"> <solid android:color="@color/white" /> </shape> </item> </layer-list> </item> </ripple> </item> </selector> 

It worked for your need, what you can do, just replace the ripple element with your shape if you don't have layers. Hope this helps