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 the 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 the 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.