Fix typing rendering #6063

library/ui-styles/src/main/res/values/dimens.xml

@@ -9,6 +9,7 @@
     <dimen name="layout_vertical_margin_big">32dp</dimen>
 
     <dimen name="profile_avatar_size">50dp</dimen>
+    <dimen name="typing_avatar_size">20dp</dimen>
     <dimen name="item_event_message_state_size">16dp</dimen>
 
     <dimen name="item_event_message_media_button_size">32dp</dimen>

vector/src/main/java/im/vector/app/core/ui/views/TypingMessageAvatar.kt

@@ -22,7 +22,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.LinearLayout
-import im.vector.app.core.utils.DimensionConverter
+import im.vector.app.R
 import im.vector.app.features.home.AvatarRenderer
 import org.matrix.android.sdk.api.session.room.sender.SenderInfo
 import org.matrix.android.sdk.api.util.toMatrixItem
@@ -34,19 +34,22 @@ class TypingMessageAvatar @JvmOverloads constructor(
 ) : LinearLayout(context, attrs, defStyleAttr) {
 
     companion object {
-        const val AVATAR_SIZE_DP = 20
         const val OVERLAP_FACT0R = -3 // =~ 30% to left
     }
 
+    private val typingAvatarSize by lazy {
+        context.resources.getDimension(R.dimen.typing_avatar_size).toInt()
+    }
+
     fun render(typingUsers: List<SenderInfo>, avatarRenderer: AvatarRenderer) {
         removeAllViews()
         for ((index, value) in typingUsers.withIndex()) {
             val avatar = ImageView(context)
             avatar.id = View.generateViewId()
             val layoutParams = MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
-            if (index != 0) layoutParams.marginStart = DimensionConverter(resources).dpToPx(AVATAR_SIZE_DP / OVERLAP_FACT0R)
+            if (index != 0) layoutParams.marginStart = typingAvatarSize / OVERLAP_FACT0R
-            layoutParams.width = DimensionConverter(resources).dpToPx(AVATAR_SIZE_DP)
+            layoutParams.width = typingAvatarSize
-            layoutParams.height = DimensionConverter(resources).dpToPx(AVATAR_SIZE_DP)
+            layoutParams.height = typingAvatarSize
             avatar.layoutParams = layoutParams
             avatarRenderer.render(value.toMatrixItem(), avatar)
             addView(avatar)

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

@@ -37,13 +37,6 @@
 
     </com.google.android.material.appbar.AppBarLayout>
 
-    <androidx.constraintlayout.widget.Barrier
-        android:id="@+id/timelineRecyclerViewBarrier"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:barrierDirection="top"
-        app:constraint_referenced_ids="composerLayout,notificationAreaView,failedMessagesWarningStub" />
-
     <im.vector.app.features.sync.widget.SyncStateView
         android:id="@+id/syncStateView"
         android:layout_width="0dp"
@@ -68,9 +61,8 @@
         android:layout_height="wrap_content"
         android:background="?android:colorBackground"
         android:minHeight="54dp"
-        android:visibility="visible"
-        app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/locationLiveStatusIndicator" />
 
     <androidx.recyclerview.widget.RecyclerView
@@ -78,7 +70,7 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:overScrollMode="always"
-        app:layout_constraintBottom_toTopOf="@id/timelineRecyclerViewBarrier"
+        app:layout_constraintBottom_toTopOf="@id/typingMessageView"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/removeJitsiWidgetView"
@@ -103,14 +95,13 @@
     <im.vector.app.core.ui.views.TypingMessageView
         android:id="@+id/typingMessageView"
         android:layout_width="0dp"
-        android:layout_height="20dp"
+        android:layout_height="wrap_content"
         android:paddingStart="20dp"
         android:paddingEnd="20dp"
-        app:layout_constraintBottom_toTopOf="@id/composerLayout"
+        app:layout_constraintBottom_toTopOf="@id/bottomBarrier"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/timelineRecyclerView"
+        app:layout_constraintTop_toBottomOf="@id/timelineRecyclerView" />
-        tools:visibility="visible" />
 
     <im.vector.app.core.ui.views.NotificationAreaView
         android:id="@+id/notificationAreaView"
@@ -130,7 +121,8 @@
         android:layout="@layout/view_stub_failed_message_warning_layout"
         app:layout_constraintBottom_toTopOf="@id/composerLayout"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintStart_toStartOf="parent"
+        tools:layout_height="300dp" />
 
     <im.vector.app.features.home.room.detail.composer.MessageComposerView
         android:id="@+id/composerLayout"
@@ -142,7 +134,8 @@
         android:visibility="gone"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintStart_toStartOf="parent"
+        tools:visibility="visible" />
 
     <im.vector.app.features.home.room.detail.composer.voice.VoiceMessageRecorderView
         android:id="@+id/voiceMessageRecorderView"
@@ -166,11 +159,11 @@
         app:layout_constraintTop_toBottomOf="@id/appBarLayout" />
 
     <androidx.constraintlayout.widget.Barrier
-        android:id="@+id/badgeBarrier"
+        android:id="@+id/bottomBarrier"
         android:layout_width="0dp"
         android:layout_height="0dp"
         app:barrierDirection="top"
-        app:constraint_referenced_ids="composerLayout,notificationAreaView, failedMessagesWarningStub" />
+        app:constraint_referenced_ids="composerLayout,notificationAreaView,failedMessagesWarningStub" />
 
     <im.vector.app.core.platform.BadgeFloatingActionButton
         android:id="@+id/jumpToBottomView"
@@ -184,7 +177,7 @@
         app:badgeTextColor="?colorOnPrimary"
         app:badgeTextPadding="2dp"
         app:badgeTextSize="10sp"
-        app:layout_constraintBottom_toTopOf="@id/badgeBarrier"
+        app:layout_constraintBottom_toTopOf="@id/bottomBarrier"
         app:layout_constraintEnd_toEndOf="parent"
         app:tint="@android:color/black" />
 

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

@@ -3,39 +3,40 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:paddingTop="2dp">
 
     <!-- This is a LinearLayout which will contain avatars of the typing users -->
     <im.vector.app.core.ui.views.TypingMessageAvatar
         android:id="@+id/avatars"
         android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
+        android:layout_height="@dimen/typing_avatar_size"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
-        tools:layout_height="32dp" />
 
     <androidx.appcompat.widget.AppCompatTextView
         android:id="@+id/users_name"
         style="@style/Widget.Vector.TextView.Body"
         android:layout_width="wrap_content"
-        android:layout_height="0dp"
+        android:layout_height="wrap_content"
         android:layout_marginStart="8dp"
         android:gravity="center"
         android:textColor="?vctr_content_secondary"
-        app:layout_constraintBottom_toBottomOf="@id/avatars"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@id/avatars"
-        app:layout_constraintTop_toTopOf="@id/avatars"
+        app:layout_constraintTop_toTopOf="parent"
         tools:text="@sample/users.json/data/displayName" />
 
     <im.vector.app.core.ui.views.TypingMessageDotsView
         android:id="@+id/viewDots"
         android:layout_width="wrap_content"
-        android:layout_height="0dp"
+        android:layout_height="wrap_content"
         android:layout_marginStart="8dp"
         android:gravity="center"
-        app:layout_constraintBottom_toBottomOf="@id/users_name"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@id/users_name"
-        app:layout_constraintTop_toTopOf="@id/users_name" />
+        app:layout_constraintTop_toTopOf="parent" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>