Material Design: the Shared View Transition

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Android now includes support for material design apps. To use material design in your Android apps, follow the guidelines defined in the material design specification and use the new components and functionality available in Android 5.0 (API level 21) and above.

Why Material design?

Following Google Material Design guidelines is trivial to make sure your app is up-to-date with latest trends and is following proper design standards. Android users are also getting used to Material Design apps and will thus be feel more at ease with your apps.

Shared View Transition

Shared View Transition is one of guidelines mentioned from Material design when dealing with transitions between Activities (different screens). Essentially, you will only use this if you have some Views (images) which are present in both the current activity (screen) and the next activity (screen).

On implementation level, you only need to specify common Views (e.g an imageView) which is visible in current and next Activity (screen). Android will perform a transformation (e.g transition and scaling) such that the images will seem to move from the current activity to the next. Let’s see an example below before we continue on its purpose:

Purpose

The aim behind the share view transition is make the transition look seamless. E.g when loading a new Activity (screen), we may need to fetch some data from API and/or show a different Layout/UI. Showing a Slide in/Fade transition is an easy way hide this process but this transition is a bit rough. The user will feel like he going to a new screen. In worse case, he may even think he is going to a new app!

To sum it up, the Shared View Transition blends in the transition from one to another screen by sharing common Views or images. There is a lot more to read on the Google Material Design website with regards to transition: https://material.io/guidelines/motion/material-motion.html#material-motion-implications-of-motion. Please have a look if you haven’t already.

Implementing

Let’s go ahead with it’s implementation. Let’s say we want to share an ImageView between two Activities. (Note that that it could be any View e.g, a RelativeLayout.)

Add Transition Name to the layout files

  • Current Activity Layout – add transitionName for the ImageView which should have transition effect
<ImageView
    android:id="@+id/img_calling_transition"
    android:layout_width="90dp"
    android:layout_height="50dp"
    android:layout_alignParentTop="true"
    android:transitionName="my_img_transition"/>
  • Next/Calling Activity Layout – add same transitionName for corresponding ImageView which should receive the transition:
<ImageView
    android:id="@+id/img_receiving_transition"
    android:layout_width="120dp"
    android:layout_height="80dp"
    android:layout_alignParentBottom="true"
    android:transitionName="my_img_transition"/>

Pass Scene to Intent (in Java)

“StartActivity” call with ActivityOptionsCompat bundle. Create a Scene passing in View which will be transition along with the transition name.

    ActivityOptionsCompat options = ActivityOptionsCompat.
            makeSceneTransitionAnimation(getActivity(), (View) imgCallingTransition, "my_img_transition");

    Intent intent = new Intent(getActivity(), MgProgressStep2Activity.class);
    this.startActivity(intent, options.toBundle());

That’s it. You are done already.

Conclusion

The shared view transition is very easy to implement. Behind the scene, android does the transformation ‘effect’ for us such that the ImageView from the first activity is transformed according to the size and position of the new ImageView in the calling activity and we have “Shared” image transition effect. The result is a more seemless transition which result from applying shared view effect.

This post was quite basic but I feel like this transition is a bit underused (at least in my past projects). Shared View transitions is recommended by material design specifications and is easy to implement transition. So go ahead and use it when applicable. Thanks. Leave a comment if you got any issue with it’s implementation. Click on follow button on side menu to get notified for next post.

Cheers

Catch you in the next one.

Please Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s