How to create AnimatedGradient in Android?

In this article, we are going to learn how to create AnimatedGradient in android. It can be used in the background of our app. In this, we add different color gradients and animate them. Even in the older versions of Instagram, the developers used AnimatedGradient for the background of the login screen to make the layout look attractive.

Approach:
Step 1: Create different gradient xml files which are to be changed in the background. These files include startColor which is shown in above part, endColor which is shown in lower part and angle of the horizontal line which divides both the part. Here we create three gradient xml files.

  1. Create a gradient_one.xml file in the drawable folder and add the following code.

    gradient_one.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
        <gradient
            android:angle="225"
            android:endColor="#09CCC8"
            android:startColor="#ffd6d3" />
    </shape>

    chevron_right

    
    

  2. Create a gradient_two.xml file in the drawable folder and add the following code.

    gradient_two.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
        <gradient
            android:angle="45"
            android:endColor="#FD7BCE"
            android:startColor="#A4DDF8" />
    </shape>

    chevron_right

    
    

  3. Create a gradient_three.xml file in the drawable folder and add the following code.

    gradient_three.xml



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
        <gradient
            android:angle="135"
            android:endColor="#26F30F"
            android:startColor="#F6F8F0" />
    </shape>

    chevron_right

    
    

Step 2: Create a gradient_list.xml file in the drawable folder and add the following code. In this file we add all our gradient xml files that we want to display and their duration.

gradient_list.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<animation-list
   
    <item android:drawable="@drawable/first_gradient"
        android:duration="3000"/>
   
    <item android:drawable="@drawable/third_gradient"
        android:duration="3000"/>
   
    <item android:drawable="@drawable/sec_gradient"
        android:duration="3000"/>
</animation-list>

chevron_right



Step 3: Now add the following code in the activity_main.xml file. In this file we add our gradient_list to the background of our layout.

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout"
    android:background="@drawable/gradient_list"
    tools:context=".MainActivity">
   
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:textStyle="bold"
        android:textColor="#219806"
        android:text="GeeksForGeeks"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
   
</androidx.constraintlayout.widget.ConstraintLayout>

chevron_right



Step 4: Now add the following code in the MainActivity.java file. From the class AnimatedDrawable, functions such as setEnterFadeDuration and setExitFadeDuration are used to set fading duration and finally start function is used to start the animation.

MainActivity.java

filter_none

edit
close

play_arrow

link
brightness_4
code

package org.geeksforgeeks.gfganimatedGradient;
  
package org.geeksforgeeks.gfganimatedGradient;
   
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
   
public class MainActivity extends AppCompatActivity {
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
   
        ConstraintLayout layout = findViewById(R.id.layout);
   
        //With the help of AnimatedDrawable class, we can set
        //the duration to our background and then call the
        //function start at the end.
        AnimationDrawable animationDrawable = (AnimationDrawable) 
                          layout.getBackground();
        animationDrawable.setEnterFadeDuration(1500);
        animationDrawable.setExitFadeDuration(3000);
        animationDrawable.start();
    }
}

chevron_right


  • Now compile and run the Android app.
  • Output:

    Reference:
    Gradient Drawable
    AnimationDrawable

    Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




    My Personal Notes arrow_drop_up


    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :
    Practice Tags :


    1


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.