Merge pull request #1116 from nextcloud/emptyConversationsListAndLoadingShimmer

Update empty conversations screen and added shimmer effect

app/src/main/java/com/nextcloud/talk/controllers/ConversationsListController.java

@@ -30,10 +30,8 @@ import android.graphics.Bitmap;
 import android.os.Build;
 import android.os.Bundle;
 import android.os.Handler;
-import android.text.Editable;
 import android.text.InputType;
 import android.text.TextUtils;
-import android.text.TextWatcher;
 import android.view.LayoutInflater;
 import android.view.Menu;
 import android.view.MenuInflater;
@@ -41,7 +39,7 @@ import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.inputmethod.EditorInfo;
-import android.widget.ProgressBar;
+import android.widget.LinearLayout;
 import android.widget.RelativeLayout;
 
 import androidx.annotation.NonNull;
@@ -155,8 +153,8 @@ public class ConversationsListController extends BaseController implements Searc
     @BindView(R.id.swipeRefreshLayoutView)
     SwipeRefreshLayout swipeRefreshLayout;
 
-    @BindView(R.id.progressBar)
-    ProgressBar progressBarView;
+    @BindView(R.id.loading_content)
+    LinearLayout loadingContent;
 
     @BindView(R.id.emptyLayout)
     RelativeLayout emptyLayoutView;
@@ -216,7 +214,7 @@ public class ConversationsListController extends BaseController implements Searc
         if (adapter == null) {
             adapter = new FlexibleAdapter<>(callItems, getActivity(), true);
         } else {
-            progressBarView.setVisibility(View.GONE);
+            loadingContent.setVisibility(View.GONE);
         }
 
         adapter.addListener(this);
@@ -416,7 +414,7 @@ public class ConversationsListController extends BaseController implements Searc
 
                     if (adapterWasNull) {
                         adapterWasNull = false;
-                        progressBarView.setVisibility(View.GONE);
+                        loadingContent.setVisibility(View.GONE);
                     }
 
                     if (roomsOverall.getOcs().getData().size() > 0) {

app/src/main/res/layout/controller_conversations_rv.xml

@@ -25,42 +25,68 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <ProgressBar
-        android:id="@+id/progressBar"
-        android:layout_width="@dimen/item_height"
-        android:layout_height="@dimen/item_height"
-        android:layout_gravity="center"
-        android:layout_marginStart="@dimen/activity_horizontal_margin"
-        android:layout_marginLeft="@dimen/activity_horizontal_margin"
-        android:layout_marginEnd="@dimen/activity_horizontal_margin"
-        android:layout_marginRight="@dimen/activity_horizontal_margin"
-        android:indeterminate="true"
-        android:indeterminateTint="@color/colorPrimary"
-        android:indeterminateTintMode="src_in" />
+    <LinearLayout
+        android:id="@+id/loading_content"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical">
+
+        <include layout="@layout/rv_item_conversation_with_last_message_shimmer" />
+
+        <include layout="@layout/rv_item_conversation_with_last_message_shimmer" />
+
+        <include layout="@layout/rv_item_conversation_with_last_message_shimmer" />
+
+        <include layout="@layout/rv_item_conversation_with_last_message_shimmer" />
+
+    </LinearLayout>
 
     <RelativeLayout
         android:id="@+id/emptyLayout"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:visibility="gone">
+        android:layout_height="wrap_content"
+        android:layout_gravity="center"
+        android:visibility="gone"
+        tools:visibility="visible">
 
         <ImageView
-            android:id="@+id/noConversationsImageView"
-            android:layout_width="72dp"
+            android:id="@+id/empty_list_icon"
+            android:layout_width="match_parent"
             android:layout_height="72dp"
-            android:layout_centerInParent="true"
+            android:contentDescription="@string/nc_app_name"
             android:src="@drawable/ic_logo"
-            android:tint="@color/colorPrimary" />
+            app:tint="#989898" />
 
         <TextView
-            android:id="@+id/sendHiTextView"
+            android:id="@+id/empty_list_view_headline"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_below="@+id/noConversationsImageView"
-            android:layout_margin="8dp"
+            android:layout_below="@id/empty_list_icon"
+            android:layout_gravity="center_horizontal"
+            android:ellipsize="end"
+            android:gravity="center"
+            android:maxLines="2"
+            android:paddingTop="@dimen/standard_padding"
+            android:paddingBottom="@dimen/standard_half_padding"
             android:text="@string/nc_conversations_empty"
             android:textAlignment="center"
-            android:textSize="20sp" />
+            android:textColor="@color/conversation_item_header"
+            android:textSize="22sp" />
+
+        <TextView
+            android:id="@+id/empty_list_view_text"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_below="@id/empty_list_view_headline"
+            android:layout_gravity="center_horizontal"
+            android:ellipsize="end"
+            android:gravity="center"
+            android:paddingTop="@dimen/standard_half_padding"
+            android:paddingBottom="@dimen/standard_half_padding"
+            android:text="@string/nc_conversations_empty_details"
+            android:textAlignment="center"
+            android:textColor="@color/textColorMaxContrast"
+            android:textSize="16sp" />
     </RelativeLayout>
 
     <androidx.swiperefreshlayout.widget.SwipeRefreshLayout

app/src/main/res/layout/lobby_view.xml

@@ -19,6 +19,7 @@
   -->
 
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/lobby_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
@@ -32,7 +33,7 @@
         android:layout_centerHorizontal="true"
         android:layout_margin="@dimen/margin_between_elements"
         android:src="@drawable/ic_room_service_black_24dp"
-        android:tint="@color/grey_600" />
+        app:tint="@color/grey_600" />
 
     <TextView
         android:id="@+id/lobby_text_view"

app/src/main/res/layout/rv_item_conversation_with_last_message_shimmer.xml

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Nextcloud Talk application
+  ~
+  ~ @author Andy Scherzinger
+  ~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  ~
+-->
+
+<RelativeLayout 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="wrap_content"
+    android:layout_margin="@dimen/double_margin_between_elements">
+
+    <com.elyeproj.loaderviewlibrary.LoaderImageView
+        android:id="@+id/activity_icon"
+        android:layout_width="@dimen/small_item_height"
+        android:layout_height="@dimen/small_item_height"
+        android:layout_centerVertical="true"
+        android:layout_marginEnd="@dimen/double_margin_between_elements"
+        android:contentDescription="@null"
+        app:corners="100" />
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="2dp"
+        android:layout_toEndOf="@id/activity_icon"
+        android:orientation="vertical">
+
+        <com.elyeproj.loaderviewlibrary.LoaderTextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="128dp"
+            android:textStyle="bold" />
+
+        <com.elyeproj.loaderviewlibrary.LoaderTextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="6dp" />
+
+    </LinearLayout>
+
+</RelativeLayout>

app/src/main/res/values-de/strings.xml

@@ -259,7 +259,8 @@
     <string name="nc_description_send_message_button">Nachricht senden</string>
 
     <!-- Empty states -->
-    <string name="nc_conversations_empty">Treten Sie einer Unterhaltung bei oder starten Sie eine neue\n Sagen Sie Hallo zu Ihren Freunden und Kollegen!</string>
+    <string name="nc_conversations_empty">Treten Sie einer Unterhaltung bei \noder starten Sie eine neue</string>
+    <string name="nc_conversations_empty_details">Sagen Sie Hallo zu Ihren Freunden und Kollegen!</string>
     <string name="nc_hello">Hallo</string>
 
     <!-- Other -->

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

@@ -287,7 +287,8 @@
     <string name="nc_description_send_message_button">Send message</string>
 
     <!-- Empty states -->
-    <string name="nc_conversations_empty">Join a conversation or start a new one\n Say hi to your friends and colleagues!</string>
+    <string name="nc_conversations_empty">Join a conversation or start a new one</string>
+    <string name="nc_conversations_empty_details">Say hi to your friends and colleagues!</string>
     <string name="nc_hello">Hello</string>
 
     <!-- Other -->

scripts/analysis/lint-results.txt

@@ -1,2 +1,2 @@
 DO NOT TOUCH; GENERATED BY DRONE
-      <span class="mdl-layout-title">Lint Report: 3 errors and 129 warnings</span>
+      <span class="mdl-layout-title">Lint Report: 3 errors and 128 warnings</span>