Android Animations in Kotlin
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 |
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 milliseconds), 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
<? 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 = "Beginner for Beginner" 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.w3wiki.AnimationsInKotlin/MainActivity.kt file and add below code into it.
Kotlin
package net.w3wiki.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
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.w3wiki.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:
You can find the complete code here: https://github.com/missyadavmanisha/AnimationsInKotlin