How to implement a login like Instagram (transition background gradient)

Honestly I never liked gradients. And when I saw for the first time the Instagram login screen on Android, my first thought was to uninstall the app. Really!

But sometimes, it happens, you have to implement because the customer is always right. (No, the customer doesn’t always right! But that’s another story…)

So, the code is very simple.

First of all, define your colors on colors.xml

<color name="purple_500">#9C27B0</color> 
<color name="deep_purple_500">#673AB7</color>
<color name="indigo_500">#3F51B5</color>
<color name="blue_500">#2196F3</color>
<color name="cyan_500">#00BCD4</color>
<color name="light_blue_500">#03A9F4</color

Then create different file on drawable folder with your gradient (gradient_1.xml gradient_2.xml etc etc)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="@color/deep_purple_500"
android:endColor="@color/purple_500"
android:angle="0"/>
</shape>

The angle for the gradient, in degrees. 0 is left to right, 90 is bottom to top. Use multiples of 45.

Now, create animation_list.xml always in drawable folder

<?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="6000" />
<item
android:drawable="@drawable/gradient_2"
android:duration="6000" />
<item
android:drawable="@drawable/gradient_3"
android:duration="6000" />
</animation-list>

… and set your layout’s background with the animation_list

android:background="@drawable/animation_list"

Now you are ready to start the animation!

// onCreate
animationDrawable =(AnimationDrawable)relativeLayout.getBackground();
animationDrawable.setEnterFadeDuration(5000);
animationDrawable.setExitFadeDuration(2000);
// onResume
animationDrawable.start();

Source code at: https://github.com/danieleorlando/GradientTransition

In the next tutorial, I will show how to make an amazing login screen :)

If this tutorial is useful, please share it and follow me for next tutorials!