Change button to ToggleButton.

Test: manual
Change-Id: Idc834a90d0be0f6083f66ff72510d6ddfc139630
diff --git a/emoji2/emoji2-emojipicker/build.gradle b/emoji2/emoji2-emojipicker/build.gradle
index 17422f1..be8163d 100644
--- a/emoji2/emoji2-emojipicker/build.gradle
+++ b/emoji2/emoji2-emojipicker/build.gradle
@@ -24,6 +24,7 @@
 
 dependencies {
     api(libs.kotlinStdlib)
+    implementation(libs.constraintLayout)
     implementation(libs.kotlinCoroutinesCore)
     implementation("androidx.core:core-ktx:1.8.0")
     implementation project(path: ':emoji2:emoji2')
diff --git a/emoji2/emoji2-emojipicker/samples/src/main/java/androidx/emoji2/emojipicker/samples/MainActivity.kt b/emoji2/emoji2-emojipicker/samples/src/main/java/androidx/emoji2/emojipicker/samples/MainActivity.kt
index dde4446..1447129 100644
--- a/emoji2/emoji2-emojipicker/samples/src/main/java/androidx/emoji2/emojipicker/samples/MainActivity.kt
+++ b/emoji2/emoji2-emojipicker/samples/src/main/java/androidx/emoji2/emojipicker/samples/MainActivity.kt
@@ -18,8 +18,8 @@
 
 import android.content.Context
 import android.os.Bundle
-import android.widget.Button
 import android.widget.EditText
+import android.widget.ToggleButton
 import androidx.appcompat.app.AppCompatActivity
 import androidx.emoji2.emojipicker.EmojiPickerView
 import androidx.emoji2.emojipicker.RecentEmojiProvider
@@ -35,10 +35,16 @@
         }
         view.setRecentEmojiProvider(CustomRecentEmojiProvider(applicationContext))
 
-        findViewById<Button>(R.id.button).setOnClickListener {
-            view.emojiGridColumns = 8
-            view.emojiGridRows = 8.3f
-        }
+        findViewById<ToggleButton>(R.id.button)
+            .setOnCheckedChangeListener { _, isChecked ->
+                if (isChecked) {
+                    view.emojiGridColumns = 8
+                    view.emojiGridRows = 8.3f
+                } else {
+                    view.emojiGridColumns = 9
+                    view.emojiGridRows = 15f
+                }
+            }
     }
 }
 
diff --git a/emoji2/emoji2-emojipicker/samples/src/main/res/layout-land/main.xml b/emoji2/emoji2-emojipicker/samples/src/main/res/layout-land/main.xml
index e55d888..41230cb 100644
--- a/emoji2/emoji2-emojipicker/samples/src/main/res/layout-land/main.xml
+++ b/emoji2/emoji2-emojipicker/samples/src/main/res/layout-land/main.xml
@@ -25,11 +25,12 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />
 
-    <Button
+    <ToggleButton
         android:id="@+id/button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:text="Change Layout" />
+        android:textOff="Display Larger Emojis"
+        android:textOn="Display Smaller Emojis" />
 
     <androidx.emoji2.emojipicker.EmojiPickerView
         android:id="@+id/emoji_picker"
diff --git a/emoji2/emoji2-emojipicker/samples/src/main/res/layout/main.xml b/emoji2/emoji2-emojipicker/samples/src/main/res/layout/main.xml
index 2270f92..fc424b5 100644
--- a/emoji2/emoji2-emojipicker/samples/src/main/res/layout/main.xml
+++ b/emoji2/emoji2-emojipicker/samples/src/main/res/layout/main.xml
@@ -25,11 +25,12 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />
 
-    <Button
+    <ToggleButton
         android:id="@+id/button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:text="Change Layout" />
+        android:textOff="Display Larger Emojis"
+        android:textOn="Display Smaller Emojis" />
 
     <androidx.emoji2.emojipicker.EmojiPickerView
         android:id="@+id/emoji_picker"
diff --git a/emoji2/emoji2-emojipicker/samples/src/main/res/values/styles.xml b/emoji2/emoji2-emojipicker/samples/src/main/res/values/styles.xml
index 35b4a46..89ce1c3 100644
--- a/emoji2/emoji2-emojipicker/samples/src/main/res/values/styles.xml
+++ b/emoji2/emoji2-emojipicker/samples/src/main/res/values/styles.xml
@@ -19,11 +19,11 @@
 
     <style name="MyPinkTheme" parent="Theme.AppCompat.DayNight" >
         <!-- The color for selected headers -->
-        <item name="colorAccent">#ffffff</item>
+        <item name="colorAccent">#696969</item>
         <!-- The color for unselected headers -->
-        <item name="colorControlNormal">#FF69B4</item>
+        <item name="colorControlNormal">#FFC0CB</item>
         <!-- The color for all text -->
-        <item name="android:textColorPrimary">#ffffff</item>
+        <item name="android:textColorPrimary">#696969</item>
         <!-- The color for variant popup background -->
         <item name="colorButtonNormal">#FFC0CB</item>
     </style>
diff --git a/emoji2/emoji2-emojipicker/src/androidTest/java/androidx/emoji2/emojipicker/EmojiPickerViewTest.kt b/emoji2/emoji2-emojipicker/src/androidTest/java/androidx/emoji2/emojipicker/EmojiPickerViewTest.kt
index 4774237..6244759 100644
--- a/emoji2/emoji2-emojipicker/src/androidTest/java/androidx/emoji2/emojipicker/EmojiPickerViewTest.kt
+++ b/emoji2/emoji2-emojipicker/src/androidTest/java/androidx/emoji2/emojipicker/EmojiPickerViewTest.kt
@@ -24,7 +24,6 @@
 import android.view.View.GONE
 import android.view.View.VISIBLE
 import android.view.ViewGroup
-import android.widget.FrameLayout
 import android.widget.ImageView
 import androidx.core.view.children
 import androidx.core.view.isVisible
@@ -97,7 +96,7 @@
             )!!
             // No variant indicator
             assertEquals(
-                (targetView.parent as FrameLayout).findViewById<ImageView>(
+                (targetView.parent.parent as ViewGroup).findViewById<ImageView>(
                     EmojiPickerViewR.id.variant_availability_indicator
                 ).visibility,
                 GONE
@@ -122,7 +121,7 @@
         val targetView = findViewByEmoji(view, NOSE_EMOJI)!!
         // Variant indicator visible
         assertEquals(
-            (targetView.parent as FrameLayout).findViewById<ImageView>(
+            (targetView.parent.parent as ViewGroup).findViewById<ImageView>(
                 EmojiPickerViewR.id.variant_availability_indicator
             ).visibility, VISIBLE
         )
@@ -229,7 +228,7 @@
             BoundedMatcher<RecyclerView.ViewHolder, EmojiViewHolder>(EmojiViewHolder::class.java) {
             override fun describeTo(description: Description) {}
             override fun matchesSafely(item: EmojiViewHolder) =
-                (item.itemView as FrameLayout)
+                (item.itemView as ViewGroup)
                     .findViewById<EmojiView>(EmojiPickerViewR.id.emoji_view)
                     .emoji == emoji
         }
diff --git a/emoji2/emoji2-emojipicker/src/main/java/androidx/emoji2/emojipicker/PopupViewHelper.kt b/emoji2/emoji2-emojipicker/src/main/java/androidx/emoji2/emojipicker/PopupViewHelper.kt
index f6e41bb..8038e48 100644
--- a/emoji2/emoji2-emojipicker/src/main/java/androidx/emoji2/emojipicker/PopupViewHelper.kt
+++ b/emoji2/emoji2-emojipicker/src/main/java/androidx/emoji2/emojipicker/PopupViewHelper.kt
@@ -7,8 +7,8 @@
 import android.view.LayoutInflater
 import android.view.View
 import android.view.View.OnClickListener
+import android.view.ViewGroup
 import android.view.accessibility.AccessibilityEvent
-import android.widget.FrameLayout
 import android.widget.GridLayout
 import androidx.core.content.ContextCompat
 
@@ -99,8 +99,8 @@
                     R.layout.emoji_view_holder,
                     null,
                     false
-                ) as FrameLayout).apply {
-                    (this.getChildAt(0) as EmojiView).apply {
+                ) as ViewGroup).apply {
+                    findViewById<EmojiView>(R.id.emoji_view).apply {
                         emoji = variants[it - 1]
                         setOnClickListener(clickListener)
                         if (it == 1) {
diff --git a/emoji2/emoji2-emojipicker/src/main/res/layout/emoji_view_holder.xml b/emoji2/emoji2-emojipicker/src/main/res/layout/emoji_view_holder.xml
index 5c64c9f..eec343d 100644
--- a/emoji2/emoji2-emojipicker/src/main/res/layout/emoji_view_holder.xml
+++ b/emoji2/emoji2-emojipicker/src/main/res/layout/emoji_view_holder.xml
@@ -14,24 +14,36 @@
   limitations under the License.
   -->
 
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="0dp"
     android:layout_height="0dp">
 
-    <androidx.emoji2.emojipicker.EmojiView
-        android:id="@+id/emoji_view"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:background="@drawable/ripple_emoji_view"
-        android:importantForAccessibility="yes"
-        android:textSize="30dp"
-        android:layout_margin="1dp" />
+    <FrameLayout
+        android:id="@+id/emoji_view_frame"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" >
+        <androidx.emoji2.emojipicker.EmojiView
+            android:id="@+id/emoji_view"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@drawable/ripple_emoji_view"
+            android:importantForAccessibility="yes"
+            android:textSize="30dp"
+            android:layout_margin="1dp" />
+    </FrameLayout>
     <ImageView
         android:id="@+id/variant_availability_indicator"
         android:visibility="gone"
         android:src="@drawable/variant_availability_indicator"
         android:layout_width="5dp"
         android:layout_height="5dp"
-        android:layout_gravity="bottom|end"
-        android:textColor="?android:attr/textColorPrimary" />
-</FrameLayout>
\ No newline at end of file
+        android:textColor="?android:attr/textColorPrimary"
+        app:layout_constraintEnd_toEndOf="@id/emoji_view_frame"
+        app:layout_constraintBottom_toBottomOf="@id/emoji_view_frame"/>
+</androidx.constraintlayout.widget.ConstraintLayout>