Android Shared Element Activity Transition | Androidmonks

Android Shared Element Activity Transition Animation

Android Shared Element is a concept of given an animation property between Activities. We will be using this Android Shared Element in this tutorial, across 2 activities to create an Animation between them. We will be using Android Studio for this tutorial.

To know more about Android Shared Element Activity transition animation read the Introduction. If you already know what they are, skip to the Creating the Layouts section. Note: This concept can be implemented only after API 21. The older releases do not support the Shared Element.

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

Introduction to Shared Element

Shared Element is a post Lollipop only concept, wherein it introduces the developers to an Animation while switching between activities. The main reason for creating the Shared Element Activity Transition is to help the user in giving a transition for the user to focus next. See the below example to understand what they are.

Google Play Music Shared Element Transition Example
Source: Mike Scamell

In the above picture, you can very well see that upon clicking on to an image another Activity is opened. However, the transition between the activity is very smooth. This property creates a shift in focus for the user and provides a better experience while navigating through the application.

To create a Shared Element Transition, we will be making use of the Activity Bundle to store the values. Below are the steps to be followed in order to create the Transition Animation.

  1. The first activity captures the shared element values and passes it to the next element through the Bundle instance.
  2. Once the 2nd activity is launched, it launches as a plain Activity.
  3. Reads the Bundle instance that the 1st Activity shared.
  4. Opens the Bundle and reads the values and prepares it UI
  5. Re-enacts the animation with the new activity, creating a transition like appearance.

We will be following each of the above steps outlined to create a similar transition between a Listview Activity to a new Activity.

Creating the Layouts

Let us create a Simple Layout with an ImageView/TextView(Totally up to you, I will be using both in the tutorial). The transition happens upon clicking the ImageView/TextView. We will setup Activity transitions different for the two Views.

Before that, let us create a simple Layout with an ImageView and a TextView like below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="bottom">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:src="@android:drawable/btn_plus"
        android:id="@+id/imageView"
        android:transitionName="@string/transitionView"

        android:contentDescription="TODO" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="15dp"
        android:id="@+id/textView"
        android:text="@string/app_name"
        android:textSize="25sp"
        android:transitionName="@string/transitionView"
        android:textStyle="bold"
        app:fontFamily="monospace" />
</LinearLayout>

If you note clearly, we have provided an additional parameter called as transitionName for both the TextView and the ImageView. This is a string value that represents where the Activity Transition should happen to. Meaning, even if you have multiple views with the same transition name in the source hierarchy, it will essentially be able to pick the right view to start the animation from.

Once you have created the Main Layout, we will additionally create 2 more layouts to hold an ImageView transition and a TextView Transition layout.

Set the Transition name in Theme

You have created the Layout, but there is also the need to mention that the Application is going to perform some action over the already present Theme. You will have to set the windowContentTransitions property to your AppTheme

Add the following to your Styles.xml. Note: Incase you are targeting <21 API make sure you add this in your Values-v21 file.

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

As you can see, the theme contains the colorprimary/primarydark/coloraccent and additionally contains the windowContentTransitions item also.

Creating the ImageView Layout

The purpose of this layout is to create a transition from your ImageView to a new Activity. This will simply be a placeholder for an ImageView. This helps you to understand the transition much better.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright"
    android:transitionName="@string/transitionView">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/monk"/>
</LinearLayout>

The root tag holds a TransitionName which will act as our value. This will indicate that the ImageView should animate to this entire layout in whole.

Creating the TextView Layout

Once the ImageView layout is created, time to create a similar TextView layout for the TextView to transition to.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_green_dark"
    android:transitionName="@string/transitionView"
    android:orientation="vertical"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:textSize="33sp"
        android:layout_gravity="center"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="50sp"
        android:textAlignment="center"
        android:textStyle="bold"
        android:text="This is a sample TextView to show the transition for the shared element"/>
</LinearLayout>

Upon creating the TextView, go ahead and start creating the activities to transition.

Creating the MainActivity.java

Time to start working on the Shared Element main activity. This is where the magic is going to happen.

The majority of the Activity performs the usual task of creating objects and setting an onclick listener to it. Upon creating the onclick listener, we will be setting the activity transitions using the ActivityOptionsCompact class. This class contains the public method makeSceneTransitionAnimation which takes in the first activity, transitionName(That we set initially), the activity to transition into.

The steps followed are,

  1. Create the MainActivity and implement your Views in it. ImageView and TextView are shown below
  2. Inside the OnClickListener, create an intent to be fired to our target activity.
  3. Before firing our intent, create an ActivityOptionsCompact object and call the makeSceneTransitionAnimation
  4. Once the options object is created, bundle it using the toBundle() method and fire it along with the activity.
  5. The Bundle upon received by the new activity takes care of unbundling it and reads the transitionName. All of this happens implicitly.
package com.monks.android.newapplication;

import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.view.ViewCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SearchView;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    TextView textView;
    ImageView imageView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sample_view);
        textView = findViewById(R.id.textView);
        imageView = findViewById(R.id.imageView);

        textView.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, TextActivity.class);
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(MainActivity.this,
                                textView,
                                ViewCompat.getTransitionName(textView));
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    startActivity(intent, options.toBundle());
                }
            }
        });
        imageView.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, ImageActivity.class);
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(MainActivity.this,
                                imageView,
                                ViewCompat.getTransitionName(imageView));
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    startActivity(intent, options.toBundle());
                }
            }
        });
    }
}

Create a holder Activity for ImageView and TextView

Create a simple ImageView Activity and TextView Activity like below.

ImageActivity.java
package com.monks.android.newapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class ImageActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.image_view_layout);

    }
}
TextActivity.java
package com.monks.android.newapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class TextActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.text_view_layout);

    }
}

As you can see, the two Activities act as merely a place holder for our Layouts.

Our final output in AVD is below.

Final Activity Transitions Output
Final Activity Transitions Output

Also Read  Android Fragments Tutorial - Android Programming

Leave a Comment

Your email address will not be published. Required fields are marked *