Animation can make your application more tempting without loosing the functionality you need most. Its very easy to set gradient effect as application background but in this tutorial we would going to create an android application with multiple gradient effects that runs frequently one by one, So it looks like a moving gradient animation.
Contents in this project Android Animated Moving Gradient Background like Instagram :
1. Start a new android application development project.
2. Right click on drawable folder –>New -> Drawable Resource File .
3. Now we have to create three different gradient background files inside the drawable folder.
- first_gradient.xml
- second_gradient.xml
- third_gradient.xml
Code for first_gradient.xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="225"
android:startColor="#4facfe"
android:endColor="#00f2fe"/>
</shape>
Code for second_gradient.xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="45"
android:startColor="#43e97b"
android:endColor="#38f9d7"/>
</shape>
Code for third_gradient.xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="135"
android:startColor="#fa709a"
android:endColor="#fee140"/>
</shape>
4. Create another drawable resource file using same method named as root_calling_gradient.xml . This file is used to connect all three above resource file into a single background file.
Code for root_calling_gradient.xml file.
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/first_gradient"
android:duration="3500" />
<item
android:drawable="@drawable/second_gradient"
android:duration="3500" />
<item
android:drawable="@drawable/third_gradient"
android:duration="3500" />
</animation-list>
5. Open your activity_main.xml layout file and set root_calling_gradient.xml as background of ConstraintLayout or any other layout you have used.
Code for activity_main.xml layout file.
<?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"
tools:context="com.android_examples.animatedgradientbackground_android_examplescom.MainActivity"
android:background="@drawable/root_calling_gradient"
android:id="@+id/MainRootLayout"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android Animated Gradient Background Tutorial"
android:textColor="#fff"
android:textStyle="bold"
android:textSize="20dp"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
6. Create ConstraintLayout and AnimationDrawable objects in MainActivity.java file.
ConstraintLayout constraintLayout; AnimationDrawable animationDrawable ;
7. Assign layout ID to ConstraintLayout object.
constraintLayout = (ConstraintLayout) findViewById(R.id.MainRootLayout);
8. Now Assign ConstraintLayout with animation function to AnimationDrawable object.
animationDrawable = (AnimationDrawable) constraintLayout.getBackground(); animationDrawable.setEnterFadeDuration(2500); animationDrawable.setExitFadeDuration(4500); animationDrawable.start();
Complete Source Code:
Code for MainActivity.java file.
package com.android_examples.animatedgradientbackground_android_examplescom;
import android.graphics.drawable.AnimationDrawable;
import android.support.constraint.ConstraintLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
ConstraintLayout constraintLayout;
AnimationDrawable animationDrawable ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
constraintLayout = (ConstraintLayout) findViewById(R.id.MainRootLayout);
animationDrawable = (AnimationDrawable) constraintLayout.getBackground();
animationDrawable.setEnterFadeDuration(2500);
animationDrawable.setExitFadeDuration(4500);
animationDrawable.start();
}
}
Code for activity_main.xml layout file.
<?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"
tools:context="com.android_examples.animatedgradientbackground_android_examplescom.MainActivity"
android:background="@drawable/root_calling_gradient"
android:id="@+id/MainRootLayout"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android Animated Gradient Background Tutorial"
android:textColor="#fff"
android:textStyle="bold"
android:textSize="20dp"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Code for first_gradient.xml file..
