Member-only story
Material Components for Android: Motion
One of the main features in Material Design is the transition of elements and components to express relationships between them or outcomes and availability for actions.
Since 1.2.0 version, Material Components for Android library has incorporated Transitions and Motion. They are an easy-to-use set of classes to implement different type of customizable transitions and animations.
There are different transition patterns that comprised the Material Design motion system for transitioning between components or full-screen views.
What’s really important is choosing which transition pattern is appropriate for each use case.
The transition patterns are:
- Container transform: It’s used in transitions that involve a persistent element such as a list, card surface or button.
- Shared axis: It’s used for transitions between UI elements that have a spatial or navigational relationship.
- Fade through: When a relationship between elements is insignificant or does not exist.
- Fade: It’s is applied in the UI elements that need to enter or exit the screen.
Recently, I’ve been working on some samples that use Material Design motion system.
implementation('com.google.android.material:material:1.3.0-rc01')Container Transform
This pattern is used to create a visible connection between two UI elements. It transforms one element into another. This is a common UX pattern to express that one element is related with another as item-detail container. For instance, if a card item in a list transforms into a detail view, the user perceives that the detail page is an extended version of the card.
This could be also used as a transformation of a FAB button into a menu or a sheet.
This transition can be applied between activities, fragments or views, depending on whether we want to transform…
