Replace skin tone TextViews for ImageViews with circle background

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

@@ -10,7 +10,6 @@ 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
@@ -22,6 +21,7 @@ import chat.rocket.android.emoji.internal.EmojiCategory
 import chat.rocket.android.emoji.internal.EmojiPagerAdapter
 import chat.rocket.android.emoji.internal.PREF_EMOJI_SKIN_TONE
 import com.google.android.material.tabs.TabLayout
+import kotlinx.android.synthetic.main.dialog_skin_tone_chooser.view.*
 import kotlinx.coroutines.experimental.android.UI
 import kotlinx.coroutines.experimental.launch
 
@@ -77,59 +77,50 @@ class EmojiKeyboardPopup(context: Context, view: View) : OverKeyboardPopupWindow
     }
 
     private fun showSkinToneChooser() {
-        val view = LayoutInflater.from(context).inflate(R.layout.color_select_popup, null)
+        val view = LayoutInflater.from(context).inflate(R.layout.dialog_skin_tone_chooser, null)
         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<TextView>(R.id.default_tone_text).also {
-            it.text = EmojiParser.parse(context, it.text)
-        }.setOnClickListener {
-            dialog.dismiss()
-            changeSkinTone(Fitzpatrick.Default)
-        }
+        with (view) {
+            image_view_default_tone.setOnClickListener {
+                dialog.dismiss()
+                changeSkinTone(Fitzpatrick.Default)
+            }
 
-        view.findViewById<TextView>(R.id.light_tone_text).also {
-            it.text = EmojiParser.parse(context, it.text)
-        }.setOnClickListener {
-            dialog.dismiss()
-            changeSkinTone(Fitzpatrick.LightTone)
-        }
+            image_view_light_tone.setOnClickListener {
+                dialog.dismiss()
+                changeSkinTone(Fitzpatrick.LightTone)
+            }
 
-        view.findViewById<TextView>(R.id.medium_light_text).also {
-            it.text = EmojiParser.parse(context, it.text)
-        }.setOnClickListener {
-            dialog.dismiss()
-            changeSkinTone(Fitzpatrick.MediumLightTone)
-        }
+            image_view_medium_light.setOnClickListener {
+                dialog.dismiss()
+                changeSkinTone(Fitzpatrick.MediumLightTone)
+            }
 
-        view.findViewById<TextView>(R.id.medium_tone_text).also {
-            it.text = EmojiParser.parse(context, it.text)
-        }.setOnClickListener {
-            dialog.dismiss()
-            changeSkinTone(Fitzpatrick.MediumTone)
-        }
+            image_view_medium_tone.setOnClickListener {
+                dialog.dismiss()
+                changeSkinTone(Fitzpatrick.MediumTone)
+            }
 
-        view.findViewById<TextView>(R.id.medium_dark_tone_text).also {
-            it.text = EmojiParser.parse(context, it.text)
-        }.setOnClickListener {
-            dialog.dismiss()
-            changeSkinTone(Fitzpatrick.MediumDarkTone)
-        }
+            image_view_medium_dark_tone.setOnClickListener {
+                dialog.dismiss()
+                changeSkinTone(Fitzpatrick.MediumDarkTone)
+            }
 
-        view.findViewById<TextView>(R.id.dark_tone_text).also {
-            it.text = EmojiParser.parse(context, it.text)
-        }.setOnClickListener {
-            dialog.dismiss()
-            changeSkinTone(Fitzpatrick.DarkTone)
+            image_view_dark_tone.setOnClickListener {
+                dialog.dismiss()
+                changeSkinTone(Fitzpatrick.DarkTone)
+            }
         }
+
         dialog.show()
     }
 
     private fun changeSkinTone(tone: Fitzpatrick) {
-        val drawable = ContextCompat.getDrawable(context, R.drawable.color_change_circle)!!
+        val drawable = ContextCompat.getDrawable(context, R.drawable.bg_skin_tone)!!
         val wrappedDrawable = DrawableCompat.wrap(drawable)
         DrawableCompat.setTint(wrappedDrawable, getFitzpatrickColor(tone))
         (changeColorView as ImageView).setImageDrawable(wrappedDrawable)

emoji/src/main/res/drawable/color_change_circle.xml → emoji/src/main/res/drawable/bg_skin_tone.xml

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
+
     <solid android:color="@color/tone_default" />
+
     <size
         android:width="24dp"
         android:height="24dp" />
-</shape>
+</shape>
\ No newline at end of file

emoji/src/main/res/layout/color_select_popup.xml → emoji/src/main/res/layout/dialog_skin_tone_chooser.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_width="match_parent"
     android:layout_height="wrap_content">
 
-    <TextView
-        android:id="@+id/default_tone_text"
+    <ImageView
+        android:id="@+id/image_view_default_tone"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginStart="24dp"
         android:layout_marginTop="16dp"
-        android:text="👌"
-        android:textSize="32sp"
+        android:layout_marginBottom="16dp"
         android:tint="@color/tone_default"
-        app:layout_constraintEnd_toStartOf="@+id/light_tone_text"
+        app:layout_constraintBottom_toTopOf="@+id/image_view_medium_tone"
+        app:layout_constraintEnd_toStartOf="@+id/image_view_light_tone"
         app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintHorizontal_chainStyle="packed"
+        app:layout_constraintHorizontal_chainStyle="spread_inside"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/color_change_circle" />
+        app:srcCompat="@drawable/bg_skin_tone" />
 
-    <TextView
-        android:id="@+id/light_tone_text"
+    <ImageView
+        android:id="@+id/image_view_light_tone"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginStart="24dp"
         android:layout_marginTop="16dp"
-        android:layout_marginEnd="24dp"
-        android:text="👌🏻"
-        android:textSize="32sp"
         android:tint="@color/tone_light"
-        app:layout_constraintEnd_toStartOf="@+id/medium_light_text"
+        app:layout_constraintEnd_toStartOf="@+id/image_view_medium_light"
         app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/default_tone_text"
+        app:layout_constraintStart_toEndOf="@+id/image_view_default_tone"
         app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/color_change_circle"
-        tools:text="👌" />
+        app:srcCompat="@drawable/bg_skin_tone" />
 
-    <TextView
-        android:id="@+id/medium_light_text"
+    <ImageView
+        android:id="@+id/image_view_medium_light"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="16dp"
-        android:text="👌🏼"
-        android:textSize="32sp"
+        android:layout_marginEnd="24dp"
         android:tint="@color/tone_medium_light"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/light_tone_text"
+        app:layout_constraintStart_toEndOf="@+id/image_view_light_tone"
         app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/color_change_circle"
-        tools:text="👌" />
+        app:srcCompat="@drawable/bg_skin_tone" />
 
-    <TextView
-        android:id="@+id/medium_tone_text"
+    <ImageView
+        android:id="@+id/image_view_medium_tone"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         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_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="👌" />
+        app:layout_constraintEnd_toStartOf="@+id/image_view_medium_dark_tone"
+        app:layout_constraintHorizontal_chainStyle="spread_inside"
+        app:layout_constraintStart_toStartOf="@+id/image_view_default_tone"
+        app:layout_constraintTop_toBottomOf="@+id/image_view_default_tone"
+        app:srcCompat="@drawable/bg_skin_tone" />
 
-    <TextView
-        android:id="@+id/medium_dark_tone_text"
+    <ImageView
+        android:id="@+id/image_view_medium_dark_tone"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        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_tone_text"
+        app:layout_constraintBottom_toBottomOf="@+id/image_view_medium_tone"
+        app:layout_constraintEnd_toStartOf="@+id/image_view_dark_tone"
         app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/medium_tone_text"
-        app:layout_constraintTop_toBottomOf="@+id/light_tone_text"
-        app:srcCompat="@drawable/color_change_circle"
-        tools:text="👌" />
+        app:layout_constraintStart_toEndOf="@+id/image_view_medium_tone"
+        app:layout_constraintTop_toTopOf="@+id/image_view_medium_tone"
+        app:srcCompat="@drawable/bg_skin_tone" />
 
-    <TextView
-        android:id="@+id/dark_tone_text"
+    <ImageView
+        android:id="@+id/image_view_dark_tone"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        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_constraintStart_toEndOf="@+id/medium_dark_tone_text"
-        app:layout_constraintTop_toBottomOf="@+id/medium_light_text"
-        app:srcCompat="@drawable/color_change_circle"
-        tools:text="👌" />
+        app:layout_constraintBottom_toBottomOf="@+id/image_view_medium_dark_tone"
+        app:layout_constraintEnd_toEndOf="@+id/image_view_medium_light"
+        app:layout_constraintStart_toEndOf="@+id/image_view_medium_dark_tone"
+        app:layout_constraintTop_toTopOf="@+id/image_view_medium_dark_tone"
+        app:srcCompat="@drawable/bg_skin_tone" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file

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

@@ -43,7 +43,7 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
-            app:srcCompat="@drawable/color_change_circle" />
+            app:srcCompat="@drawable/bg_skin_tone" />
 
         <ImageView
             android:id="@+id/emoji_search"