6543/BayernMessenger
1
0
Fork 0
forked from GitHub-Mirror/riotX-android
Code Issues 4 Pull Requests Releases Wiki Activity

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

Browse Source 
Better anim of ome button
This commit is contained in:
Benoit Marty
2019-06-14 16:17:27 +02:00
committed by GitHub
parent 02ef1172ce eaf1e080ba
commit e3bc88e36c
7 changed files with 255 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
vector/src/main/res/layout/constraint_set_fab_menu_close.xml
View File

@ -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>

76
vector/src/main/res/layout/constraint_set_fab_menu_open.xml
View File

@ -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>

2
vector/src/main/res/layout/fragment_room_list.xml
View File

@ -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

35
vector/src/main/res/layout/merge_fab_menu_view.xml → vector/src/main/res/layout/motion_fab_menu_merge.xml
View File

@ -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.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="?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="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="?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="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"
tools:ignore="MissingConstraints"
tools:visibility="visible" />
app:maxImageSize="14dp" />
</merge>

205
vector/src/main/res/xml/motion_scene_fab_menu.xml Normal file
View File

@ -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>