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