Make a moving Gradient Background in Android

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.

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.

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.

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

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

28 comments on “Make a moving Gradient Background in Android”

  1. Barack says:

    Could you make gif with working process?

      1. Altair says:

        Access Denied

          1. Altair says:

            Great! Thanks

  2. LeeHounshell says:

    Nice article. Thanks!

  3. Mohsin says:

    Its very helpful article. Many Thanks.

  4. Murli says:

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

  5. Alfishan says:

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

    1. Chintan Rathod says:

      You should add how to use.

  6. Vikrant Shah says:

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

    1. wp_sethi says:

      Could you provide more info/code ?

      1. Vikrant Shah says:

        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)

        1. wp_sethi says:

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

          1. Vikrant Shah says:

            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

          2. wp_sethi says:

            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.

          3. Vikrant Shah says:

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

          4. Vikrant Shah says:

            Menifest File :

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

  7. Alex says:

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

    1. wp_sethi says:

      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.

  8. payam says:

    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

    1. wp_sethi says:

      Nice.

  9. AndroidDeveloperLB says:

    Is there a github repo with this sample?

    1. wp_sethi says:

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

  10. Manpreet says:

    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?

  11. Gunvant Murge says:

    Very Nice sir thank you

Leave a Reply

Your email address will not be published. Required fields are marked *