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 version = "1.0" encoding = "utf-8" ?>
< RelativeLayout 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.
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.