Improve detailed status looks (#4260)

#4205 did change how the counters for the detailed posts behave and for
a good reason I believe.

However I find the changed order very confusing and not aesthetically
pleasing.

I have tried a few options, including reserving space for it but it was
confusing (when counters are not displayed there would be a danging
separator or if we show separator together with it it would be confusing
as well).

I propose we simply show the counters independent on the counts. I know
we try to de-emphasize the counters but I believe this is fine to do in
detailed view.

One disadvantage is that we need translators to update the translations.

Additionally I've done two spacing changes: I removed a separator
between the counters and the buttons, removed padding around the
counters and increased the space between the counters and the buttons
instead. I believe it's better to use space than separators. This also
makes the space above/below the media/counters separator balanced.

In the second commit I've also made the metadata/counters separators
thinner, I think it looks better.

here's the combined version:


![proposal_final](https://github.com/tuskyapp/Tusky/assets/3099142/ea9d4c0c-fe6a-4f2e-8427-673b2a833e6b)

app/src/main/java/com/keylesspalace/tusky/adapter/StatusBaseViewHolder.java

@@ -271,7 +271,7 @@ public abstract class StatusBaseViewHolder extends RecyclerView.ViewHolder {
         Status actionable = status.getActionable();
         Spanned content = status.getContent();
         List<Status.Mention> mentions = actionable.getMentions();
-        List<HashTag> tags =actionable.getTags();
+        List<HashTag> tags = actionable.getTags();
         List<Emoji> emojis = actionable.getEmojis();
         PollViewData poll = PollViewDataKt.toViewData(actionable.getPoll());
 
@@ -727,7 +727,7 @@ public abstract class StatusBaseViewHolder extends RecyclerView.ViewHolder {
         }
         popup.setOnMenuItemClickListener(item -> {
             listener.onReblog(!buttonState, position);
-            if(!buttonState) {
+            if (!buttonState) {
                 reblogButton.playAnimation();
                 reblogButton.setChecked(true);
             }
@@ -749,7 +749,7 @@ public abstract class StatusBaseViewHolder extends RecyclerView.ViewHolder {
         }
         popup.setOnMenuItemClickListener(item -> {
             listener.onFavourite(!buttonState, position);
-            if(!buttonState) {
+            if (!buttonState) {
                 favouriteButton.playAnimation();
                 favouriteButton.setChecked(true);
             }
@@ -976,22 +976,14 @@ public abstract class StatusBaseViewHolder extends RecyclerView.ViewHolder {
 
     @NonNull
     protected CharSequence getFavsText(@NonNull Context context, int count) {
-        if (count > 0) {
         String countString = numberFormat.format(count);
         return HtmlCompat.fromHtml(context.getResources().getQuantityString(R.plurals.favs, count, countString), HtmlCompat.FROM_HTML_MODE_LEGACY);
-        } else {
-            return "";
-        }
     }
 
     @NonNull
-    protected CharSequence getReblogsText(@NonNull Context context, int count) {
+    protected CharSequence getReblogsText   (@NonNull Context context, int count) {
-        if (count > 0) {
         String countString = numberFormat.format(count);
         return HtmlCompat.fromHtml(context.getResources().getQuantityString(R.plurals.reblogs, count, countString), HtmlCompat.FROM_HTML_MODE_LEGACY);
-        } else {
-            return "";
-        }
     }
 
     private void setupPoll(PollViewData poll, List<Emoji> emojis,

app/src/main/java/com/keylesspalace/tusky/adapter/StatusDetailedViewHolder.java

@@ -67,7 +67,6 @@ public class StatusDetailedViewHolder extends StatusBaseViewHolder {
 
         Date createdAt = status.getCreatedAt();
         if (createdAt != null) {
-
             sb.append(" ");
             sb.append(dateFormat.format(createdAt));
         }
@@ -105,7 +104,6 @@ public class StatusDetailedViewHolder extends StatusBaseViewHolder {
         Status.Application app = status.getApplication();
 
         if (app != null) {
-
             sb.append(metadataJoiner);
 
             if (app.getWebsite() != null) {
@@ -121,25 +119,8 @@ public class StatusDetailedViewHolder extends StatusBaseViewHolder {
     }
 
     private void setReblogAndFavCount(int reblogCount, int favCount, StatusActionListener listener) {
-
-        if (reblogCount > 0) {
         reblogs.setText(getReblogsText(reblogs.getContext(), reblogCount));
-            reblogs.setVisibility(View.VISIBLE);
-        } else {
-            reblogs.setVisibility(View.GONE);
-        }
-        if (favCount > 0) {
         favourites.setText(getFavsText(favourites.getContext(), favCount));
-            favourites.setVisibility(View.VISIBLE);
-        } else {
-            favourites.setVisibility(View.GONE);
-        }
-
-        if (reblogs.getVisibility() == View.GONE && favourites.getVisibility() == View.GONE) {
-            infoDivider.setVisibility(View.GONE);
-        } else {
-            infoDivider.setVisibility(View.VISIBLE);
-        }
 
         reblogs.setOnClickListener(v -> {
             int position = getBindingAdapterPosition();

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

@@ -283,17 +283,11 @@
         app:layout_constraintTop_toBottomOf="@id/status_poll_description"
         tools:text="21 Dec 2018 18:45" />
 
-    <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:id="@+id/status_info_divider"
         android:layout_width="match_parent"
-        android:layout_height="1dp"
+        android:layout_height="0.5dp"
+        android:layout_below="@id/status_meta_info"
         android:layout_marginStart="14dp"
         android:layout_marginTop="6dp"
         android:layout_marginEnd="14dp"
@@ -303,18 +297,56 @@
         android:paddingEnd="16dp"
         app:layout_constraintTop_toBottomOf="@id/status_meta_info" />
 
+    <TextView
+        android:id="@+id/status_reblogs"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="6dp"
+        android:background="?attr/selectableItemBackground"
+        android:importantForAccessibility="no"
+        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 Boosts"
+        tools:visibility="visible" />
+
+    <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:importantForAccessibility="no"
+        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 Favorites"
+        tools:visibility="visible" />
+
+    <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" />
+
+
     <ImageButton
         android:id="@+id/status_reply"
         style="@style/TuskyImageButton"
         android:layout_width="52dp"
         android:layout_height="48dp"
+        android:layout_marginTop="4dp"
         android:contentDescription="@string/action_reply"
         android:importantForAccessibility="no"
         android:padding="4dp"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/status_inset"
         app:layout_constraintHorizontal_chainStyle="spread_inside"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/status_buttons_divider"
+        app:layout_constraintTop_toBottomOf="@id/status_counters_barrier"
         app:srcCompat="@drawable/ic_reply_24dp" />
 
     <at.connyduck.sparkbutton.SparkButton
@@ -382,45 +414,4 @@
         app:layout_constraintTop_toTopOf="@id/status_reply"
         app:srcCompat="@drawable/ic_more_horiz_24dp" />
 
-    <View
-        android:id="@+id/status_info_divider"
-        android:layout_width="match_parent"
-        android:layout_height="1dp"
-        android:layout_below="@id/status_meta_info"
-        android:layout_marginStart="14dp"
-        android:layout_marginEnd="14dp"
-        android:background="?android:attr/listDivider"
-        android:importantForAccessibility="no"
-        android:paddingStart="16dp"
-        android:paddingEnd="16dp"
-        app:layout_constraintTop_toBottomOf="@id/status_reply" />
-
-    <TextView
-        android:id="@+id/status_reblogs"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:background="?attr/selectableItemBackground"
-        android:importantForAccessibility="no"
-        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_favourites"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="12dp"
-        android:background="?attr/selectableItemBackground"
-        android:importantForAccessibility="no"
-        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" />
-
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -546,11 +546,13 @@
     <string name="failed_to_unpin">Failed to Unpin</string>
 
     <plurals name="favs">
+        <item quantity="zero"><b>%1$s</b> Favorites</item>
         <item quantity="one">&lt;b>%1$s&lt;/b> Favorite</item>
         <item quantity="other">&lt;b>%1$s&lt;/b> Favorites</item>
     </plurals>
 
     <plurals name="reblogs">
+        <item quantity="zero"><b>%s</b> Boosts</item>
         <item quantity="one">&lt;b>%s&lt;/b> Boost</item>
         <item quantity="other">&lt;b>%s&lt;/b> Boosts</item>
     </plurals>