In Android Animations are the visuals that are added to make the user interface more interactive, clear and good looking.
In this article we will be discussing how to create a Slide Up/Down animation in Kotlin.
XML Attributes | Description |
---|---|
android:duration | It is used to specify the duration of animation |
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:id | Sets unique id of the view |
First step is to create a new Project in Android Studio. For this follow these steps:
- Click on File, then New and then New Project and give name whatever you like
- Then, select Kotlin language Support and click next button.
- Select minimum SDK, whatever you need
- Select Empty activity and then click finish.
After that, we need to design our layout. For that we need to work with the XML file. Go to app > res > layout and paste the following code:
Modify activity_main.xml file
<? xml version = "1.0" encoding = "utf-8" ?> android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" android:orientation = "vertical" > < TextView android:id = "@+id/textView" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "GeeksForGeeks" android:layout_centerInParent = "true" android:textSize = "30sp" android:textStyle = "bold" /> < Button android:id = "@+id/slide_up" android:layout_width = "100dp" android:layout_height = "wrap_content" android:text = "Slide Up" android:layout_marginTop = "140dp" android:layout_marginLeft = "100dp" /> < Button android:id = "@+id/slide_down" android:layout_width = "100dp" android:layout_height = "wrap_content" android:layout_marginTop = "140dp" android:layout_toRightOf = "@+id/slide_up" android:text = "Slide Down" android:textAllCaps = "false" /> </ RelativeLayout > |
Add anim folder
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.
Again right click this anim folder and select Animation resource file and name it as slide_up. Similarly, also create slide_down.xml and paste the following code.
slide_up.xml
<? xml version = "1.0" encoding = "utf-8" ?> < translate android:duration = "1000" android:fromYDelta = "0" android:toYDelta = "-100%" /> </ set > |
slide_down.xml
<? xml version = "1.0" encoding = "utf-8" ?> < translate android:duration = "1000" android:fromYDelta = "-100%" android:toYDelta = "0" /> </ set > |
Modify MainActivity.kt file
Open app/src/main/java/yourPackageName/MainActivity.kt and do the following changes:
package com.geeksforgeeks.myfirstKotlinapp import androidx.appcompat.app.AppCompatActivity import android.os.Bundle 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) //setting buttons onClickListener slide_down.setOnClickListener { //adding our custom made animation xml file val animation = AnimationUtils.loadAnimation( this , R.anim.fade_out) //appending animation to textView textView.startAnimation(animation) } slide_up.setOnClickListener { val animation = AnimationUtils.loadAnimation( this , R.anim.fade_in) textView.startAnimation(animation) } } } |
AndroidManifest.xml file
<? xml version = "1.0" encoding = "utf-8" ?> package = "i.apps.slideup" > < 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 > |