How to create AnimatedGradient in Android?

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.xmlgradient_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.xmlgradient_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.xmlgradient_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>
Create a gradient_one.xml file in the drawable folder and add the following code.gradient_one.xmlgradient_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>
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.xmlgradient_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>
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.xmlgradient_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>
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>
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>
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();    }}
Now compile and run the Android app.
Output:
Reference:Gradient DrawableAnimationDrawable
android
Java
Java
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.