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