Android animation of concentric expanding fading circles

Issue

In Android, I am looking for as simple as "built-in" way as possible of creating either create a drawable or custom view of animating 4 concentric circles of slowly expanding radii.

Where would be the best place to start?
Is it possible to do this in pure XML?
If not, can this be done using a single-layer drawable, or should I use a multi-layer drawable?

Thanks!

Solution

The best place to start is this repository. It is an easy configurable Ripple Background animation for Android. Plug it in and you are ready to go. Here are the steps:

To set it up after installing it, Add RippleBackground to your layout like this,

<com.skyfishjy.library.RippleBackground
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/content"
    app:rb_color="#0099CC"
    app:rb_radius="32dp"
    app:rb_rippleAmount="4"
    app:rb_duration="3000"
    app:rb_scale="6">
    <ImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_centerInParent="true"
        android:id="@+id/centerImage"
        android:src="@drawable/demoImage"/>
</com.skyfishjy.library.RippleBackground>

Then you can start the animation by overriding the onClick method like this,

final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
ImageView imageView=(ImageView)findViewById(R.id.centerImage);
imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        rippleBackground.startRippleAnimation();
    }
});

call the method rippleBackground.stopRippleAnimation() to stop the Animation.

Hope it helped.

Answered By - Meliodas