Android simple example of Animated Gradient Background Log In screen like Instagram

By | July 17, 2020

In this tutorial we will show you how to add an animated gradient background to your app like instagram.

Step 1: Creating Project

Let’s start with creating new project in android studio with package name com.khushi.myproject and class name MainActivity.java and its layout name is activity_main.xml.(we will create our animation in activity_main’s background).

Step 2: Turn_Off Action Bar

  • This step is optional if you don’t want the background to extend full screen.Although you get the best result if the background extends to full screen. So the first step is to get rid of the Action Bar. By changing theme to Theme.AppCompat.Light.NoActionBar and turn off windowActionBar and windowTiitle.
  • All we have to do is to go to sytle.xml and make below changes.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

STEP 3: Create Gradient Backgrounds For Animation

  • In this step we are going to create all the state of animation by making 3 different gradient drawbles.why three you ask ? beacause in this example i’m using 3 gradients.this is up to you how many gradients you desire to create, then you need to create different gradients state for all of them.
  • First thing we need to do is to define our gradient colors in the colors.xml file to make our life easier. I decided to go with these colors but you can use whatever best suits your needs.
  • Here is the complete code color.xml file
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#6200EE</color>
<color name="colorPrimaryDark">#3700B3</color>
<color name="colorAccent">#03DAC5</color>
<color name="colorGradientStart">#ffaf7b</color>
<color name="colorGradientCenter">#d76d77</color>
<color name="colorGradientEnd">#3a1c71</color>
<color name="colorWhite">#FFFFFF</color>
</resources>
  • Now we will create 3 gradients using these colors.
  • (1) app/res/values/drawble/gradient_start.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:angle="315"
android:startColor="@color/colorGradientStart"
android:centerColor="@color/colorGradientCenter"
android:endColor="@color/colorGradientEnd"/>
</shape>
  • (2) app/res/values/drawble/gradient_center.xml
  • Essentially we just shifted the colors up by one.
    • android:startColor=@color/colorGradientCenter
    • android:centerColor=@color/colorGradientEnd
    • android:centerEnd=@color/colorGradientStart
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:angle="315"
android:startColor="@color/colorGradientCenter"
android:centerColor="@color/colorGradientEnd"
android:endColor="@color/colorGradientStart"/>
</shape>
  • (3) app/res/values/drawble/gradient_center.xml
  • Again we just shifted the colors up by one.
    • android:startColor=@color/colorGradientEnd
    • android:centerColor=@color/colorGradientStart
    • android:centerEnd=@color/colorGradientCenter
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:angle="315"
android:startColor="@color/colorGradientEnd"
android:centerColor="@color/colorGradientStart"
android:endColor="@color/colorGradientCenter"/>
</shape>

STEP 4: Creating Animation

Now we will create a drawble xml file called gradient_animaton. this file will handle all the animation in the background.Here we add all the gradient we just have created. and the time duration for a particular gradient to be shown.

here is the complete code of app/res/drawble/gradient_animation.xml file.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:duration="5000"
android:drawable="@drawable/gradient_start"/>

<item android:duration="5000"
android:drawable="@drawable/gradient_center"/>

<item android:duration="5000"
android:drawable="@drawable/gradient_end"/>

</animation-list>
  • <animation-list> : The root tag of the file is an animation-list this enables us to loop through our different gradient drawble file which are defined in the item tags by the drawable attribute.
  • <item android:duration=”5000″/> : The duration attribute essentially defines the speed of our animation. In this case the total duration will be 15 seconds for the animation to completely loop through.

STEP 5: Edit activity_main.xml

  • First make sure that you have set an id on the layout. then set gradient_animation.xml as a background to the layout.

android:id=”@+id/ConstraintLayout_main”
android:background=”@drawable/gradient_animation”

  • Here is the complete code of activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/ConstraintLayout_main"
android:background="@drawable/gradient_animation"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="218dp"
android:layout_height="42dp"
android:layout_marginTop="144dp"
android:fontFamily="cursive"
android:text="Marothiya Tex"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="@color/colorWhite"
android:textSize="36dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.58"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<EditText
android:id="@+id/editTextTextPersonName"
android:layout_width="314dp"
android:layout_height="48dp"
android:layout_marginStart="48dp"
android:layout_marginLeft="46dp"
android:layout_marginTop="38dp"
android:ems="10"
android:hint="UserName"
android:inputType="textPersonName"
android:textColorHint="@color/colorWhite"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<EditText
android:id="@+id/editTextTextPassword"
android:layout_width="314dp"
android:layout_height="50dp"
android:layout_marginStart="44dp"
android:layout_marginLeft="44dp"
android:layout_marginTop="24dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textColorHint="@color/colorWhite"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName" />

<Button
android:layout_width="314dp"
android:layout_height="wrap_content"
android:layout_marginStart="44dp"
android:layout_marginLeft="44dp"
android:layout_marginTop="20dp"
android:background="?attr/colorBackgroundFloating"
android:clickable="true"
android:text="Log In"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />

</androidx.constraintlayout.widget.ConstraintLayout>

STEP 6: Start The Animation

  • In our Main_Activity.java file we will start the animation by using android’s AnimationDrawble class.
  • we need to give a reference of layout to the animationDrawable that we set as the layout’s background.That can be done by calling myConstraintLayout.getBackground() here the myConstraintLayout is the id of my layout.
  • Now that we have a reference to the animationDrawable we need to set few things up before we can start it.
  • First we call setEnterFadeDuration() here I set it to a value of 10.
  • Second we call setExitFadeDuration() here you want to put the same value as you set to the duration in the gradient_animation.xml which was 5000 in this example.
  • finally we will start the animation by calling animationDrawable.start().
  • Here the complete code of the Main_Activity.java file.
package com.khushi.myproject;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;

public class MainActivity extends AppCompatActivity {
private ConstraintLayout myConstraintLayout;
private AnimationDrawable animationDrawable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myConstraintLayout=(ConstraintLayout) findViewById(R.id.ConstraintLayout_main);
animationDrawable=(AnimationDrawable) myConstraintLayout.getBackground();
animationDrawable.setEnterFadeDuration(10);
animationDrawable.setExitFadeDuration(5000);
animationDrawable.start();
}
@Override
protected void onResume() {
super.onResume();
if(animationDrawable!=null) {
if (!animationDrawable.isRunning()) {
animationDrawable.start();
}
}
}
@Override
protected void onPause() {
if(animationDrawable!=null) {
super.onPause();
if (animationDrawable.isRunning()) {
animationDrawable.stop();
}
}
}
}

202 total views, 2 views today

(Visited 22 times, 1 visits today)