Android Animations in Kotlin

Animation is a method in which a collection of images are combined in a sepecific way and processed then they appear as moving images. Building animations make on-screen objects seems 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 :

XML ATTRIBUTES	DESCRIPTION
android:duration	It is used to specify the duration of animation to run
android:fromAlpha	It is the starting alpha value for the animation, where 1.0 means fully opaque and 0.0 means fully transparent
android:toAlpha	It is the ending alpha value
android:id	Sets unique id of the view
android:fromYDelta	It is the change in Y coordinate to be applied at the start of the animation
android:toYDelta	It is the change in Y coordinate to be applied at the end of the animation
android:startOffset	Delay occur when an animation runs (in miliseconds), once start time is reached.
android:pivotX	It represents the X-axis coordinates to zoom from starting point.
android:pivotY	It represents the Y-axis coordinates to zoom from starting point.
android:fromXScale	Starting X size offset,
android:fromYScale	Starting Y size offset,
android:toXScale	Ending of X size offset
android:toYScale	Ending of Y size offset
android:fromDegrees	Starting angular position, in degrees.
android:toDegrees	Ending angular position, in degrees.
android:interpolator	An interpolator defines the rate of change of an animation

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.

Create New Project

Open Android Studio
Go to File => New => New Project.
Then, select Empty Activity and click on next
- 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.

Modify activity_main.xml file

Open res/layout/activity_main.xml file and add code into it.

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

bounce.xml

In this animation the text is bounce like a ball.

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

fade_in.xml

In Fade In animation the text will appear from background.

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

fade_out.xml

In Fade Out animation the colour of text is faded for a particular amount of time.

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

rotate.xml

In rotate animation the text is rotated for a particular amount of time.

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

slide_down.xml

In this animation the text will come from top to bottam.

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

slide_up.xml

In this animation the text will go from bottam to top.

<set xmlns:android="http://schemas.android.com/apk/res/android"> 
	<translate
		android:duration="1000"
		android:fromYDelta="0"
		android:toYDelta="-100%" /> 
</set>

zoom_in.xml

In this animation the text will appear bigger for a particular amount of time.

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

zoom_out.xml

In this animation the text will appear smaller for a particular amount of time.

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

Create MainActivity.kt file

Open app/src/main/java/net.geeksforgeeks.AnimationsInKotlin/MainActivity.kt file and add below code into it.

package com.tejsumeru.animationsinkotlin 

import androidx.appcompat.app.AppCompatActivity 
import android.os.Bundle 
import android.os.Handler 
import android.view.View 
import android.view.animation.AnimationUtils 
import 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.

AndroidManifest.xml file

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.tejsumeru.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>

Now run the project…

4 thoughts on “Android Animations in Kotlin”

XMC.PL December 3, 2021 at 1:25 pm


Thank you pertaining to sharing that excellent written content on your website. I ran into it on google. I am going to check back again once you publish much more aricles.
Ogłoszenia Pianina December 5, 2021 at 9:44 am


Quite insightful submit. Never believed that it was this simple after all. I had spent a beneficial deal of my time looking for someone to explain this subject clearly and you’re the only one that ever did that. Kudos to you! Keep it up
Tworzenie muzyki December 6, 2021 at 12:24 pm


Appreciate writing this. I love the world-wide-web because you can learn something new every day. I’ll share this with my friends, thank you!
Dowcipy O żydach January 30, 2022 at 10:31 am


Many thanks for the great posting. I am glad I have taken the time to see this.