Make a moving Gradient Background in Android

Announcing our new blog 🎉 TheDeveloperCafe

TheTechnoCafe will no longer receive new posts, thank you for reading TheTechnoCafe we really appreciate the support. TheDeveloperCafe is our new blog that will not only bring in new content but also new features, we are taking the tutorial game to the next level 😃.

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>

<?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>

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

<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>

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

<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>

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

<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>

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

<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>

<?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>

<?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>

</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();

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

gradient

Announcing our new blog 🎉 TheDeveloperCafe

Categories: Android

Tags: androidandroid tutorialgradienttutorial

Gurleen Sethi

Android Developer and enthusiast, believes in developing products and content to help people. Likes to do deep thinking.

29 Comments

Barack · April 7, 2017 at 3:19 pm

Could you make gif with working process?

wp_sethi · April 7, 2017 at 9:51 am

https://goo.gl/QHNmqh

Altair · April 9, 2017 at 6:16 pm

Access Denied

wp_sethi · April 9, 2017 at 6:20 pm

https://media.giphy.com/media/l0Iy6ZEEau4K3xmSI/giphy.gif

Altair · April 9, 2017 at 6:33 pm

Great! Thanks

wp_sethi · April 9, 2017 at 6:18 pm

https://media.giphy.com/media/l0Iy6ZEEau4K3xmSI/giphy.gif

LeeHounshell · April 10, 2017 at 4:04 am

Nice article. Thanks!

Mohsin · April 10, 2017 at 10:07 am

Its very helpful article. Many Thanks.

Murli · April 10, 2017 at 10:46 am

Very good article, it will be very helpful,Ver thanks.

Keyur · April 10, 2017 at 10:52 am

Nice

Alfishan · April 10, 2017 at 12:05 pm

For dynamic gradient Background check this https://github.com/Alfishan/GradientBackgound

Chintan Rathod · April 10, 2017 at 7:50 am

You should add how to use.

Vikrant Shah · April 10, 2017 at 4:29 pm

will throw runtimeException :- android.view.InflateException:Error inflating class android.widget.RelativeLayout.

wp_sethi · April 10, 2017 at 11:19 am

Could you provide more info/code ?

Vikrant Shah · April 11, 2017 at 6:28 am

Application crash at OnCreate of Activity.
Error shows at setContentView() method.
FATAL EXCEPTION: main
Process:com.android.Test, PID: 81632
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.android.Test/com.android.Test.TestActivity}:
android.view.InflateException: Binary XML file line #2: Binary XML file line #2: Error inflating class
at com.android.Test.TestActivity.onCreate(TestActivity.java:16)

wp_sethi · April 11, 2017 at 6:30 am

You have a problem in you activity xml at line 2, could you post your xml?

Vikrant Shah · April 11, 2017 at 6:44 am

AndroidManifest.xml :
————————–

___________________________________

activity_test.xml:
——————–

___________________________________
TestActivity.java
—————–

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

try{
setContentView(R.layout.activity_test);
layoutTest = (RelativeLayout) findViewById(R.id.layoutTest);
AnimationDrawable animationDrawable = (AnimationDrawable) layoutTest.getBackground();

animationDrawable.setEnterFadeDuration(2500);
animationDrawable.setExitFadeDuration(5000);

animationDrawable.start();
}catch (Exception e){
Log.e(TAG, “onCreate: “+e.getMessage());
}
}
_______________________________________________________
Now coz, of try-catch block: the exception message :- E/TestActivity: onCreate: Binary XML file line #2: Binary XML file line #2: Error inflating class

wp_sethi · April 11, 2017 at 6:46 am

You have some problem in you activity_test.xml file, post your project on github and give me the link, I will take a look at it.

Vikrant Shah · April 11, 2017 at 6:46 am

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/animation_list"
android:id="@+id/layoutTest"

Vikrant Shah · April 11, 2017 at 6:47 am

Menifest File :

android:name=”.TestActivity”
android:theme=”@style/myAppCompat”

Alex · April 10, 2017 at 11:42 pm

Does this use a lot of resources if kept running for a little? I mean I would use this background on a main UI where users could be spending about 30-90s so it should be okay..

wp_sethi · April 10, 2017 at 6:14 pm

I am not really sure if it would take too much resources, I doubt that it should, Instagram has been doing this with their logon screen in the past. The better option is try out, run the app and check the system load in the cpu profiler.

payam · April 11, 2017 at 1:50 am

Tried it for my app and it was amazing. Thanks.
By the way, I translated your article (with a link to the source) and its in here :
https://kivee.ir/2017/04/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DB%8C%DA%A9-gradient-background-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9.html

wp_sethi · April 11, 2017 at 6:31 am

Nice.

AndroidDeveloperLB · April 11, 2017 at 12:41 pm

Is there a github repo with this sample?

wp_sethi · April 11, 2017 at 7:13 am

I haven’t created a repo for this, but all the code that you will need is available in the post.

Manpreet · April 13, 2017 at 4:07 pm

Any way I can set this to auto start? I mean, any way I can skip getting the background from the LinearLayout and simply force it to start on its own?

Gunvant Murge · April 14, 2017 at 4:47 pm

Very Nice sir thank you

How to make Gradient background ? | Bestinworld · December 7, 2018 at 9:32 pm

[…] Make a moving Gradient Background in Android […]

Make a moving Gradient Background in Android

Published by Gurleen Sethi on April 5, 2017April 5, 2017

Gurleen Sethi

29 Comments

Barack · April 7, 2017 at 3:19 pm

wp_sethi · April 7, 2017 at 9:51 am

Altair · April 9, 2017 at 6:16 pm

wp_sethi · April 9, 2017 at 6:20 pm

Altair · April 9, 2017 at 6:33 pm

wp_sethi · April 9, 2017 at 6:18 pm

LeeHounshell · April 10, 2017 at 4:04 am

Mohsin · April 10, 2017 at 10:07 am

Murli · April 10, 2017 at 10:46 am

Keyur · April 10, 2017 at 10:52 am

Alfishan · April 10, 2017 at 12:05 pm

Chintan Rathod · April 10, 2017 at 7:50 am

Vikrant Shah · April 10, 2017 at 4:29 pm

wp_sethi · April 10, 2017 at 11:19 am

Vikrant Shah · April 11, 2017 at 6:28 am

wp_sethi · April 11, 2017 at 6:30 am

Vikrant Shah · April 11, 2017 at 6:44 am

wp_sethi · April 11, 2017 at 6:46 am

Vikrant Shah · April 11, 2017 at 6:46 am

Vikrant Shah · April 11, 2017 at 6:47 am

Alex · April 10, 2017 at 11:42 pm

wp_sethi · April 10, 2017 at 6:14 pm

payam · April 11, 2017 at 1:50 am

wp_sethi · April 11, 2017 at 6:31 am

AndroidDeveloperLB · April 11, 2017 at 12:41 pm

wp_sethi · April 11, 2017 at 7:13 am

Manpreet · April 13, 2017 at 4:07 pm

Gunvant Murge · April 14, 2017 at 4:47 pm

How to make Gradient background ? | Bestinworld · December 7, 2018 at 9:32 pm

Leave a Reply Cancel reply

Android

Build a File Explorer in Kotlin – Part 5 – Creating/Deleting files and folders

Android

Build a File Explorer in Kotlin – Part 4 – Adding Breadcrumbs

Android

Build a File Explorer in Kotlin – Part 3 – Navigating through File System

Make a moving Gradient Background in Android

Published by Gurleen Sethi on April 5, 2017April 5, 2017

Gurleen Sethi

29 Comments

Barack · April 7, 2017 at 3:19 pm

wp_sethi · April 7, 2017 at 9:51 am

Altair · April 9, 2017 at 6:16 pm

wp_sethi · April 9, 2017 at 6:20 pm

Altair · April 9, 2017 at 6:33 pm

wp_sethi · April 9, 2017 at 6:18 pm

LeeHounshell · April 10, 2017 at 4:04 am

Mohsin · April 10, 2017 at 10:07 am

Murli · April 10, 2017 at 10:46 am

Keyur · April 10, 2017 at 10:52 am

Alfishan · April 10, 2017 at 12:05 pm

Chintan Rathod · April 10, 2017 at 7:50 am

Vikrant Shah · April 10, 2017 at 4:29 pm

wp_sethi · April 10, 2017 at 11:19 am

Vikrant Shah · April 11, 2017 at 6:28 am

wp_sethi · April 11, 2017 at 6:30 am

Vikrant Shah · April 11, 2017 at 6:44 am

wp_sethi · April 11, 2017 at 6:46 am

Vikrant Shah · April 11, 2017 at 6:46 am

Vikrant Shah · April 11, 2017 at 6:47 am

Alex · April 10, 2017 at 11:42 pm

wp_sethi · April 10, 2017 at 6:14 pm

payam · April 11, 2017 at 1:50 am

wp_sethi · April 11, 2017 at 6:31 am

AndroidDeveloperLB · April 11, 2017 at 12:41 pm

wp_sethi · April 11, 2017 at 7:13 am

Manpreet · April 13, 2017 at 4:07 pm

Gunvant Murge · April 14, 2017 at 4:47 pm

How to make Gradient background ? | Bestinworld · December 7, 2018 at 9:32 pm

Leave a Reply Cancel reply

Related Posts

Android

Build a File Explorer in Kotlin – Part 5 – Creating/Deleting files and folders

Android

Build a File Explorer in Kotlin – Part 4 – Adding Breadcrumbs

Android

Build a File Explorer in Kotlin – Part 3 – Navigating through File System