FAB Menu

FAB Menu WIP FAB Menu WIP FAB Menu WIP
2019-06-05 18:59:41 +02:00 · 2019-06-05 18:59:41 +02:00 · acedff4e89
parent f9bfda059f
commit acedff4e89
13 changed files with 542 additions and 146 deletions
--- a/vector/src/main/java/im/vector/riotredesign/core/animations/SimpleTransitionListener.kt
+++ b/vector/src/main/java/im/vector/riotredesign/core/animations/SimpleTransitionListener.kt
@ -0,0 +1,41 @@
+/*
+ * Copyright 2019 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package im.vector.riotredesign.core.animations
+
+import androidx.transition.Transition
+
+open class SimpleTransitionListener : Transition.TransitionListener {
+    override fun onTransitionEnd(transition: Transition) {
+        // No op
+    }
+
+    override fun onTransitionResume(transition: Transition) {
+        // No op
+    }
+
+    override fun onTransitionPause(transition: Transition) {
+        // No op
+    }
+
+    override fun onTransitionCancel(transition: Transition) {
+        // No op
+    }
+
+    override fun onTransitionStart(transition: Transition) {
+        // No op
+    }
+}
--- a/vector/src/main/java/im/vector/riotredesign/core/animations/VectorFullTransitionSet.kt
+++ b/vector/src/main/java/im/vector/riotredesign/core/animations/VectorFullTransitionSet.kt
@ -0,0 +1,44 @@
+/*
+ * Copyright 2019 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package im.vector.riotredesign.core.animations
+
+import android.content.Context
+import android.util.AttributeSet
+import androidx.transition.ChangeBounds
+import androidx.transition.ChangeTransform
+import androidx.transition.Fade
+import androidx.transition.TransitionSet
+
+class VectorFullTransitionSet : TransitionSet {
+
+    constructor() {
+        init()
+    }
+
+    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
+        init()
+    }
+
+    private fun init() {
+        ordering = ORDERING_TOGETHER
+        addTransition(Fade(Fade.OUT))
+                .addTransition(ChangeBounds())
+                .addTransition(ChangeTransform())
+                .addTransition(Fade(Fade.IN))
+    }
+
+}
--- a/vector/src/main/java/im/vector/riotredesign/features/home/room/list/RoomListFragment.kt
+++ b/vector/src/main/java/im/vector/riotredesign/features/home/room/list/RoomListFragment.kt
@ -16,7 +16,6 @@

 package im.vector.riotredesign.features.home.room.list

-import android.animation.Animator
 import android.os.Bundle
 import android.os.Parcelable
 import androidx.annotation.StringRes
@ -25,18 +24,16 @@ import androidx.core.view.isVisible
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import com.airbnb.mvrx.*
-import com.google.android.material.floatingactionbutton.FloatingActionButton
 import im.vector.matrix.android.api.failure.Failure
 import im.vector.matrix.android.api.session.room.model.Membership
 import im.vector.matrix.android.api.session.room.model.RoomSummary
 import im.vector.riotredesign.R
-import im.vector.riotredesign.core.animations.ANIMATION_DURATION_SHORT
-import im.vector.riotredesign.core.animations.SimpleAnimatorListener
 import im.vector.riotredesign.core.epoxy.LayoutManagerStateRestorer
 import im.vector.riotredesign.core.extensions.observeEvent
 import im.vector.riotredesign.core.platform.OnBackPressed
 import im.vector.riotredesign.core.platform.StateView
 import im.vector.riotredesign.core.platform.VectorBaseFragment
+import im.vector.riotredesign.features.home.room.list.widget.FabMenuView
 import kotlinx.android.parcel.Parcelize
 import kotlinx.android.synthetic.main.fragment_room_list.*
 import org.koin.android.ext.android.inject
@ -47,11 +44,7 @@ data class RoomListParams(
 ) : Parcelable


-class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, OnBackPressed {
-
-    lateinit var fabButton: FloatingActionButton
-
-    private var isFabMenuOpened = false
+class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, OnBackPressed, FabMenuView.Listener {

    enum class DisplayMode(@StringRes val titleRes: Int) {
        HOME(R.string.bottom_action_home),
@ -82,21 +75,16 @@ class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, O
            navigator.openRoom(it)
        }

-        isFabMenuOpened = false
+        createChatFabMenu.listener = this
    }

    private fun setupCreateRoomButton() {
-        fabButton = when (roomListParams.displayMode) {
-            DisplayMode.HOME   -> createRoomButton
-            DisplayMode.PEOPLE -> createChatRoomButton
-            else               -> createGroupRoomButton
+        when (roomListParams.displayMode) {
+            DisplayMode.HOME   -> createChatFabMenu.isVisible = true
+            DisplayMode.PEOPLE -> createChatRoomButton.isVisible = true
+            else               -> createGroupRoomButton.isVisible = true
        }

-        fabButton.isVisible = true
-
-        createRoomButton.setOnClickListener {
-            toggleFabMenu()
-        }
        createChatRoomButton.setOnClickListener {
            createDirectChat()
        }
@ -104,93 +92,34 @@ class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, O
            openRoomDirectory()
        }

-        createRoomItemChat.setOnClickListener {
-            toggleFabMenu()
-            createDirectChat()
-        }
-        createRoomItemGroup.setOnClickListener {
-            toggleFabMenu()
-            openRoomDirectory()
-        }
-
-        createRoomTouchGuard.setOnClickListener {
-            toggleFabMenu()
-        }
-
-        createRoomTouchGuard.isClickable = false
-
        // Hide FAB when list is scrolling
        epoxyRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
            override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
-                fabButton.removeCallbacks(showFabRunnable)
+                createChatFabMenu.removeCallbacks(showFabRunnable)

                when (newState) {
                    RecyclerView.SCROLL_STATE_IDLE     -> {
-                        fabButton.postDelayed(showFabRunnable, 1000)
+                        createChatFabMenu.postDelayed(showFabRunnable, 1000)
                    }
                    RecyclerView.SCROLL_STATE_DRAGGING,
                    RecyclerView.SCROLL_STATE_SETTLING -> {
-                        fabButton.hide()
+                        when (roomListParams.displayMode) {
+                            DisplayMode.HOME   -> createChatFabMenu.hide()
+                            DisplayMode.PEOPLE -> createChatRoomButton.hide()
+                            else               -> createGroupRoomButton.hide()
+                        }
                    }
                }
            }
        })
    }

-    private fun toggleFabMenu() {
-        isFabMenuOpened = !isFabMenuOpened

-        if (isFabMenuOpened) {
-            createRoomItemChat.isVisible = true
-            createRoomItemGroup.isVisible = true
-
-            createRoomButton.animate()
-                    .setDuration(ANIMATION_DURATION_SHORT)
-                    .rotation(135f)
-            createRoomItemChat.animate()
-                    .setDuration(ANIMATION_DURATION_SHORT)
-                    .translationY(-resources.getDimension(R.dimen.fab_menu_offset_1))
-            createRoomItemGroup.animate()
-                    .setDuration(ANIMATION_DURATION_SHORT)
-                    .translationY(-resources.getDimension(R.dimen.fab_menu_offset_2))
-            createRoomTouchGuard.animate()
-                    .setDuration(ANIMATION_DURATION_SHORT)
-                    .alpha(0.6f)
-                    .setListener(null)
-            createRoomTouchGuard.isClickable = true
-        } else {
-            createRoomButton.animate()
-                    .setDuration(ANIMATION_DURATION_SHORT)
-                    .rotation(0f)
-            createRoomItemChat.animate()
-                    .setDuration(ANIMATION_DURATION_SHORT)
-                    .translationY(0f)
-            createRoomItemGroup.animate()
-                    .setDuration(ANIMATION_DURATION_SHORT)
-                    .translationY(0f)
-            createRoomTouchGuard.animate()
-                    .setDuration(ANIMATION_DURATION_SHORT)
-                    .alpha(0f)
-                    .setListener(object : SimpleAnimatorListener() {
-                        override fun onAnimationCancel(animation: Animator?) {
-                            animation?.removeListener(this)
-                        }
-
-                        override fun onAnimationEnd(animation: Animator?) {
-                            // Use isFabMenuOpened because it may have been open meanwhile
-                            createRoomItemChat.isVisible = isFabMenuOpened
-                            createRoomItemGroup.isVisible = isFabMenuOpened
-                        }
-                    })
-            createRoomTouchGuard.isClickable = false
-        }
-    }
-
-    private fun openRoomDirectory() {
+    override fun openRoomDirectory() {
        navigator.openRoomDirectory()
    }

-    private fun createDirectChat() {
+    override fun createDirectChat() {
        vectorBaseActivity.notImplemented("creating direct chat")
    }

@ -206,7 +135,13 @@ class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, O
    }

    private val showFabRunnable = Runnable {
-        fabButton.show()
+        if (isAdded) {
+            when (roomListParams.displayMode) {
+                DisplayMode.HOME   -> createChatFabMenu.show()
+                DisplayMode.PEOPLE -> createChatRoomButton.show()
+                else               -> createGroupRoomButton.show()
+            }
+        }
    }

    private fun renderState(state: RoomListViewState) {
@ -278,8 +213,7 @@ class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, O
    }

    override fun onBackPressed(): Boolean {
-        if (isFabMenuOpened) {
-            toggleFabMenu()
+        if (createChatFabMenu.onBackPressed()) {
            return true
        }

--- a/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt
+++ b/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt
@ -0,0 +1,160 @@
+/*
+ * Copyright 2019 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package im.vector.riotredesign.features.home.room.list.widget
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.ViewGroup
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.constraintlayout.widget.ConstraintSet
+import androidx.core.view.isVisible
+import androidx.transition.ChangeTransform
+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 kotlinx.android.synthetic.main.merge_fab_menu_view.view.*
+
+class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null,
+                                            defStyleAttr: Int = 0) : ConstraintLayout(context, attrs, defStyleAttr) {
+
+    var listener: Listener? = null
+
+    private var isFabMenuOpened = false
+
+    init {
+        inflate(context, R.layout.merge_fab_menu_view, 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
+
+
+        createRoomButton.setOnClickListener {
+            toggleFabMenu()
+        }
+
+        listOf(createRoomItemChat, createRoomItemChatLabel)
+                .forEach {
+                    it.setOnClickListener {
+                        closeFabMenu()
+                        listener?.createDirectChat()
+                    }
+                }
+        listOf(createRoomItemGroup, createRoomItemGroupLabel)
+                .forEach {
+                    it.setOnClickListener {
+                        closeFabMenu()
+                        listener?.openRoomDirectory()
+                    }
+                }
+
+        createRoomTouchGuard.setOnClickListener {
+            closeFabMenu()
+        }
+    }
+
+    fun show() {
+        createRoomButton.show()
+    }
+
+    fun hide() {
+        createRoomButton.hide()
+    }
+
+    private fun openFabMenu() {
+        if (isFabMenuOpened) {
+            return
+        }
+
+        toggleFabMenu()
+    }
+
+    private fun closeFabMenu() {
+        if (!isFabMenuOpened) {
+            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) {
+            closeFabMenu()
+            return true
+        }
+
+        return false
+    }
+
+    interface Listener {
+        fun createDirectChat()
+        fun openRoomDirectory()
+    }
+
+}
--- a/vector/src/main/res/drawable/vector_label_background.xml
+++ b/vector/src/main/res/drawable/vector_label_background.xml
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <corners android:radius="3dp" />
+
+    <solid android:color="#FFFFFF" />
+
+    <stroke
+        android:width="0.5dp"
+        android:color="#1EFFFFFF" />
+
+</shape>
--- a/vector/src/main/res/layout/constraint_set_composer_layout_compact.xml
+++ b/vector/src/main/res/layout/constraint_set_composer_layout_compact.xml
@ -159,6 +159,5 @@
        app:layout_constraintStart_toEndOf="@+id/composer_avatar_view"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@tools:sample/lorem/random" />
-    <!--tools:text="@tools:sample/lorem/random"-->

 </androidx.constraintlayout.widget.ConstraintLayout>
--- a/vector/src/main/res/layout/constraint_set_fab_menu_close.xml
+++ b/vector/src/main/res/layout/constraint_set_fab_menu_close.xml
@ -0,0 +1,82 @@
+<?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:alpha="0"
+        android:background="#323232"
+        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>
--- a/vector/src/main/res/layout/constraint_set_fab_menu_open.xml
+++ b/vector/src/main/res/layout/constraint_set_fab_menu_open.xml
@ -0,0 +1,77 @@
+<?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:alpha="0.5"
+        android:background="#323232" />
+
+    <!-- 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>
--- a/vector/src/main/res/layout/fragment_room_list.xml
+++ b/vector/src/main/res/layout/fragment_room_list.xml
@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-
-
 <im.vector.riotredesign.core.platform.StateView 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"
@ -14,55 +12,11 @@
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

-    <!-- Create several FABs to manage different icon size. maxImageSize cannot be set programmatically -->
-
-    <View
-        android:id="@+id/createRoomTouchGuard"
+    <im.vector.riotredesign.features.home.room.list.widget.FabMenuView
+        android:id="@+id/createChatFabMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
-        android:alpha="0"
-        android:background="@android:color/background_dark" />
-
-    <!-- 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_margin="16dp"
-        android:src="@drawable/ic_fab_add_room"
        android:visibility="gone"
-        app:maxImageSize="32dp"
-        tools:fab_colorNormal="?attr/colorAccent"
-        tools:fab_colorPressed="?attr/colorAccent"
-        tools:translationY="-146dp"
-        tools:visibility="visible" />
-
-    <!-- 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_margin="16dp"
-        android:src="@drawable/ic_fab_add_chat"
-        android:visibility="gone"
-        app:maxImageSize="34dp"
-        tools:fab_colorNormal="?attr/colorAccent"
-        tools:fab_colorPressed="?attr/colorAccent"
-        tools:translationY="-76dp"
-        tools:visibility="visible" />
-
-    <!-- Menu -->
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
-        android:id="@+id/createRoomButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom|end"
-        android:layout_margin="16dp"
-        android:src="@drawable/ic_fab_add"
-        android:visibility="gone"
-        app:maxImageSize="14dp"
        tools:visibility="visible" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
@ -70,12 +24,14 @@
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
-        android:layout_margin="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginRight="16dp"
+        android:layout_marginBottom="16dp"
        android:scaleType="center"
        android:src="@drawable/ic_fab_add_chat"
        android:visibility="gone"
        app:maxImageSize="34dp"
-        tools:layout_margin="76dp"
+        tools:layout_marginEnd="80dp"
        tools:visibility="visible" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
@ -83,11 +39,13 @@
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
-        android:layout_margin="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginRight="16dp"
+        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_fab_add_room"
        android:visibility="gone"
        app:maxImageSize="32dp"
-        tools:layout_margin="136dp"
+        tools:layout_marginEnd="144dp"
        tools:visibility="visible" />

 </im.vector.riotredesign.core.platform.StateView>
--- a/vector/src/main/res/layout/merge_fab_menu_view.xml
+++ b/vector/src/main/res/layout/merge_fab_menu_view.xml
@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Create several FABs to manage different icon size. maxImageSize cannot be set programmatically -->
+<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"
+    tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
+
+    <View
+        android:id="@+id/createRoomTouchGuard"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:alpha="0"
+        android:background="#323232"
+        tools:alpha="0.5" />
+
+    <!-- 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"
+        android:visibility="gone"
+        app:backgroundTint="#FFFFFF"
+        app:fabCustomSize="48dp"
+        app:maxImageSize="26dp"
+        app:tint="@color/black"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+    <TextView
+        android:id="@+id/createRoomItemGroupLabel"
+        style="@style/VectorLabel"
+        android:layout_marginEnd="8dp"
+        android:layout_marginRight="8dp"
+        android:text="@string/fab_menu_create_room" />
+
+    <!-- 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"
+        android:visibility="gone"
+        app:backgroundTint="#FFFFFF"
+        app:fabCustomSize="48dp"
+        app:maxImageSize="29dp"
+        app:tint="@color/black"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+    <TextView
+        android:id="@+id/createRoomItemChatLabel"
+        style="@style/VectorLabel"
+        android:layout_marginEnd="8dp"
+        android:layout_marginRight="8dp"
+        android:text="@string/fab_menu_create_chat" />
+
+    <!-- Menu -->
+    <com.google.android.material.floatingactionbutton.FloatingActionButton
+        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"
+        tools:ignore="MissingConstraints"
+        tools:visibility="visible" />
+
+</merge>
--- a/vector/src/main/res/values/dimens.xml
+++ b/vector/src/main/res/values/dimens.xml
@ -27,7 +27,4 @@
    <dimen name="pill_min_height">20dp</dimen>
    <dimen name="pill_text_padding">4dp</dimen>

-
-    <dimen name="fab_menu_offset_1">76dp</dimen>
-    <dimen name="fab_menu_offset_2">146dp</dimen>
 </resources>
--- a/vector/src/main/res/values/strings_riotX.xml
+++ b/vector/src/main/res/values/strings_riotX.xml
@ -37,4 +37,7 @@
    <string name="room_preview_no_preview">"This room can't be previewed"</string>
    <string name="room_preview_world_readable_room_not_supported_yet">"The preview of world-readable room is not supported yet in RiotX"</string>

+    <string name="fab_menu_create_room">"Rooms"</string>
+    <string name="fab_menu_create_chat">"Direct Messages"</string>
+
 </resources>
--- a/vector/src/main/res/values/styles_riot.xml
+++ b/vector/src/main/res/values/styles_riot.xml
@ -265,4 +265,17 @@
        <item name="layout_constraintTop_toBottomOf">@id/messageMemberNameView</item>
        <item name="layout_constraintBottom_toTopOf">@id/messageBottomInfo</item>
    </style>
+
+    <style name="VectorLabel">
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:paddingLeft">12dp</item>
+        <item name="android:paddingRight">12dp</item>
+        <item name="android:paddingTop">4dp</item>
+        <item name="android:paddingBottom">4dp</item>
+        <item name="android:textSize">15sp</item>
+        <item name="android:textColor">?riotx_text_primary</item>
+        <item name="android:background">@drawable/vector_label_background</item>
+    </style>
+
 </resources>