Animated Gradient Background [Instagram App Login Screen]

I’m sure that you’ve seen the Instagram App’s login screen. Its background and the complete theme are really great. Therefore, I want to make one for myself :P

Firstly, if you do not want to read the whole description, you can check the complete example application via my GitHub project.

Github Gradient Linear Android Example

---

Okay, let’s first talk about very simple but elegant background animation.

First of all, we need some colour XML;

Color XML :

Can you feel the love tonight :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#4568DC"
        android:endColor="#B06AB3"
        android:angle="135"/>
</shape>

Pacific Dream :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#34e89e"
        android:endColor="#0f3443"
        android:angle="90"/>
</shape>

The Blue Lagoon :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#43C6AC"
        android:endColor="#191654"
        android:angle="135"/>
</shape>

Venice :

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

These are our gradient colours :)

---

Animation List XML

Now, we need an animation_list XML to use these colours.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/pacific_dream"
        android:duration="10000" />
    <item
        android:drawable="@drawable/venice"
        android:duration="10000" />
    <item
        android:drawable="@drawable/love_and_liberty"
        android:duration="10000" />

    <item
        android:drawable="@drawable/can_you_feel_the_love_tonight"
        android:duration="10000" />

    <item
        android:drawable="@drawable/honey_dew"
        android:duration="10000" />
    <item
        android:drawable="@drawable/the_blue_lagoon"
        android:duration="10000" />
</animation-list>

<animation-list></animation-list> use these items(colors) to make a perfect gradient animation transition.

Do not forget to add your animation_list background to your layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/animation_list"
    android:orientation="vertical">
    
</LinearLayout>

---

Let’s Change Our Gradient Background

This part is in our Activity. We just create an AnimationDrawable object and set it by our layout’s background. Hence, it can use to start the transition.

setEnterFadeDuration is equal to FadeIn

setExitFadeDuration is equal to FadeOut

We must set millisecond for these durations.

LinearLayout container;
AnimationDrawable anim;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    container = (LinearLayout) findViewById(R.id.container);

    anim = (AnimationDrawable) container.getBackground();
    anim.setEnterFadeDuration(6000);
    anim.setExitFadeDuration(2000);
}


@Override
protected void onResume() {
    super.onResume();
    if (anim != null && !anim.isRunning())
        anim.start();
}

@Override
protected void onPause() {
    super.onPause();
    if (anim != null && anim.isRunning())
        anim.stop();
}

Do not forget to onResume and onPause part or this transition will consume the real device.

Ta-daaa :) Finally we make an animated gradient background :)

If you have any question, ask me :)