filippodb
/
SchildiChat-android
mirror of https://github.com/SchildiChat/SchildiChat-android.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FAB Motion WIP 

FAB Motion WIP

FAB Motion WIP

FAB Motion WIP
This commit is contained in:
Benoit Marty 2019-06-10 13:37:54 +02:00 committed by Benoit Marty
parent 6323183119
commit 56f1c726b2
6 changed files with 238 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,56 +18,29 @@ 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 androidx.constraintlayout.motion.widget.MotionLayout
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,6 +62,9 @@ class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSe
}
fun show() {
// Ensure visibility is well restored
// FIXME It does not work, FAB is not visible, alpha is 0... And cannot set it to 1
createRoomButton.show()
}
@ -96,61 +72,12 @@ class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSe
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)
}
}
transitionToStart()
}
fun onBackPressed(): Boolean {
if (isFabMenuOpened) {
if (currentState == R.id.constraint_set_fab_menu_open) {
closeFabMenu()
return true
}

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

33
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.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
View 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>