Intive Blog

Material Motion, Material Design animations

Today we want to discuss how to create and apply transactions in Android apps, following the latest policies and updates of Google’s Material Design.

You can notice that the package Android Transition was added along with Kitkat on API 19 and is currently in the support library as from API 14. Such package includes the new “Scenes” and “Transitions” features which will be discussed hereafter.

SCENES (transitions within a screen)

Scenes are used to achieve transitions within a screen, although this kind of transitions can also be achieved by creating a “transition” (see below in the section transitions).

They are normally used in situations where we need to change a layout for another. Each layout is called a Scene.

  • How to create a Scene:
Parameters

  1. sceneRoot: It is the layout that will be replaced.
  2. layoutld: It is the layout which will be inflated to be displayed.
  3. context: It is the context of the application.
  • How to start the transition:
That is, call the method go of the transition manager passing on a scene to it.

TRANSITIONS

For their part, transitions contain the information of the animation to be performed with the change of Scene. The different transitions that have been introduced by each package are:

API 19: Fade, AutoTransition (Default), ChangeBounds, Transition Set

API 21: Explode, Slide, ChangeClipBounds, ChangeImageTransform, ChangeTransform

Let us see how to create and apply a “transition”. It can be observed that there are two options that we can choose when we need to create one: one is by using XML, and the other is in a programmatic manner. In both cases, the “transition” use will only be in programmatic manner.

  • Option 1 (with XML)

How to create a transition with XML:

How to use a transition created with XML:

  • Option 2 (in a programmatic manner)

How to create a transition programmatically and use it later:

 

Shared elements on different screens

Shared elements on different screens were added on the API 21 with Android Lollipop, and are not included in the support libraries for previous versions, at least the official ones. The idea of shared elements is to make the Scene change smoother, keeping a shared element between them. Normally a single shared view between Scenes is used so that the user is not distracted by many views going from one side to the other.

When we use Activities, the feature has to be activated, except when using Fragments. Let’s see what the process would be like.

  • How to activate this feature when working with Activities?
  • How to identify the shared element?

We can identify the shared element as the Android attribute: transitionName on both screens.

Screen 1:
layout/activity_a.xml

Screen 2:
layout/activity_b.xml

  • How to use shared elements with Activities?

To use shared elements when we work with activities, we must pass a bundle in the intent

**it must coincide with the “transition” name.

  • How to apply a transition between two fragments?
As it can be observed, the sharedElement is the view in the disappearing Fragment that matches the view in the new fragment.

In FDV we have recently applied shared elements for some of the apps we are developing. In the following videos, you can see shared elements which were used for our clients. Both in the Avantrip app and in Beautiful losers, we could achieve that with only a small animation, the photographs are shared on two screens.

You can find here some non-official support libraries (not tested yet):

https://github.com/andkulikov/transitions-everywhere
https://github.com/takahirom/PreLollipopTransition
https://github.com/lgvalle/Material-Animations
https://github.com/guerwan/TransitionsBackport

Some references:

https://developer.android.com/reference/android/support/transition/package-summary.html
http://developer.android.com/intl/es/reference/android/transition/package-summary.html
http://developer.android.com/intl/es/reference/android/app/FragmentTransaction.html#addSharedElement

We hope you found this article useful! We are looking forward to seeing your own animations for your apps with Material Design, and to listening about your experiences, see you next time!

Diego Pappalardo

Diego has been developing Android applications for invite – FDV since February 2015. He is also a team leader for the Android Team, coordinating research development and writing interesting articles for the intive-FDV community. He graduated in 2009 from Universidad Tecnológica Nacional as an electronic engineer. Besides being an Android rock star, Diego has in-depth knowledge about Java, Git, mobile devices and software development in general.

Add comment