[MUSIC PLAYING]
SHARON HARRIS: Hi, my name is Sharon Harris,
and I'm a motion designer in the Material Design Team at Google.
As you may already know, material design
was founded on the metaphor of smart paper--
a collection of surfaces that can adapt to guide users
through an experience.
Part of that metaphor is shown through an elevation system
that accurately renders light and shadows.
But coordinating those surfaces with motion
in a smart and elegant way has been a tougher challenge
until now.
Our latest material update is the motion system,
including a set of guidelines, specs, and developer
documentation for making the most important motion
in an app--
UI transitions.
Transitions are a coordinated sequence
of motions that help users understand and navigate
the app.
Great transitions are fundamental to the usability
of an app.
Our new system includes four transition patterns
animating between components and full screen views.
Container transform, shared axis, fade through, and fade.
The system also provides customization options
to stylize your transitions.
You can adjust the duration, easing, and motion path
to express the style of your app.
Now, we'll talk it through the four transition
patterns in more detail.
The first pattern is container transform.
This pattern creates a visible connection
between two UI elements.
For example, when a card transforms into a details page,
the user's focus is directed to identify
that the Details page is an expanded version of the card.
Now, let's look at how to implement the container
transform pattern on Android.
First, identify the UI element of your container
in your starting layout and give it a transition name.
In your ending layout, identify the UI element
into which your starting UI element will transform.
Give this element the same transition name.
In your ending fragment, set the sharedElementEnterTransition
to a new MaterialContainerTransform
inside the onCreate method.
Finally, when the user taps on the starting element,
begin the container transform with a fragment transaction
containing a mapping of the tapped element
to the transition name.
For information on how to apply a container transform
between activities or views, see the developer documentation.
Our second pattern is called shared axis.
This pattern uses a shared transformation
on the xy or z-axis to reinforce the spatial or navigational
relationship between elements.
For example, when tapping next in a setup flow,
both the outgoing and incoming elements
transform horizontally in unison.
By moving in the same direction, elements
are perceived to be related to each other.
Now, let's look at how to implement the shared axis
pattern on Android.
To add a shared axis transition in the x-axis,
set up the entering and exiting transitions of your outgoing
and incoming fragments.
In your outgoing fragment, create a new material
shared axis transition and set it
as your fragment's exit transition
in the onCreate method.
Be sure to specify the forward property of this transition.
This is what controls the direction in which
the fragment will animate.
In your incoming fragment, create a new MaterialSharedAxis
and set it as your fragments enter transition
in the onCreate method, making sure the forward
here matches the exit transition of your outgoing fragment.
When you're ready to navigate to your new fragment,
add or replace the outgoing fragment
with a new instance of your incoming fragment.
Your outgoing fragment will now slide and fade out
to the left, while your incoming fragment will slide and fade
in.
For details on how setting up a transition in the return
direction or for the other axis and scenarios,
see the documentation on material.io.
Our third pattern is the fade through.
You can use fade through for transitions between UI elements
that do not have a strong relationship for each other.
For example, transitions triggered
by tapping a bottom navigation bar,
use this fade-through pattern.
Destinations in the bottom navigation
typically are not strongly related to each other,
so this fade-through pattern doesn't mislead users
into thinking that they can swipe horizontally
between destinations.
Now, let's look at how to implement
the fade-through pattern on Android.
Setting this up is nearly identical
to implement in the shared access pattern.
Set your outgoing fragment's exit transition
to a new instance of MaterialFadeThrough.
Likewise, set your incoming fragment's enter transition
to a new instance of MaterialFadeThrough.
Just completing these steps will create a working animation
between your two fragments.
You might notice each individual UI
component in your layouts scaling out and back in.
To have the fade through or other transitions, including
shared axis, run only on a specific UI elements,
set the transition group property to true on the view
you wish to target.
To customize the look and feel of the transition further,
see the developer documentation.
Our fourth and final pattern is the fade.
You can use a fade for UI elements that enter
or exit the screen.
This pattern applies to components like dialogues,
menus, snack bars, and FABs.
Elements that enter use a quick fade in and subtly scale up.
When elements exit, they simply fade out.
Now, let's look at how to implement the fade pattern
to show and tie to FAB on Android.
In your activity or fragment, construct a new MaterialFade.
Then begin a transition by calling
TransitionManage r.beginDelayedTransition,
passing in the FAB's parent in our newly constructed material
fade.
Finally, alter the visibility of the FAB
to have the transition system animate
the change with the supplied material fade transition.
Using the same code, you can change the FAB's visibility
back to visible, and the FAB will fade back in.
These patterns are designed to be simple and functional
by default. But the good news is you
can customize any transition.
For example, using an arc motion path
creates a more emphasized and dramatic style.
Android's container transform can easily accept a path
to create such an effect.
For a dropped in implementation, set your container's path
motion to a new instance of material arc motion--
a class which provides a standard material
arc out of the box.
Some of the feedback we hear across our design
and engineering communities is that part
of what makes motion hard to implement
is that there aren't many tools to help designers collaborate
with engineers.
Spec in motion is tricky, which is a shame
since it's necessary for bridging the gap between design
intent and implementation.
This is another challenge we're tackling with material design.
Our updated motion guidelines present motion specs
in a new interactive timeline format.
They include all the basic information
needed to understand and build an animation.
These specs were authored using a web-based tool called Direct,
which was created by Google Motion Designer John Schlemmer
and used internally by many other Google designers.
We're excited to now share these motion specs publicly
in our guidelines to help explain all
the details of a motion design.
The code for Direct is open source at this link,
so you can create and host your own direct motion specs.
Make sure to share creations with us.
Would you find a tool like Direct useful in your work?
Please let us know in the comments.
As you may have noticed, this motion content
is tagged as beta on our site.
That's because we wanted to release this early to make
sure we're taking the right technical and design approach
before adding more features.
There are so many directions to take this work in the future,
and we'd love to know what you think.
Be sure to share your feedback in the comments
below or by reaching out to @materialdesign on Twitter.
We're hopeful this is just a start in our mission to make
motion easy to implement.
Thanks for watching.
[MUSIC PLAYING]