Ripple effect does not show up sometimes

Question

I defined a ripple drawable and set it as the background for the listview item view's background. It almost works fine but the ripple effect just sometimes does not show up upon press.

Here is the ripple drawable code:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item>
        <selector>
            <item android:state_activated="true">
                <shape><solid android:color="?android:attr/colorButtonNormal"/>
                </shape>
            </item>

            <item>
                <shape><solid android:color="@android:color/transparent"/>
                </shape>
            </item>
        </selector>
    </item>
</ripple>

And I have a navigation drawer which uses this drawable as the background for drawer items:

<?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="@dimen/navigation_menu_height"
    android:orientation="horizontal"
    android:background="@drawable/listItemBackground">
    ....    
</RelativeLayout>

However every time when I open the app, the default selected item does not show the ripple effect when I press it. But after I select another item and then select it again, everything would just goes fine.

I use exactly the same for another almost the same ListView, except the choice mode is multiple. And this time, the items will not show the ripple effect upon press as long as they are selected.

In another listView, which does not specify choice mode, only the first item shows ripple effect, and others behave the same as in lower Android versions.

I really have no idea of how I can make it work for all scenarios. maybe is it really relates to the choice mode of the ListView?

====EDIT====

I just added property drawSelectorOnTop for all these three listViews and now the first two problems are cleared. However for the third one, it now becomes like this:

Ripple effect works good on all items except the first one which shows two ripples! One of them starts from where my finger presses while the other always starts from the middle!

====EDIT AGAIN==== OK, now I tweak the drawable to move the activated status outside of ripple node, together with the drawSelectorOnTop attribute for the listview, the problem's now completely gone.

Plummer

I'm looking at your second edit - if you figured out the solution and fixed it, go ahead and post it as a detailed answer, and mark it as correct. It may help someone down the road. – Somite

refer my answer below – Faa

Answer 1

OK, After some try and error, I have finally get it work.

First, move the activated state out of ripple node:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true">
        <shape>
            <solid android:color="?android:attr/colorButtonNormal"/>
        </shape>
    </item>
    <item>
        <ripple android:color="?android:attr/colorControlHighlight">
            <item>
                <shape>
                    <solid android:color="@android:color/transparent"/>
                </shape>
            </item>
        </ripple>
    </item>
</selector>

After that, set drawSelectorOnTop to true for the ListView that use the drawable as item background.

Now the ripple effect can work perfectly.

Plummer

I used "state_pressed", but the key was moving it OUT OF RIPPLE. If you don't need "normal background" you must not use selector at all: just <ripple> tag without any states – Ofelia

Answer 2

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" />

Faa