Skip to content
Related Articles

Related Articles

Improve Article

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

 

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :