Shared Element Transition in Android with Example

Last Updated : 27 May, 2021

Shared Element Transition is one of the most seen animations in Android apps. This type of animation is used when we have to open an item from a ListView or RecyclerView. Shared Element Transition in Android determines how shared element views are animated from activity to activity or fragment to fragment. Now we will see the implementation of Shared Element Transition in our app with a simple example.

Implementation of Shared Element Transition in Android

In this example, we will create a simple app where we will create two activities with ImageView and implement transition animation between these two activities. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.

Shared Element Transition in Android Sample GIf

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java 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

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

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=".MainActivity">
 
    <!--Transition name is a simple 
        string that will be given
        to two views between which
         we are applying transition-->
 
    <!--Transition name should be same
         for both the views in which we 
        are making transition-->
     
    <ImageView
        android:id="@+id/image"
        android:layout_width="180dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="120dp"
        android:contentDescription="@string/image_desc"
        android:scaleType="centerCrop"
        android:src="@drawable/gfgimage"
        android:transitionName="fade" />
 
</RelativeLayout>

Step 4: Working with the activity_main2.xml file

Go to the activity_main2.xml file and refer to the following code. Below is the code for the activity_main2.xml file.

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">
 
    <!--Transition name is same 
        as that we have used
        in previous imageview-->
 
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_alignParentTop="true"
        android:contentDescription="@string/image_desc"
        android:scaleType="centerCrop"
        android:src="@drawable/gfgimage"
        android:transitionName="fade" />
     
</RelativeLayout>

Step 5: Working with the MainActivity2.java file

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

Java

import android.os.Build;
import android.os.Bundle;
import android.transition.Fade;
import android.view.View;
 
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity2 extends AppCompatActivity {
 
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
         
        // here we are initializing 
        // fade animation.
        Fade fade = new Fade();
        View decor = getWindow().getDecorView();
         
        // here also we are excluding status bar,
        // action bar and navigation bar from animation.
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container), true);
        fade.excludeTarget(android.R.id.statusBarBackground, true);
        fade.excludeTarget(android.R.id.navigationBarBackground, true);
         
        // below methods are used for adding
        // enter and exit transition.
        getWindow().setEnterTransition(fade);
        getWindow().setExitTransition(fade);
    }
}

Step 6: Working with the MainActivity.java file

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

Java

import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.transition.Fade;
import android.view.View;
import android.widget.ImageView;
 
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityOptionsCompat;
import androidx.core.view.ViewCompat;
 
public class MainActivity extends AppCompatActivity {
 
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // we are adding fade animation 
        // between two imageviews.
        Fade fade = new Fade();
        View decor = getWindow().getDecorView();
         
        // below 3 lines of code is to exclude 
        // action bar,title bar and navigation 
        // bar from animation.
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container), true);
        fade.excludeTarget(android.R.id.statusBarBackground, true);
        fade.excludeTarget(android.R.id.navigationBarBackground, true);
         
        // we are adding fade animation
        // for enter transition.
        getWindow().setEnterTransition(fade);
         
        // we are also setting fade 
        // animation for exit transition.
        getWindow().setExitTransition(fade);
         
        // initializing our imageview.
        final ImageView imageView = findViewById(R.id.image);
 
        // setting on click listener for our imageview.
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on image click we are opening new activity
                // and adding animation between this two activities.
                Intent intent = new Intent(MainActivity.this, MainActivity2.class);
                // below method is used to make scene transition
                // and adding fade animation in it.
                ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                        MainActivity.this, imageView, ViewCompat.getTransitionName(imageView));
                // starting our activity with below method.
                startActivity(intent, options.toBundle());
            }
        });
    }
}

Output:

Check out the app’s code: https://github.com/ChaitanyaMunje/GFGImageSlider/tree/SharedElementTransition

Suggest improvement

How to Implement Pagination in Android RecyclerView using Volley?

How to Load PDF from URL in Android?

Share your thoughts in the comments

Shared Element Transition in Android with Example

Implementation of Shared Element Transition in Android

Step by Step Implementation

XML

XML

Java

Java

Output:

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?