Creating color changing background in Android

Vedesh Kumar

13 May 2019

Recently we have seen that Instagram has introduced an eye-catching color changing background of the login page in their iOS version of the application. The page’s background keeps changing colors like a gradient which looks really amazing. There are some libraries available on the internet which can create the same effect for you but in this blog, we will learn how this can be done without any libraries.

What we are going to do.

Create some drawable files with different color gradients.
Create another drawable with animation-list tag and add all the created gradient drawables as the items.
Use the animation-list drawable as the background of the view.
Start the animation in the onCreate method of the Activity of the fragment.

Let us see the steps in detail and with some code snippets.

1) Creating drawable files

Create some drawables files which contain gradients. For example:

-> gradient_1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="225"
        android:endColor="#044fab"
        android:startColor="#21d6d3" />
</shape>

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

<gradient

android:angle="225"

android:endColor="#044fab"

android:startColor="#21d6d3" />

</shape>

-> gradient_2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="45"
        android:endColor="#933c94"
        android:startColor="#517f95" />
</shape>

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

<gradient

android:angle="45"

android:endColor="#933c94"

android:startColor="#517f95" />

</shape>

2) Create an animation-list drawable

Create background.xml drawable inside it we will define the items and set the gradient_1 and gradient_2 files as drawables.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/gradient_1"
        android:duration="4000" />
    <item
        android:drawable="@drawable/gradient_2"
        android:duration="4000" />
</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_1"

android:duration="4000" />

<item

android:drawable="@drawable/gradient_2"

android:duration="4000" />

</animation-list>

3) Using animation-list drawable

You can use the background.xml as the background a view.

<LinearLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/login_background_gradient"
        android:orientation="vertical"/>

<LinearLayout

android:id="@+id/main_container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/login_background_gradient"

android:orientation="vertical"/>

4) Start the animation

In your activity or fragment, you will have to start the animation and this can be done in your onCreate method.

LinearLayout your_Layout = (LinearLayout) findViewById(R.id.main_container);
AnimationDrawable animationDrawable = (AnimationDrawable) your_Layout.getBackground();
        animationDrawable.setEnterFadeDuration(4000);
        animationDrawable.setExitFadeDuration(4000);
        animationDrawable.start();

LinearLayout your_Layout = (LinearLayout) findViewById(R.id.main_container);

AnimationDrawable animationDrawable = (AnimationDrawable) your_Layout.getBackground();

animationDrawable.setEnterFadeDuration(4000);

animationDrawable.setExitFadeDuration(4000);

animationDrawable.start();

On starting the animation it will start the transition between the gradient and it looks really cool.

Thank you very much. This is Vedesh Kumar signing off.