Change layout for selecting skin tone

emoji/src/main/java/chat/rocket/android/emoji/EmojiKeyboardPopup.kt

@@ -10,6 +10,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.EditText
 import android.widget.ImageView
+import android.widget.TextView
 import androidx.annotation.ColorInt
 import androidx.appcompat.app.AlertDialog
 import androidx.appcompat.app.AppCompatActivity
@@ -73,38 +74,50 @@ class EmojiKeyboardPopup(context: Context, view: View) : OverKeyboardPopupWindow
 
     private fun showSkinToneChooser() {
         val view = LayoutInflater.from(context).inflate(R.layout.color_select_popup, null)
-        val dialog = AlertDialog.Builder(context)
+        val dialog = AlertDialog.Builder(context, R.style.Dialog)
             .setView(view)
             .setTitle(context.getString(R.string.alert_title_default_skin_tone))
             .setCancelable(true)
             .create()
 
-        view.findViewById<ImageView>(R.id.default_image_view).setOnClickListener {
+        view.findViewById<TextView>(R.id.default_tone_text).also {
+            it.text = EmojiParser.parse(it.text)
+        }.setOnClickListener {
             dialog.dismiss()
             changeSkinTone(Fitzpatrick.Default)
         }
 
-        view.findViewById<ImageView>(R.id.light_image_view).setOnClickListener {
+        view.findViewById<TextView>(R.id.light_tone_text).also {
+            it.text = EmojiParser.parse(it.text)
+        }.setOnClickListener {
             dialog.dismiss()
             changeSkinTone(Fitzpatrick.LightTone)
         }
 
-        view.findViewById<ImageView>(R.id.medium_light_image_view).setOnClickListener {
+        view.findViewById<TextView>(R.id.medium_light_text).also {
+            it.text = EmojiParser.parse(it.text)
+        }.setOnClickListener {
             dialog.dismiss()
             changeSkinTone(Fitzpatrick.MediumLightTone)
         }
 
-        view.findViewById<ImageView>(R.id.medium_image_view).setOnClickListener {
+        view.findViewById<TextView>(R.id.medium_image_view).also {
+            it.text = EmojiParser.parse(it.text)
+        }.setOnClickListener {
             dialog.dismiss()
             changeSkinTone(Fitzpatrick.MediumTone)
         }
 
-        view.findViewById<ImageView>(R.id.medium_dark_image_view).setOnClickListener {
+        view.findViewById<TextView>(R.id.medium_dark_tone_text).also {
+            it.text = EmojiParser.parse(it.text)
+        }.setOnClickListener {
             dialog.dismiss()
             changeSkinTone(Fitzpatrick.MediumDarkTone)
         }
 
-        view.findViewById<ImageView>(R.id.dark_image_view).setOnClickListener {
+        view.findViewById<TextView>(R.id.dark_tone_text).also {
+            it.text = EmojiParser.parse(it.text)
+        }.setOnClickListener {
             dialog.dismiss()
             changeSkinTone(Fitzpatrick.DarkTone)
         }

emoji/src/main/res/layout/color_select_popup.xml

 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
     android:layout_height="wrap_content">
 
-    <ImageView
+    <TextView
+        android:id="@+id/default_tone_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="👌"
+        android:textSize="32sp"
+        android:tint="@color/tone_default"
+        app:layout_constraintEnd_toStartOf="@+id/light_tone_text"
+        app:layout_constraintHorizontal_bias="0.5"
+        app:layout_constraintHorizontal_chainStyle="packed"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/color_change_circle" />
+
+    <TextView
         android:id="@+id/light_image_view"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginStart="24dp"
         android:layout_marginTop="16dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginBottom="16dp"
+        android:layout_marginEnd="24dp"
+        android:text="👌🏻"
+        android:textSize="32sp"
         android:tint="@color/tone_light"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/medium_light_image_view"
+        app:layout_constraintEnd_toStartOf="@+id/medium_light_text"
         app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/default_image_view"
+        app:layout_constraintStart_toEndOf="@+id/default_tone_text"
         app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/color_change_circle" />
+        app:srcCompat="@drawable/color_change_circle"
+        tools:text="👌" />
 
-    <ImageView
+    <TextView
         android:id="@+id/medium_light_image_view"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="16dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginBottom="16dp"
+        android:text="👌🏼"
+        android:textSize="32sp"
         android:tint="@color/tone_medium_light"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/medium_image_view"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/light_image_view"
+        app:layout_constraintStart_toEndOf="@+id/light_tone_text"
         app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/color_change_circle" />
+        app:srcCompat="@drawable/color_change_circle"
+        tools:text="👌" />
 
-    <ImageView
+    <TextView
         android:id="@+id/medium_image_view"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
-        android:layout_marginEnd="8dp"
+        android:layout_marginTop="8dp"
         android:layout_marginBottom="16dp"
+        android:text="👌🏽"
+        android:textSize="32sp"
         android:tint="@color/tone_medium"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/medium_dark_image_view"
-        app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/medium_light_image_view"
-        app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/color_change_circle" />
+        app:layout_constraintEnd_toStartOf="@+id/medium_dark_tone_text"
+        app:layout_constraintHorizontal_chainStyle="packed"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/default_tone_text"
+        app:srcCompat="@drawable/color_change_circle"
+        tools:text="👌" />
 
-    <ImageView
+    <TextView
         android:id="@+id/medium_dark_image_view"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
-        android:layout_marginEnd="8dp"
+        android:layout_marginStart="24dp"
+        android:layout_marginTop="8dp"
+        android:layout_marginEnd="24dp"
         android:layout_marginBottom="16dp"
+        android:text="👌🏾"
+        android:textSize="32sp"
         android:tint="@color/tone_medium_dark"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/dark_image_view"
+        app:layout_constraintEnd_toStartOf="@+id/dark_tone_text"
         app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toEndOf="@+id/medium_image_view"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0.0"
-        app:srcCompat="@drawable/color_change_circle" />
+        app:layout_constraintTop_toBottomOf="@+id/light_tone_text"
+        app:srcCompat="@drawable/color_change_circle"
+        tools:text="👌" />
 
-    <ImageView
+    <TextView
         android:id="@+id/dark_image_view"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
-        android:layout_marginEnd="8dp"
+        android:layout_marginTop="8dp"
         android:layout_marginBottom="16dp"
+        android:text="👌🏿"
+        android:textSize="32sp"
         android:tint="@color/tone_dark"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/medium_dark_image_view"
-        app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/color_change_circle" />
+        app:layout_constraintStart_toEndOf="@+id/medium_dark_tone_text"
+        app:layout_constraintTop_toBottomOf="@+id/medium_light_text"
+        app:srcCompat="@drawable/color_change_circle"
+        tools:text="👌" />
 
-    <ImageView
-        android:id="@+id/default_image_view"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
-        android:layout_marginTop="16dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginBottom="16dp"
-        android:tint="@color/tone_default"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/light_image_view"
-        app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/color_change_circle" />
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file

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

+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="Dialog" parent="Theme.AppCompat.Light.Dialog.Alert">
+        <item name="android:windowMinWidthMajor">80%</item>
+        <item name="android:windowMinWidthMinor">80%</item>
+    </style>
+</resources>
\ No newline at end of file