How to create AnimatedGradient in Android?

Last Updated : 25 Jun, 2020

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.

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

gradient_one.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient
        android:angle="225"
        android:endColor="#09CCC8"
        android:startColor="#ffd6d3" /> 
</shape> 

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

gradient_two.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient
        android:angle="45"
        android:endColor="#FD7BCE"
        android:startColor="#A4DDF8" /> 
</shape> 

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

gradient_three.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient
        android:angle="135"
        android:endColor="#26F30F"
        android:startColor="#F6F8F0" /> 
</shape> 

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

<?xml version="1.0" encoding="utf-8"?> 
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"> 
   
    <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> 

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

<?xml version="1.0" encoding="utf-8"?> 
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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>

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

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(); 
    } 
} 