Moving Gradient Background In Android

Hello Friends, In this tutorial I will be showing how we can create Animated Gradient Background.

Adding Animated Gradient Background in your app is really easy by using xml and java code. Animated moving gradients background between gradients as animation makes your android app really awesome.

---

Step 1:- Creating New Project

Create a new project in Android Studio from File ⇒ New Project Fill the required information like project name and package name of the project. When it prompts you to select the default activity, select Empty Activity and proceed.

---

Step 2:- Creating Gradient Drawable

We will create 5 drawable resource files in drawable folder by right click on drawable ⇒ New ⇒ Drawable resource file name it same as name of the following drawable xml files.

File 1.1 :- gradient_blue.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
     <gradient 
            android:endcolor="#614385"
            android:startcolor="#516395"
            android:angle="45">
     </gradient>
</shape>

File 1.2 :- gradient_indigo.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="225"
        android:endColor="#1a2980"
        android:startColor="#26d0ce" />
</shape>

File 1.3 :- gradient_purple.xml

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

File 1.4 :- gradient_red.xml

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

File 1.5 :- gradient_teal.xml

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

---

Step 3:- Adding gradient animation list

Again Create new drawable resource file by right click on drawable ⇒ New ⇒ Drawable resource file name it gradient_animation_list.xml and add the below code to it. This file will create an animation list for gradient drawables.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/gradient_blue"
        android:duration="5000" />
    <item
        android:drawable="@drawable/gradient_red"
        android:duration="5000" />
    <item
        android:drawable="@drawable/gradient_teal"
        android:duration="5000" />
    <item
        android:drawable="@drawable/gradient_purple"
        android:duration="5000" />
    <item
        android:drawable="@drawable/gradient_indigo"
        android:duration="5000" />
</animation-list>

---

Step 4:- Create activity_main.xml

Now create a layout file for the MainActivity.java i.e activity_main.xml and add the below code in your layout file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<LinearLayout
android:id="@+id/eLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradient_animation_list"
android:orientation="vertical">

<!--Content goes here-->

</LinearLayout>

</RelativeLayout>

---

Step 5:- Create MainActivity class

Create a class named MainActivity and add below code. Here i have written the code to animate the background of constraint layout which i have described above in activity_main.xml.

package in.imranalam.gradientbackground;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout mLinearLayout = findViewById(R.id.eLinearLayout);
        AnimationDrawable mAnimationDrawable = (AnimationDrawable) 
        mLinearLayout.getBackground();
        mAnimationDrawable.setEnterFadeDuration(2500);
        mAnimationDrawable.setExitFadeDuration(5000);
        mAnimationDrawable.start();
    }
}

---

Step 6:- Run App

Register the above created MainActivity in AndroidManifest.xml as a main activity and run the app by clicking run button on Android Studio and see the beautiful background animation.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.imranalam.gradientbackground">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

The Image Below shows the screen shots captured when background animation started.

---