Shared Element Transition in Android with Example
Last Updated :
30 Jul, 2024
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.
-(1).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);
// Initializing fade animation
Fade fade = new Fade();
View decor = getWindow().getDecorView();
// 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);
// Adding enter and exit transitions
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);
// Adding fade animation between two image views
Fade fade = new Fade();
View decor = getWindow().getDecorView();
// 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);
// Set fade animation for enter and exit transitions
getWindow().setEnterTransition(fade);
getWindow().setExitTransition(fade);
// Initializing the image view
final ImageView imageView = findViewById(R.id.image);
// Setting onClick listener for the image view
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// On image click, open new activity with animation
Intent intent = new Intent(MainActivity.this, MainActivity2.class);
// Make scene transition and add fade animation
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
MainActivity.this, imageView, ViewCompat.getTransitionName(imageView));
// Start the new activity with the transition options
startActivity(intent, options.toBundle());
}
});
}
}
Output:
Check out the app's code: https://github.com/ChaitanyaMunje/GFGImageSlider/tree/SharedElementTransition
Similar Reads
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
4 min read
Synchronization in Android with Example
In Android, synchronization refers to the process of ensuring that data stored in multiple locations is the same and up-to-date. This can be achieved through various methods such as using the built-in Android synchronization adapters, or by manually implementing synchronization using the Android Syn
5 min read
Input Events in Android with Example
In Android, there's quite a method to intercept the events from a user's interaction with your application. When considering events within your interface, the approach is to capture the events from the precise View object that the user interacts with. The View class provides the means to try to do s
7 min read
ViewAnimator in Android with Example
ViewAnimator is a very fascinating and useful feature as it switches between two or more views smoothly and mainly meant for animation features of the views on screens. It is the parent class of ViewFlipper and ViewSwitcher and the main distinction is it can switch between more than 2 views also. It
4 min read
ObjectAnimator in Android with Example
ObjectAnimator is a Subclass of ValueAnimator, which allows us to set a target object and object property to animate. It is an easy way to change the properties of a view with a specified duration. We can provide the end position and duration of the animation. Let us create a simple version of the G
5 min read
LineAnimationView in Android with Example
LineAnimationView is an animation library that helps to gain the attention of the user. It is useful for creating very beautiful animation. In this animation, an object emerges from the bottom and goes to the top. Some useful features and applications of LineAnimationView are: Use this view where if
2 min read
Parallax Effect in Android with Example
In recent years, every Android application has prioritized user experience. A well-designed app will have high user ratings and popularity. Many effects are available in the UI/UX space to provide users with a good experience. Parallax is one such effect. Let's take a look at what this is all about,
4 min read
TextWriter in Android with Example
TextWriter is used to animate text. TextWriter can be used when users open the app i.e. in place of Splash Screen. One can also use Splash Screen instead of TextWriter but TextWriter is an animation library and it is known that animations help to gain the attention of the user so it is best to learn
2 min read
Services in Android with Example
Services in Android are a special component that facilitates an application to run in the background in order to perform long-running operation tasks. The prime aim of a service is to ensure that the application remains active in the background so that the user can operate multiple applications at t
10 min read
Screen Orientations in Android with Examples
Screen Orientation, also known as screen rotation, is the attribute of activity element in android. When screen orientation change from one state to other, it is also known as configuration change. States of Screen orientation There are various possible screen orientation states for any android appl
3 min read