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