Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ripple effect inside of a selector

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?

like image 356
gruszczy Avatar asked Mar 03 '15 23:03

gruszczy


People also ask

How do I get rid of ripple effect?

The animation of ripples can be disabled by using the animation global option. If the enterDuration and exitDuration is being set to 0 , ripples will just appear without any animation.

What is ripple effect in Android Studio?

Ripple touch effect was introduced with material design in Android 5.0 (API level 21). Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact fwith UI elements.


1 Answers

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.

like image 197
Avinash R Avatar answered Nov 16 '22 21:11

Avinash R