Some developers find it difficult to code UI schemes that are a bit complex. Many of them write code that skips important UI effects or animations, leaving the end result far removed from the original.

This article talks about how to code for UI scenarios, skipping some basic details and focusing on Transition and animation.

MaterialUp

A site where designers and developers can find and share resources for building Material Design websites or apps. There are a lot of interface designs, open source apps, libraries and apps that you can use on Android, websites or iOS.

Music Player transition by Anish Chandran

Browse the site to find a user interface resource called Music Player created by Anish Chandran.

This design proposal gives us an example of how a music player app can use Material and Motion Design in a smooth and continuous way.

Warm up

First, we need to do some preparatory work to help us write motion code.

Decompose the motion scheme into frames

Convert a dynamic map file into a single frame. This helps us look at each step of the animation and transition. Ps: If it’s a GIF, software like PS will do.

Decomposition by type

We had a lot of animation going on at the same time, and it was very difficult to think about how to write code. These animations can be broken down by type, such as: View slides to the bottom, View fades out, view transitions to a new Activity, and so on.

Animation or no animation, this next tip is worth adopting in every layout.

Simplify your view structure

Create a View structure as simple as possible and avoid using too many viewgroups in the same layout. This makes it easy to design, maintain, and improve app performance for transition animations.

To unravel

In layout files, some viewgroups set the Android :transitionGroup property to true to allow themselves to be treated as a whole during the Activity Transition. Here’s a playlist container (Main Layout File) and a button container (detail Layout File).

... ...Copy the code

transition_group.xml hosted by GitHub

In styles.xml we have themes for Main Activity and Detail Activity.

falseCopy the code

windowSharedElementsUseOverlay.xml hosted by GitHub

Disables overlays for shared element views. In the Music Player layout we need to disable overlay when the shared Element View moves from the Main Activity to the Detail Activity. If it is enabled, some shared element views may overwrite other views in the wrong way.

@transition/list_content_exit_transition
@transition/list_content_reenter_transitionCopy the code

list_content_exit_reenter_transition.xml hosted by GitHub

List content exits and enters in the same way.

/ / 2 / / 3Copy the code

list_content_exit_reenter_transition.xml hosted by GitHub

  1. Set a delay to keep these transitions in sync with the FAB morph animation.

  2. Let the Pane view to which the targetId attribute points fade out or in.

  3. Slide RecyclerView and playlists to the bottom and use the excludeId attribute to exclude the status bar, pane, and Navigation bar.

@transition/list_shared_element_exit_transition
@transition/list_shared_element_reenter_transitionCopy the code

list_shared_element_exit_reenter_transition.xml hosted by GitHub

Exit for the play button and Transition for reenter are almost identical.

/ / 1Copy the code

list_shared_element_exit_reenter_transition.xml hosted by GitHub

@transition/detail_content_enter_transition
@transition/detail_content_return_transitionCopy the code

detail_content_enter_return_transition.xml hosted by GitHub

The details page is entered and returned using the same transition method.

/ / 1 / / 2Copy the code

detail_content_enter_return_transition.xml hosted by GitHub

  1. The play order container specified by the targetId attribute fades out

  2. The button container specified by the targetId attribute slides to the bottom

@transition/detail_shared_element_enter_transitionCopy the code

detail_shared_element_enter_transition.xml hosted by GitHub


    
    // 1
    android:interpolator="@android:interpolator/accelerate_quad">
    
    // 2
    
    
    // 3
    
    
    // 4
    
        
        
        
        
    

Copy the code

detail_shared_element_enter_transition.xml hosted by GitHub

@transition/detail_shared_element_return_transitionCopy the code

detail_shared_element_return_transition.xml hosted by GitHub

In this transition, we use almost the same method as detail_shareD_element_enter_transition. However, some delay was added to each section to match the UI appearance.

// 1/2/3Copy the code

detail_shared_element_return_transition.xml hosted by GitHub

  1. Use the opposite “evolution” pattern, from arc to horizontal.

  2. Use the opposite “evolution” pattern, from round to square covers.

  3. Use the default transition for other shared elements.

The final result

The end result should be that. Sure, there may be some minor details missing from the final project, but those are small things.

The entire project can be found at github.com/andremion/M… To find it.

You can read more about Meaningful Motion on Android at the link below.

Applying meaningful motion on Android

How to apply meaningful and delightful motion in a sample Android appAndré Mion