This is a quick tutorial on how to make a moving gradient background on Android.

To achieve this all we need is AnimationList. Lets start!

First we will create five gradient drawables in different files, as follows.

<?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> 1 2 3 4 5 6 7 8 9 10 <? 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 >

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:endColor="#614385" android:startColor="#516395" android:angle="45"/> </shape> 1 2 3 4 5 6 7 8 9 <? xml version = "1.0" encoding = "utf-8" ?> < shape xmlns : android = "http://schemas.android.com/apk/res/android" > < gradient android : endColor = "#614385" android : startColor = "#516395" android : angle = "45" / > < / shape >

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

<?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> 1 2 3 4 5 6 7 8 9 <? 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 >

<?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> 1 2 3 4 5 6 7 8 9 <? 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 >

Now in a new xml drawable file add the following code that contains the AnimationList which will be responsible to change the background from one gradient to the other. Inside the AnimationList tag, add 5 items which are referring to the above 5 gradient files using the android:drawable=”@drawable/name” tag.

<?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> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <? 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 >

Now set it as a background to the root View/ViewGroup of the activity that you want to have moving background. Also don’t forget to give the ViewGroup/View an id that you are applying the background to, as we will need to referrer it in our Java code.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:id="@+id/linear_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/gradient_animation_list" android:orientation="vertical> <!--Content goes here--> </LinearLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 <? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout 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 : id = "@+id/linear_layout" android : layout_width = "match_parent" android : layout_height = "match_parent" android : background = "@drawable/gradient_animation_list" android : orientation = " vertical > < ! -- Content goes here -- > < / LinearLayout >

Now all we have to do is in our Java code tell the animation list to start transition between drawables. That we can do by calling the AnimationDrawbale.start() method as follows

LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linear_layout); AnimationDrawable animationDrawable = (AnimationDrawable) linearLayout.getBackground(); animationDrawable.setEnterFadeDuration(2500); animationDrawable.setExitFadeDuration(5000); animationDrawable.start(); 1 2 3 4 5 6 7 8 LinearLayout linearLayout = ( LinearLayout ) findViewById ( R . id . linear_layout ) ; AnimationDrawable animationDrawable = ( AnimationDrawable ) linearLayout . getBackground ( ) ; animationDrawable . setEnterFadeDuration ( 2500 ) ; animationDrawable . setExitFadeDuration ( 5000 ) ; animationDrawable . start ( ) ;

As you can see, we refer to the LinearLayout that has the animation list as background. Then we get the background from it in a AnimationDrawbale. Then we set the exit and enter duration of a single gradient and start it. Pretty simple!

You can play with the exit and enter duration and set it to what you feel works better. Also you can add as much as gradients as you want. Here is a great website to find gradient combinations : UiGradients