CODEWITHSUNDEEP
androidandroid-layoutandroid-animationandroid-drawable
swooby
swooby

Reputation: 3135

Android animation of concentric expanding fading circles

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.

expanding fading concentric circles

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!

Upvotes: 0

Views: 3907

Answers (1)

Meliodas
Meliodas

Reputation: 150

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.

Upvotes: 3

Related Questions