Animated Gradient Background in Android


Adding Animated Gradient Background in your app is really easy by using xml and java code. Animated moving gradients background between gradients as animation makes your android app really awesome. You might have seen this type of background color animation in Instagram app’s Login Screen. Instagram app keeps on transforming background from one gradient to another very beautifully. So this can be achieved very easily by transforming gradients background using animation list.

Let’s Get it Working

In this tutorial we are going to learn how to create moving gradient background. To really understand the creation of animated gradient background we will create an app. This app will contains the login screen and animated background same like as you might have seen in login screen of Instagram.

DownloadCode
 
github

Step 1) Creating New Project

Create a new project in Android Studio from File ⇒ New Project Fill the required information like project name and package name of the project. When it prompts you to select the default activity, select Empty Activity and proceed.

Step 2) Defining strings,colors and styles

2.1 Add the below string values to the strings.xml located in res ⇒ values ⇒ strings.xml.

2.2 Add the below color values to the colors.xml located in res ⇒ values ⇒ colors.xml.

2.3 Add the below style values to the styles.xml located in res ⇒ values ⇒ styles.xml.

Step 3) Adding gradient drawable

Before creating layout we have to write custom gradient drawable for layout’s background. We will create 4 drawable resource files in drawable folder by right click on drawable ⇒ New ⇒ Drawable resource file name it same as name of the following drawable xml files.

3.1 drawable_purple_gradient.xml

Add the below code to the drawable_purple_gradient.xml. This file will generate a purple color gradient background.

Purple Gradient Drawable

3.2 drawable_amber_gradient.xml

Add the below code to the drawable_amber_gradient.xml. This file will generate a amber color gradient background.

Amber Gradient Drawable

3.3 drawable_green_gradient.xml

Add the below code to the drawable_green_gradient.xml. This file will generate a green color gradient background.

Green Gradient Drawable

3.4 drawable_red_gradient.xml

Add the below code to the drawable_red_gradient.xml. This file will generate a red color gradient background.

Red Gradient Drawable

Step 4) Adding gradient animation list

Again Create new drawable resource file by right click on drawable ⇒ New ⇒ Drawable resource file name it drawable_gradient_animation_list.xml and add the below code to it. This file will create an animation list for gradient drawables.





Step 5) Create activity_main.xml

Now create a layout file for the MainActivity.java i.e activity_main.xml and add the below code in your layout file. The code will create a simple login form containing logo on the top, 2 input fields email and password, login button and gradient at the background.

activity_main.xml would result a screen like this:

Main Screen

Step 6) Create MainActivity class

Create a class named MainActivity and add below code. Here i have written the code to animate the background of constraint layout which i have described above in activity_main.xml.

Step 7) Run App

Register the above created MainActivity in AndroidManifest.xml as a main activity and run the app by clicking run button on Android Studio and see the beautiful background animation.

The Image Below shows the screen shots captured when background animation started.

Animated Gradient Background Screens

DownloadCode
 
github

Please feel free to comment as well as ask questions. And, yeah! If this post helps you please do share!

Enjoy Coding and Share Knowledge

  • Olga Lemberskaya

    Thank you very much! Simple and cool gimmick.

    • Admin

      Welcome Olga Lemberskaya 🙂

  • lemonadejuice501

    Thanks for such great tutorials

    • Admin

      Welcome lemonadejuice

  • Asghar Akbar

    Thank you..nice anda cool your tutorial design

    • Admin

      Welcome Asghar Akbar.

Show Buttons
Hide Buttons