Fix #517

app/src/main/java/com/nextcloud/talk/adapters/messages/MagicSystemMessageViewHolder.kt

@@ -23,21 +23,36 @@ import android.content.Context
 import android.text.Spannable
 import android.text.SpannableString
 import android.view.View
+import android.widget.TextView
 import androidx.core.view.ViewCompat
+import butterknife.BindView
+import butterknife.ButterKnife
 import com.nextcloud.talk.R
 import com.nextcloud.talk.models.json.chat.ChatMessage
 import com.nextcloud.talk.utils.DisplayUtils.getMessageSelector
 import com.nextcloud.talk.utils.DisplayUtils.searchAndColor
 import com.nextcloud.talk.utils.preferences.AppPreferences
 import com.stfalcon.chatkit.messages.MessageHolders.IncomingTextMessageViewHolder
+import com.stfalcon.chatkit.utils.DateFormatter
 import org.koin.core.KoinComponent
 import org.koin.core.inject
 import java.util.*
 
-class MagicSystemMessageViewHolder(itemView: View?) : IncomingTextMessageViewHolder<ChatMessage>(itemView), KoinComponent {
+class MagicSystemMessageViewHolder(itemView: View) : IncomingTextMessageViewHolder<ChatMessage>(itemView), KoinComponent {
     val appPreferences: AppPreferences by inject()
     val context: Context by inject()
 
+    @JvmField
+    @BindView(R.id.messageTime)
+    var messageTime: TextView? = null
+
+    init {
+        ButterKnife.bind(
+                this,
+                itemView
+        )
+    }
+
     override fun onBind(message: ChatMessage) {
         super.onBind(message)
         val resources = itemView.resources
@@ -61,5 +76,6 @@ class MagicSystemMessageViewHolder(itemView: View?) : IncomingTextMessageViewHol
             }
         }
         text.text = messageString
+        messageTime?.text = DateFormatter.format(message.createdAt, DateFormatter.Template.TIME)
     }
 }

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

@@ -21,16 +21,23 @@
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_marginStart="16dp"
     android:layout_marginTop="8dp"
     android:layout_marginEnd="16dp"
     android:layout_marginBottom="8dp">
 
-    <RelativeLayout
+    <com.google.android.flexbox.FlexboxLayout
         android:id="@id/bubble"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_centerHorizontal="true">
+        android:orientation="vertical"
+        android:layout_centerHorizontal="true"
+        app:alignContent="stretch"
+        app:alignItems="stretch"
+        app:flexWrap="wrap"
+        app:justifyContent="flex_end">
 
         <androidx.emoji.widget.EmojiTextView
             android:id="@+id/messageText"
@@ -39,8 +46,23 @@
             android:layout_centerHorizontal="true"
             android:gravity="center_horizontal"
             android:textAlignment="center"
+            tools:text="System message"
             android:textColor="@color/colorPrimary"
-            android:textSize="12sp" />
+            android:textSize="14sp"
+            app:layout_alignSelf="flex_start"
+            app:layout_flexGrow="1"
+            app:layout_wrapBefore="true"/>
 
-    </RelativeLayout>
+        <TextView
+            android:id="@id/messageTime"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textColor="@color/warm_grey_four"
+            android:textSize="12sp"
+            tools:text="17:30"
+            android:layout_marginStart="8dp"
+            app:layout_alignSelf="center"
+            app:layout_flexGrow="1"
+            app:layout_wrapBefore="false"/>
+    </com.google.android.flexbox.FlexboxLayout>
 </RelativeLayout>