Search code examples
androidanimationzoominggradientradial-gradients

How to animate a radial gradient with a zoom-in animation?


I would like to animate a gradient to show this background style:

  • This at minute 0:36-0:41.

  • Or in This article(the animation, not plain image).

  • Or Something like this:

enter image description here

I need to suit for a loading screen and for a custom dialog animation in the background.

for now the reason I Want this is to show my user a new generated password(the process in generating and creating it and than showing the result generated password).

I've searched many many websites and YouTube links to it and most of them aren't using java or just explaining how to make a radial gradient as I have in a plain screen without the animation I desire.

I have the following gradient:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:type="radial"
        android:gradientRadius="100%p"
        android:startColor="#F1F1F1"
        android:endColor="#83a6aa" />
</shape>

The colors or the width and height does not matter to me, I need this animation, I would like to know how to do it so I can do it for as many colors or situation I desire.


Solution

  • The closest solution I found:

    Github Library

    -- Layout:

    <com.skyfishjy.library.RippleBackground
            android:id="@+id/ripple_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:rb_color="#20000000"
            app:rb_duration="3000"
            app:rb_radius="22dp"
            app:rb_rippleAmount="12"
            app:rb_scale="22"
            app:rb_type="strokeRipple"
            app:rb_strokeWidth="1dp">
    
            <!-- like any layout, insert items here like a normal layout-->
    
    </com.skyfishjy.library.RippleBackground>
    

    In the java class in which you use this layout:

    final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
    // override the methods: onStart, onResume and insert to them the next line
    rippleBackground.startRippleAnimation();
    // if you wish to stop the animation use:
    rippleBackground.stopRippleAnimation();
    

    note that you can start and stop the animation also with click from any type of onClickListener