Animated Background on Android studio

On December 23, 2018, I have provided an article about Android multiple colors background gradient which gets a lot of traffic on this website. On this occasion, I will give one more article about Android Studio, which is an animated background on Android Studio. Hopefully, this article gets a good response from loyal readers of this website.

Furthermore, as additional information that when creating this article, I use Android Studio version 3.4. After I check there is a new release, which is 3.4.1, which measures 246 MB. I will update my android studio after writing this animated background on android studio article.

Final Results Animated Background on Android Studio

The final results of this tutorial are like the following videos:

The steps to create a background animation on Android Studio

1. Create a new project

The first step, create a project and name it as you like. In my tutorial, I named it animated background. In the select language section, Kotlin. For more details, please see the picture below.

2. Open your activity_main.xml and type the code like this

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/root_layout"
        android:background="@drawable/gradient_animation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="HowCreateIt.com"
                android:textSize="35dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
        />


</android.support.constraint.ConstraintLayout>

When you create a project on Android Studio, it will automatically create XML and Java files. But this time XML and Kotlin files will be formed.

3. Open you color.xml and type this code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    <color name="colorTransparent">#00FFFFFF</color>

    <color name="colorGradientStart">#D4E157</color>
    <color name="colorGradientCenter">#29B6F6</color>
    <color name="colorGradientEnd">#d50000</color>

</resources>

4. Open your style.xml and type this code

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorTransparent</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

5. Create gradient_start.xml on drawable folder

Create the gradient_start.xml file and type the following code:

<?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>

6. Create gradient_center.xml and type this code

<?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="90"
        android:startColor="@color/colorGradientCenter"
        android:centerColor="@color/colorGradientEnd"
        android:endColor="@color/colorGradientStart"
    />

</shape>

7. Create gradient_end.xml and type this code

<?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="-45"
        android:startColor="@color/colorGradientEnd"
        android:centerColor="@color/colorGradientStart"
        android:endColor="@color/colorGradientCenter"
    />

</shape>

8. Create gradient_animation.xml and type this code

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

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

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

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

</animation-list>

9. Open your MainActivity.kt and type this code

package com.howcreateit.animatedbackground

import android.graphics.drawable.AnimationDrawable
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN

        val animDrawable = root_layout.background as AnimationDrawable
        animDrawable.setEnterFadeDuration(10)
        animDrawable.setExitFadeDuration(500)
        animDrawable.start()

    }
}

If you are typing correctly, then you will make an animated background. Sorry, the video for posting on Youtube is not finished yet. Later when I’m done, I’ll post on Youtube.