Android Animations in Kotlin - GeeksforGeeks

12 Nov, 2021
Animation is a method in which a collection of images are combined in a specific way and processed then they appear as moving images. Building animations make on-screen objects seem to be alive. Android has quite a few tools to help you create animations with relative ease. so in this article we will learn to create animations using Kotlin. below are some attributes which we are using while writing the code in xml.
Table of Attributes : 
At first, we will create a new android application. Then, we will create some animations. If you already created the project then ignore step 1. 
Open Android StudioGo to File => New => New Project.Then, select Empty Activity and click on nextWrite application name as DynamicEditTextKotlinSelect minimum SDK as you need, here we have selected 21 as minimum SDKChoose language as Kotlin and click on finish button.
Open Android Studio
Go to File => New => New Project.
Then, select Empty Activity and click on nextWrite application name as DynamicEditTextKotlinSelect minimum SDK as you need, here we have selected 21 as minimum SDKChoose language as Kotlin and click on finish button.
Write application name as DynamicEditTextKotlin
Select minimum SDK as you need, here we have selected 21 as minimum SDK
Choose language as Kotlin and click on finish button.
If you have followed above process correctly, you will get a newly created project successfully.After creating project we will modify xml files. In xml file we will create one TextView where all the animations are performed and Eight Buttons for Eight different animations. 
Open res/layout/activity_main.xml file and add code into it. 
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">    <TextView        android:id="@+id/textView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/linearLayout"        android:gravity="center"        android:text="Geeks for Geeks"        android:textSize="32sp"        android:textColor="@color/colorPrimaryDark"        android:textStyle="bold" />    <LinearLayout        android:id="@+id/linearLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:orientation="vertical">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"            android:weightSum="2">            <Button                android:id="@+id/fade_in"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"                android:text="Fade In"                android:textAllCaps="false" />            <Button                android:id="@+id/fade_out"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"                android:text="Fade Out"                android:textAllCaps="false" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"            android:weightSum="2">            <Button                android:id="@+id/zoom_in"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"                android:text="Zoom In"                android:textAllCaps="false" />            <Button                android:id="@+id/zoom_out"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"                android:text="Zoom Out"                android:textAllCaps="false" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"            android:weightSum="2">            <Button                android:id="@+id/slide_down"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"                android:text="Slide Down"                android:textAllCaps="false" />            <Button                android:id="@+id/slide_up"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"                android:text="Slide Up"                android:textAllCaps="false" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"            android:weightSum="2">            <Button                android:id="@+id/bounce"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"                android:text="Bounce"                android:textAllCaps="false" />            <Button                android:id="@+id/rotate"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1"                android:text="Rotate"                android:textAllCaps="false" />        </LinearLayout>    </LinearLayout></RelativeLayout>
After modifying the layout we will create xml files for animations. so we will first create a folder name anim.In this folder, we will be adding the XML files which will be used to produce the animations. For this to happen, go to app/res right click and then select, Android Resource Directory and name it as anim.
In this animation the text is bounce like a ball.  
XML
<?xml version="1.0" encoding="utf-8"?><set    xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/linear_interpolator"    android:fillAfter="true">    <translate        android:fromYDelta="100%"        android:toYDelta="-20%"        android:duration="300" />    <translate        android:startOffset="500"        android:fromYDelta="-20%"        android:toYDelta="10%"        android:duration="150" />    <translate        android:startOffset="1000"        android:fromYDelta="10%"        android:toYDelta="0"        android:duration="100" /></set>
In Fade In animation the text will appear from background. 
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/linear_interpolator">    <alpha        android:duration="1000"        android:fromAlpha="0.1"        android:toAlpha="1.0" /></set>
In Fade Out animation the colour of text is faded for a particular amount of time. 
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/linear_interpolator">    <alpha        android:duration="1000"        android:fromAlpha="1.0"        android:toAlpha="0.1" /></set>
In rotate animation the text is rotated for a particular amount of time. 
XML
<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="1000"    android:fromDegrees="0"    android:interpolator="@android:anim/linear_interpolator"    android:pivotX="50%"    android:pivotY="50%"    android:startOffset="0"    android:toDegrees="360" />
In this animation the text will come from top to bottom. 
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <translate        android:duration="1000"        android:fromYDelta="-100%"        android:toYDelta="0" /></set>
In this animation the text will go from bottom to top. 
XML
<set xmlns:android="http://schemas.android.com/apk/res/android">    <translate        android:duration="1000"        android:fromYDelta="0"        android:toYDelta="-100%" /></set>
In this animation the text will appear bigger for a particular amount of time. 
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:fillAfter="true">    <scale xmlns:android="http://schemas.android.com/apk/res/android"        android:duration="1000"        android:fromXScale="1"        android:fromYScale="1"        android:pivotX="50%"        android:pivotY="50%"        android:toXScale="1.5"        android:toYScale="1.5">    </scale></set>
In this animation the text will appear smaller for a particular amount of time. 
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:fillAfter="true" >    <scale        xmlns:android="http://schemas.android.com/apk/res/android"        android:duration="1000"        android:fromXScale="1.0"        android:fromYScale="1.0"        android:pivotX="50%"        android:pivotY="50%"        android:toXScale="0.5"        android:toYScale="0.5" >    </scale></set>
After creating all animations in xml. we will create MainActivity. 
Open app/src/main/java/net.geeksforgeeks.AnimationsInKotlin/MainActivity.kt file and add below code into it. 
Java
package net.geeksforgeeks.animationsinkotlin  import androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport android.os.Handlerimport android.view.Viewimport android.view.animation.AnimationUtilsimport kotlinx.android.synthetic.main.activity_main.*  class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)        fade_in.setOnClickListener {            textView.visibility = View.VISIBLE            val animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in)            textView.startAnimation(animationFadeIn)        }        fade_out.setOnClickListener {            val animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out)            textView.startAnimation(animationFadeOut)            Handler().postDelayed({                textView.visibility = View.GONE            }, 1000)        }        zoom_in.setOnClickListener {            val animationZoomIn = AnimationUtils.loadAnimation(this, R.anim.zoom_in)            textView.startAnimation(animationZoomIn)        }        zoom_out.setOnClickListener {            val animationZoomOut = AnimationUtils.loadAnimation(this, R.anim.zoom_out)            textView.startAnimation(animationZoomOut)        }        slide_down.setOnClickListener {            val animationSlideDown = AnimationUtils.loadAnimation(this, R.anim.slide_in)            textView.startAnimation(animationSlideDown)        }        slide_up.setOnClickListener {            val animationSlideUp = AnimationUtils.loadAnimation(this, R.anim.slide_out)            textView.startAnimation(animationSlideUp)        }        bounce.setOnClickListener {            val animationBounce = AnimationUtils.loadAnimation(this, R.anim.bounce)            textView.startAnimation(animationBounce)        }        rotate.setOnClickListener {            val animationRotate = AnimationUtils.loadAnimation(this, R.anim.rotate)            textView.startAnimation(animationRotate)        }    }}
As, AndroidManifest.xml file is very important file in android application, so below is the code of manifest file. 
Code inside src/main/AndroidManifest.xml file would look like below
XML
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="net.geeksforgeeks.animationsinkotlin">      <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:roundIcon="@mipmap/ic_launcher_round"        android:supportsRtl="true"        android:theme="@style/AppTheme">        <activity android:name=".MainActivity">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                  <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>  </manifest>
You can find the complete code here: https://github.com/missyadavmanisha/AnimationsInKotlin 
anikakapoor
sooda367
varshagumber28
Android-Animation
Kotlin Android
Picked
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Broadcast Receiver in Android With Example
How to Create and Add Data to SQLite Database in Android?
Services in Android with Example
Content Providers in Android with Example
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Services in Android with Example
Content Providers in Android with Example
Android RecyclerView in Kotlin
Android UI Layouts