diff --git a/library/ui-styles/src/main/res/values/dimens.xml b/library/ui-styles/src/main/res/values/dimens.xml
index 826cde5eba..70d051b457 100644
--- a/library/ui-styles/src/main/res/values/dimens.xml
+++ b/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>
diff --git a/vector/src/main/java/im/vector/app/core/ui/views/TypingMessageAvatar.kt b/vector/src/main/java/im/vector/app/core/ui/views/TypingMessageAvatar.kt
index 22312f36fa..1f78584a6b 100644
--- a/vector/src/main/java/im/vector/app/core/ui/views/TypingMessageAvatar.kt
+++ b/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(LazyThreadSafetyMode.NONE) {
+        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)
-            layoutParams.width = DimensionConverter(resources).dpToPx(AVATAR_SIZE_DP)
-            layoutParams.height = DimensionConverter(resources).dpToPx(AVATAR_SIZE_DP)
+            if (index != 0) layoutParams.marginStart = typingAvatarSize / OVERLAP_FACT0R
+            layoutParams.width = typingAvatarSize
+            layoutParams.height = typingAvatarSize
             avatar.layoutParams = layoutParams
             avatarRenderer.render(value.toMatrixItem(), avatar)
             addView(avatar)
diff --git a/vector/src/main/java/im/vector/app/core/ui/views/TypingMessageView.kt b/vector/src/main/java/im/vector/app/core/ui/views/TypingMessageView.kt
index 2dc9eedd99..263f043fad 100644
--- a/vector/src/main/java/im/vector/app/core/ui/views/TypingMessageView.kt
+++ b/vector/src/main/java/im/vector/app/core/ui/views/TypingMessageView.kt
@@ -31,7 +31,8 @@ import javax.inject.Inject
 class TypingMessageView @JvmOverloads constructor(
         context: Context,
         attrs: AttributeSet? = null,
-        defStyleAttr: Int = 0) : ConstraintLayout(context, attrs, defStyleAttr) {
+        defStyleAttr: Int = 0
+) : ConstraintLayout(context, attrs, defStyleAttr) {
 
     val views: TypingMessageLayoutBinding
 
@@ -44,8 +45,8 @@ class TypingMessageView @JvmOverloads constructor(
     }
 
     fun render(typingUsers: List<SenderInfo>, avatarRenderer: AvatarRenderer) {
-        views.usersName.text = typingHelper.getNotificationTypingMessage(typingUsers)
-        views.avatars.render(typingUsers, avatarRenderer)
+        views.typingUserText.text = typingHelper.getNotificationTypingMessage(typingUsers)
+        views.typingUserAvatars.render(typingUsers, avatarRenderer)
     }
 
     override fun onDetachedFromWindow() {
diff --git a/vector/src/main/res/layout/fragment_timeline.xml b/vector/src/main/res/layout/fragment_timeline.xml
index fcded76268..ea35d82886 100644
--- a/vector/src/main/res/layout/fragment_timeline.xml
+++ b/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"
-        tools:visibility="visible" />
+        app:layout_constraintTop_toBottomOf="@id/timelineRecyclerView" />
 
     <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" />
 
diff --git a/vector/src/main/res/layout/typing_message_layout.xml b/vector/src/main/res/layout/typing_message_layout.xml
index c8b334c628..a4a2cd3305 100644
--- a/vector/src/main/res/layout/typing_message_layout.xml
+++ b/vector/src/main/res/layout/typing_message_layout.xml
@@ -1,38 +1,42 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout 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: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:id="@+id/typingUserAvatars"
         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" />
 
     <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/users_name"
+        android:id="@+id/typingUserText"
         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_constraintStart_toEndOf="@id/avatars"
-        app:layout_constraintTop_toTopOf="@id/avatars" />
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/typingUserAvatars"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="@sample/users.json/data/displayName" />
 
     <im.vector.app.core.ui.views.TypingMessageDotsView
-        android:id="@+id/viewDots"
+        android:id="@+id/typingUserDots"
         android:layout_width="wrap_content"
-        android:layout_height="0dp"
+        android:layout_height="wrap_content"
         android:layout_marginStart="8dp"
         android:gravity="center"
-        android:visibility="visible"
-        app:layout_constraintBottom_toBottomOf="@id/users_name"
-        app:layout_constraintStart_toEndOf="@id/users_name"
-        app:layout_constraintTop_toTopOf="@id/users_name" />
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/typingUserText"
+        app:layout_constraintTop_toTopOf="parent" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>