MotionLayout Menu

Dribble menu design https://dribbble.com/shots/2653519-Menu built with Android MotionLayout

Demo

Youtube demo https://www.youtube.com/watch?v=CT0qKL3F278

Description

In layout file views v1, v2, v3, v4 are four menus c1, c2, c3, c4 are four background content views and view ic1 is down arrow image. My screen height is 640dp - 24dp = 616dp (24dp is status bar height). If you want to change menu size according to your screen resolution open dimens.xml and change menu height in expanded and collapsed state

menu_expanded_height = 154dp (616dp / 4)
menu_collapsed_height = 80dp

Change top margins of each menu according to your screen height to place menus one after another

v1_expanded_margin_top
v2_expanded_margin_top
v3_expanded_margin_top
v4_expanded_margin_top

MotionScene file in xml/motion_scene.xml contains comments about each Transition and ConstraintSet. MenuActicity only handles click events and run transitions defined in motion_scene file.