Some developers have difficult to code when the UI proposal is a bit “sophisticated” or “complex”. Many of them strip a lot of significant portion of the UI or even the Motion when they are coding, and the result ends up quite different of the original proposal.
This post talks about how would be to code an UI proposal, skipping some basic Android details and focusing in the transition and animation approach.
MaterialUp
A great website where designers and developers can find and share resources to build apps and sites using Material Design. There is a lot of user interfaces, experiments, open-source apps, libraries and ready-to-use products in Android, Web, and iOS that you can find there.
Music Player transition by Anish Chandran
Exploring that website you can find this user interface resource called Music Player created by Anish Chandran.
That proposal gives us a good sample of how would be a music player app that uses Material and Motion design in a fluid and consistent manner.
Warming up
First of all we need to do something that helps us to code all these motion.
Split the motion proposal in frames
Convert the animated proposal file into individual frames. This will help us to view each step of the animations and transitions.
Separate by types
We have a lot of views transitioning and animating at same time, and think how to code this way will be very hard. We can separate those transitions and animations by type, for example: Views sliding to bottom, Views fading out, Views moving out to new Activity, etc.
The next tip is a good one to use in EVERY layout, with motion or not.
Simplify your view hierarchy
Create view hierarchy as simpler as possible, avoiding to use a lot of View Groups in the same layout. This will make easy the transition choreography, will help the maintenance, as well as improve significantly the app performance mainly during the animations.
How the magic happens
In layout files, some View Groups have the android:transitionGroup attribute set to true because they need to be treated as a single entity during the Activity Transitions as in the playlist info container (main layout file) or controls container (detail layout file).
<RelativeLayout 2 android:id="@+id/playlist" 3 android:layout_width="match_parent" 4 android:layout_height="wrap_content" 5 android:layout_below="@id/cover" 6 android:gravity="center_vertical" 7 android:padding="@dimen/activity_vertical_margin" 8 android:transitionGroup="true"> 9 … 10 11 <LinearLayout 12 android:id="@+id/controls" 13 android:layout_width="match_parent" 14 android:layout_height="wrap_content" 15 android:layout_alignParentBottom="true" 16 android:gravity="center_horizontal" 17 android:transitionGroup="true" 18 app:layout_marginBottomPercent="5%"> 19 …
In styles.xml we have the themes used in our Main Activity and Detail Activity.
- AppTheme.Main
windowSharedElementsUseOverlay.xml Permalink 1 <item name="android:windowSharedElementsUseOverlay">false</item>
Disable overlaying of shared element views. In this Music Player layouts we need to disable the overlay when shared element views is moving out from Main to Detail Activity. If it’s enabled, some shared element views could overlay other views in a wrong manner.
list_content_exit_reenter_transition.xml Permalink 1 <item name="android:windowExitTransition">@transition/list_content_exit_transition</item> 2 <item name="android:windowReenterTransition">@transition/list_content_reenter_transition</item>
It has the same transition approach in both exit and reenter transition of list content.
list_content_exit_reenter_transition.xml Permalink 1 <?xml version="1.0" encoding="utf-8"?> 2 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" 3 android:duration="@integer/anim_duration_default" 4 5 // 1 6 android:startDelay="@integer/anim_duration_default"> 7 8 // 2 9 <fade> 10 <targets> 11 <target android:targetId="@id/pane" /> 12 </targets> 13 </fade> 14 15 // 3 16 <slide android:slideEdge="bottom"> 17 <targets> 18 <target android:excludeId="@android:id/statusBarBackground" /> 19 <target android:excludeId="@id/pane" /> 20 <target android:excludeId="@android:id/navigationBarBackground" /> 21 </targets> 22 </slide> 23 24 </transitionSet>
- Set a start delay to synchronize these transitions with the FAB morph animation.
- Fade just the pane view specified by targetId attribute.
- Slide to bottom the RecyclerView childs and playlist info container, excluding status bar, pane, and navigation bar specified by excludeId attribute.
list_shared_element_exit_reenter_transition.xml Permalink 1 <item name="android:windowSharedElementExitTransition">@transition/list_shared_element_exit_transition</item> 2 <item name="android:windowSharedElementReenterTransition">@transition/list_shared_element_reenter_transition</item>
It has almost the same transition approach in both exit and reenter transition of list content.
list_shared_element_exit_reenter_transition.xml Permalink 1 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:app="http://schemas.android.com/apk/res-auto" 3 android:duration="@integer/anim_duration_default"> 4 5 // 1 6 <transition 7 class="com.sample.andremion.musicplayer.transition.PlayButtonTransition" 8 app:mode="play|pause" /> 9 10 </transitionSet>
- PlayButtonTransitionis a custom transition that wraps an AnimatedVectorDrawableand used to morph the play icon into pause icon or vice-versa, depending the mode value.
- AppTheme.Detail
detail_content_enter_return_transition.xml Permalink 1 <item name="android:windowEnterTransition">@transition/detail_content_enter_transition</item> 2 <item name="android:windowReturnTransition">@transition/detail_content_return_transition</item>
It has the same transition approach in both enter and return transition of detail content.
detail_content_enter_return_transition.xml Permalink 1 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" 2 android:duration="@integer/anim_duration_default"> 3 4 // 1 5 <fade> 6 <targets> 7 <target android:targetId="@id/ordering" /> 8 </targets> 9 </fade> 10 11 // 2 12 <slide android:slideEdge="bottom"> 13 <targets> 14 <target android:targetId="@id/controls" /> 15 </targets> 16 </slide> 17 18 </transitionSet>
- Fade just the ordering container specified by targetId attribute.
- Slide to bottom just the controls container specified by targetId attribute.
detail_shared_element_enter_transition.xml Permalink 1 <item name="android:windowSharedElementEnterTransition">@transition/detail_shared_element_enter_transition</item>
detail_shared_element_enter_transition.xml Permalink 1 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" 2 android:duration="@integer/anim_duration_default" 3 4 // 1 5 android:interpolator="@android:interpolator/accelerate_quad"> 6 7 // 2 8 <transition class="com.sample.andremion.musicplayer.transition.ProgressViewTransition" /> 9 10 // 3 11 <transition class="com.sample.andremion.musicplayer.transition.CoverViewTransition" /> 12 13 // 4 14 <transitionSet> 15 <changeBounds /> 16 <changeTransform /> 17 <changeClipBounds /> 18 <changeImageTransform /> 19 </transitionSet> 20 21 </transitionSet>
- Define an interpolator to the rate of change of transition, allowing a non-linear motion.
- ProgressViewTransition is a custom transition that uses a ProgressView to “morph” an horizontal progress view to an arc progress view.
- CoverViewTransition is another custom transition that uses CoverView to “morph” the squared cover view to circled cover view with track lines.
- Use default move transitions into the others shared element views.
Raw detail_shared_element_return_transition.xml Permalink 1 <item name="android:windowSharedElementReturnTransition">@transition/detail_shared_element_return_transition</item>
In this transition was used almost the same approach of detail_shared_element_enter_transition. But it was added some delay for each part to match this transition with the proposal.
detail_shared_element_return_transition.xml Permalink 1 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:app="http://schemas.android.com/apk/res-auto" 3 android:duration="@integer/anim_duration_default" 4 android:interpolator="@android:interpolator/accelerate_quad"> 5 6 // 1 7 <transitionSet> 8 <changeBounds /> 9 <changeTransform /> 10 <changeClipBounds /> 11 <changeImageTransform /> 12 <transition 13 class="com.sample.andremion.musicplayer.transition.ProgressViewTransition" 14 app:morph="1" /> 15 <targets> 16 <target android:targetId="@id/progress" /> 17 </targets> 18 </transitionSet> 19 20 // 2 21 <transitionSet android:startDelay="@integer/anim_duration_short"> 22 <changeBounds /> 23 <changeTransform /> 24 <changeClipBounds /> 25 <changeImageTransform /> 26 <transition 27 class="com.sample.andremion.musicplayer.transition.CoverViewTransition" 28 app:shape="circle" /> 29 <targets> 30 <target android:targetId="@id/cover" /> 31 </targets> 32 </transitionSet> 33 34 // 3 35 <transitionSet android:startDelay="@integer/anim_duration_default"> 36 <changeBounds /> 37 <changeTransform /> 38 <changeClipBounds /> 39 <changeImageTransform /> 40 </transitionSet> 41 42 </transitionSet>
- The reverse “morph” mode, from arc progress view to horizontal progress view.
- The reverse “morph” mode, from circled cover view to squared cover view.
- Use default move transitions into the others shared element views.
Final Result
Music Player coded by André Mion
The final result should be like that. Of course, some minimal details can be missed in the final project but it would be a little thing.
The entire project can be found in https://github.com/andremion/Music-Player
At link below you can read more about meaningful motion on Android