Setup Explanation dialog ui

auth/src/main/java/org/futo/circles/auth/explanation/CirclesExplanationDialog.kt

@@ -6,11 +6,20 @@ import android.graphics.Color
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.InsetDrawable
 import android.os.Bundle
+import android.text.Html
 import android.view.LayoutInflater
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.Space
 import androidx.appcompat.app.AppCompatDialog
+import org.futo.circles.auth.R
 import org.futo.circles.auth.databinding.DialogCirclesExplanationBinding
+import org.futo.circles.core.model.CircleRoomTypeArg
+import org.futo.circles.core.model.CircleRoomTypeArg.Group
 
-class CirclesExplanationDialog(context: Context) : AppCompatDialog(context) {
+
+class CirclesExplanationDialog(context: Context, private val roomType: CircleRoomTypeArg) :
+    AppCompatDialog(context) {
 
     private val binding = DialogCirclesExplanationBinding.inflate(LayoutInflater.from(context))
 
@@ -22,6 +31,64 @@ class CirclesExplanationDialog(context: Context) : AppCompatDialog(context) {
             setBackgroundDrawable(InsetDrawable(ColorDrawable(Color.TRANSPARENT), 20))
             setLayout(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT)
         }
+        setupViews()
+    }
+
+    private fun setupViews() {
+        with(binding) {
+            btnDone.setOnClickListener { this@CirclesExplanationDialog.dismiss() }
+            when (roomType) {
+                Group -> {
+                    tvTitle.setText(R.string.group)
+                    tvDescription.text = Html.fromHtml(
+                        context.getString(R.string.group_explanation),
+                        Html.FROM_HTML_MODE_COMPACT
+                    )
+                    setupImages(listOf(R.drawable.explanation_groups))
+                }
 
+                else -> {
+                    tvTitle.setText(R.string.circle)
+                    tvDescription.text = Html.fromHtml(
+                        context.getString(R.string.circle_explanation),
+                        Html.FROM_HTML_MODE_COMPACT
+                    )
+                    setupImages(
+                        listOf(
+                            R.drawable.explanation_circles_1,
+                            R.drawable.explanation_circles_2,
+                            R.drawable.explanation_circles_3,
+                            R.drawable.explanation_circles_4
+                        )
+                    )
+                }
+            }
+        }
     }
+
+    private fun setupImages(images: List<Int>) {
+        if (images.isEmpty()) return
+        val spaceWeight = if (images.size == 1) 0f else images.size.toFloat() / (images.size - 1)
+        val imageWeight = (100f - images.size * spaceWeight) / images.size.toFloat()
+        images.forEachIndexed { index, i ->
+            binding.lImages.addView(ImageView(context).apply {
+                adjustViewBounds = true
+                layoutParams =
+                    LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT).apply {
+                        weight = imageWeight
+                    }
+                setImageResource(i)
+            })
+            if (index != images.size - 1) {
+                binding.lImages.addView(Space(context).apply {
+                    layoutParams =
+                        LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT).apply {
+                            weight = spaceWeight
+                        }
+                })
+            }
+        }
+    }
+
+
 }
\ No newline at end of file

auth/src/main/res/layout/dialog_circles_explanation.xml

@@ -17,8 +17,14 @@
 
             <LinearLayout
                 android:id="@+id/lImages"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content" />
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:gravity="center"
+                android:orientation="horizontal"
+                android:weightSum="100"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
 
             <TextView
                 android:id="@+id/tvTitle"
@@ -32,14 +38,16 @@
 
             <TextView
                 android:id="@id/tvDescription"
+                style="@style/body"
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
+                android:layout_height="wrap_content"
                 android:layout_marginTop="16dp"
                 android:layout_marginBottom="16dp"
                 app:layout_constraintBottom_toTopOf="@id/btnDone"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toBottomOf="@id/tvTitle" />
+                app:layout_constraintTop_toBottomOf="@id/tvTitle"
+                tools:text="adsadasdasdasd" />
 
             <com.google.android.material.button.MaterialButton
                 android:id="@+id/btnDone"

auth/src/main/res/values/strings.xml

@@ -121,6 +121,8 @@
     <string name="user_id">User ID</string>
     <string name="verify">Verify</string>
     <string name="got_it">Got it</string>
+    <string name="group">Group</string>
+    <string name="circle">Circle</string>
     <string name="circle_explanation"><![CDATA[
 Tip: A <b>circle</b> works like a secure, private version of Facebook or Twitter.  Everyone posts to their own timeline, and you see posts from all the timelines that you\'re following.
 <br/>A circle is a good way to share things with lots of people who don\'t all know each other, but they all know you.