Fixed avatar badges position and size

Author: ThomasSession

app/src/main/java/org/thoughtcrime/securesms/conversation/v2/input_bar/mentions/MentionCandidateView.kt

@@ -1,20 +1,19 @@
 package org.thoughtcrime.securesms.conversation.v2.input_bar.mentions
 
-import android.view.View
 import network.loki.messenger.databinding.ViewMentionCandidateV2Binding
 import org.thoughtcrime.securesms.conversation.v2.mention.MentionViewModel
 import org.thoughtcrime.securesms.ui.components.Avatar
 import org.thoughtcrime.securesms.ui.setThemedContent
 import org.thoughtcrime.securesms.ui.theme.LocalDimensions
+import org.thoughtcrime.securesms.util.AvatarBadge
 
 fun ViewMentionCandidateV2Binding.update(candidate: MentionViewModel.Candidate) {
     mentionCandidateNameTextView.text = candidate.nameHighlighted
     profilePictureView.setThemedContent {
         Avatar(
             size = LocalDimensions.current.iconMediumAvatar,
             data = candidate.member.avatarData,
+            badge = if (candidate.member.showAdminCrown) AvatarBadge.Admin else AvatarBadge.None
         )
     }
-
-    moderatorIconImageView.visibility = if (candidate.member.showAdminCrown) View.VISIBLE else View.GONE
 }

app/src/main/java/org/thoughtcrime/securesms/conversation/v2/messages/VisibleMessageView.kt

@@ -61,6 +61,7 @@ import org.thoughtcrime.securesms.ui.theme.LocalColors
 import org.thoughtcrime.securesms.ui.theme.LocalDimensions
 import org.thoughtcrime.securesms.ui.theme.LocalType
 import org.thoughtcrime.securesms.ui.theme.bold
+import org.thoughtcrime.securesms.util.AvatarBadge
 import org.thoughtcrime.securesms.util.AvatarUtils
 import org.thoughtcrime.securesms.util.DateUtils
 import org.thoughtcrime.securesms.util.disableClipping
@@ -176,7 +177,6 @@ class VisibleMessageView : FrameLayout {
         val isStartOfMessageCluster = isStartOfMessageCluster(message, previous, isGroupThread)
         val isEndOfMessageCluster = isEndOfMessageCluster(message, next, isGroupThread)
         // Show profile picture and sender name if this is a group thread AND the message is incoming
-        binding.moderatorIconImageView.isVisible = false
         binding.profilePictureView.visibility = when {
             threadRecipient.isGroupOrCommunityRecipient && !message.isOutgoing && isEndOfMessageCluster -> View.VISIBLE
             threadRecipient.isGroupOrCommunityRecipient -> View.INVISIBLE
@@ -200,22 +200,22 @@ class VisibleMessageView : FrameLayout {
 
         if (isGroupThread && !message.isOutgoing) {
             if (isEndOfMessageCluster) {
+                val showProBadge = if (sender.address is Address.WithAccountId) {
+                    (threadRecipient.data as? RecipientData.GroupLike)
+                        ?.shouldShowAdminCrown(sender.address.accountId) == true
+                } else {
+                    false
+                }
                 binding.profilePictureView.setThemedContent {
                     Avatar(
                         size = LocalDimensions.current.iconMediumAvatar,
                         data = avatarUtils.getUIDataFromRecipient(sender),
+                        badge = if(showProBadge) AvatarBadge.Admin else AvatarBadge.None,
                         modifier = Modifier.clickable {
                             delegate?.showUserProfileModal(message.recipient)
                         }
                     )
                 }
-
-                binding.moderatorIconImageView.isVisible = if (sender.address is Address.WithAccountId) {
-                    (threadRecipient.data as? RecipientData.GroupLike)
-                        ?.shouldShowAdminCrown(sender.address.accountId) == true
-                } else {
-                    false
-                }
             }
         }
         if(!message.isOutgoing && (isStartOfMessageCluster && isGroupThread)){

app/src/main/java/org/thoughtcrime/securesms/ui/components/Avatar.kt

@@ -31,6 +31,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.max
 import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImagePainter
 import coil3.compose.SubcomposeAsyncImage
@@ -55,6 +56,7 @@ import org.thoughtcrime.securesms.util.AvatarUIData
 import org.thoughtcrime.securesms.util.AvatarUIElement
 import org.thoughtcrime.securesms.util.avatarOptions
 
+private val MIN_BADGE_SIZE = 12.dp
 
 @Composable
 fun BaseAvatar(
@@ -102,11 +104,20 @@ fun BaseAvatar(
 
         // Badge content, if any.
         if (badge != null) {
+            var badgeSize = size * 0.4f
+            var offset = 0.dp
+
+            if(badgeSize < MIN_BADGE_SIZE){
+                // apply an opinionated minimum size for the badge
+                badgeSize = MIN_BADGE_SIZE
+                offset = 1.dp // the forced min size looks better with a slight offset
+            }
+
             Box(
                 modifier = Modifier
                     .align(Alignment.BottomEnd)
-                    .offset(1.dp, 1.dp) // Used to make up for transparent padding in icon.
-                    .size(size * 0.4f)
+                    .offset(x = offset, y = offset)
+                    .size(badgeSize)
             ) {
                 badge()
             }
@@ -387,6 +398,40 @@ fun PreviewAvatarSinglePhoto(){
     }
 }
 
+@Preview
+@Composable
+fun PreviewAvatarBadge(){
+    PreviewTheme {
+        Avatar(
+            size = LocalDimensions.current.iconLarge,
+            badge = AvatarBadge.Admin,
+            data = AvatarUIData(
+                listOf(AvatarUIElement(
+                    name = "AT",
+                    color = primaryGreen,
+                    remoteFile = null
+                )))
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PreviewAvatarBadgeSmall(){
+    PreviewTheme {
+        Avatar(
+            size = LocalDimensions.current.iconMediumAvatar,
+            badge = AvatarBadge.Admin,
+            data = AvatarUIData(
+                listOf(AvatarUIElement(
+                    name = "AT",
+                    color = primaryGreen,
+                    remoteFile = null
+                )))
+        )
+    }
+}
+
 @Preview
 @Composable
 fun PreviewAvatarElementUnclipped(){

app/src/main/java/org/thoughtcrime/securesms/util/AvatarUtils.kt

@@ -231,7 +231,7 @@ data class AvatarUIElement(
 
 sealed class AvatarBadge(@DrawableRes val icon: Int){
     data object None: AvatarBadge(0)
-    data object Admin: AvatarBadge(R.drawable.ic_crown_custom_enlarged)
+    data object Admin: AvatarBadge(R.drawable.ic_crown_custom_enlarged_no_padding)
     data class Custom(@DrawableRes val iconRes: Int): AvatarBadge(iconRes)
 }
 

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

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="38dp"
+    android:height="38dp"
+    android:viewportWidth="38"
+    android:viewportHeight="38">
+  <path
+      android:pathData="M19,19m-19,0a19,19 0,1 1,38 0a19,19 0,1 1,-38 0"
+      android:fillColor="?crownBg"/>
+  <path
+      android:pathData="M27.092,28.268C27.745,28.268 28.274,28.798 28.274,29.45C28.274,30.103 27.745,30.632 27.092,30.632H10.543C9.891,30.632 9.361,30.103 9.361,29.45C9.361,28.798 9.891,28.268 10.543,28.268H27.092ZM18.936,7.005C19.173,7.02 19.404,7.084 19.616,7.19L19.72,7.247L19.82,7.311C20.015,7.445 20.182,7.617 20.31,7.816L20.371,7.919L20.381,7.938L23.864,14.549L28.903,10.232L28.926,10.213C29.217,9.976 29.576,9.837 29.951,9.817L30.091,9.816C30.371,9.823 30.645,9.896 30.891,10.03L31.012,10.102L31.127,10.183C31.348,10.354 31.527,10.574 31.646,10.827L31.702,10.956L31.746,11.089C31.838,11.402 31.843,11.736 31.756,12.053L31.754,12.058L28.405,24.169C28.268,24.664 27.973,25.102 27.566,25.415C27.158,25.728 26.659,25.9 26.145,25.904H11.493C10.979,25.901 10.479,25.729 10.071,25.416C9.663,25.103 9.367,24.665 9.23,24.169L5.882,12.06L5.88,12.054C5.782,11.692 5.801,11.307 5.935,10.957L5.99,10.829C6.13,10.534 6.349,10.282 6.624,10.103L6.745,10.031C6.991,9.897 7.265,9.824 7.545,9.817L7.685,9.818L7.825,9.831C8.148,9.874 8.455,10.007 8.71,10.214C8.717,10.22 8.726,10.226 8.734,10.233L13.771,14.549L17.254,7.938L17.264,7.919C17.417,7.641 17.642,7.409 17.916,7.247L18.02,7.19C18.267,7.066 18.54,7 18.818,7L18.936,7.005Z"
+      android:fillColor="?crown"/>
+</vector>

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

@@ -25,19 +25,6 @@
                 app:layout_constraintTop_toTopOf="parent"
                 app:layout_constraintStart_toStartOf="parent"/>
 
-            <ImageView
-                android:id="@+id/moderatorIconImageView"
-                android:layout_width="16dp"
-                android:layout_height="16dp"
-                android:src="@drawable/ic_crown_custom_enlarged"
-                android:layout_marginEnd="-1dp"
-                android:layout_marginBottom="-1dp"
-                android:layout_alignParentEnd="true"
-                android:layout_alignParentBottom="true"
-                app:layout_constraintBottom_toBottomOf="@+id/profilePictureView"
-                app:layout_constraintEnd_toEndOf="@+id/profilePictureView"
-                android:contentDescription="@string/AccessibilityId_contactMentions"/>
-
         </androidx.constraintlayout.widget.ConstraintLayout>
 
         <TextView

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

@@ -45,20 +45,6 @@
             app:layout_constraintStart_toStartOf="parent"
             tools:visibility="visible" />
 
-        <ImageView
-            android:id="@+id/moderatorIconImageView"
-            android:layout_width="16dp"
-            android:layout_height="16dp"
-            android:src="@drawable/ic_crown_custom_enlarged"
-            android:layout_marginEnd="-1dp"
-            android:layout_marginBottom="-1dp"
-            android:layout_alignParentEnd="true"
-            android:layout_alignParentBottom="true"
-            android:visibility="gone"
-            app:layout_constraintBottom_toBottomOf="@+id/profilePictureView"
-            app:layout_constraintEnd_toEndOf="@+id/profilePictureView"
-            tools:visibility="visible"/>
-
         <androidx.compose.ui.platform.ComposeView
             android:id="@+id/senderName"
             android:layout_width="0dp"