Display a no network indicator when there is no network: Create a dedicated View

vector/src/main/java/im/vector/riotx/features/home/HomeDetailFragment.kt

@@ -19,9 +19,7 @@ package im.vector.riotx.features.home
 import android.os.Bundle
 import android.os.Parcelable
 import android.view.LayoutInflater
-import android.view.View
 import androidx.core.view.forEachIndexed
-import androidx.core.view.isVisible
 import androidx.lifecycle.Observer
 import androidx.lifecycle.ViewModelProviders
 import com.airbnb.mvrx.args
@@ -31,7 +29,6 @@ import com.google.android.material.bottomnavigation.BottomNavigationItemView
 import com.google.android.material.bottomnavigation.BottomNavigationMenuView
 import im.vector.matrix.android.api.session.Session
 import im.vector.matrix.android.api.session.crypto.keysbackup.KeysBackupState
-import im.vector.matrix.android.api.session.sync.SyncState
 import im.vector.riotx.R
 import im.vector.riotx.core.di.ScreenComponent
 import im.vector.riotx.core.platform.ToolbarConfigurable
@@ -209,12 +206,7 @@ class HomeDetailFragment : VectorBaseFragment(), KeysBackupBanner.Delegate {
         unreadCounterBadgeViews[INDEX_CATCHUP].render(UnreadCounterBadgeView.State(it.notificationCountCatchup, it.notificationHighlightCatchup))
         unreadCounterBadgeViews[INDEX_PEOPLE].render(UnreadCounterBadgeView.State(it.notificationCountPeople, it.notificationHighlightPeople))
         unreadCounterBadgeViews[INDEX_ROOMS].render(UnreadCounterBadgeView.State(it.notificationCountRooms, it.notificationHighlightRooms))
-        syncProgressBarWrap.visibility = when (it.syncState) {
-            is SyncState.RUNNING -> if (it.syncState.afterPause) View.VISIBLE else View.GONE
-            else                 -> View.GONE
-        }
-        // TODO Create a View
-        noNetworkBanner.isVisible = it.syncState is SyncState.NO_NETWORK
+        syncStateView.render(it.syncState)
     }
 
     companion object {

vector/src/main/java/im/vector/riotx/features/home/room/detail/RoomDetailFragment.kt

@@ -39,7 +39,6 @@ import androidx.core.content.ContextCompat
 import androidx.core.util.Pair
 import androidx.core.view.ViewCompat
 import androidx.core.view.forEach
-import androidx.core.view.isVisible
 import androidx.lifecycle.ViewModelProviders
 import androidx.recyclerview.widget.ItemTouchHelper
 import androidx.recyclerview.widget.LinearLayoutManager
@@ -66,7 +65,6 @@ import im.vector.matrix.android.api.session.room.send.SendState
 import im.vector.matrix.android.api.session.room.timeline.TimelineEvent
 import im.vector.matrix.android.api.session.room.timeline.getLastMessageContent
 import im.vector.matrix.android.api.session.room.timeline.getTextEditableContent
-import im.vector.matrix.android.api.session.sync.SyncState
 import im.vector.matrix.android.api.session.user.model.User
 import im.vector.riotx.R
 import im.vector.riotx.core.di.ScreenComponent
@@ -252,12 +250,7 @@ class RoomDetailFragment :
         }
 
         roomDetailViewModel.selectSubscribe(RoomDetailViewState::syncState) { syncState ->
-            syncProgressBarWrap.visibility = when (syncState) {
-                is SyncState.RUNNING -> if (syncState.afterPause) View.VISIBLE else View.GONE
-                else                 -> View.GONE
-            }
-            // TODO Create a View
-            noNetworkBanner.isVisible = syncState is SyncState.NO_NETWORK
+            syncStateView.render(syncState)
         }
     }
 

vector/src/main/java/im/vector/riotx/features/sync/widget/SyncStateView.kt

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2019 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.riotx.features.sync.widget
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.View
+import android.widget.FrameLayout
+import androidx.core.view.isVisible
+import im.vector.matrix.android.api.session.sync.SyncState
+import im.vector.riotx.R
+import kotlinx.android.synthetic.main.view_sync_state.view.*
+
+class SyncStateView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0)
+    : FrameLayout(context, attrs, defStyle) {
+
+    init {
+        View.inflate(context, R.layout.view_sync_state, this)
+    }
+
+
+    fun render(newState: SyncState) {
+        syncStateProgressBar.visibility = when (newState) {
+            is SyncState.RUNNING -> if (newState.afterPause) View.VISIBLE else View.GONE
+            else                 -> View.GONE
+        }
+        syncStateNoNetwork.isVisible = newState is SyncState.NO_NETWORK
+    }
+}

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

@@ -44,39 +44,13 @@
 
     </androidx.appcompat.widget.Toolbar>
 
-    <!-- Trick to remove surrounding padding (clip from wrapping frame) -->
-    <FrameLayout
-        android:id="@+id/syncProgressBarWrap"
+    <im.vector.riotx.features.sync.widget.SyncStateView
+        android:id="@+id/syncStateView"
         android:layout_width="match_parent"
-        android:layout_height="3dp"
-        android:visibility="gone"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/groupToolbar"
-        tools:visibility="visible">
-
-        <ProgressBar
-            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
-            android:layout_width="match_parent"
-            android:layout_height="14dp"
-            android:layout_gravity="center"
-            android:background="?riotx_header_panel_background"
-            android:indeterminate="true" />
-    </FrameLayout>
-
-    <TextView
-        android:id="@+id/noNetworkBanner"
-        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:background="@color/vector_warning_color"
-        android:gravity="center"
-        android:text="@string/no_network_indicator"
-        android:textColor="@color/white"
-        android:visibility="gone"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/syncProgressBarWrap"
-        tools:visibility="visible" />
+        app:layout_constraintTop_toBottomOf="@id/groupToolbar" />
 
     <im.vector.riotx.core.ui.views.KeysBackupBanner
         android:id="@+id/homeKeysBackupBanner"
@@ -86,7 +60,7 @@
         android:minHeight="67dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/noNetworkBanner" />
+        app:layout_constraintTop_toBottomOf="@id/syncStateView" />
 
     <FrameLayout
         android:id="@+id/roomListContainer"

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

@@ -71,40 +71,13 @@
 
     </androidx.appcompat.widget.Toolbar>
 
-    <!-- Trick to remove surrounding padding (clip from wrapping frame) -->
-    <FrameLayout
-        android:id="@+id/syncProgressBarWrap"
+    <im.vector.riotx.features.sync.widget.SyncStateView
+        android:id="@+id/syncStateView"
         android:layout_width="match_parent"
-        android:layout_height="3dp"
-        android:visibility="gone"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/roomToolbar"
-        tools:visibility="visible">
-
-        <ProgressBar
-            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
-            android:layout_width="match_parent"
-            android:layout_height="14dp"
-            android:layout_gravity="center"
-            android:background="?riotx_header_panel_background"
-            android:indeterminate="true" />
-
-    </FrameLayout>
-
-    <TextView
-        android:id="@+id/noNetworkBanner"
-        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:background="@color/vector_warning_color"
-        android:gravity="center"
-        android:text="@string/no_network_indicator"
-        android:textColor="@color/white"
-        android:visibility="gone"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/syncProgressBarWrap"
-        tools:visibility="visible" />
+        app:layout_constraintTop_toBottomOf="@id/roomToolbar" />
 
     <com.airbnb.epoxy.EpoxyRecyclerView
         android:id="@+id/recyclerView"
@@ -114,7 +87,7 @@
         app:layout_constraintBottom_toTopOf="@+id/recyclerViewBarrier"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/noNetworkBanner"
+        app:layout_constraintTop_toBottomOf="@id/syncStateView"
         tools:listitem="@layout/item_timeline_event_base" />
 
     <androidx.constraintlayout.widget.Barrier

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

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    tools:orientation="vertical"
+    tools:parentTag="android.widget.LinearLayout">
+
+    <!-- Trick to remove surrounding padding (clip from wrapping frame) -->
+    <FrameLayout
+        android:id="@+id/syncStateProgressBar"
+        android:layout_width="match_parent"
+        android:layout_height="3dp"
+        android:visibility="gone"
+        tools:visibility="visible">
+
+        <ProgressBar
+            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
+            android:layout_width="match_parent"
+            android:layout_height="14dp"
+            android:layout_gravity="center"
+            android:background="?riotx_header_panel_background"
+            android:indeterminate="true" />
+    </FrameLayout>
+
+    <TextView
+        android:id="@+id/syncStateNoNetwork"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@color/vector_warning_color"
+        android:gravity="center"
+        android:text="@string/no_network_indicator"
+        android:textColor="@color/white"
+        android:visibility="gone"
+        tools:visibility="visible" />
+
+</merge>