Trending Now Data Structures Algorithms Topic-wise Practice Python Machine Learning Data Science J

Android Animations in Kotlin

Read Discuss Courses Practice

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 :

XML ATTRIBUTES DESCRIPTION

android:duration It is used to specify the duration of animation to run

It is the starting alpha value for the animation,

android:fromAlpha 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

It is the change in Y coordinate to be applied at the start of

android:fromYDelta
the animation

It is the change in Y coordinate to be applied at the end of the

android:toYDelta
animation

Delay occur when an animation runs (in milliseconds), once

android:startOffset
start time is reached.
 XML ATTRIBUTES DESCRIPTION

It represents the X-axis coordinates to zoom from starting

android:pivotX
point.

It represents the Y-axis coordinates to zoom from starting

android:pivotY
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

1. Open Android Studio

2. Go to File => New => New Project.
3. 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

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

bounce.xml
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>

fade_in.xml

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>

fade_out.xml
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>

rotate.xml

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

slide_down.xml

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>

slide_up.xml

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>

zoom_in.xml

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>

zoom_out.xml
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.

Create MainActivity.kt file

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

Kotlin

package net.geeksforgeeks.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_i
textView.startAnimation(animationFadeIn)
}
fade_out.setOnClickListener {
val animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_
textView.startAnimation(animationFadeOut)
Handler().postDelayed({
textView.visibility = View.GONE
}, 1000)
}
zoom_in.setOnClickListener {
val animationZoomIn = AnimationUtils.loadAnimation(this, R.anim.zoom_i
textView.startAnimation(animationZoomIn)
}
zoom_out.setOnClickListener {
val animationZoomOut = AnimationUtils.loadAnimation(this, R.anim.zoom_
textView.startAnimation(animationZoomOut)
}
slide_down.setOnClickListener {
val animationSlideDown = AnimationUtils.loadAnimation(this, R.anim.sli
textView.startAnimation(animationSlideDown)
}
slide_up.setOnClickListener {
val animationSlideUp = AnimationUtils.loadAnimation(this, R.anim.slide
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

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>

Run as Emulator:

00:00 00:20

You can find the complete code here:

https://github.com/missyadavmanisha/AnimationsInKotlin
Last Updated : 17 May, 2022 12

Similar Reads
Android Rotate animations in How to make Check/Tick and
Kotlin Cross animations in Android

Android Animations using How to Control Lottie

Java Animations
Programmatically in…

How to Apply View How to Create Gradient

Animations Effects in Animations Like Instagram
Android? using Spark Library in…

Fluid Slider Animations in Creating a Anagram Checker

Android Android App in Android
Studio with Kotlin

Android - Create Group Kotlin | Language for

BarChart with Kotlin Android, now Official by
Google

Related Tutorials
Spring MVC Tutorial Spring Boot Tutorial

Java 8 Features - Complete IBPS Clerk Previous Year

Tutorial Question Papers with
Solutions

Introduction to Heap - Data

Structure and Algorithm
Tutorials

Previous Next

Android Animations using Java How to add fading TextView animation

in Android
Article Contributed By :
ManishaYadav30
M ManishaYadav30

Vote for difficulty

Current difficulty : Easy

Easy Normal Medium Hard Expert

Improved By : anikakapoor, varshagumber28, sooda367, pamigifarm

Article Tags : Android-Animation, Kotlin Android, Picked, Android, Kotlin
Practice Tags : Android

Improve Article Report Issue

How to add fading TextView animation in Android

TextView is the basic building block of user interface components. It is used
to set the text and di...Read More

A-143, 9th Floor, Sovereign Corporate

Tower, Sector-136, Noida, Uttar Pradesh -
201305
[email protected]
 Company Explore
About Us Job-A-Thon Hiring Challenge
Legal Hack-A-Thon
Careers GfG Weekly Contest
In Media Offline Classes (Delhi/NCR)
Contact Us DSA in JAVA/C++
Advertise with us Master System Design
Master CP
Campus Training Program

Languages DSA Concepts

Python Data Structures
Java Arrays
C++ Strings
PHP Linked List
GoLang Algorithms
SQL Searching
R Language Sorting
Android Tutorial Mathematical
Dynamic Programming

DSA Roadmaps Web Development

DSA for Beginners HTML
Basic DSA Coding Problems CSS
Complete Roadmap To Learn DSA JavaScript
DSA for FrontEnd Developers Bootstrap
DSA with JavaScript ReactJS
Top 100 DSA Interview Problems AngularJS
All Cheat Sheets NodeJS
DSA Roadmap by Sandeep Jain Express.js
Lodash
 Computer Science Python
GATE CS Notes Python Programming Examples
Operating Systems Django Tutorial
Computer Network Python Projects
Database Management System Python Tkinter
Software Engineering OpenCV Python Tutorial
Digital Logic Design Python Interview Question
Engineering Maths

Data Science & ML DevOps

Data Science With Python Git
Data Science For Beginner AWS
Machine Learning Tutorial Docker
Maths For Machine Learning Kubernetes
Pandas Tutorial Azure
NumPy Tutorial GCP
NLP Tutorial
Deep Learning Tutorial

Competitive Programming System Design

Top DSA for CP What is System Design
Top 50 Tree Problems Monolithic and Distributed SD
Top 50 Graph Problems Scalability in SD
Top 50 Array Problems Databases in SD
Top 50 String Problems High Level Design or HLD
Top 50 DP Problems Low Level Design or LLD
Top 15 Websites for CP Top SD Interview Questions

Interview Corner GfG School

Company Wise Preparation CBSE Notes for Class 8
Preparation for SDE CBSE Notes for Class 9
Experienced Interviews CBSE Notes for Class 10
Internship Interviews CBSE Notes for Class 11
Competitive Programming CBSE Notes for Class 12
 Aptitude Preparation English Grammar

Commerce UPSC
Accountancy Polity Notes
Business Studies Geography Notes
Economics History Notes
Management Science and Technology Notes
Income Tax Economics Notes
Finance Important Topics in Ethics
Statistics for Economics UPSC Previous Year Papers

SSC/ BANKING Write & Earn

SSC CGL Syllabus Write an Article
SBI PO Syllabus Improve an Article
SBI Clerk Syllabus Pick Topics to Write
IBPS PO Syllabus Write Interview Experience
IBPS Clerk Syllabus Internships
Aptitude Questions
SSC CGL Practice Papers

@geeksforgeeks , All rights reserved