Adds layouts for multiple avatars

wordpress-mobile · Feb 6, 2024 · 94a46ef · 94a46ef
1 parent 3dab4a4
commit 94a46ef
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/WordPress/src/main/res/layout/notifications_list_item.xml b/WordPress/src/main/res/layout/notifications_list_item.xml
@@ -51,6 +51,54 @@
             app:layout_constraintTop_toTopOf="parent"
             tools:src="@drawable/bg_oval_placeholder_user_32dp" />
 
+        <FrameLayout
+            android:id="@+id/two_avatars_view"
+            android:layout_marginStart="@dimen/notifications_avatar_margin_start"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            android:layout_width="@dimen/activity_log_icon_size"
+            android:layout_height="@dimen/activity_log_icon_size">
+            <ImageView
+                android:id="@+id/two_avatars_1"
+                style="@style/Notifications.Avatar.OvalSurfaceBackground"
+                android:contentDescription="@null"
+                android:layout_gravity="center_vertical|start"
+                tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+            <ImageView
+                android:id="@+id/two_avatars_2"
+                style="@style/Notifications.Avatar.OvalSurfaceBackground"
+                android:layout_gravity="center_vertical|end"
+                android:contentDescription="@null"
+                tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+        </FrameLayout>
+
+        <FrameLayout
+            android:id="@+id/three_avatars_view"
+            android:layout_marginStart="@dimen/notifications_avatar_margin_start"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            android:layout_width="@dimen/activity_log_icon_size"
+            android:layout_height="@dimen/activity_log_icon_size">
+            <ImageView
+                android:id="@+id/three_avatars_1"
+                style="@style/ReaderImageView.Avatar.ExtraSmall.OvalSurfaceBackground"
+                android:contentDescription="@null"
+                android:layout_gravity="bottom|start"
+                tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+            <ImageView
+                android:id="@+id/three_avatars_2"
+                style="@style/ReaderImageView.Avatar.ExtraSmall.OvalSurfaceBackground"
+                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/ReaderImageView.Avatar.ExtraSmall.OvalSurfaceBackground"
+                android:layout_gravity="bottom|end"
+                android:contentDescription="@null"
+                tools:src="@drawable/bg_oval_placeholder_user_32dp" />
+        </FrameLayout>
+
         <ImageView
             android:id="@+id/action"
             android:layout_width="wrap_content"

diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml
@@ -189,6 +189,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>
@@ -276,6 +277,7 @@
     <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_size">28dp</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>

diff --git a/WordPress/src/main/res/values/styles.xml b/WordPress/src/main/res/values/styles.xml
@@ -638,6 +638,14 @@
         <item name="android:textColor">?attr/wpColorTextSecondary</item>
     </style>
 
+    <style name="Notifications.Avatar.OvalSurfaceBackground" parent="ReaderImageView">
+        <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>
+        <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="MyProfileRow">
         <item name="android:background">?android:attr/selectableItemBackground</item>
         <item name="android:layout_width">match_parent</item>