Ripple effect inside of a selector

Question

I would like to achieve a ripple effect when someone presses my ImageView, but also have different drawables for other states.

I have a very simple ImageView:

<ImageView
    android:id="@+id/image"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:clickable="true"
    />

I add my background to it:

mImage.setBackgroundResource(R.drawable.background_resource);

My drawable looks like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">

            <solid
                android:color="@android:color/darker_gray"/>

            <size
                android:width="80dp"
                android:height="80dp"/>
        </shape>
    </item>
    <item android:state_selected="true" android:state_pressed="false">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">

            <solid
                android:color="@android:color/holo_blue_bright"/>

            <size
                android:width="120dp"
                android:height="120dp"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <ripple android:color="@android:color/holo_blue_dark">
            <item android:id="@android:id/mask">
                <shape android:shape="oval">

                    <solid android:color="@android:color/holo_blue_dark"/>

                    <size
                        android:width="120dp"
                        android:height="120dp"/>
                </shape>
            </item>
        </ripple>
    </item>
</selector>

When I click, the background disappears instead of showing the ripple effect. The other states work fine. Any idea what I am doing wrong here?

Put the ripple drawable around the selector. Ripple drawable already handles its state without a selector. — Eugen Pechanec, Mar 23 '15 at 01:18

Avinash R · Answer 1 · 2015-03-22T23:31:19.283

9

It turns out you've got it the other way, in order for the ripple to show up, you need to include the selector inside the ripple drawable

i.e., the xml should be looking like

<ripple android:color="@color/ripple_color">
    <item android:id="@android:id/mask">
        <!-- ripple mask goes here -->
    </item>
    <item>
        <selector>
            <!-- your selector goes here -->
        </selector>
    </item>
</ripple>

HTH.

edited Mar 22 '15 at 23:31

answered Mar 22 '15 at 15:23

Avinash R

3,101
1
27
47

If your selector normal state is transparent, then only you need to include the mask otherwise the ripple will not be drawn. – CopsOnRoad Oct 01 '17 at 17:33

score 0 · Answer 2 · answered Mar 04 '15 at 00:02

0

Have a look at this example of a RelativeLayout which draws a ripple effect on top of the view when it is pressed:

RippleEffect.java

answered Mar 04 '15 at 00:02

Wez

240
1
3
11

I don't want to reimplement the ripple effect in code (and maintain it), I would like to use available drawables. – gruszczy Mar 04 '15 at 00:09

Ripple effect inside of a selector

2 Answers2