Slide Animation in Android with Kotlin

Last Updated : 06 Feb, 2022

Animations in Android allow UI elements to perform aesthetic moves across the screen. Animations can be implemented from a third party as well as developed from scratch. Despite the source, animations can be applied to any kind of view or UI element.

Slide Animation

Typically, we have demonstrated a slide animation, one from left to right and the other from right to left on two TextView. So in this article, we will show you how you could programmatically create slide animations from scratch in Android. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add two buttons and two TextViews for performing animations. TheTextView is initially set to invisible which on button click would be set to visible.

XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/relative_layout_1"> 
  
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="slide from left"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50sp"/> 
  
    <Button
        android:id="@+id/button_2"
        android:layout_below="@id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="slide from right"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50sp"/> 
  
    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="invisible"
        android:text="TextView1"
        android:textSize="30sp"/> 
  
    <TextView
        android:id="@+id/text_view_2"
        android:layout_below="@id/text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="invisible"
        android:text="TextView2"
        android:textSize="30sp"/> 
  
</RelativeLayout>

Step 3: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package org.geeksforgeeks.slideanimation 
  
import androidx.appcompat.app.AppCompatActivity 
import android.os.Bundle 
import android.transition.Slide 
import android.transition.TransitionManager 
import android.view.Gravity 
import android.view.View 
import android.widget.Button 
import android.widget.RelativeLayout 
import android.widget.TextView 
  
class MainActivity : AppCompatActivity() { 
    override fun onCreate(savedInstanceState: Bundle?) { 
        super.onCreate(savedInstanceState) 
        setContentView(R.layout.activity_main) 
  
        // Declaring and initializing  
        // the elements from the layout file 
        val mRelativeLayout = findViewById<RelativeLayout>(R.id.relative_layout_1) 
        val mButtonLeft = findViewById<Button>(R.id.button_1) 
        val mButtonRight = findViewById<Button>(R.id.button_2) 
        val mTextView1 = findViewById<TextView>(R.id.text_view_1) 
        val mTextView2 = findViewById<TextView>(R.id.text_view_2) 
  
        // When button is clicked, left  
        // to right animation is created 
        mButtonLeft.setOnClickListener { 
            val mSlideLeft = Slide() 
            mSlideLeft.slideEdge = Gravity.START 
            TransitionManager.beginDelayedTransition(mRelativeLayout, mSlideLeft) 
            mTextView1.visibility = View.VISIBLE 
        } 
  
        // When button is clicked, right 
        // to left animation is created 
        mButtonRight.setOnClickListener { 
            val mSlideRight = Slide() 
            mSlideRight.slideEdge = Gravity.END 
            TransitionManager.beginDelayedTransition(mRelativeLayout, mSlideRight) 
            mTextView2.visibility = View.VISIBLE 
        } 
    } 
}