Merge pull request #2450 from vector-im/feature/bca/home_empty_screens

Home empty screen design update

CHANGES.md

@@ -14,6 +14,7 @@ Improvements 🙌:
  - Handle events of type "m.room.server_acl" (#890)
  - Room creation form: add advanced section to disable federation (#1314)
  - Move "Enable Encryption" from room setting screen to room profile screen (#2394)
+ - Home empty screens quick design update (#2347)
  - Improve Invite user screen (seamless search for matrix ID)
 
 Bugfix 🐛:

vector/src/main/java/im/vector/app/core/extensions/ConstraintLayout.kt

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2020 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.app.core.extensions
+
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.constraintlayout.widget.ConstraintSet
+
+fun ConstraintLayout.updateConstraintSet(block: (ConstraintSet) -> Unit) {
+    ConstraintSet().let {
+        it.clone(this)
+        block.invoke(it)
+        it.applyTo(this)
+    }
+}

vector/src/main/java/im/vector/app/core/platform/StateView.kt

@@ -21,8 +21,10 @@ import android.graphics.drawable.Drawable
 import android.util.AttributeSet
 import android.view.View
 import android.widget.FrameLayout
+import androidx.constraintlayout.widget.ConstraintSet
 import androidx.core.view.isVisible
 import im.vector.app.R
+import im.vector.app.core.extensions.updateConstraintSet
 import kotlinx.android.synthetic.main.view_state.view.*
 
 class StateView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0)
@@ -31,7 +33,12 @@ class StateView @JvmOverloads constructor(context: Context, attrs: AttributeSet?
     sealed class State {
         object Content : State()
         object Loading : State()
-        data class Empty(val title: CharSequence? = null, val image: Drawable? = null, val message: CharSequence? = null) : State()
+        data class Empty(
+                val title: CharSequence? = null,
+                val image: Drawable? = null,
+                val isBigImage: Boolean = false,
+                val message: CharSequence? = null
+        ) : State()
 
         data class Error(val message: CharSequence? = null) : State()
     }
@@ -71,6 +78,9 @@ class StateView @JvmOverloads constructor(context: Context, attrs: AttributeSet?
             is State.Loading -> Unit
             is State.Empty   -> {
                 emptyImageView.setImageDrawable(newState.image)
+                emptyView.updateConstraintSet {
+                    it.constrainPercentHeight(R.id.emptyImageView, if (newState.isBigImage) 0.5f else 0.1f)
+                }
                 emptyMessageView.text = newState.message
                 emptyTitleView.text = newState.title
             }

vector/src/main/java/im/vector/app/features/home/room/list/RoomListFragment.kt

@@ -294,28 +294,30 @@ class RoomListFragment @Inject constructor(
             RoomListDisplayMode.NOTIFICATIONS -> {
                 if (hasNoRoom) {
                     StateView.State.Empty(
-                            getString(R.string.room_list_catchup_welcome_title),
-                            ContextCompat.getDrawable(requireContext(), R.drawable.ic_home_bottom_catchup),
-                            getString(R.string.room_list_catchup_welcome_body)
+                            title = getString(R.string.room_list_catchup_welcome_title),
+                            image = ContextCompat.getDrawable(requireContext(), R.drawable.ic_home_bottom_catchup),
+                            message = getString(R.string.room_list_catchup_welcome_body)
                     )
                 } else {
                     StateView.State.Empty(
-                            getString(R.string.room_list_catchup_empty_title),
-                            ContextCompat.getDrawable(requireContext(), R.drawable.ic_noun_party_popper),
-                            getString(R.string.room_list_catchup_empty_body))
+                            title = getString(R.string.room_list_catchup_empty_title),
+                            image = ContextCompat.getDrawable(requireContext(), R.drawable.ic_noun_party_popper),
+                            message = getString(R.string.room_list_catchup_empty_body))
                 }
             }
             RoomListDisplayMode.PEOPLE        ->
                 StateView.State.Empty(
-                        getString(R.string.room_list_people_empty_title),
-                        ContextCompat.getDrawable(requireContext(), R.drawable.ic_home_bottom_chat),
-                        getString(R.string.room_list_people_empty_body)
+                        title = getString(R.string.room_list_people_empty_title),
+                        image = ContextCompat.getDrawable(requireContext(), R.drawable.empty_state_dm),
+                        isBigImage = true,
+                        message = getString(R.string.room_list_people_empty_body)
                 )
             RoomListDisplayMode.ROOMS         ->
                 StateView.State.Empty(
-                        getString(R.string.room_list_rooms_empty_title),
-                        ContextCompat.getDrawable(requireContext(), R.drawable.ic_home_bottom_group),
-                        getString(R.string.room_list_rooms_empty_body)
+                        title = getString(R.string.room_list_rooms_empty_title),
+                        image = ContextCompat.getDrawable(requireContext(), R.drawable.empty_state_room),
+                        isBigImage = true,
+                        message = getString(R.string.room_list_rooms_empty_body)
                 )
             else                              ->
                 // Always display the content in this mode, because if the footer

vector/src/main/res/layout/view_state.xml

@@ -20,7 +20,9 @@
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:orientation="vertical"
-        android:padding="@dimen/layout_horizontal_margin">
+        android:padding="@dimen/layout_horizontal_margin"
+        android:visibility="gone"
+        tools:visibility="visible">
 
         <TextView
             android:id="@+id/errorMessageView"
@@ -32,7 +34,6 @@
             android:textSize="16sp"
             tools:text="Une erreur est survenue" />
 
-
         <com.google.android.material.button.MaterialButton
             android:id="@+id/errorRetryView"
             android:layout_width="wrap_content"
@@ -44,7 +45,6 @@
 
     </LinearLayout>
 
-
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/emptyView"
         android:layout_width="match_parent"
@@ -53,47 +53,56 @@
         android:orientation="vertical"
         android:padding="@dimen/layout_horizontal_margin">
 
+        <ImageView
+            android:id="@+id/emptyImageView"
+            style="@style/VectorEmptyImageView"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            android:layout_gravity="center_horizontal"
+            android:layout_marginStart="20dp"
+            android:layout_marginEnd="20dp"
+            android:layout_marginBottom="30dp"
+            android:maxHeight="350dp"
+            app:layout_constraintBottom_toTopOf="@id/emptyTitleView"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_chainStyle="packed"
+            tools:ignore="MissingPrefix"
+            tools:layout_constraintHeight_percent="0.5"
+            tools:src="@drawable/ic_search_no_results" />
+
         <TextView
             android:id="@+id/emptyTitleView"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_horizontal"
-            android:layout_marginBottom="49dp"
             android:gravity="center"
             android:textColor="?riotx_text_primary"
             android:textSize="15sp"
             android:textStyle="bold"
-            app:layout_constraintBottom_toTopOf="@+id/emptyImageView"
+            app:layout_constraintBottom_toTopOf="@id/emptyMessageView"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            tools:text="@string/room_list_catchup_empty_title" />
-
-        <ImageView
-            android:id="@+id/emptyImageView"
-            android:layout_width="64dp"
-            android:layout_height="64dp"
-            android:layout_gravity="center_horizontal"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            tools:src="@drawable/ic_noun_party_popper"
-            app:tint="?riotx_text_primary"
-            tools:ignore="MissingPrefix" />
+            app:layout_constraintTop_toBottomOf="@id/emptyImageView"
+            app:layout_constraintVertical_chainStyle="packed"
+            tools:text="@string/room_list_people_empty_title" />
 
         <TextView
             android:id="@+id/emptyMessageView"
             android:layout_width="220dp"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
-            android:layout_marginTop="49dp"
+            android:layout_marginTop="20dp"
             android:gravity="center"
             android:textColor="?riotx_text_secondary"
             android:textSize="14sp"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/emptyImageView"
-            tools:text="@string/room_list_catchup_empty_body" />
+            app:layout_constraintTop_toBottomOf="@+id/emptyTitleView"
+            app:layout_constraintVertical_chainStyle="packed"
+            tools:text="@string/room_list_people_empty_body" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 

vector/src/main/res/values-land/styles.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="VectorEmptyImageView">
+        <item name="android:visibility">gone</item>
+    </style>
+
+</resources>

vector/src/main/res/values/strings.xml

@@ -1644,9 +1644,9 @@
     <string name="room_list_catchup_welcome_title">Welcome home!</string>
     <string name="room_list_catchup_welcome_body">Catch up on unread messages here</string>
     <string name="room_list_people_empty_title">Conversations</string>
-    <string name="room_list_people_empty_body">Your direct message conversations will be displayed here</string>
+    <string name="room_list_people_empty_body">Your direct message conversations will be displayed here. Tap the + bottom right to start some.</string>
     <string name="room_list_rooms_empty_title">Rooms</string>
-    <string name="room_list_rooms_empty_body">Your rooms will be displayed here</string>
+    <string name="room_list_rooms_empty_body">Your rooms will be displayed here. Tap the + bottom right to find existing ones or start some of your own.</string>
 
     <string name="title_activity_emoji_reaction_picker">Reactions</string>
     <string name="reactions_agree">Agree</string>

vector/src/main/res/values/styles.xml

@@ -3,4 +3,8 @@
 
     <style name="Vector.PopupMenu" parent="Vector.PopupMenuBase" />
 
+    <style name="VectorEmptyImageView">
+        <item name="android:visibility">visible</item>
+    </style>
+
 </resources>