Shared Element Activity Transitions in Android

Previously, for transitions between different activities and fragments for enter and exit transitions, we used fade animation, slide animation or any other animation. A shared element transitions determines how shared element views are animated from one activity to another activity or fragment to fragment. A share element transition helps users to go different screens through your app by defining a focal point as they go different screens.

This share element transitions is only available on android lollipop and above (API level 21+). In this tutorial, you will learn to implement a kind of animation transition, Share Element transitions between different activities. You can implement it between Fragments, RecyclerView and so on.

Related:
Android Material Design GridView
Sending Email from Android Application
Adding a Share Action to Android Application

Shared Element Transitions: Activity to Activity Example

Here we are going to create two different activities MainActivity and ActivityTwo. First activity contains an image and a button. When button is clicked the new activity ActivityTwo is launch. This second activity loaded everything about transitions. Second activity contains everything that you want to show to the user, In this example I will show a image in ImageView and text in TextView.

Let’s start by creating new android project to implement shared element transitions between activity to activity in android app.
Application Name: Android Shared Element Transitions
Company Domain: viralandroid.com
API Level: 21+
Activity: Empty Activity

Enable Window Content Transitions

First you need to enable window content transitions. For that open your styles.xml file and add android:windowContentTransitions true.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:windowContentTransitions">true</item>
    </style>
</resources>

XML Layout File


Open your activity_main.xml file and add an ImageView with id, layout_width, layout_height, src, transitionName, etc. and a Button with an id, layout_width, layout_height, text and so on. Your activity_main.xml file will look like below.

res/layout/activity_main.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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.viralandroid.sharedelementtransitions.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="128dp"
        android:layout_height="96dp"
        android:layout_above="@+id/button_start_new_activity_transaction"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher"
        android:transitionName="simple_activity_transition" />

    <Button
        android:id="@+id/button_start_new_activity_transaction"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Click" />

</RelativeLayout>

Now create a new XML layout file called simple_transaction_activity_layout.xml and add an ImageView & a TextView.

res/layout/simple_transaction_activity_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <ImageView
        android:id="@+id/simple_activity_b_image"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher"
        tools:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/transaction_activity_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="The transitionName has to be unique on the screen to any other element transitions you have. Otherwise you’ll just confuse the framework and may get some weird results. A shared element transition determines how shared element views—also called hero views—are animated from one Activity/Fragment to another during a scene transition. Shared elements are animated by the called Activity/Fragment’s enter and return shared element transitions." />
</LinearLayout>

Android Java Activities File

Open your MainActivity.java file and define ImageView, Button and so on. Screen transitions animation is implementing inside on button click listener.

src/MainActivity.java



Now create a new java activity file called ActivityTwo.java. Here you don’t need to do any more things just in setContentView to the second XML layout file.

src/ActivityTwo.java




AndroidManifest.xml File

AndroidManifest.xml file will look like below:



Now, run your Android Shared Element Transitions app by clicking run icon. After launching your app, click the button, there will open a new screen with animation effect. This animation effect can be seen when you come back to previous activity. If you want to know more details about this you can found here, a article by Mike Scamell.