render reactions

app/src/main/java/im/conversations/android/ui/BindingAdapters.java

@@ -10,6 +10,8 @@ import androidx.annotation.DrawableRes;
 import androidx.annotation.NonNull;
 import androidx.databinding.BindingAdapter;
 import androidx.lifecycle.LiveData;
+import com.google.android.material.chip.Chip;
+import com.google.android.material.chip.ChipGroup;
 import com.google.android.material.color.MaterialColors;
 import com.google.android.material.textfield.TextInputEditText;
 import com.google.android.material.textfield.TextInputLayout;
@@ -24,6 +26,9 @@ import java.time.Instant;
 import java.time.LocalDateTime;
 import java.time.ZoneId;
 import java.time.temporal.ChronoUnit;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Set;
 
 public class BindingAdapters {
 
@@ -217,4 +222,61 @@ public class BindingAdapters {
             imageView.setVisibility(View.VISIBLE);
         }
     }
+
+    @BindingAdapter("reactionsOnReceived")
+    public static void setReactionsOnReceived(
+            final ChipGroup chipGroup, final Set<Map.Entry<String, Integer>> reactions) {
+        setReactions(chipGroup, reactions, true);
+    }
+
+    @BindingAdapter("reactionsOnSent")
+    public static void setReactionsOnSent(
+            final ChipGroup chipGroup, final Set<Map.Entry<String, Integer>> reactions) {
+        setReactions(chipGroup, reactions, false);
+    }
+
+    private static void setReactions(
+            final ChipGroup chipGroup,
+            final Set<Map.Entry<String, Integer>> reactions,
+            final boolean onReceived) {
+        if (reactions == null || reactions.isEmpty()) {
+            chipGroup.setVisibility(View.GONE);
+        } else {
+            chipGroup.removeAllViews();
+            chipGroup.setVisibility(View.VISIBLE);
+            for (final Map.Entry<String, Integer> reaction : reactions) {
+                final var count = reaction.getValue();
+                final Chip chip = new Chip(chipGroup.getContext());
+                chip.setEnsureMinTouchTargetSize(false);
+                chip.setChipStartPadding(0.0f);
+                chip.setChipEndPadding(0.0f);
+                if (count == 1) {
+                    chip.setText(reaction.getKey());
+                } else {
+                    chip.setText(String.format(Locale.ENGLISH, "%s %d", reaction.getKey(), count));
+                }
+                chipGroup.addView(chip);
+            }
+            if (onReceived) {
+                final Chip chip = new Chip(chipGroup.getContext());
+                chip.setChipIconResource(R.drawable.ic_add_reaction_24dp);
+                chip.setChipStrokeColor(
+                        MaterialColors.getColorStateListOrNull(
+                                chipGroup.getContext(),
+                                com.google.android.material.R.attr.colorTertiary));
+                chip.setChipBackgroundColor(
+                        MaterialColors.getColorStateListOrNull(
+                                chipGroup.getContext(),
+                                com.google.android.material.R.attr.colorTertiaryContainer));
+                chip.setChipIconTint(
+                        MaterialColors.getColorStateListOrNull(
+                                chipGroup.getContext(),
+                                com.google.android.material.R.attr.colorOnTertiaryContainer));
+                chip.setEnsureMinTouchTargetSize(false);
+                chip.setTextEndPadding(0.0f);
+                chip.setTextStartPadding(0.0f);
+                chipGroup.addView(chip);
+            }
+        }
+    }
 }

app/src/main/res/drawable/ic_add_reaction_24dp.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="?attr/colorControlNormal"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M18,9V7h-2V2.84C14.77,2.3 13.42,2 11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12c0,-1.05 -0.17,-2.05 -0.47,-3H18zM15.5,8C16.33,8 17,8.67 17,9.5S16.33,11 15.5,11S14,10.33 14,9.5S14.67,8 15.5,8zM8.5,8C9.33,8 10,8.67 10,9.5S9.33,11 8.5,11S7,10.33 7,9.5S7.67,8 8.5,8zM12,17.5c-2.33,0 -4.31,-1.46 -5.11,-3.5h10.22C16.31,16.04 14.33,17.5 12,17.5zM22,3h2v2h-2v2h-2V5h-2V3h2V1h2V3z" />
+</vector>

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

@@ -134,17 +134,38 @@
             </LinearLayout>
         </androidx.constraintlayout.widget.ConstraintLayout>
 
+        <Space
+            android:id="@+id/reactions_anchor"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginBottom="6dp"
+            app:layout_constraintBottom_toBottomOf="@+id/content"
+            app:layout_constraintStart_toStartOf="@+id/content" />
+
+        <com.google.android.material.chip.ChipGroup
+            android:id="@+id/reactions"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="8dp"
+            android:orientation="horizontal"
+            android:visibility="gone"
+            app:chipSpacingHorizontal="4dp"
+            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintStart_toStartOf="@+id/content"
+            app:layout_constraintTop_toBottomOf="@+id/reactions_anchor"
+            app:reactionsOnReceived="@{message.aggregatedReactions}" />
 
         <TextView
             android:id="@+id/time"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="8dp"
-            android:layout_marginTop="2sp"
+            android:layout_marginTop="2dp"
             android:textAppearance="?textAppearanceLabelSmall"
             android:textColor="?colorOnSurface"
             app:layout_constraintStart_toStartOf="@+id/content"
-            app:layout_constraintTop_toBottomOf="@+id/content"
+            app:layout_constraintTop_toBottomOf="@+id/reactions"
+            app:layout_goneMarginTop="8dp"
             app:time="@{message.sentAt}"
             tools:text="11:42 PM" />
 

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

@@ -123,17 +123,38 @@
             </LinearLayout>
         </androidx.constraintlayout.widget.ConstraintLayout>
 
+        <Space
+            android:id="@+id/reactions_anchor"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginBottom="6dp"
+            app:layout_constraintBottom_toBottomOf="@+id/content"
+            app:layout_constraintEnd_toEndOf="@+id/content" />
+
+        <com.google.android.material.chip.ChipGroup
+            android:id="@+id/reactions"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="8dp"
+            android:orientation="horizontal"
+            android:visibility="gone"
+            app:chipSpacingHorizontal="4dp"
+            app:layout_constraintEnd_toEndOf="@+id/content"
+            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintTop_toBottomOf="@+id/reactions_anchor"
+            app:reactionsOnSent="@{message.aggregatedReactions}" />
 
         <TextView
             android:id="@+id/time"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="2sp"
+            android:layout_marginTop="2dp"
             android:layout_marginEnd="4sp"
             android:textAppearance="?textAppearanceLabelSmall"
             android:textColor="?colorOnSurface"
             app:layout_constraintEnd_toStartOf="@+id/encryption"
-            app:layout_constraintTop_toBottomOf="@+id/content"
+            app:layout_constraintTop_toBottomOf="@+id/reactions"
+            app:layout_goneMarginTop="8dp"
             app:time="@{message.sentAt}"
             tools:text="11:42 PM" />