EmojiPicker: autosize

app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt

@@ -8,18 +8,21 @@ import android.view.ViewGroup
 import android.widget.TextView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.content.ContextCompat
+import androidx.emoji.text.EmojiCompat
 import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import com.automattic.photoeditor.PhotoEditor
 import com.automattic.portkey.R
 import com.automattic.portkey.compose.hideStatusBar
+import com.automattic.portkey.util.getDisplayPixelWidth
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialogFragment
 import kotlinx.android.synthetic.main.fragment_bottom_sticker_emoji_dialog.view.*
 import kotlinx.android.synthetic.main.row_emoji.view.*
 
 class EmojiPickerFragment : BottomSheetDialogFragment() {
     private var listener: EmojiListener? = null
+    private var emojiViewWidth: Int? = null
 
     private val bottomSheetBehaviorCallback = object : BottomSheetBehavior.BottomSheetCallback() {
         override fun onStateChanged(bottomSheet: View, newState: Int) {
@@ -44,6 +47,25 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
     override fun onResume() {
         super.onResume()
         dialog?.window?.let { hideStatusBar(it) }
+        context?.let {
+            emojiViewWidth = getEmojiViewWidthForScreenWidthAndColumns(getDisplayPixelWidth(it), COLUMNS)
+        }
+    }
+
+    private fun getEmojiViewWidthForScreenWidthAndColumns(screenWidth: Int, columns: Int): Int {
+        // let's calculate the emoji view width here, given the dialog may be displayed while the user goes
+        // out to change the fontSize manually in Settings -> Accessibility
+        val itemPadding = resources.getDimension(R.dimen.emoji_picker_item_padding) / resources.displayMetrics.density
+        val itemMargin = resources.getDimension(R.dimen.emoji_picker_item_margin) / resources.displayMetrics.density
+        val startEndMargin =
+            resources.getDimension(R.dimen.emoji_picker_whole_list_side_margin) / resources.displayMetrics.density
+
+        val wholeListTakenSpace = (itemPadding * 2) + (itemMargin * 2) + (startEndMargin * 2)
+
+        val remainingScreenOperatingSpace = screenWidth - wholeListTakenSpace
+        val maxEmojiWidth = remainingScreenOperatingSpace / columns
+
+        return maxEmojiWidth.toInt()
     }
 
     @SuppressLint("RestrictedApi")
@@ -71,11 +93,33 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
     inner class EmojiAdapter(internal val emojiList: List<String>) : RecyclerView.Adapter<EmojiAdapter.ViewHolder>() {
         override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
             val view = LayoutInflater.from(parent.context).inflate(R.layout.row_emoji, parent, false)
+            emojiViewWidth?.let {
+                val params = view.layoutParams
+                // Changes the height and width to the specified dp
+                params.height = it
+                params.width = it
+                view.layoutParams = params
+            }
             return ViewHolder(view)
         }
 
         override fun onBindViewHolder(holder: ViewHolder, position: Int) {
-            holder.txtEmojiRef.text = emojiList[position]
+            // use EmojiCompat to process the string and make sure we have an emoji that can be rendered
+            EmojiCompat.get().registerInitCallback(object : EmojiCompat.InitCallback() {
+                override fun onInitialized() {
+                    EmojiCompat.get().unregisterInitCallback(this)
+
+                    val compat = EmojiCompat.get()
+                    holder.txtEmojiRef.text = compat.process(emojiList[position])
+                }
+
+                override fun onFailed(throwable: Throwable?) {
+                    EmojiCompat.get().unregisterInitCallback(this)
+
+                    // just fallback to setting the text
+                    holder.txtEmojiRef.text = emojiList[position]
+                }
+            })
         }
 
         override fun getItemCount(): Int {

app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml

@@ -1,63 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@android:color/transparent"
-    android:orientation="vertical">
+    android:background="@android:color/transparent">
 
-
-    <androidx.constraintlayout.widget.ConstraintLayout
+    <androidx.recyclerview.widget.RecyclerView
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        android:id="@+id/rvEmoji"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:layout_marginEnd="16dp"
-        android:layout_marginStart="16dp">
-
-        <TextView
-            android:id="@+id/txtClose"
-            android:layout_width="wrap_content"
-            android:layout_height="?attr/actionBarSize"
-            android:layout_marginStart="8dp"
-            android:gravity="center"
-            android:text="Close"
-            android:textAppearance="@style/TextAppearance.AppCompat.Large.Inverse"
-            android:visibility="gone"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <View
-            android:id="@+id/lineView"
-            android:layout_width="match_parent"
-            android:layout_height="2px"
-            android:background="@android:color/white"
-            android:visibility="gone"
-            app:layout_constraintTop_toBottomOf="@+id/txtClose" />
-
-        <androidx.recyclerview.widget.RecyclerView
-            android:id="@+id/rvEmoji"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_margin="8dp"
-            app:layout_behavior="@string/bottom_sheet_behavior"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/lineView" />
-
-        <TextView
-            android:id="@+id/txtDone"
-            android:layout_width="wrap_content"
-            android:layout_height="?attr/actionBarSize"
-            android:layout_marginEnd="8dp"
-            android:gravity="center"
-            android:text="Done"
-            android:textAppearance="@style/TextAppearance.AppCompat.Large.Inverse"
-            android:visibility="gone"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
-</LinearLayout>
+        android:layout_height="wrap_content"
+        android:layout_centerHorizontal="true"
+        android:layout_marginEnd="@dimen/emoji_picker_whole_list_side_margin"
+        android:layout_marginStart="@dimen/emoji_picker_whole_list_side_margin"
+        />
+</RelativeLayout>
 

app/src/main/res/layout/row_emoji.xml

@@ -1,15 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<TextView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content">
-
-    <androidx.emoji.widget.EmojiTextView
-        android:id="@+id/txtEmoji"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_margin="4dp"
-        android:padding="2dp"
-        android:textColor="#FFFFFF"
-        android:textSize="35sp"/>
-</LinearLayout>
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/txtEmoji"
+    android:layout_width="@dimen/emoji_picker_initial_size"
+    android:layout_height="@dimen/emoji_picker_initial_size"
+    android:layout_margin="@dimen/emoji_picker_item_margin"
+    android:padding="@dimen/emoji_picker_item_padding"
+    android:textColor="#FFFFFF"
+    android:textAlignment="center"
+    app:autoSizeTextType="uniform" />

app/src/main/res/values/dimens.xml

@@ -39,6 +39,13 @@
     <dimen name="save_button_total_height">40dp</dimen>
 
     <dimen name="editor_initial_text_size">40sp</dimen>
+    <dimen name="emoji_picker_initial_text_size">35sp</dimen>
+<!-- emoji_picker_initial_size can be anything, it needs be fixed but we are going to calculate it
+ on runtime later depending on screen size -->
+    <dimen name="emoji_picker_initial_size">48dp</dimen>
+    <dimen name="emoji_picker_item_padding">2dp</dimen>
+    <dimen name="emoji_picker_item_margin">4dp</dimen>
+    <dimen name="emoji_picker_whole_list_side_margin">16dp</dimen>
 
     <dimen name="gradient_top_height">72dp</dimen>
     <dimen name="gradient_bottom_height">152dp</dimen>