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