Android Shared View Transition

Since Android L we can experience a smooth transition between activities and the Shared View between those activities.

Standard Detail Screen Demo:

android-shared-view-animtion-1


Step 1: Add tag “android:transitionName” to the shared views:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/textView"
    android:layout_marginBottom="25dp"
    android:src="@drawable/images"
    android:transitionName="myImage" />

Step 2: Pass view as bundle in the calling Intent

For Single sharing view you can use the following snippet
Intent intent = new Intent(MainActivity.this, ScrollingActivity.class);

ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, findViewById(R.id.imageView), "myImage");

startActivity(intent, optionsCompat.toBundle()); 
For Multiple sharing views:
Intent intent = new Intent(MainActivity.this, ScrollingActivity.class);

Pair<View, String> pair1 = Pair.create(findViewById(R.id.imageView), "myImage");
Pair<View, String> pair2 = Pair.create(findViewById(R.id.textView), "myTitle");

ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, pair1, pair2);

startActivity(intent, optionsCompat.toBundle());

Step 3: Update the theme in styles.xml

<item name="android:windowActivityTransitions">true</item>

Working Demo:

ezgif-com-video-to-gif

 


Video Tutorial:

Leave a Reply