Shared Element Transition in Android

Overview

Generally transitions between different activities or fragments included enter and exit transitions that animates whole view chains of autonomous to one another. Case of such transitions are a blur progress, slide change or the recently presented explode transitions.

In many cases, ordinarily, there are elements basic to the two activities and giving the ability to transition these shared elements independently underlines continuity among transitions and breaks activity limits as the client explores the application.The idea of this transition powers the human eye to concentrate on the data and its representations in the new activity rather than the real activity outline sliding or blurring which makes the experience much more consistent.

Shared Element Transitions in Activity

Note that the shared element transitions require Android 5.0 (API level 21) or more and will be disregarded for any lower API versions. Make certain to check the version at runtime before utilizing API 21 explicit features.

1. Enable Window Content Transitions

We need to eneble window content transions in styles.xml like 

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:windowContentTransitions">true</item>
    ...
</style>

2. Assign Transition Name

We need to assign a common transition name to the view in both layouts in which we needs transitions like -

For an example in activity_main.xml -

<android.support.v7.widget.CardView
  ...>
      <ImageView
          android:id="@+id/ivProfile"
          android:transitionName="profile"
          android:scaleType="centerCrop"
          android:layout_width="match_parent"
          android:layout_height="160dp" />
      ...
</android.support.v7.widget.CardView>

And in the second activity xml -

<LinearLayout
  ...>
      <ImageView
          android:id="@+id/ivProfile"
          android:transitionName="profile"
          android:scaleType="centerCrop"
          android:layout_width="match_parent"
          android:layout_height="380dp" />
      ...
</LinearLayout>

3. Start Activity

Now we need to start the target activity with bundle of shared elements and views.

Intent intent = new Intent(this, DetailsActivity.class);
// Pass  the data object in the bundle and call details activity.
intent.putExtra(DetailsActivity.EXTRA_CONTACT, contact);
ActivityOptionsCompat options = ActivityOptionsCompat.
    makeSceneTransitionAnimation(this, (View)ivProfile, "profile");
startActivity(intent, options.toBundle());

That is it! Determining the source view alongside the transition name guarantees that regardless of whether you have various perspectives with a similar transition name in the source chain of importance, it will basically have the capacity to pick the correct view to begin the animation from. 

To switch the scene transition movement when you complete the second action, call the Activity.supportFinishAfterTransition() method rather than Activity.finish(). Additionally, you should override the conduct of the home button in the ToolBar/ActionBar for such cases:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        // Respond to the action bar's Up/Home button
        case android.R.id.home:
            supportFinishAfterTransition();
            return true;
    }
    return super.onOptionsItemSelected(item);
}