🤖 Use multiple avatars for multiple new likes or subscribers

WordPress/src/main/java/org/wordpress/android/models/Note.java

@@ -8,6 +8,7 @@
 import android.util.Base64;
 
 import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 
 import org.json.JSONArray;
 import org.json.JSONException;
@@ -22,9 +23,11 @@
 import org.wordpress.android.util.StringUtils;
 
 import java.io.UnsupportedEncodingException;
+import java.util.ArrayList;
 import java.util.Comparator;
 import java.util.Date;
 import java.util.EnumSet;
+import java.util.List;
 import java.util.zip.DataFormatException;
 import java.util.zip.Inflater;
 
@@ -215,6 +218,23 @@ public String getIconURL() {
         return queryJSON("icon", "");
     }
 
+    public @Nullable List<String> getIconURLs() {
+        synchronized (mSyncLock) {
+            JSONArray bodyArray = mNoteJSON.optJSONArray("body");
+            if (bodyArray != null && bodyArray.length() > 0) {
+                ArrayList<String> iconUrls = new ArrayList<>();
+                for (int i = 0; i < bodyArray.length(); i++) {
+                    String iconUrl = JSONUtils.queryJSON(bodyArray, "body[" + i + "].media[0].url", "");
+                    if (iconUrl != null && !iconUrl.isEmpty()) {
+                        iconUrls.add(iconUrl);
+                    }
+                }
+                return iconUrls;
+            }
+        }
+        return null;
+    }
+
     public String getCommentSubject() {
         synchronized (mSyncLock) {
             JSONArray subjectArray = mNoteJSON.optJSONArray("subject");

WordPress/src/main/java/org/wordpress/android/ui/notifications/adapters/NotesAdapter.kt

@@ -203,12 +203,7 @@ class NotesAdapter(
         } else {
             noteViewHolder.textDetail.visibility = View.GONE
         }
-        val avatarUrl = GravatarUtils.fixGravatarUrl(note.iconURL, avatarSize)
-        imageManager!!.loadIntoCircle(
-            noteViewHolder.imageAvatar,
-            ImageType.AVATAR_WITH_BACKGROUND,
-            avatarUrl
-        )
+        noteViewHolder.loadAvatars(note)
         noteViewHolder.unreadNotificationView.isVisible = note.isUnread
 
         // request to load more comments when we near the end
@@ -229,6 +224,38 @@ class NotesAdapter(
         noteViewHolder.headerText.layoutParams = layoutParams
     }
 
+    private fun NoteViewHolder.loadAvatars(note: Note) {
+        if (note.shouldShowMultipleAvatars() && note.iconURLs != null && note.iconURLs!!.size > 1) {
+            val avatars = note.iconURLs!!.toList()
+            if (avatars.size == 2) {
+                imageAvatar.visibility = View.INVISIBLE
+                twoAvatarsView.visibility = View.VISIBLE
+                threeAvatarsView.visibility = View.INVISIBLE
+                loadAvatar(twoAvatars1, avatars[1])
+                loadAvatar(twoAvatars2, avatars[0])
+            } else { // size > 3
+                imageAvatar.visibility = View.INVISIBLE
+                twoAvatarsView.visibility = View.INVISIBLE
+                threeAvatarsView.visibility = View.VISIBLE
+                loadAvatar(threeAvatars1, avatars[2])
+                loadAvatar(threeAvatars2, avatars[1])
+                loadAvatar(threeAvatars3, avatars[0])
+            }
+        } else { // single avatar
+            imageAvatar.visibility = View.VISIBLE
+            twoAvatarsView.visibility = View.INVISIBLE
+            threeAvatarsView.visibility = View.INVISIBLE
+            loadAvatar(imageAvatar, note.iconURL)
+        }
+    }
+
+    private fun loadAvatar(imageView: ImageView, avatarUrl: String) {
+        val url = GravatarUtils.fixGravatarUrl(avatarUrl, avatarSize)
+        imageManager?.loadIntoCircle(imageView, ImageType.AVATAR_WITH_BACKGROUND, url)
+    }
+
+    private fun Note.shouldShowMultipleAvatars() = isFollowType || isLikeType || isCommentLikeType
+
     private fun handleMaxLines(subject: TextView, detail: TextView) {
         subject.viewTreeObserver.addOnPreDrawListener(object : ViewTreeObserver.OnPreDrawListener {
             override fun onPreDraw(): Boolean {
@@ -280,6 +307,13 @@ class NotesAdapter(
         val textSubjectNoticon: TextView
         val textDetail: TextView
         val imageAvatar: ImageView
+        val twoAvatarsView: View
+        val twoAvatars1: ImageView
+        val twoAvatars2: ImageView
+        val threeAvatarsView: View
+        val threeAvatars1: ImageView
+        val threeAvatars2: ImageView
+        val threeAvatars3: ImageView
         val unreadNotificationView: View
 
         init {
@@ -289,6 +323,13 @@ class NotesAdapter(
             textSubjectNoticon = checkNotNull(view.findViewById(R.id.note_subject_noticon))
             textDetail = checkNotNull(view.findViewById(R.id.note_detail))
             imageAvatar = checkNotNull(view.findViewById(R.id.note_avatar))
+            twoAvatars1 = checkNotNull(view.findViewById(R.id.two_avatars_1))
+            twoAvatars2 = checkNotNull(view.findViewById(R.id.two_avatars_2))
+            threeAvatars1 = checkNotNull(view.findViewById(R.id.three_avatars_1))
+            threeAvatars2 = checkNotNull(view.findViewById(R.id.three_avatars_2))
+            threeAvatars3 = checkNotNull(view.findViewById(R.id.three_avatars_3))
+            twoAvatarsView = checkNotNull(view.findViewById(R.id.two_avatars_view))
+            threeAvatarsView = checkNotNull(view.findViewById(R.id.three_avatars_view))
             unreadNotificationView = checkNotNull(view.findViewById(R.id.notification_unread))
             contentView.setOnClickListener(onClickListener)
         }

WordPress/src/main/res/layout/notifications_list_double_avatar.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout 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="@dimen/notifications_multiple_icon_width"
+    android:layout_height="@dimen/notifications_multiple_icon_height"
+    android:layout_marginStart="@dimen/notifications_multiple_avatar_margin_start"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent"
+    tools:ignore="MergeRootFrame">
+
+    <ImageView
+        android:id="@+id/two_avatars_1"
+        style="@style/NotificationsAvatarDouble"
+        android:layout_gravity="center_vertical|start"
+        android:contentDescription="@null"
+        tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+
+    <ImageView
+        android:id="@+id/two_avatars_2"
+        style="@style/NotificationsAvatarDouble"
+        android:layout_gravity="center_vertical|end"
+        android:contentDescription="@null"
+        tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+</FrameLayout>

WordPress/src/main/res/layout/notifications_list_item.xml

@@ -43,14 +43,22 @@
 
         <ImageView
             android:id="@+id/note_avatar"
-            android:layout_width="@dimen/activity_log_icon_size"
-            android:layout_height="@dimen/activity_log_icon_size"
+            android:layout_width="@dimen/notifications_icon_size"
+            android:layout_height="@dimen/notifications_icon_size"
             android:layout_marginStart="@dimen/notifications_avatar_margin_start"
             android:contentDescription="@null"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             tools:src="@drawable/bg_oval_placeholder_user_32dp" />
 
+        <include
+            android:id="@+id/two_avatars_view"
+            layout="@layout/notifications_list_double_avatar" />
+
+        <include
+            android:id="@+id/three_avatars_view"
+            layout="@layout/notifications_list_triple_avatar" />
+
         <ImageView
             android:id="@+id/action"
             android:layout_width="wrap_content"

WordPress/src/main/res/layout/notifications_list_triple_avatar.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout 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="@dimen/notifications_multiple_icon_width"
+    android:layout_height="@dimen/notifications_multiple_icon_height"
+    android:layout_marginStart="@dimen/notifications_multiple_avatar_margin_start"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent"
+    tools:ignore="MergeRootFrame">
+
+    <ImageView
+        android:id="@+id/three_avatars_1"
+        style="@style/NotificationsAvatarTriple"
+        android:layout_gravity="bottom|start"
+        android:contentDescription="@null"
+        tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+
+    <ImageView
+        android:id="@+id/three_avatars_2"
+        style="@style/NotificationsAvatarTriple"
+        android:layout_gravity="top|center_horizontal"
+        android:contentDescription="@null"
+        tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+
+    <ImageView
+        android:id="@+id/three_avatars_3"
+        style="@style/NotificationsAvatarTriple"
+        android:layout_gravity="bottom|end"
+        android:contentDescription="@null"
+        tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+</FrameLayout>

WordPress/src/main/res/values/dimens.xml

@@ -183,6 +183,7 @@
     <dimen name="avatar_sz_large">64dp</dimen>
     <dimen name="avatar_sz_extra_large">72dp</dimen>
     <dimen name="avatar_sz_login_epilogue">72dp</dimen>
+    <dimen name="avatar_sz_extra_medium_with_padding">28dp</dimen>
     <dimen name="avatar_sz_extra_small_with_padding">26dp</dimen>
     <dimen name="avatar_sz_extra_extra_small_with_padding">22dp</dimen>
     <dimen name="avatar_background_padding">1dp</dimen>
@@ -270,7 +271,8 @@
     <dimen name="notifications_adjusted_font_margin">10dp</dimen>
     <dimen name="notifications_content_margin">0dp</dimen>
     <dimen name="notifications_avatar_sz">48dp</dimen>
-    <dimen name="notifications_avatar_margin_start">18dp</dimen>
+    <dimen name="notifications_avatar_margin_start">20dp</dimen>
+    <dimen name="notifications_multiple_avatar_margin_start">17dp</dimen>
     <dimen name="notifications_text_indent_sz">22dp</dimen>
     <dimen name="notification_comment_padded_frame_bg_offset">14dp</dimen>  <!-- results in 6dp border -->
     <dimen name="notification_comment_frame_bg_border_width">6dp</dimen>
@@ -282,6 +284,9 @@
     <dimen name="notifications_header_margin_top_position_0">16dp</dimen>
     <dimen name="notifications_header_margin_top_position_n">4dp</dimen>
     <dimen name="notifications_popup_radius">4dp</dimen>
+    <dimen name="notifications_icon_size">40dp</dimen>
+    <dimen name="notifications_multiple_icon_height">44dp</dimen>
+    <dimen name="notifications_multiple_icon_width">48dp</dimen>
 
     <dimen name="progress_bar_height">3dp</dimen>
     <dimen name="activity_progress_bar_height">5dp</dimen>

WordPress/src/main/res/values/styles.xml

@@ -638,6 +638,19 @@
         <item name="android:textColor">?attr/wpColorTextSecondary</item>
     </style>
 
+    <style name="NotificationsAvatarDouble">
+        <item name="android:layout_width">@dimen/avatar_sz_small</item>
+        <item name="android:layout_height">@dimen/avatar_sz_small</item>
+        <item name="android:padding">@dimen/avatar_background_padding</item>
+        <item name="android:background">@drawable/bg_oval_surface</item>
+        <item name="android:foreground">@drawable/post_detail_avatar_internal_border</item>
+    </style>
+
+    <style name="NotificationsAvatarTriple" parent="NotificationsAvatarDouble">
+        <item name="android:layout_width">@dimen/avatar_sz_extra_medium_with_padding</item>
+        <item name="android:layout_height">@dimen/avatar_sz_extra_medium_with_padding</item>
+    </style>
+
     <style name="MyProfileRow">
         <item name="android:background">?android:attr/selectableItemBackground</item>
         <item name="android:layout_width">match_parent</item>