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.
