Slide Animation in Android with Kotlin

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.

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

Output:

You can see that on button clicks, the respective animations are played.