Fixed #99

app/src/main/java/de/kuschku/quasseldroid/ui/chat/ChatActivity.kt

@@ -34,7 +34,10 @@ import android.view.Menu
 import android.view.MenuItem
 import android.view.View
 import android.widget.EditText
+import android.widget.LinearLayout
+import android.widget.TextView
 import androidx.appcompat.app.ActionBarDrawerToggle
+import androidx.appcompat.widget.AppCompatImageView
 import androidx.appcompat.widget.Toolbar
 import androidx.core.content.pm.ShortcutInfoCompat
 import androidx.core.content.pm.ShortcutManagerCompat
@@ -92,6 +95,7 @@ import de.kuschku.quasseldroid.util.ui.MaterialContentLoadingProgressBar
 import de.kuschku.quasseldroid.util.ui.NickCountDrawable
 import de.kuschku.quasseldroid.viewmodel.EditorViewModel
 import de.kuschku.quasseldroid.viewmodel.data.BufferData
+import me.zhanghai.android.materialprogressbar.MaterialProgressBar
 import org.threeten.bp.Instant
 import org.threeten.bp.ZoneId
 import org.threeten.bp.format.DateTimeFormatter
@@ -110,6 +114,18 @@ class ChatActivity : ServiceBoundActivity(), SharedPreferences.OnSharedPreferenc
   @BindView(R.id.progress_bar)
   lateinit var progressBar: MaterialContentLoadingProgressBar
 
+  @BindView(R.id.connection_status)
+  lateinit var connectionStatusDisplay: LinearLayout
+
+  @BindView(R.id.connection_status_icon)
+  lateinit var connectionStatusDisplayIcon: AppCompatImageView
+
+  @BindView(R.id.connection_status_progress)
+  lateinit var connectionStatusDisplayProgress: MaterialProgressBar
+
+  @BindView(R.id.connection_status_text)
+  lateinit var connectionStatusDisplayText: TextView
+
   @BindView(R.id.autocomplete_list)
   lateinit var autoCompleteList: RecyclerView
 
@@ -571,12 +587,32 @@ class ChatActivity : ServiceBoundActivity(), SharedPreferences.OnSharedPreferenc
     viewModel.connectionProgress.toLiveData().observe(this, Observer {
       val (state, progress, max) = it ?: Triple(ConnectionState.DISCONNECTED, 0, 0)
       when (state) {
-        ConnectionState.CONNECTED -> {
-          progressBar.visibility = View.INVISIBLE
-        }
         ConnectionState.DISCONNECTED,
         ConnectionState.CLOSED     -> {
           progressBar.visibility = View.INVISIBLE
+
+          connectionStatusDisplay.visibility = View.VISIBLE
+          connectionStatusDisplayText.text = getString(R.string.label_status_disconnected)
+          connectionStatusDisplayIcon.visibility = View.VISIBLE
+          connectionStatusDisplayProgress.visibility = View.GONE
+        }
+        ConnectionState.CONNECTING -> {
+          progressBar.visibility = View.VISIBLE
+          progressBar.isIndeterminate = true
+
+          connectionStatusDisplay.visibility = View.VISIBLE
+          connectionStatusDisplayText.text = getString(R.string.label_status_connecting)
+          connectionStatusDisplayIcon.visibility = View.GONE
+          connectionStatusDisplayProgress.visibility = View.VISIBLE
+        }
+        ConnectionState.HANDSHAKE  -> {
+          progressBar.visibility = View.VISIBLE
+          progressBar.isIndeterminate = true
+
+          connectionStatusDisplay.visibility = View.VISIBLE
+          connectionStatusDisplayText.text = getString(R.string.label_status_handshake)
+          connectionStatusDisplayIcon.visibility = View.GONE
+          connectionStatusDisplayProgress.visibility = View.VISIBLE
         }
         ConnectionState.INIT       -> {
           progressBar.visibility = View.VISIBLE
@@ -584,10 +620,15 @@ class ChatActivity : ServiceBoundActivity(), SharedPreferences.OnSharedPreferenc
           progressBar.isIndeterminate = progress == 0 || max == 0
           progressBar.progress = progress
           progressBar.max = max
+
+          connectionStatusDisplay.visibility = View.VISIBLE
+          connectionStatusDisplayText.text = getString(R.string.label_status_init)
+          connectionStatusDisplayIcon.visibility = View.GONE
+          connectionStatusDisplayProgress.visibility = View.VISIBLE
         }
-        else                      -> {
-          progressBar.visibility = View.VISIBLE
-          progressBar.isIndeterminate = true
+        ConnectionState.CONNECTED  -> {
+          progressBar.visibility = View.INVISIBLE
+          connectionStatusDisplay.visibility = View.GONE
         }
       }
     })

app/src/main/res/drawable/ic_disconnected.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#000"
+    android:pathData="M19,17H21V9H19M19,21H21V19H19M1,21H17V7H21V1" />
+</vector>

app/src/main/res/layout-land/layout_main.xml

@@ -32,6 +32,10 @@
 
     <include layout="@layout/layout_toolbar" />
 
+    <FrameLayout
+      android:layout_width="match_parent"
+      android:layout_height="match_parent">
+
       <fragment
         android:id="@+id/fragment_messages"
         android:name="de.kuschku.quasseldroid.ui.chat.messages.MessageListFragment"
@@ -40,6 +44,9 @@
         app:layout_behavior="@string/appbar_scrolling_view_behavior"
         tools:layout="@layout/fragment_messages" />
 
+      <include layout="@layout/widget_connection_status" />
+    </FrameLayout>
+
     <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/autocomplete_list"
       android:layout_width="match_parent"

app/src/main/res/layout-sw600dp-land/layout_main.xml

@@ -38,6 +38,10 @@
       android:layout_marginBottom="?actionBarSize"
       android:orientation="vertical">
 
+      <FrameLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
         <fragment
           android:id="@+id/fragment_messages"
           android:name="de.kuschku.quasseldroid.ui.chat.messages.MessageListFragment"
@@ -46,6 +50,9 @@
           app:layout_behavior="@string/appbar_scrolling_view_behavior"
           tools:layout="@layout/fragment_messages" />
 
+        <include layout="@layout/widget_connection_status" />
+      </FrameLayout>
+
       <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/autocomplete_list"
         android:layout_width="match_parent"

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

@@ -38,6 +38,10 @@
       android:layout_marginBottom="?actionBarSize"
       android:orientation="vertical">
 
+      <FrameLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
         <fragment
           android:id="@+id/fragment_messages"
           android:name="de.kuschku.quasseldroid.ui.chat.messages.MessageListFragment"
@@ -45,6 +49,10 @@
           android:layout_height="match_parent"
           tools:layout="@layout/fragment_messages" />
 
+        <include layout="@layout/widget_connection_status" />
+
+      </FrameLayout>
+
       <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/autocomplete_list"
         android:layout_width="match_parent"

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

+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout 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/connection_status"
+  android:layout_width="match_parent"
+  android:layout_height="wrap_content"
+  android:background="?colorPrimaryDark"
+  android:minHeight="32dp"
+  android:paddingLeft="16dp"
+  android:paddingTop="6dp"
+  android:paddingRight="16dp"
+  android:paddingBottom="6dp"
+  android:visibility="gone"
+  tools:visibility="visible">
+
+  <androidx.appcompat.widget.AppCompatImageView
+    android:id="@+id/connection_status_icon"
+    android:layout_width="20dp"
+    android:layout_height="20dp"
+    app:srcCompat="@drawable/ic_disconnected"
+    app:tint="?colorTextPrimaryInverse" />
+
+  <me.zhanghai.android.materialprogressbar.MaterialProgressBar
+    android:id="@+id/connection_status_progress"
+    style="@style/Widget.MaterialProgressBar.ProgressBar"
+    android:layout_width="20dp"
+    android:layout_height="20dp"
+    android:indeterminate="true"
+    app:mpb_indeterminateTint="?colorTextPrimaryInverse" />
+
+  <TextView
+    android:id="@+id/connection_status_text"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="16dp"
+    android:layout_marginLeft="16dp"
+    android:textColor="?colorTextPrimaryInverse"
+    tools:text="@string/label_status_connecting" />
+
+</LinearLayout>