Animated Gradient Background in Android

Android Gradient Drawables

Now we will create different gradient drawables with different color and file name. Here we create gradient_1.xml, gradient_2.xml and gradient_3.xml XML drawable files with gradient attributes android:angle, android:endColor and android:startColor. Following is the XML code of three drawable files.

res/drawable/gradient_1.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient

        android:angle="225"

        android:endColor="#044fab"

        android:startColor="#21d6d3" />

</shape>

res/drawable/gradient_2.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient

        android:angle="45"

        android:endColor="#933c94"

        android:startColor="#517f95" />

</shape>

res/drawable/gradient_3.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient

        android:angle="135"

        android:endColor="#43b4ef"

        android:startColor="#d40845" />

</shape>

Now create a new XML drawable file android_gradient_list.xml and add the following code which contains the AnimationList, which is responsible to change the background color from one gradient to another. In the AnimationList tag, add 3 items and referring to the above 3 XML drawable files.

res/drawable/android_gradient_list.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:drawable="@drawable/gradient_1"

        android:duration="4000" />

    <item

        android:drawable="@drawable/gradient_2"

        android:duration="4000" />

    <item

        android:drawable="@drawable/gradient_3"

        android:duration="4000" />

</animation-list>

XML Layout File

Open your app main XML layout file activity_main.xml and set background to the root layout (View or ViewGroup) of the activity where you want to add animated gradient background. Also give an id to that layout; we will need to refer in java activity file.

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.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/root_layout"

    android:background="@drawable/android_gradient_list"

    tools:context="com.viralandroid.animatedgradientandroid.MainActivity">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:text="Android \nBackground \nAnimated Gradient"

        android:textColor="#ffffff"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>