improve typing indicator design

Signed-off-by: Marcel Hibbe <dev@mhibbe.de>

app/src/main/java/com/nextcloud/talk/chat/ChatActivity.kt

@@ -62,6 +62,7 @@ import android.view.Menu
 import android.view.MenuItem
 import android.view.MotionEvent
 import android.view.View
+import android.view.animation.AccelerateDecelerateInterpolator
 import android.view.animation.AlphaAnimation
 import android.view.animation.Animation
 import android.view.animation.LinearInterpolator
@@ -344,15 +345,11 @@ class ChatActivity :
 
         val typingString: SpannableStringBuilder
         when (typingParticipants.size) {
-            0 -> {
+            0 -> typingString = SpannableStringBuilder().append(binding.typingIndicator.text)
-                typingString = SpannableStringBuilder().append("")
-            }
 
-            1 -> {
+            1 -> typingString = SpannableStringBuilder()
-                typingString = SpannableStringBuilder()
                     .bold { append(participantNames[0]) }
                     .append(WHITESPACE + context.resources?.getString(R.string.typing_is_typing))
-            }
 
             2 -> typingString = SpannableStringBuilder()
                 .bold { append(participantNames[0]) }
@@ -378,11 +375,9 @@ class ChatActivity :
 
             else -> {
                 val moreTypersAmount = typingParticipants.size - 3
-
                 val othersTyping = context.resources?.getString(R.string.typing_x_others)?.let {
                     String.format(it, moreTypersAmount)
                 }
-
                 typingString = SpannableStringBuilder()
                     .bold { append(participantNames[0]) }
                     .append(COMMA)
@@ -393,12 +388,22 @@ class ChatActivity :
             }
         }
 
+        val typingIndicatorHeight = DisplayUtils.convertDpToPixel(20f,context)
+
         runOnUiThread {
             if (participantNames.size > 0) {
-                binding.typingIndicator.visibility = View.VISIBLE
+                binding.typingIndicatorWrapper.animate()
+                    .translationY(binding.messageInputView.y - typingIndicatorHeight)
+                    .setInterpolator(AccelerateDecelerateInterpolator())
+                    .duration = TYPING_INDICATOR_ANIMATION_DURATION
+
             } else {
-                binding.typingIndicator.visibility = View.GONE
+                binding.typingIndicatorWrapper.animate()
+                    .translationY(binding.messageInputView.y)
+                    .setInterpolator(AccelerateDecelerateInterpolator())
+                    .duration = TYPING_INDICATOR_ANIMATION_DURATION
             }
+
             binding.typingIndicator.text = typingString
         }
     }
@@ -3765,5 +3770,6 @@ class ChatActivity :
 
         private const val WHITESPACE = " "
         private const val COMMA = ", "
+        private const val TYPING_INDICATOR_ANIMATION_DURATION = 200L
     }
 }

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

@@ -80,7 +80,8 @@
             android:id="@+id/messagesListView"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:paddingBottom="0dp"
+            android:paddingBottom="20dp"
+            android:clipToPadding="false"
             android:visibility="gone"
             app:dateHeaderTextSize="13sp"
             app:incomingBubblePaddingBottom="@dimen/message_bubble_corners_vertical_padding"
@@ -108,7 +109,8 @@
             app:outcomingTextLinkColor="@color/high_emphasis_text"
             app:outcomingTextSize="@dimen/chat_text_size"
             app:outcomingTimeTextSize="12sp"
-            app:textAutoLink="all" />
+            app:textAutoLink="all"
+            tools:visibility="visible"/>
 
         <com.nextcloud.ui.popupbubble.PopupBubble
             android:id="@+id/popupBubbleView"
@@ -148,6 +150,33 @@
             app:iconPadding="0dp"
             app:iconSize="24dp" />
 
+        <LinearLayout
+            android:id="@+id/typing_indicator_wrapper"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            android:layout_alignParentBottom="true"
+            android:layout_marginBottom="-20dp">
+
+            <View
+                android:id="@+id/separator_1"
+                android:layout_width="match_parent"
+                android:layout_height="1dp"
+                android:background="@color/controller_chat_separator" />
+
+            <TextView
+                android:id="@+id/typing_indicator"
+                android:layout_width="match_parent"
+                android:layout_height="20dp"
+                android:layout_marginStart="@dimen/side_margin"
+                android:layout_marginEnd="@dimen/side_margin"
+                android:background="@color/bg_default"
+                android:textColor="@color/low_emphasis_text"
+                tools:text="Marcel is typing">
+            </TextView>
+
+        </LinearLayout>
+
     </RelativeLayout>
 
     <LinearLayout
@@ -155,22 +184,6 @@
         android:layout_height="wrap_content"
         android:orientation="vertical">
 
-        <View
-            android:id="@+id/separator_1"
-            android:layout_width="match_parent"
-            android:layout_height="1dp"
-            android:background="@color/controller_chat_separator" />
-
-        <TextView
-            android:id="@+id/typing_indicator"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_marginStart="@dimen/side_margin"
-            android:layout_marginEnd="@dimen/side_margin"
-            android:textColor="@color/low_emphasis_text"
-            tools:text="Marcel is typing">
-        </TextView>
-
         <com.nextcloud.talk.ui.MessageInput
             android:id="@+id/messageInputView"
             android:layout_width="match_parent"

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

@@ -448,10 +448,10 @@ How to translate with transifex:
     <string name="open_in_files_app">Open in Files app</string>
     <string name="send_to_forbidden">You are not allowed to share content to this chat</string>
 
-    <string name="typing_is_typing">is typing</string>
+    <string name="typing_is_typing">is typing …</string>
-    <string name="typing_are_typing">are typing</string>
+    <string name="typing_are_typing">are typing …</string>
-    <string name="typing_1_other">and 1 other is typing…</string>
+    <string name="typing_1_other">and 1 other is typing …</string>
-    <string name="typing_x_others">and %1$s others are typing…</string>
+    <string name="typing_x_others">and %1$s others are typing …</string>
 
     <!-- Upload -->
     <string name="nc_add_file">Add to conversation</string>