Merge pull request #183 from vector-im/feature/motionLayout

Better anim of ome button

vector/src/main/java/im/vector/riotredesign/features/home/room/list/RoomListFragment.kt

@@ -93,25 +93,26 @@ class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, O
         }
 
         // Hide FAB when list is scrolling
-        epoxyRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
+        epoxyRecyclerView.addOnScrollListener(
-            override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
+                object : RecyclerView.OnScrollListener() {
-                createChatFabMenu.removeCallbacks(showFabRunnable)
+                    override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
+                        createChatFabMenu.removeCallbacks(showFabRunnable)
 
-                when (newState) {
+                        when (newState) {
-                    RecyclerView.SCROLL_STATE_IDLE     -> {
+                            RecyclerView.SCROLL_STATE_IDLE     -> {
-                        createChatFabMenu.postDelayed(showFabRunnable, 1000)
+                                createChatFabMenu.postDelayed(showFabRunnable, 1000)
-                    }
+                            }
-                    RecyclerView.SCROLL_STATE_DRAGGING,
+                            RecyclerView.SCROLL_STATE_DRAGGING,
-                    RecyclerView.SCROLL_STATE_SETTLING -> {
+                            RecyclerView.SCROLL_STATE_SETTLING -> {
-                        when (roomListParams.displayMode) {
+                                when (roomListParams.displayMode) {
-                            DisplayMode.HOME   -> createChatFabMenu.hide()
+                                    DisplayMode.HOME   -> createChatFabMenu.hide()
-                            DisplayMode.PEOPLE -> createChatRoomButton.hide()
+                                    DisplayMode.PEOPLE -> createChatRoomButton.hide()
-                            else               -> createGroupRoomButton.hide()
+                                    else               -> createGroupRoomButton.hide()
+                                }
+                            }
                         }
                     }
-                }
+                })
-            }
-        })
     }
 
 
@@ -220,7 +221,7 @@ class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, O
         return super.onBackPressed()
     }
 
-    // RoomSummaryController.Callback **************************************************************
+// RoomSummaryController.Callback **************************************************************
 
     override fun onRoomSelected(room: RoomSummary) {
         roomListViewModel.accept(RoomListActions.SelectRoom(room))

vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt

@@ -18,56 +18,31 @@ package im.vector.riotredesign.features.home.room.list.widget
 
 import android.content.Context
 import android.util.AttributeSet
-import android.view.ViewGroup
+import androidx.constraintlayout.motion.widget.MotionLayout
-import androidx.constraintlayout.widget.ConstraintLayout
-import androidx.constraintlayout.widget.ConstraintSet
 import androidx.core.view.isVisible
-import androidx.transition.ChangeTransform
+import com.google.android.material.floatingactionbutton.FloatingActionButton
-import androidx.transition.Transition
-import androidx.transition.TransitionManager
 import im.vector.riotredesign.R
-import im.vector.riotredesign.core.animations.ANIMATION_DURATION_SHORT
-import im.vector.riotredesign.core.animations.SimpleTransitionListener
-import im.vector.riotredesign.core.animations.VectorFullTransitionSet
 import im.vector.riotredesign.features.themes.ThemeUtils
-import kotlinx.android.synthetic.main.merge_fab_menu_view.view.*
+import kotlinx.android.synthetic.main.motion_fab_menu_merge.view.*
 
 class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null,
-                                            defStyleAttr: Int = 0) : ConstraintLayout(context, attrs, defStyleAttr) {
+                                            defStyleAttr: Int = 0) : MotionLayout(context, attrs, defStyleAttr) {
 
     var listener: Listener? = null
 
-    private var isFabMenuOpened = false
-
     init {
-        inflate(context, R.layout.merge_fab_menu_view, this)
+        inflate(context, R.layout.motion_fab_menu_merge, this)
     }
 
     override fun onFinishInflate() {
         super.onFinishInflate()
 
-        // Collapse
-        ConstraintSet().also {
-            it.clone(context, R.layout.constraint_set_fab_menu_close)
-            it.applyTo(this)
-        }
-
-        createRoomItemChat.isVisible = false
-        createRoomItemChatLabel.isVisible = false
-        createRoomItemGroup.isVisible = false
-        createRoomItemGroupLabel.isVisible = false
-        // Collapse end
-
         // Tint label background
         listOf(createRoomItemChatLabel, createRoomItemGroupLabel)
                 .forEach {
                     it.setBackgroundResource(ThemeUtils.getResourceId(context, R.drawable.vector_label_background_light))
                 }
 
-        createRoomButton.setOnClickListener {
-            toggleFabMenu()
-        }
-
         listOf(createRoomItemChat, createRoomItemChatLabel)
                 .forEach {
                     it.setOnClickListener {
@@ -89,68 +64,25 @@ class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSe
     }
 
     fun show() {
+        isVisible = true
         createRoomButton.show()
     }
 
     fun hide() {
-        createRoomButton.hide()
+        createRoomButton.hide(object : FloatingActionButton.OnVisibilityChangedListener() {
-    }
+            override fun onHidden(fab: FloatingActionButton?) {
-
+                super.onHidden(fab)
-    private fun openFabMenu() {
+                isVisible = false
-        if (isFabMenuOpened) {
+            }
-            return
+        })
-        }
-
-        toggleFabMenu()
     }
 
     private fun closeFabMenu() {
-        if (!isFabMenuOpened) {
+        transitionToStart()
-            return
-        }
-
-        toggleFabMenu()
-    }
-
-    private fun toggleFabMenu() {
-        isFabMenuOpened = !isFabMenuOpened
-
-        TransitionManager.beginDelayedTransition(parent as? ViewGroup ?: this,
-                VectorFullTransitionSet().apply {
-                    duration = ANIMATION_DURATION_SHORT
-                    ChangeTransform()
-                    addListener(object : SimpleTransitionListener() {
-                        override fun onTransitionEnd(transition: Transition) {
-                            // Hide the view after the transition for a better visual effect
-                            createRoomItemChat.isVisible = isFabMenuOpened
-                            createRoomItemChatLabel.isVisible = isFabMenuOpened
-                            createRoomItemGroup.isVisible = isFabMenuOpened
-                            createRoomItemGroupLabel.isVisible = isFabMenuOpened
-                        }
-                    })
-                })
-
-        if (isFabMenuOpened) {
-            // Animate manually the rotation for a better effect
-            createRoomButton.animate().setDuration(ANIMATION_DURATION_SHORT).rotation(135f)
-
-
-            ConstraintSet().also {
-                it.clone(context, R.layout.constraint_set_fab_menu_open)
-                it.applyTo(this)
-            }
-        } else {
-            createRoomButton.animate().setDuration(ANIMATION_DURATION_SHORT).rotation(0f)
-
-            ConstraintSet().also {
-                it.clone(context, R.layout.constraint_set_fab_menu_close)
-                it.applyTo(this)
-            }
-        }
     }
 
     fun onBackPressed(): Boolean {
-        if (isFabMenuOpened) {
+        if (currentState == R.id.constraint_set_fab_menu_open) {
             closeFabMenu()
             return true
         }

vector/src/main/res/layout/constraint_set_fab_menu_close.xml

@@ -1,81 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent">
-
-    <View
-        android:id="@+id/createRoomTouchGuard"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:background="?riotx_touch_guard_bg"
-        android:visibility="gone" />
-
-    <!-- Sub menu item 2 -->
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
-        android:id="@+id/createRoomItemGroup"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom|end"
-        android:src="@drawable/ic_fab_add_room"
-        app:backgroundTint="#FFFFFF"
-        app:fabCustomSize="48dp"
-        app:layout_constraintBottom_toBottomOf="@+id/createRoomButton"
-        app:layout_constraintEnd_toEndOf="@+id/createRoomButton"
-        app:layout_constraintStart_toStartOf="@+id/createRoomButton"
-        app:layout_constraintTop_toTopOf="@+id/createRoomButton"
-        app:maxImageSize="26dp"
-        app:tint="@color/black" />
-
-    <TextView
-        android:id="@+id/createRoomItemGroupLabel"
-        style="@style/VectorLabel"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginRight="8dp"
-        android:text="@string/fab_menu_create_room"
-        app:layout_constraintBottom_toBottomOf="@+id/createRoomItemChat"
-        app:layout_constraintEnd_toEndOf="@+id/createRoomItemChat"
-        app:layout_constraintTop_toTopOf="@+id/createRoomItemChat" />
-
-    <!-- Sub menu item 1 -->
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
-        android:id="@+id/createRoomItemChat"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom|end"
-        android:src="@drawable/ic_fab_add_chat"
-        app:backgroundTint="#FFFFFF"
-        app:fabCustomSize="48dp"
-        app:layout_constraintBottom_toBottomOf="@+id/createRoomButton"
-        app:layout_constraintEnd_toEndOf="@+id/createRoomButton"
-        app:layout_constraintStart_toStartOf="@+id/createRoomButton"
-        app:layout_constraintTop_toTopOf="@+id/createRoomButton"
-        app:maxImageSize="29dp"
-        app:tint="@color/black" />
-
-    <TextView
-        android:id="@+id/createRoomItemChatLabel"
-        style="@style/VectorLabel"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginRight="8dp"
-        android:text="@string/fab_menu_create_chat"
-        app:layout_constraintBottom_toBottomOf="@+id/createRoomItemChat"
-        app:layout_constraintEnd_toEndOf="@+id/createRoomItemChat"
-        app:layout_constraintTop_toTopOf="@+id/createRoomItemChat" />
-
-    <!-- Menu -->
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
-        android:id="@+id/createRoomButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_margin="16dp"
-        android:src="@drawable/ic_fab_add"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:maxImageSize="14dp" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/layout/constraint_set_fab_menu_open.xml

@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent">
-
-    <View
-        android:id="@+id/createRoomTouchGuard"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:background="?riotx_touch_guard_bg" />
-
-    <!-- Sub menu item 2 -->
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
-        android:id="@+id/createRoomItemGroup"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom|end"
-        android:layout_marginBottom="14dp"
-        android:src="@drawable/ic_fab_add_room"
-        app:backgroundTint="#FFFFFF"
-        app:fabCustomSize="48dp"
-        app:layout_constraintBottom_toTopOf="@+id/createRoomItemChat"
-        app:layout_constraintEnd_toEndOf="@+id/createRoomButton"
-        app:layout_constraintStart_toStartOf="@+id/createRoomButton"
-        app:maxImageSize="26dp"
-        app:tint="@color/black" />
-
-    <TextView
-        android:id="@+id/createRoomItemGroupLabel"
-        style="@style/VectorLabel"
-        android:layout_marginEnd="8dp"
-        android:layout_marginRight="8dp"
-        android:text="@string/fab_menu_create_room"
-        app:layout_constraintBottom_toBottomOf="@+id/createRoomItemGroup"
-        app:layout_constraintEnd_toStartOf="@+id/createRoomItemGroup"
-        app:layout_constraintTop_toTopOf="@+id/createRoomItemGroup" />
-
-    <!-- Sub menu item 1 -->
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
-        android:id="@+id/createRoomItemChat"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom|end"
-        android:layout_marginBottom="25dp"
-        android:src="@drawable/ic_fab_add_chat"
-        app:backgroundTint="#FFFFFF"
-        app:fabCustomSize="48dp"
-        app:layout_constraintBottom_toTopOf="@+id/createRoomButton"
-        app:layout_constraintEnd_toEndOf="@+id/createRoomButton"
-        app:layout_constraintStart_toStartOf="@+id/createRoomButton"
-        app:maxImageSize="29dp"
-        app:tint="@color/black" />
-
-    <TextView
-        android:id="@+id/createRoomItemChatLabel"
-        style="@style/VectorLabel"
-        android:layout_marginEnd="8dp"
-        android:layout_marginRight="8dp"
-        android:text="@string/fab_menu_create_chat"
-        app:layout_constraintBottom_toBottomOf="@+id/createRoomItemChat"
-        app:layout_constraintEnd_toStartOf="@+id/createRoomItemChat"
-        app:layout_constraintTop_toTopOf="@+id/createRoomItemChat" />
-
-    <!-- Menu -->
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
-        android:id="@+id/createRoomButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_margin="16dp"
-        android:src="@drawable/ic_fab_add"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:maxImageSize="14dp" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/layout/fragment_room_list.xml

@@ -17,6 +17,8 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:visibility="gone"
+        app:layoutDescription="@xml/motion_scene_fab_menu"
+        tools:showPaths="true"
         tools:visibility="visible" />
 
     <com.google.android.material.floatingactionbutton.FloatingActionButton

vector/src/main/res/layout/motion_fab_menu_merge.xml

@@ -1,12 +1,13 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Create several FABs to manage different icon size. maxImageSize cannot be set programmatically -->
+<?xml version="1.0" encoding="utf-8"?>
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/createRoomContainer"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    tools:constraintSet="@layout/constraint_set_fab_menu_open"
+    app:layoutDescription="@xml/motion_scene_fab_menu"
-    tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
+    tools:motionProgress="0.65"
+    tools:parentTag="androidx.constraintlayout.motion.widget.MotionLayout"
+    tools:showPaths="true">
 
     <View
         android:id="@+id/createRoomTouchGuard"
@@ -21,19 +22,19 @@
         android:layout_height="wrap_content"
         android:layout_gravity="bottom|end"
         android:src="@drawable/ic_fab_add_room"
-        android:visibility="gone"
+        app:backgroundTint="#FFFFFF"
-        app:backgroundTint="?riotx_fab_secondary_bg"
         app:fabCustomSize="48dp"
         app:maxImageSize="26dp"
-        app:tint="?riotx_fab_secondary_color"
+        app:tint="@color/black" />
-        tools:ignore="MissingConstraints"
-        tools:visibility="visible" />
 
     <TextView
         android:id="@+id/createRoomItemGroupLabel"
         style="@style/VectorLabel"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
         android:layout_marginEnd="8dp"
         android:layout_marginRight="8dp"
+        android:ellipsize="end"
         android:text="@string/fab_menu_create_room" />
 
     <!-- Sub menu item 1 -->
@@ -43,19 +44,19 @@
         android:layout_height="wrap_content"
         android:layout_gravity="bottom|end"
         android:src="@drawable/ic_fab_add_chat"
-        android:visibility="gone"
+        app:backgroundTint="#FFFFFF"
-        app:backgroundTint="?riotx_fab_secondary_bg"
         app:fabCustomSize="48dp"
         app:maxImageSize="29dp"
-        app:tint="?riotx_fab_secondary_color"
+        app:tint="@color/black" />
-        tools:ignore="MissingConstraints"
-        tools:visibility="visible" />
 
     <TextView
         android:id="@+id/createRoomItemChatLabel"
         style="@style/VectorLabel"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
         android:layout_marginEnd="8dp"
         android:layout_marginRight="8dp"
+        android:ellipsize="end"
         android:text="@string/fab_menu_create_chat" />
 
     <!-- Menu -->
@@ -63,11 +64,7 @@
         android:id="@+id/createRoomButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_gravity="bottom|end"
         android:src="@drawable/ic_fab_add"
-        android:visibility="gone"
+        app:maxImageSize="14dp" />
-        app:maxImageSize="14dp"
-        tools:ignore="MissingConstraints"
-        tools:visibility="visible" />
 
 </merge>

vector/src/main/res/xml/motion_scene_fab_menu.xml

@@ -0,0 +1,205 @@
+<?xml version="1.0" encoding="utf-8"?>
+<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:motion="http://schemas.android.com/apk/res-auto">
+
+    <!-- Click on main FAB: toggle -->
+    <Transition
+        motion:constraintSetEnd="@+id/constraint_set_fab_menu_open"
+        motion:constraintSetStart="@+id/constraint_set_fab_menu_close"
+        motion:duration="300"
+        motion:motionInterpolator="easeInOut">
+
+        <OnClick
+            motion:clickAction="toggle"
+            motion:targetId="@+id/createRoomButton" />
+
+        <KeyFrameSet>
+
+            <!-- First icon goes up quickly to let room for other-->
+            <KeyPosition
+                motion:framePosition="50"
+                motion:keyPositionType="deltaRelative"
+                motion:motionTarget="@id/createRoomItemGroup"
+                motion:percentX="0.8"
+                motion:percentY="0.8" />
+            <KeyPosition
+                motion:framePosition="50"
+                motion:keyPositionType="deltaRelative"
+                motion:motionTarget="@id/createRoomItemGroupLabel"
+                motion:percentX="0.9"
+                motion:percentY="0.8" />
+
+            <!-- Delay apparition of labels-->
+            <KeyAttribute
+                android:alpha="0.4"
+                motion:framePosition="80"
+                motion:motionTarget="@id/createRoomItemChatLabel" />
+            <KeyAttribute
+                android:alpha="0.4"
+                motion:framePosition="80"
+                motion:motionTarget="@id/createRoomItemGroupLabel" />
+
+        </KeyFrameSet>
+    </Transition>
+
+    <ConstraintSet android:id="@+id/constraint_set_fab_menu_close">
+
+        <Constraint
+            android:id="@+id/createRoomTouchGuard"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="?riotx_touch_guard_bg"
+            android:visibility="invisible" />
+
+        <!-- Sub menu item 2 -->
+        <Constraint
+            android:id="@+id/createRoomItemGroup"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="bottom|end"
+            android:src="@drawable/ic_fab_add_room"
+            android:visibility="invisible"
+            motion:backgroundTint="#FFFFFF"
+            motion:fabCustomSize="48dp"
+            motion:layout_constraintBottom_toBottomOf="@+id/createRoomButton"
+            motion:layout_constraintEnd_toEndOf="@+id/createRoomButton"
+            motion:layout_constraintStart_toStartOf="@+id/createRoomButton"
+            motion:layout_constraintTop_toTopOf="@+id/createRoomButton"
+            motion:maxImageSize="26dp"
+            motion:tint="@color/black" />
+
+        <Constraint
+            android:id="@+id/createRoomItemGroupLabel"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="8dp"
+            android:layout_marginRight="8dp"
+            android:text="@string/fab_menu_create_room"
+            android:visibility="invisible"
+            motion:layout_constraintBottom_toBottomOf="@+id/createRoomItemGroup"
+            motion:layout_constraintEnd_toEndOf="@+id/createRoomItemGroup"
+            motion:layout_constraintTop_toTopOf="@+id/createRoomItemGroup" />
+
+        <!-- Sub menu item 1 -->
+        <Constraint
+            android:id="@+id/createRoomItemChat"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="bottom|end"
+            android:src="@drawable/ic_fab_add_chat"
+            android:visibility="invisible"
+            motion:backgroundTint="#FFFFFF"
+            motion:fabCustomSize="48dp"
+            motion:layout_constraintBottom_toBottomOf="@+id/createRoomButton"
+            motion:layout_constraintEnd_toEndOf="@+id/createRoomButton"
+            motion:layout_constraintStart_toStartOf="@+id/createRoomButton"
+            motion:layout_constraintTop_toTopOf="@+id/createRoomButton"
+            motion:maxImageSize="29dp"
+            motion:tint="@color/black" />
+
+        <Constraint
+            android:id="@+id/createRoomItemChatLabel"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="8dp"
+            android:layout_marginRight="8dp"
+            android:text="@string/fab_menu_create_chat"
+            android:visibility="invisible"
+            motion:layout_constraintBottom_toBottomOf="@+id/createRoomItemChat"
+            motion:layout_constraintEnd_toEndOf="@+id/createRoomItemChat"
+            motion:layout_constraintTop_toTopOf="@+id/createRoomItemChat" />
+
+        <!-- Menu -->
+        <Constraint
+            android:id="@+id/createRoomButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="16dp"
+            android:layout_marginRight="16dp"
+            android:layout_marginBottom="16dp"
+            android:src="@drawable/ic_fab_add"
+            motion:layout_constraintBottom_toBottomOf="parent"
+            motion:layout_constraintEnd_toEndOf="parent"
+            motion:maxImageSize="14dp" />
+
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/constraint_set_fab_menu_open">
+
+        <Constraint
+            android:id="@+id/createRoomTouchGuard"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="?riotx_touch_guard_bg" />
+
+        <!-- Sub menu item 2 -->
+        <Constraint
+            android:id="@+id/createRoomItemGroup"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="bottom|end"
+            android:layout_marginBottom="14dp"
+            android:src="@drawable/ic_fab_add_room"
+            motion:backgroundTint="#FFFFFF"
+            motion:fabCustomSize="48dp"
+            motion:layout_constraintBottom_toTopOf="@+id/createRoomItemChat"
+            motion:layout_constraintEnd_toEndOf="@+id/createRoomButton"
+            motion:layout_constraintStart_toStartOf="@+id/createRoomButton"
+            motion:maxImageSize="26dp"
+            motion:tint="@color/black" />
+
+        <Constraint
+            android:id="@+id/createRoomItemGroupLabel"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="8dp"
+            android:layout_marginRight="8dp"
+            android:text="@string/fab_menu_create_room"
+            motion:layout_constraintBottom_toBottomOf="@+id/createRoomItemGroup"
+            motion:layout_constraintEnd_toStartOf="@+id/createRoomItemGroup"
+            motion:layout_constraintTop_toTopOf="@+id/createRoomItemGroup" />
+
+        <!-- Sub menu item 1 -->
+        <Constraint
+            android:id="@+id/createRoomItemChat"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="bottom|end"
+            android:layout_marginBottom="25dp"
+            android:src="@drawable/ic_fab_add_chat"
+            motion:backgroundTint="#FFFFFF"
+            motion:fabCustomSize="48dp"
+            motion:layout_constraintBottom_toTopOf="@+id/createRoomButton"
+            motion:layout_constraintEnd_toEndOf="@+id/createRoomButton"
+            motion:layout_constraintStart_toStartOf="@+id/createRoomButton"
+            motion:maxImageSize="29dp"
+            motion:tint="@color/black" />
+
+        <Constraint
+            android:id="@+id/createRoomItemChatLabel"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="8dp"
+            android:layout_marginRight="8dp"
+            android:text="@string/fab_menu_create_chat"
+            motion:layout_constraintBottom_toBottomOf="@+id/createRoomItemChat"
+            motion:layout_constraintEnd_toStartOf="@+id/createRoomItemChat"
+            motion:layout_constraintTop_toTopOf="@+id/createRoomItemChat" />
+
+        <!-- Menu -->
+        <Constraint
+            android:id="@+id/createRoomButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="16dp"
+            android:layout_marginRight="16dp"
+            android:layout_marginBottom="16dp"
+            android:rotation="135"
+            android:src="@drawable/ic_fab_add"
+            motion:layout_constraintBottom_toBottomOf="parent"
+            motion:layout_constraintEnd_toEndOf="parent"
+            motion:maxImageSize="14dp" />
+
+    </ConstraintSet>
+
+</MotionScene>