From 38c7c8c71acfdd28c97b8a02e3c7210554dd6623 Mon Sep 17 00:00:00 2001
From: Ivan Kupalov <charlag@tutanota.com>
Date: Sun, 6 Jan 2019 10:39:42 +0100
Subject: [PATCH] Rework status layouts with ConstraintLayout (#967)

* Migrate item_status_detailed layout, minimum

* Migrate item_status_detailed layout, buttons

* Migrate item_status layout, minimum + buttons

* Migrate status layouts, fix RTL, cleanup

* Fix item_status layout

* Fix item_status name layout, fix CW button

* Simplify item_status, item_status_detailed layouts with chains

* Apply statuses layout feedback
---
 .../adapter/StatusDetailedViewHolder.java     |   4 -
 app/src/main/res/layout/item_status.xml       | 354 +++++++++---------
 .../main/res/layout/item_status_detailed.xml  | 305 ++++++++-------
 app/src/main/res/values/dimens.xml            |   1 -
 4 files changed, 337 insertions(+), 327 deletions(-)

diff --git a/app/src/main/java/com/keylesspalace/tusky/adapter/StatusDetailedViewHolder.java b/app/src/main/java/com/keylesspalace/tusky/adapter/StatusDetailedViewHolder.java
index c60a56374..7f2a3dc97 100644
--- a/app/src/main/java/com/keylesspalace/tusky/adapter/StatusDetailedViewHolder.java
+++ b/app/src/main/java/com/keylesspalace/tusky/adapter/StatusDetailedViewHolder.java
@@ -43,7 +43,6 @@ class StatusDetailedViewHolder extends StatusBaseViewHolder {
     private TextView cardDescription;
     private TextView cardUrl;
     private View infoDivider;
-    private View favReblogInfoContainer;
 
     private NumberFormat numberFormat = NumberFormat.getNumberInstance();
 
@@ -58,7 +57,6 @@ class StatusDetailedViewHolder extends StatusBaseViewHolder {
         cardDescription = view.findViewById(R.id.card_description);
         cardUrl = view.findViewById(R.id.card_link);
         infoDivider = view.findViewById(R.id.status_info_divider);
-        favReblogInfoContainer = view.findViewById(R.id.status_reblog_fav_info);
     }
 
     @Override
@@ -95,10 +93,8 @@ class StatusDetailedViewHolder extends StatusBaseViewHolder {
 
         if(reblogs.getVisibility() == View.GONE && favourites.getVisibility() == View.GONE) {
             infoDivider.setVisibility(View.GONE);
-            favReblogInfoContainer.setVisibility(View.GONE);
         } else {
             infoDivider.setVisibility(View.VISIBLE);
-            favReblogInfoContainer.setVisibility(View.VISIBLE);
         }
 
         reblogs.setOnClickListener( v -> {
diff --git a/app/src/main/res/layout/item_status.xml b/app/src/main/res/layout/item_status.xml
index 82f49affc..fcfeadd4b 100644
--- a/app/src/main/res/layout/item_status.xml
+++ b/app/src/main/res/layout/item_status.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:sparkbutton="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
@@ -13,156 +13,167 @@
 
     <androidx.emoji.widget.EmojiTextView
         android:id="@+id/status_reblogged"
-        android:drawableStart="?attr/status_reblog_small_drawable"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="@dimen/status_reblogged_bar_padding_top"
+        android:drawableStart="?attr/status_reblog_small_drawable"
         android:drawablePadding="6dp"
         android:gravity="center_vertical"
         android:paddingStart="38dp"
         android:textColor="?android:textColorTertiary"
         android:textSize="?attr/status_text_medium"
-        tools:text="ConnyDuck boosted" />
+        app:layout_constraintLeft_toRightOf="parent"
+        app:layout_constraintRight_toLeftOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:ignore="RtlSymmetry"
+        tools:text="ConnyDuck boosted"
+        tools:visibility="visible" />
 
     <com.keylesspalace.tusky.view.RoundedImageView
         android:id="@+id/status_avatar"
         android:layout_width="48dp"
         android:layout_height="48dp"
-        android:layout_below="@+id/status_reblogged"
-        android:layout_marginEnd="14dp"
         android:layout_marginTop="14dp"
         android:contentDescription="@string/action_view_profile"
         android:scaleType="centerCrop"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/status_reblogged"
         tools:src="@drawable/avatar_default" />
 
     <com.keylesspalace.tusky.view.RoundedImageView
         android:id="@+id/status_avatar_reblog"
         android:layout_width="24dp"
         android:layout_height="24dp"
-        android:layout_alignBottom="@+id/status_avatar"
-        android:layout_alignEnd="@id/status_avatar"
         android:contentDescription="@null"
         android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="@id/status_avatar"
+        app:layout_constraintEnd_toEndOf="@id/status_avatar"
         tools:src="@color/accent"
         tools:visibility="visible" />
 
-    <RelativeLayout
-        android:id="@+id/status_name_bar"
-        android:layout_width="match_parent"
+    <androidx.emoji.widget.EmojiTextView
+        android:id="@+id/status_display_name"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_below="@+id/status_reblogged"
-        android:layout_toEndOf="@+id/status_avatar"
+        android:layout_marginStart="14dp"
+        android:layout_marginTop="10dp"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:paddingEnd="@dimen/status_display_name_padding_end"
+        android:textColor="?android:textColorPrimary"
+        android:textSize="?attr/status_text_medium"
+        android:textStyle="normal|bold"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintEnd_toStartOf="@id/status_timestamp_info"
+        app:layout_constraintHorizontal_bias="0"
+        app:layout_constraintStart_toEndOf="@id/status_avatar"
+        app:layout_constraintTop_toBottomOf="@id/status_reblogged"
+        tools:text="Ente r the void you foooooo" />
+
+    <TextView
+        android:id="@+id/status_username"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:textColor="?android:textColorSecondary"
+        android:textSize="?attr/status_text_medium"
+        app:layout_constraintEnd_toStartOf="@id/status_timestamp_info"
+        app:layout_constraintStart_toEndOf="@id/status_display_name"
+        app:layout_constraintTop_toTopOf="@id/status_display_name"
+        tools:text="\@Entenhausen@birbsarecooooooooooool.site" />
+
+    <TextView
+        android:id="@+id/status_timestamp_info"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="4dp"
+        android:textColor="?android:textColorSecondary"
+        android:textSize="?attr/status_text_medium"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="@id/status_display_name"
+        tools:text="13:37" />
+
+    <androidx.emoji.widget.EmojiTextView
+        android:id="@+id/status_content_warning_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:lineSpacingMultiplier="1.1"
+        android:textColor="?android:textColorPrimary"
+        android:textSize="?attr/status_text_medium"
+        android:visibility="gone"
+        app:layout_constraintStart_toStartOf="@id/status_display_name"
+        app:layout_constraintTop_toBottomOf="@id/status_display_name"
+        tools:text="content warning"
+        tools:visibility="visible" />
+
+    <ToggleButton
+        android:id="@+id/status_content_warning_button"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="4dp"
+        android:background="?attr/content_warning_button"
+        android:minWidth="150dp"
+        android:minHeight="0dp"
+        android:paddingLeft="16dp"
+        android:paddingTop="4dp"
+        android:paddingRight="16dp"
         android:paddingBottom="4dp"
-        android:paddingTop="@dimen/status_avatar_padding">
-
-        <androidx.emoji.widget.EmojiTextView
-            android:id="@+id/status_display_name"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentStart="true"
-            android:ellipsize="end"
-            android:maxLines="1"
-            android:paddingEnd="@dimen/status_display_name_padding_end"
-            android:paddingStart="0dp"
-            android:textColor="?android:textColorPrimary"
-            android:textSize="?attr/status_text_medium"
-            android:textStyle="normal|bold"
-            tools:text="Ente" />
-
-        <TextView
-            android:id="@+id/status_username"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_toEndOf="@id/status_display_name"
-            android:layout_toStartOf="@+id/status_timestamp_info"
-            android:ellipsize="end"
-            android:maxLines="1"
-            android:textColor="?android:textColorSecondary"
-            android:textSize="?attr/status_text_medium"
-            tools:text="\@Entenhausen" />
-
-        <TextView
-            android:id="@+id/status_timestamp_info"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentEnd="true"
-            android:layout_marginStart="4dp"
-            android:textColor="?android:textColorSecondary"
-            android:textSize="?attr/status_text_medium"
-            tools:text="13:37" />
-
-        <androidx.emoji.widget.EmojiTextView
-            android:id="@+id/status_content_warning_description"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_below="@id/status_display_name"
-            android:lineSpacingMultiplier="1.1"
-            android:textColor="?android:textColorPrimary"
-            android:textSize="?attr/status_text_medium"
-            android:visibility="gone" />
-
-        <ToggleButton
-            android:id="@+id/status_content_warning_button"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/status_content_warning_description"
-            android:layout_marginBottom="4dp"
-            android:layout_marginTop="4dp"
-            android:background="?attr/content_warning_button"
-            android:minHeight="0dp"
-            android:minWidth="150dp"
-            android:paddingBottom="4dp"
-            android:paddingLeft="16dp"
-            android:paddingRight="16dp"
-            android:paddingTop="4dp"
-            android:textAllCaps="true"
-            android:textOff="@string/status_content_warning_show_more"
-            android:textOn="@string/status_content_warning_show_less"
-            android:textSize="?attr/status_text_medium"
-            android:visibility="gone" />
-    </RelativeLayout>
+        android:textAllCaps="true"
+        android:textOff="@string/status_content_warning_show_more"
+        android:textOn="@string/status_content_warning_show_less"
+        android:textSize="?attr/status_text_medium"
+        android:visibility="gone"
+        app:layout_constraintStart_toStartOf="@id/status_content_warning_description"
+        app:layout_constraintTop_toBottomOf="@id/status_content_warning_description"
+        tools:visibility="visible" />
 
     <androidx.emoji.widget.EmojiTextView
         android:id="@+id/status_content"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_alignParentEnd="true"
-        android:layout_below="@+id/status_name_bar"
-        android:layout_toEndOf="@+id/status_avatar"
+        android:layout_marginTop="8dp"
         android:focusable="true"
         android:lineSpacingMultiplier="1.1"
         android:textColor="?android:textColorPrimary"
         android:textSize="?attr/status_text_medium"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="@id/status_content_warning_button"
+        app:layout_constraintTop_toBottomOf="@id/status_content_warning_button"
         tools:text="This is a status" />
 
     <ToggleButton
-            android:id="@+id/button_toggle_content"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_toEndOf="@id/status_avatar"
-            android:layout_below="@id/status_content"
-            android:textOff="@string/status_content_show_less"
-            android:textOn="@string/status_content_show_more"
-            android:background="?attr/content_warning_button"
-            android:minHeight="0dp"
-            android:minWidth="150dp"
-            android:paddingBottom="4dp"
-            android:paddingLeft="16dp"
-            android:paddingRight="16dp"
-            android:paddingTop="4dp"
-            android:layout_marginTop="4dp"
-            android:layout_marginBottom="4dp"
-            android:textAllCaps="true"
-            android:textSize="?attr/status_text_medium"
-            android:visibility="gone" />
+        android:id="@+id/button_toggle_content"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="4dp"
+        android:background="?attr/content_warning_button"
+        android:minWidth="150dp"
+        android:minHeight="0dp"
+        android:paddingLeft="16dp"
+        android:paddingTop="4dp"
+        android:paddingRight="16dp"
+        android:paddingBottom="4dp"
+        android:textAllCaps="true"
+        android:textOff="@string/status_content_show_less"
+        android:textOn="@string/status_content_show_more"
+        android:textSize="?attr/status_text_medium"
+        android:visibility="gone"
+        app:layout_constraintStart_toStartOf="@id/status_content_warning_description"
+        app:layout_constraintTop_toBottomOf="@id/status_content"
+        tools:visibility="visible" />
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/status_media_preview_container"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_below="@+id/button_toggle_content"
         android:layout_marginTop="@dimen/status_media_preview_margin_top"
-        android:layout_toEndOf="@+id/status_avatar">
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="@id/status_content_warning_description"
+        app:layout_constraintTop_toBottomOf="@id/button_toggle_content"
+        tools:visibility="gone">
 
         <com.keylesspalace.tusky.view.MediaPreviewImageView
             android:id="@+id/status_media_preview_0"
@@ -300,79 +311,66 @@
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_below="@id/status_media_preview_container"
-        android:layout_marginEnd="16dp"
-        android:layout_toEndOf="@+id/status_avatar"
-        android:clipChildren="false"
+    <ImageButton
+        android:id="@+id/status_reply"
+        style="?attr/image_button_style"
+        android:layout_width="30dp"
+        android:layout_height="30dp"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="4dp"
+        android:contentDescription="@string/action_reply"
+        android:padding="4dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/status_reblog"
+        app:layout_constraintHorizontal_chainStyle="spread_inside"
+        app:layout_constraintStart_toStartOf="@id/status_content_warning_description"
+        app:layout_constraintTop_toBottomOf="@id/status_media_preview_container"
+        app:srcCompat="@drawable/ic_reply_24dp" />
+
+    <at.connyduck.sparkbutton.SparkButton
+        android:id="@+id/status_reblog"
+        android:layout_width="30dp"
+        android:layout_height="30dp"
         android:clipToPadding="false"
-        android:orientation="horizontal"
-        android:paddingBottom="4dp"
-        android:paddingTop="4dp">
+        android:contentDescription="@string/action_reblog"
+        android:padding="4dp"
+        app:layout_constraintEnd_toStartOf="@id/status_favourite"
+        app:layout_constraintStart_toEndOf="@id/status_reply"
+        app:layout_constraintTop_toTopOf="@id/status_reply"
+        sparkbutton:activeImage="@drawable/reblog_active"
+        sparkbutton:iconSize="28dp"
+        sparkbutton:inactiveImage="?attr/status_reblog_inactive_drawable"
+        sparkbutton:primaryColor="@color/tusky_blue"
+        sparkbutton:secondaryColor="@color/tusky_blue_light" />
 
-        <ImageButton
-            android:id="@+id/status_reply"
-            style="?attr/image_button_style"
-            android:layout_width="30dp"
-            android:layout_height="30dp"
-            android:background="?attr/selectableItemBackgroundBorderless"
-            android:contentDescription="@string/action_reply"
-            android:paddingLeft="8dp"
-            android:paddingRight="8dp"
-            app:srcCompat="@drawable/ic_reply_24dp" />
+    <at.connyduck.sparkbutton.SparkButton
+        android:id="@+id/status_favourite"
+        android:layout_width="30dp"
+        android:layout_height="30dp"
+        android:clipToPadding="false"
+        android:contentDescription="@string/action_favourite"
+        android:padding="4dp"
+        app:layout_constraintEnd_toStartOf="@id/status_more"
+        app:layout_constraintStart_toEndOf="@id/status_reblog"
+        app:layout_constraintTop_toTopOf="@id/status_reblog"
+        sparkbutton:activeImage="?attr/status_favourite_active_drawable"
+        sparkbutton:iconSize="28dp"
+        sparkbutton:inactiveImage="?attr/status_favourite_inactive_drawable"
+        sparkbutton:primaryColor="@color/tusky_orange"
+        sparkbutton:secondaryColor="@color/tusky_orange_light" />
 
-        <Space
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_weight="1" />
+    <ImageButton
+        android:id="@+id/status_more"
+        style="?attr/image_button_style"
+        android:layout_width="24dp"
+        android:layout_height="30dp"
+        android:layout_marginEnd="8dp"
+        android:contentDescription="@string/action_more"
+        android:padding="4dp"
+        app:layout_constraintBottom_toBottomOf="@id/status_reply"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/status_favourite"
+        app:layout_constraintTop_toTopOf="@id/status_reply"
+        app:srcCompat="@drawable/ic_more_horiz_24dp" />
 
-        <at.connyduck.sparkbutton.SparkButton
-            android:id="@+id/status_reblog"
-            android:layout_width="30dp"
-            android:layout_height="30dp"
-            android:layout_gravity="center"
-            android:contentDescription="@string/action_reblog"
-            sparkbutton:activeImage="@drawable/reblog_active"
-            sparkbutton:iconSize="24dp"
-            sparkbutton:inactiveImage="?attr/status_reblog_inactive_drawable"
-            sparkbutton:primaryColor="@color/tusky_blue"
-            sparkbutton:secondaryColor="@color/tusky_blue_light" />
-
-        <Space
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_weight="1" />
-
-        <at.connyduck.sparkbutton.SparkButton
-            android:id="@+id/status_favourite"
-            android:layout_width="30dp"
-            android:layout_height="30dp"
-            android:layout_gravity="center"
-            android:contentDescription="@string/action_favourite"
-            sparkbutton:activeImage="?attr/status_favourite_active_drawable"
-            sparkbutton:iconSize="24dp"
-            sparkbutton:inactiveImage="?attr/status_favourite_inactive_drawable"
-            sparkbutton:primaryColor="@color/tusky_orange"
-            sparkbutton:secondaryColor="@color/tusky_orange_light"/>
-
-        <Space
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_weight="1" />
-
-        <ImageButton
-            android:id="@+id/status_more"
-            style="?attr/image_button_style"
-            android:layout_width="24dp"
-            android:layout_height="30dp"
-            android:background="?attr/selectableItemBackgroundBorderless"
-            android:contentDescription="@string/action_more"
-            android:paddingLeft="6dp"
-            android:paddingRight="6dp"
-            app:srcCompat="@drawable/ic_more_horiz_24dp" />
-
-    </LinearLayout>
-
-</RelativeLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/item_status_detailed.xml b/app/src/main/res/layout/item_status_detailed.xml
index 897943ac5..1dbc158fb 100644
--- a/app/src/main/res/layout/item_status_detailed.xml
+++ b/app/src/main/res/layout/item_status_detailed.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:sparkbutton="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
@@ -19,58 +19,66 @@
         android:layout_marginEnd="14dp"
         android:contentDescription="@string/action_view_profile"
         android:scaleType="centerCrop"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
         tools:src="@drawable/avatar_default" />
 
-    <LinearLayout
-        android:id="@+id/status_name_bar"
-        android:layout_width="match_parent"
+    <androidx.emoji.widget.EmojiTextView
+        android:id="@+id/status_display_name"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="14dp"
-        android:layout_marginBottom="8dp"
-        android:layout_toEndOf="@+id/status_avatar"
-        android:gravity="center_vertical"
-        android:minHeight="48dp"
-        android:orientation="vertical">
+        android:layout_marginStart="14dp"
+        android:layout_marginTop="10dp"
+        android:layout_marginEnd="14dp"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:textColor="?android:textColorPrimary"
+        android:textSize="?attr/status_text_medium"
+        android:textStyle="normal|bold"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintBottom_toTopOf="@id/status_username"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintStart_toEndOf="@id/status_avatar"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_chainStyle="packed"
+        tools:text="Display Name" />
 
-        <androidx.emoji.widget.EmojiTextView
-            android:id="@+id/status_display_name"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:maxLines="1"
-            android:textColor="?android:textColorPrimary"
-            android:textSize="?attr/status_text_medium"
-            android:textStyle="normal|bold"
-            tools:text="Display Name" />
-
-        <TextView
-            android:id="@+id/status_username"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="4dp"
-            android:ellipsize="end"
-            android:maxLines="1"
-            android:textColor="?android:textColorSecondary"
-            android:textSize="?attr/status_text_medium"
-            tools:text="\@ConnyDuck\@mastodon.social" />
-
-    </LinearLayout>
+    <TextView
+        android:id="@+id/status_username"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="14dp"
+        android:layout_marginTop="4dp"
+        android:layout_marginEnd="14dp"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:textColor="?android:textColorSecondary"
+        android:textSize="?attr/status_text_medium"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintBottom_toBottomOf="@id/status_avatar"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0"
+        app:layout_constraintStart_toEndOf="@id/status_avatar"
+        app:layout_constraintTop_toBottomOf="@id/status_display_name"
+        tools:text="\@ConnyDuck\@mastodon.social" />
 
     <androidx.emoji.widget.EmojiTextView
         android:id="@+id/status_content_warning_description"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_below="@id/status_name_bar"
+        android:layout_marginTop="8dp"
         android:lineSpacingMultiplier="1.1"
         android:textColor="?android:textColorPrimary"
         android:textSize="?attr/status_text_large"
+        app:layout_constraintTop_toBottomOf="@id/status_avatar"
         tools:text="CW this is a long long long long long long long long content warning" />
 
     <ToggleButton
         android:id="@+id/status_content_warning_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_below="@+id/status_content_warning_description"
         android:layout_marginTop="4dp"
         android:layout_marginBottom="4dp"
         android:background="?attr/content_warning_button"
@@ -83,29 +91,35 @@
         android:textAllCaps="true"
         android:textOff="@string/status_content_warning_show_more"
         android:textOn="@string/status_content_warning_show_less"
-        android:textSize="?attr/status_text_large" />
+        android:textSize="?attr/status_text_large"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/status_content_warning_description" />
 
     <androidx.emoji.widget.EmojiTextView
         android:id="@+id/status_content"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_below="@+id/status_content_warning_button"
+        android:layout_marginTop="4dp"
         android:layout_marginBottom="4dp"
         android:focusable="true"
         android:lineSpacingMultiplier="1.1"
         android:textColor="?android:textColorPrimary"
         android:textSize="?attr/status_text_large"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/status_content_warning_button"
         tools:text="Status content. Can be pretty long. " />
 
     <LinearLayout
         android:id="@+id/card_view"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:layout_below="@+id/status_content"
-        android:layout_marginTop="4dp"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
         android:background="?attr/card_background"
         android:clipChildren="true"
-        android:orientation="vertical">
+        android:orientation="vertical"
+        app:layout_constraintTop_toBottomOf="@+id/status_content"
+        tools:visibility="gone">
 
         <ImageView
             android:id="@+id/card_image"
@@ -163,9 +177,9 @@
         android:id="@+id/status_media_preview_container"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_below="@+id/card_view"
-        android:layout_marginTop="@dimen/status_media_preview_margin_top"
-        android:layout_marginBottom="4dp">
+        android:layout_marginTop="12dp"
+        android:layout_marginBottom="4dp"
+        app:layout_constraintTop_toBottomOf="@id/card_view">
 
         <com.keylesspalace.tusky.view.MediaPreviewImageView
             android:id="@+id/status_media_preview_0"
@@ -305,129 +319,132 @@
 
     <TextView
         android:id="@+id/status_timestamp_info"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_below="@id/status_media_preview_container"
         android:layout_marginTop="10dp"
-        android:layout_marginBottom="6dp"
         android:drawablePadding="4dp"
         android:textColor="?android:textColorTertiary"
-        android:textSize="?attr/status_text_medium" />
+        android:textSize="?attr/status_text_medium"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/status_media_preview_container"
+        tools:text="21 Dec 2018 18:45" />
 
     <View
         android:id="@+id/status_info_divider"
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:layout_below="@id/status_timestamp_info"
+        android:layout_marginTop="6dp"
         android:background="?attr/status_divider_drawable"
         android:paddingStart="16dp"
-        android:paddingEnd="16dp" />
+        android:paddingEnd="16dp"
+        app:layout_constraintTop_toBottomOf="@id/status_timestamp_info" />
 
-    <LinearLayout
-        android:id="@+id/status_reblog_fav_info"
-        android:layout_width="match_parent"
+    <TextView
+        android:id="@+id/status_reblogs"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_below="@id/status_timestamp_info"
-        android:layout_marginTop="4dp"
-        android:layout_marginBottom="4dp">
+        android:layout_marginTop="6dp"
+        android:background="?attr/selectableItemBackground"
+        android:padding="4dp"
+        android:textSize="?attr/status_text_medium"
+        app:layout_constraintStart_toStartOf="@id/status_info_divider"
+        app:layout_constraintTop_toBottomOf="@id/status_info_divider"
+        tools:text="4 reblogs"
+        tools:visibility="visible" />
 
-        <TextView
-            android:id="@+id/status_reblogs"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginEnd="12dp"
-            android:background="?attr/selectableItemBackground"
-            android:padding="4dp"
-            android:textSize="?attr/status_text_medium" />
+    <TextView
+        android:id="@+id/status_favourites"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="12dp"
+        android:layout_marginTop="6dp"
+        android:background="?attr/selectableItemBackground"
+        android:padding="4dp"
+        android:textSize="?attr/status_text_medium"
+        app:layout_constraintStart_toEndOf="@id/status_reblogs"
+        app:layout_constraintTop_toBottomOf="@id/status_info_divider"
+        app:layout_goneMarginStart="0dp"
+        tools:text="8 favs"
+        tools:visibility="visible" />
 
-        <TextView
-            android:id="@+id/status_favourites"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:background="?attr/selectableItemBackground"
-            android:padding="4dp"
-            android:textSize="?attr/status_text_medium" />
-    </LinearLayout>
+    <androidx.constraintlayout.widget.Barrier
+        android:id="@+id/status_counters_barrier"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:barrierDirection="bottom"
+        app:constraint_referenced_ids="status_reblogs,status_favourites" />
 
     <View
+        android:id="@+id/status_buttons_divider"
         android:layout_width="match_parent"
         android:layout_height="1dp"
-        android:layout_below="@id/status_reblog_fav_info"
+        android:layout_marginTop="6dp"
         android:background="?attr/status_divider_drawable"
         android:paddingStart="16dp"
-        android:paddingEnd="16dp" />
+        android:paddingEnd="16dp"
+        app:layout_constraintTop_toBottomOf="@id/status_counters_barrier" />
 
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_below="@id/status_reblog_fav_info"
-        android:layout_marginEnd="8dp"
-        android:clipChildren="false"
+    <ImageButton
+        android:id="@+id/status_reply"
+        style="?attr/image_button_style"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="4dp"
+        android:contentDescription="@string/action_reply"
+        android:padding="4dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/status_reblog"
+        app:layout_constraintHorizontal_chainStyle="spread_inside"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/status_buttons_divider"
+        app:srcCompat="@drawable/ic_reply_24dp" />
+
+    <at.connyduck.sparkbutton.SparkButton
+        android:id="@+id/status_reblog"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
         android:clipToPadding="false"
-        android:gravity="center_vertical"
-        android:orientation="horizontal"
-        android:paddingTop="4dp"
-        android:paddingBottom="4dp">
+        android:contentDescription="@string/action_reblog"
+        android:padding="4dp"
+        app:layout_constraintEnd_toStartOf="@id/status_favourite"
+        app:layout_constraintStart_toEndOf="@id/status_reply"
+        app:layout_constraintTop_toTopOf="@id/status_reply"
+        sparkbutton:activeImage="@drawable/reblog_active"
+        sparkbutton:iconSize="28dp"
+        sparkbutton:inactiveImage="?attr/status_reblog_inactive_drawable"
+        sparkbutton:primaryColor="@color/tusky_blue"
+        sparkbutton:secondaryColor="@color/tusky_blue_light" />
 
-        <ImageButton
-            android:id="@+id/status_reply"
-            style="?attr/image_button_style"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
-            android:contentDescription="@string/action_reply"
-            android:padding="4dp"
-            app:srcCompat="@drawable/ic_reply_24dp" />
+    <at.connyduck.sparkbutton.SparkButton
+        android:id="@+id/status_favourite"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:clipToPadding="false"
+        android:contentDescription="@string/action_favourite"
+        android:padding="4dp"
+        app:layout_constraintEnd_toStartOf="@id/status_more"
+        app:layout_constraintStart_toEndOf="@id/status_reblog"
+        app:layout_constraintTop_toTopOf="@id/status_reblog"
+        sparkbutton:activeImage="?attr/status_favourite_active_drawable"
+        sparkbutton:iconSize="28dp"
+        sparkbutton:inactiveImage="?attr/status_favourite_inactive_drawable"
+        sparkbutton:primaryColor="@color/tusky_orange"
+        sparkbutton:secondaryColor="@color/tusky_orange_light" />
 
-        <Space
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_weight="1" />
+    <ImageButton
+        android:id="@+id/status_more"
+        style="?attr/image_button_style"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
+        android:contentDescription="@string/action_more"
+        android:padding="4dp"
+        app:layout_constraintBottom_toBottomOf="@id/status_reply"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/status_favourite"
+        app:layout_constraintTop_toTopOf="@id/status_reply"
+        app:srcCompat="@drawable/ic_more_horiz_24dp" />
 
-        <at.connyduck.sparkbutton.SparkButton
-            android:id="@+id/status_reblog"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
-            android:clipToPadding="false"
-            android:contentDescription="@string/action_reblog"
-            android:padding="4dp"
-            sparkbutton:activeImage="@drawable/reblog_active"
-            sparkbutton:iconSize="28dp"
-            sparkbutton:inactiveImage="?attr/status_reblog_inactive_drawable"
-            sparkbutton:primaryColor="@color/tusky_blue"
-            sparkbutton:secondaryColor="@color/tusky_blue_light" />
-
-        <Space
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_weight="1" />
-
-        <at.connyduck.sparkbutton.SparkButton
-            android:id="@+id/status_favourite"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
-            android:clipToPadding="false"
-            android:contentDescription="@string/action_favourite"
-            android:padding="4dp"
-            sparkbutton:activeImage="?attr/status_favourite_active_drawable"
-            sparkbutton:iconSize="28dp"
-            sparkbutton:inactiveImage="?attr/status_favourite_inactive_drawable"
-            sparkbutton:primaryColor="@color/tusky_orange"
-            sparkbutton:secondaryColor="@color/tusky_orange_light" />
-
-        <Space
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_weight="1" />
-
-        <ImageButton
-            android:id="@+id/status_more"
-            style="?attr/image_button_style"
-            android:layout_width="32dp"
-            android:layout_height="32dp"
-            android:contentDescription="@string/action_more"
-            android:padding="4dp"
-            app:srcCompat="@drawable/ic_more_horiz_24dp" />
-
-    </LinearLayout>
-
-</RelativeLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 16691ec79..1384062f0 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -1,6 +1,5 @@
 <resources>
     <dimen name="status_display_name_padding_end">4dp</dimen>
-    <dimen name="status_avatar_padding">10dp</dimen>
     <dimen name="status_reblogged_bar_padding_top">8dp</dimen>
     <dimen name="status_media_preview_margin_top">8dp</dimen>
     <dimen name="status_media_preview_height">100dp</dimen>