forked from GitHub-Mirror/riotX-android
FAB Motion WIP
FAB Motion WIP FAB Motion WIP FAB Motion WIP
This commit is contained in:
Benoit Marty
committed by
Benoit Marty
Benoit Marty
parent
6323183119
commit
56f1c726b2
@ -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>
|
||||
@ -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>
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
|
||||
app:layoutDescription="@xml/motion_scene_fab_menu"
|
||||
tools:motionProgress="0.5"
|
||||
tools:parentTag="androidx.constraintlayout.motion.widget.MotionLayout"
|
||||
tools:showPaths="true">
|
||||
|
||||
<View
|
||||
android:id="@+id/createRoomTouchGuard"
|
||||
@ -21,17 +22,16 @@
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="bottom|end"
|
||||
android:src="@drawable/ic_fab_add_room"
|
||||
android:visibility="gone"
|
||||
app:backgroundTint="?riotx_fab_secondary_bg"
|
||||
app:backgroundTint="#FFFFFF"
|
||||
app:fabCustomSize="48dp"
|
||||
app:maxImageSize="26dp"
|
||||
app:tint="?riotx_fab_secondary_color"
|
||||
tools:ignore="MissingConstraints"
|
||||
tools:visibility="visible" />
|
||||
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" />
|
||||
@ -43,17 +43,16 @@
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="bottom|end"
|
||||
android:src="@drawable/ic_fab_add_chat"
|
||||
android:visibility="gone"
|
||||
app:backgroundTint="?riotx_fab_secondary_bg"
|
||||
app:backgroundTint="#FFFFFF"
|
||||
app:fabCustomSize="48dp"
|
||||
app:maxImageSize="29dp"
|
||||
app:tint="?riotx_fab_secondary_color"
|
||||
tools:ignore="MissingConstraints"
|
||||
tools:visibility="visible" />
|
||||
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" />
|
||||
@ -63,11 +62,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"
|
||||
tools:ignore="MissingConstraints"
|
||||
tools:visibility="visible" />
|
||||
app:maxImageSize="14dp" />
|
||||
|
||||
</merge>
|
||||
213
vector/src/main/res/xml/motion_scene_fab_menu.xml
Normal file
213
vector/src/main/res/xml/motion_scene_fab_menu.xml
Normal file
@ -0,0 +1,213 @@
|
||||
<?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="1000">
|
||||
|
||||
<OnClick
|
||||
motion:clickAction="toggle"
|
||||
motion:targetId="@+id/createRoomButton" />
|
||||
|
||||
<KeyFrameSet>
|
||||
|
||||
<!-- Show elements directly at the beginning of the transition: FIXME It does not work as expected -->
|
||||
<KeyAttribute
|
||||
android:visibility="gone"
|
||||
motion:framePosition="0"
|
||||
motion:motionTarget="@id/createRoomItemGroup" />
|
||||
|
||||
<KeyAttribute
|
||||
android:scaleX="1"
|
||||
android:scaleY="1"
|
||||
android:visibility="visible"
|
||||
motion:framePosition="1"
|
||||
motion:motionTarget="@id/createRoomItemGroup" />
|
||||
|
||||
<KeyAttribute
|
||||
android:visibility="visible"
|
||||
motion:framePosition="1"
|
||||
motion:motionTarget="@id/createRoomItemGroupLabel" />
|
||||
|
||||
<KeyAttribute
|
||||
android:visibility="visible"
|
||||
motion:framePosition="1"
|
||||
motion:motionTarget="@id/createRoomItemChat" />
|
||||
|
||||
<KeyAttribute
|
||||
android:visibility="visible"
|
||||
motion:framePosition="1"
|
||||
motion:motionTarget="@id/createRoomItemChatLabel" />
|
||||
|
||||
</KeyFrameSet>
|
||||
|
||||
</Transition>
|
||||
|
||||
<ConstraintSet android:id="@+id/constraint_set_fab_menu_close">
|
||||
|
||||
<Constraint
|
||||
android:id="@+id/createRoomTouchGuard"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
android:background="?riotx_touch_guard_bg"
|
||||
android:visibility="gone"
|
||||
motion:layout_constraintBottom_toBottomOf="@id/createRoomButton"
|
||||
motion:layout_constraintEnd_toEndOf="@+id/createRoomButton"
|
||||
motion:layout_constraintStart_toStartOf="@id/createRoomButton"
|
||||
motion:layout_constraintTop_toTopOf="@+id/createRoomButton" />
|
||||
|
||||
<!-- 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="gone"
|
||||
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"
|
||||
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"
|
||||
android:visibility="gone"
|
||||
motion:layout_constraintBottom_toBottomOf="@+id/createRoomItemChat"
|
||||
motion:layout_constraintEnd_toEndOf="@+id/createRoomItemChat"
|
||||
motion:layout_constraintTop_toTopOf="@+id/createRoomItemChat" />
|
||||
|
||||
<!-- 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="gone"
|
||||
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"
|
||||
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"
|
||||
android:visibility="gone"
|
||||
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"
|
||||
style="@style/VectorLabel"
|
||||
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"
|
||||
style="@style/VectorLabel"
|
||||
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>
|
||||
Reference in New Issue
Block a user