Android Shared Element Transition with Kotlin
Last Updated :
21 Dec, 2022
Shared element transition is seen in most of the applications which are used when the user navigates between two screens. This type of animation is seen when a user clicks on the items present in the list and navigates to a different screen. During these transitions, the animation which is displayed is called a shared element transition. In this article, we will take a look at the implementation of Shared element transition in Android applications using Kotlin.
Note: If you are looking to integrate shared element transition in android using Java. Check out the following article: Shared Element Transition in Android using Java
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. Note that select Kotlin as the programming language.
Step 2: Create a New Empty Activity
Navigate to the app > java > your package name > right-click > New > Activity > Empty Activity and name the activity as MainActivity2.
Step 3: 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. Comments are added inside the code to understand the code in more detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity" >
< TextView
android:id = "@+id/idTVHeading"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginLeft = "20dp"
android:layout_marginTop = "50dp"
android:layout_marginRight = "20dp"
android:gravity = "center"
android:padding = "5dp"
android:text = "Shared Element Transition Example"
android:textAlignment = "center"
android:textColor = "@color/purple_200"
android:textSize = "20sp"
android:textStyle = "bold" />
< ImageView
android:id = "@+id/idIVAndroid"
android:layout_width = "200dp"
android:layout_height = "200dp"
android:layout_alignParentBottom = "true"
android:layout_centerHorizontal = "true"
android:layout_margin = "50dp"
android:padding = "10dp"
android:src = "@drawable/android"
android:transitionName = "fade" />
</ RelativeLayout >
|
Step 4: Working with the activity_main2.xml file
Navigate to app > res > layout > activity_main2.xml and add the below code to it. Comments are added in the code to get to know in detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity2" >
< ImageView
android:id = "@+id/idIVAndroid"
android:layout_width = "200dp"
android:layout_height = "200dp"
android:layout_centerHorizontal = "true"
android:layout_margin = "50dp"
android:padding = "10dp"
android:src = "@drawable/android"
android:transitionName = "fade" />
</ RelativeLayout >
|
Step 5: Working with the MainActivity2.kt file
Go to the MainActivity2.kt file and refer to the following code. Below is the code for the MainActivity2.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
package com.gtappdevelopers.kotlingfgproject
import android.os.Build
import android.os.Bundle
import android.transition.Fade
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
class MainActivity2 : AppCompatActivity() {
@RequiresApi (Build.VERSION_CODES.LOLLIPOP)
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main2)
val fade = Fade()
fade.excludeTarget(android.R.id.statusBarBackground, true )
fade.excludeTarget(android.R.id.navigationBarBackground, true )
window.enterTransition = fade
window.exitTransition = fade
}
}
|
Step 6: 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 com.gtappdevelopers.kotlingfgproject
import android.content.Intent
import android.os.Build
import android.os.Bundle
import android.transition.Fade
import android.widget.ImageView
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
import androidx.core.app.ActivityOptionsCompat
import androidx.core.view.ViewCompat
class MainActivity : AppCompatActivity() {
lateinit var imageView: ImageView
@RequiresApi (Build.VERSION_CODES.LOLLIPOP)
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val fade = Fade()
fade.excludeTarget(android.R.id.statusBarBackground, true )
fade.excludeTarget(android.R.id.navigationBarBackground, true )
window.enterTransition = fade
window.exitTransition = fade
imageView = findViewById(R.id.idIVAndroid)
imageView.setOnClickListener {
val intent = Intent( this @MainActivity , MainActivity2:: class .java)
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
this @MainActivity , imageView, ViewCompat.getTransitionName(imageView)!!
)
startActivity(intent, options.toBundle())
}
}
}
|
Now run your application to see the output of it.
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...