Android Shared Element Transition with Kotlin

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
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- Textview to display the heading of the app-->
    <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" />

    <!--on below line we are creating a simple image view-->
    <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
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">

    <!--on below line we are creating a simple image view
         and specifying a transition name for it -->
    <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)

        // on below line we are creating
        // a variable for fade animation
        val fade = Fade()

        // on below line we are excluding our target such
        // as status bar background and navigation bar
        // background from animation.
        fade.excludeTarget(android.R.id.statusBarBackground, true)
        fade.excludeTarget(android.R.id.navigationBarBackground, true)

        // on below line we are setting enter
        // and exit transition as fade.
        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() {

    // on below line we are creating
    // a variable for our image view.
    lateinit var imageView: ImageView

    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // on below line we are creating
        // a variable for our fade.
        val fade = Fade()

        // on below line we are excluding the target
        // which we dont want to animate such as our
        // status background and navigation background.
        fade.excludeTarget(android.R.id.statusBarBackground, true)
        fade.excludeTarget(android.R.id.navigationBarBackground, true)

        // on below line we are specifying
        // enter transition as fade.
        window.enterTransition = fade

        // on below line we are specifying
        // exit transition as fade.
        window.exitTransition = fade

        // on below line we are initializing
        // our image view with its id.
        imageView = findViewById(R.id.idIVAndroid)

        // on below line we are adding on
        // click listener for our image view.
        imageView.setOnClickListener {
            // on below line we are creating a variable
            // for our intent to open a new activity.
            val intent = Intent(this@MainActivity, MainActivity2::class.java)

            // on below line we are creating a variable
            // for activity options compact and setting
            // transition for our activity.
            val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                this@MainActivity, imageView, ViewCompat.getTransitionName(imageView)!!
            )

            // on below line we are starting our
            // activity passing bundles.
            startActivity(intent, options.toBundle())
        }

    }
}

Now run your application to see the output of it.

Output: