RippleDrawable - Show Ripple Effect programmatically

Rohit Sharma picture Rohit Sharma · Mar 15, 2015 · Viewed 8.6k times · Source

I have a view with like this

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:id="@+id/button"
    android:background="@drawable/ripple"
    android:layout_centerVertical="true"
    android:layout_alignParentStart="true" />

And ripple.xml as

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight" >

    <item android:id="@android:id/mask"
        android:drawable="@android:color/white" />

</ripple>

Everything works great. When i touch the view it gives me Ripple Effect. What i am looking for is to start the ripple animation on the view from code repeatedly. To show it as a indeterminate progress. So waves keeps on rippling.

Something like

 Runnable runnable = new Runnable() {
    @Override
    public void run() {
        RippleDrawable drawable = (RippleDrawable) button.getBackground();
        drawable.showRipples(true, true); // <-- This is needed

        handler.postDelayed(runnable, 500);
    }
};

How to do this?

Answer

alanv picture alanv · Mar 15, 2015

RippleDrawable responds to pressed and focused states, with the former giving the ripple animation that you're looking for. You can toggle pressed state on the host view using View.setPressed(boolean).

Runnable pressRunnable = new Runnable() {
    @Override
    public void run() {
        button.setPressed(true);
        button.postOnAnimationDelayed(unpressRunnable, 250);
    }
};

Runnable unpressRunnable = new Runnable() {
    @Override
    public void run() {
        button.setPressed(false);
        button.postOnAnimationDelayed(pressRunnable, 250);
    }
};

Keep in mind that the user touching the Button toggles the pressed state as well, so you might want to remove or re-post your runnables in an OnTouchListener.

If desired, you can control the ripple position using Drawable.setHotspot(float, float) or, on API 22+, View.dispatchDrawableHotspotChanged(float, float) and passing view-relative (x, y) coordinates.