feat(compose): Add a scrollable, themed emoji grid picker for custom reactions

The reaction bar's '+' now opens an androidx EmojiPickerView (categorised, scrollable, tracks its own recents) instead of a keyboard text field. Details:

- bump com.google.android.material 1.0.0 -> 1.6.1 and add emoji2-emojipicker, so the picker can use a Material3 theme that follows the app's day/night setting
- host it in a full-screen translucent dialog with a dim scrim and the drawer pinned to the bottom, giving the grid a bounded viewport that scrolls; a swipe starting above the drawer dismisses it (even if it travels into the drawer) while swipes within scroll
- copy the activity's system-bar colours onto the dialog so they don't change while the drawer is open
- guard isEmojiOnly against EmojiCompat not being loaded yet (a startup crash surfaced by the new dependency's init timing)

Author: guttermonk

build.gradle

@@ -20,7 +20,7 @@ buildscript {
     ext.junit_version = '4.12'
     ext.kotlin_version = '1.7.21'
     ext.lifecycle_version = '2.1.0'
-    ext.material_version = '1.0.0'
+    ext.material_version = '1.6.1'
     ext.mockito_version = '2.18.3'
     ext.moshi_version = '1.8.0'
     ext.okhttp3_version = '4.10.0'

presentation/build.gradle

@@ -120,6 +120,7 @@ dependencies {
     // androidx
     implementation "androidx.appcompat:appcompat:$androidx_appcompat_version"
     implementation "androidx.emoji2:emoji2-bundled:$androidx_emoji2_version"
+    implementation "androidx.emoji2:emoji2-emojipicker:$androidx_emoji2_version"
     implementation "androidx.constraintlayout:constraintlayout:$androidx_constraintlayout_version"
     implementation "androidx.core:core-ktx:$androidx_core_version"
     implementation "androidx.viewpager2:viewpager2:$androidx_viewpager_version"

presentation/src/main/java/com/moez/QKSMS/feature/compose/ComposeActivity.kt

@@ -22,6 +22,7 @@ import android.Manifest
 import android.animation.LayoutTransition
 import android.app.Activity
 import android.app.DatePickerDialog
+import android.app.Dialog
 import android.app.TimePickerDialog
 import android.content.ActivityNotFoundException
 import android.content.ContentValues
@@ -36,8 +37,6 @@ import android.provider.ContactsContract
 import android.provider.MediaStore
 import android.speech.RecognizerIntent
 import android.speech.SpeechRecognizer
-import android.text.Editable
-import android.text.TextWatcher
 import android.text.format.DateFormat
 import android.view.ContextMenu
 import android.view.DragEvent.ACTION_DRAG_ENDED
@@ -46,9 +45,10 @@ import android.view.DragEvent.ACTION_DROP
 import android.view.Gravity
 import android.view.Menu
 import android.view.MenuItem
+import android.view.MotionEvent
 import android.view.View
-import android.view.WindowManager
-import android.widget.EditText
+import android.view.ViewGroup
+import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.PopupWindow
 import android.widget.SeekBar
@@ -58,7 +58,9 @@ import androidx.appcompat.app.AlertDialog
 import androidx.constraintlayout.widget.ConstraintSet
 import androidx.core.app.ActivityCompat
 import androidx.core.content.ContextCompat
+import androidx.core.view.WindowInsetsControllerCompat
 import androidx.core.view.isVisible
+import androidx.emoji2.emojipicker.EmojiPickerView
 import androidx.lifecycle.ViewModelProvider
 import androidx.lifecycle.ViewModelProviders
 import com.google.android.flexbox.FlexboxLayout
@@ -101,7 +103,6 @@ import io.reactivex.schedulers.Schedulers
 import dev.octoshrimpy.quik.databinding.ComposeActivityBinding
 import io.reactivex.subjects.PublishSubject
 import io.reactivex.subjects.Subject
-import java.text.BreakIterator
 import java.text.SimpleDateFormat
 import java.util.Calendar
 import java.util.Date
@@ -873,46 +874,67 @@ class ComposeActivity : QkThemedActivity(), ComposeView {
     }
 
     private fun promptForCustomEmoji(messageId: Long) {
-        val input = EditText(this).apply {
-            hint = getString(R.string.compose_reaction_emoji_hint)
-            setSingleLine()
+        // Show a full emoji grid picker (categorised, tracks its own recents) rather than relying on
+        // the system keyboard's emoji tab, which can't be opened programmatically. EmojiPickerView
+        // needs a Material3 theme for its colours, and a plain fixed-height dialog (rather than a
+        // bottom sheet) gives its internal grid an unambiguous bounded viewport so it scrolls.
+        val dialog = Dialog(this, R.style.ReactionEmojiPickerTheme)
+        val drawerHeight = (resources.displayMetrics.heightPixels * 0.7).toInt()
+
+        val picker = EmojiPickerView(dialog.context).apply {
+            // opaque surface background since the window itself is transparent
+            setBackgroundColor(dialog.context.resolveThemeColor(com.google.android.material.R.attr.colorSurface))
+            setOnEmojiPickedListener { item ->
+                reactionSelectedIntent.onNext(messageId to item.emoji)
+                rememberRecentEmoji(item.emoji)
+                dialog.dismiss()
+            }
         }
 
-        val dialog = AlertDialog.Builder(this)
-            .setTitle(R.string.compose_reaction_custom_title)
-            .setView(input)
-            .setNegativeButton(R.string.button_cancel, null)
-            .create()
-
-        // pop the keyboard automatically so the user can type an emoji straight away
-        dialog.window?.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE)
-
-        // submit automatically as soon as an emoji is typed, then dismiss
-        input.addTextChangedListener(object : TextWatcher {
-            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
-            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
-            override fun afterTextChanged(s: Editable?) {
-                val emoji = firstEmoji(s?.toString() ?: "") ?: return
-                input.removeTextChangedListener(this)
-                reactionSelectedIntent.onNext(messageId to emoji)
-                rememberRecentEmoji(emoji)
-                dialog.dismiss()
+        // Full-screen root: a dim scrim with the drawer pinned to the bottom. A gesture that begins
+        // above the drawer is captured here (so it dismisses even if it travels down into the
+        // drawer), while a gesture that begins inside the drawer falls through to the grid so it
+        // scrolls.
+        val root = object : FrameLayout(dialog.context) {
+            override fun onInterceptTouchEvent(ev: MotionEvent): Boolean =
+                ev.actionMasked == MotionEvent.ACTION_DOWN && ev.y < picker.top
+
+            override fun onTouchEvent(ev: MotionEvent): Boolean {
+                if (ev.actionMasked == MotionEvent.ACTION_UP) dialog.dismiss()
+                return true
             }
-        })
+        }.apply {
+            setBackgroundColor(0x80000000.toInt())
+            addView(
+                picker,
+                FrameLayout.LayoutParams(
+                    FrameLayout.LayoutParams.MATCH_PARENT, drawerHeight, Gravity.BOTTOM
+                )
+            )
+        }
 
+        dialog.setContentView(
+            root,
+            ViewGroup.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+            )
+        )
+        dialog.window?.let { dialogWindow ->
+            dialogWindow.setLayout(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+            )
+            // The full-screen dialog window would otherwise recolour the system bars; copy the
+            // activity's bar colours and light/dark icon appearance so they look unchanged.
+            dialogWindow.statusBarColor = window.statusBarColor
+            dialogWindow.navigationBarColor = window.navigationBarColor
+            val activityBars = WindowInsetsControllerCompat(window, window.decorView)
+            val dialogBars = WindowInsetsControllerCompat(dialogWindow, dialogWindow.decorView)
+            dialogBars.isAppearanceLightStatusBars = activityBars.isAppearanceLightStatusBars
+            dialogBars.isAppearanceLightNavigationBars = activityBars.isAppearanceLightNavigationBars
+        }
         dialog.show()
-        input.requestFocus()
-    }
-
-    /** Returns the first grapheme cluster (which handles multi-codepoint emoji) of [text], or null */
-    private fun firstEmoji(text: String): String? {
-        val trimmed = text.trim()
-        if (trimmed.isEmpty()) return null
-
-        val iterator = BreakIterator.getCharacterInstance()
-        iterator.setText(trimmed)
-        val end = iterator.next()
-        return if (end == BreakIterator.DONE) trimmed else trimmed.substring(0, end)
     }
 
     override fun onCreateOptionsMenu(menu: Menu?): Boolean {

presentation/src/main/java/com/moez/QKSMS/feature/extensions/CharSequenceExtensions.kt

@@ -14,7 +14,18 @@ fun CharSequence.isEmojiOnly(considerWhitespace: Boolean = false): Boolean {
     if (cs.isEmpty())
         return false
 
-    return when (val spannable = EmojiCompat.get().process(
+    // EmojiCompat loads its font asynchronously; calling process() before it has finished loading
+    // throws "Not initialized yet". Until it's ready, treat the text as not emoji-only (it'll be
+    // re-evaluated once the view rebinds after loading completes).
+    val emojiCompat = try {
+        EmojiCompat.get()
+    } catch (e: IllegalStateException) {
+        return false
+    }
+    if (emojiCompat.loadState != EmojiCompat.LOAD_STATE_SUCCEEDED)
+        return false
+
+    return when (val spannable = emojiCompat.process(
         cs,
         0,
         (cs.length - 1),

presentation/src/main/res/values/themes.xml

@@ -84,4 +84,23 @@
     <style name="AppThemeDialog.Black" />
     <style name="PopupTheme.Black" />
 
+    <!--
+      Material3 (floating) dialog theme used only for the emoji reaction picker. EmojiPickerView
+      reads Material3 colour attributes, which the app's AppCompat themes don't provide. DayNight
+      follows the app's night-mode setting via the -night resource qualifier. A floating dialog
+      theme lets us pin the window to a fixed height so the emoji grid gets a bounded, scrollable
+      viewport.
+    -->
+    <style name="ReactionEmojiPickerTheme" parent="Theme.Material3.DayNight">
+        <!-- Full-screen translucent window: the emoji drawer is pinned to the bottom over a dim
+             scrim we draw ourselves, so a swipe that starts above the drawer and travels into it
+             still dismisses (the whole gesture stays in one view hierarchy). The base DayNight
+             theme keeps EmojiPickerView following the app's night mode. -->
+        <item name="android:windowIsTranslucent">true</item>
+        <item name="android:windowBackground">@android:color/transparent</item>
+        <item name="android:backgroundDimEnabled">false</item>
+        <item name="android:windowNoTitle">true</item>
+        <item name="android:windowCloseOnTouchOutside">true</item>
+    </style>
+
 </resources>