forked from GitHub-Mirror/riotX-android
FAB Menu
FAB Menu WIP FAB Menu WIP FAB Menu WIP
This commit is contained in:
13
vector/src/main/res/drawable/vector_label_background.xml
Normal file
13
vector/src/main/res/drawable/vector_label_background.xml
Normal file
@ -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>
|
@ -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>
|
82
vector/src/main/res/layout/constraint_set_fab_menu_close.xml
Normal file
82
vector/src/main/res/layout/constraint_set_fab_menu_close.xml
Normal file
@ -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>
|
77
vector/src/main/res/layout/constraint_set_fab_menu_open.xml
Normal file
77
vector/src/main/res/layout/constraint_set_fab_menu_open.xml
Normal file
@ -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>
|
@ -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>
|
||||
|
75
vector/src/main/res/layout/merge_fab_menu_view.xml
Normal file
75
vector/src/main/res/layout/merge_fab_menu_view.xml
Normal file
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
Reference in New Issue
Block a user