show overlapped mini avatars in results overview

Signed-off-by: Marcel Hibbe <dev@mhibbe.de>

app/src/main/java/com/nextcloud/talk/polls/adapters/PollResultVotersOverviewViewHolder.kt

@@ -23,6 +23,8 @@ package com.nextcloud.talk.polls.adapters
 import android.annotation.SuppressLint
 import android.text.TextUtils
 import android.widget.LinearLayout
+import android.widget.TextView
+import androidx.core.content.res.ResourcesCompat
 import com.facebook.drawee.backends.pipeline.Fresco
 import com.facebook.drawee.generic.RoundingParams
 import com.facebook.drawee.interfaces.DraweeController
@@ -46,22 +48,47 @@ class PollResultVotersOverviewViewHolder(
 
         binding.root.setOnClickListener { clickListener.onClick() }
 
-        val lp = LinearLayout.LayoutParams(
+        val layoutParams = LinearLayout.LayoutParams(
-            AVATAR_WIDTH,
+            AVATAR_SIZE,
-            AVATAR_HEIGHT
+            AVATAR_SIZE
         )
 
-        item.detailsList.forEach {
+        var avatarsToDisplay = MAX_AVATARS
+        if (item.detailsList.size < avatarsToDisplay) {
+            avatarsToDisplay = item.detailsList.size
+        }
+        val shotsDots = item.detailsList.size > avatarsToDisplay
+
+        for (i in 0 until avatarsToDisplay) {
+            val pollDetails = item.detailsList[i]
             val avatar = SimpleDraweeView(binding.root.context)
-            avatar.layoutParams = lp
+
+            layoutParams.marginStart = i * AVATAR_OFFSET
+            avatar.layoutParams = layoutParams
+
+            avatar.translationZ = i.toFloat() * -1
 
             val roundingParams = RoundingParams.fromCornersRadius(AVATAR_RADIUS)
             roundingParams.roundAsCircle = true
+            roundingParams.borderColor = ResourcesCompat.getColor(
+                itemView.context.resources!!,
+                R.color.colorPrimary,
+                null
+            )
+            roundingParams.borderWidth = 2.0f
 
             avatar.hierarchy.roundingParams = roundingParams
-            avatar.controller = getAvatarDraweeController(it)
+            avatar.controller = getAvatarDraweeController(pollDetails)
 
             binding.votersAvatarsOverviewWrapper.addView(avatar)
+
+            if (i == avatarsToDisplay - 1 && shotsDots) {
+                val dotsView = TextView(itemView.context)
+                layoutParams.marginStart = i * AVATAR_OFFSET + DOTS_OFFSET
+                dotsView.layoutParams = layoutParams
+                dotsView.text = DOTS_TEXT
+                binding.votersAvatarsOverviewWrapper.addView(dotsView)
+            }
         }
     }
 
@@ -104,8 +131,11 @@ class PollResultVotersOverviewViewHolder(
     }
 
     companion object {
-        const val AVATAR_WIDTH = 90
+        const val AVATAR_SIZE = 60
-        const val AVATAR_HEIGHT = 70
         const val AVATAR_RADIUS = 5f
+        const val MAX_AVATARS = 10
+        const val AVATAR_OFFSET = AVATAR_SIZE - 10
+        const val DOTS_OFFSET = 70
+        const val DOTS_TEXT = "…"
     }
 }

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

@@ -23,8 +23,6 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:paddingStart="@dimen/standard_half_padding"
-    android:paddingEnd="@dimen/standard_half_padding"
     android:paddingBottom="4dp"
     tools:background="@color/white">
 

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

@@ -18,7 +18,7 @@
   ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   -->
 
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/voters_avatars_overview_wrapper"
     android:layout_width="match_parent"
@@ -28,5 +28,4 @@
     android:paddingBottom="4dp"
     android:orientation="horizontal"
     tools:background="@color/white">
-
+</RelativeLayout>
-</LinearLayout>