Skip to content
Related Articles

Related Articles

Improve Article

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.

  1. 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"?>
        <gradient
            android:angle="225"
            android:endColor="#09CCC8"
            android:startColor="#ffd6d3" />
    </shape>
  2. 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"?>
        <gradient
            android:angle="45"
            android:endColor="#FD7BCE"
            android:startColor="#A4DDF8" />
    </shape>
  3. 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"?>
        <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
   
    <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: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();
    }
}

  • 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 Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :