From b3bf92a0ff521599e1565044528bcdabbdeab09f Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Thu, 7 Nov 2019 12:55:57 -0300
Subject: [PATCH 01/14] removed unneeded layouts and constraints

---
 .../fragment_bottom_sticker_emoji_dialog.xml  | 66 +++----------------
 app/src/main/res/layout/row_emoji.xml         | 22 +++----
 2 files changed, 19 insertions(+), 69 deletions(-)

diff --git a/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml b/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
index f7c6d0007..354d55202 100644
--- a/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
+++ b/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
@@ -1,63 +1,17 @@
 <?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"
+        />
+</RelativeLayout>
 
diff --git a/app/src/main/res/layout/row_emoji.xml b/app/src/main/res/layout/row_emoji.xml
index 065c82106..0c27bed1f 100644
--- a/app/src/main/res/layout/row_emoji.xml
+++ b/app/src/main/res/layout/row_emoji.xml
@@ -1,15 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.emoji.widget.EmojiTextView
+    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>
\ No newline at end of file
+    android:id="@+id/txtEmoji"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_margin="4dp"
+    android:padding="2dp"
+    android:textColor="#FFFFFF"
+    android:textSize="35sp"/>

From b008cfd2b51f319a03067cad454840f5dc3e53cd Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Thu, 7 Nov 2019 13:54:41 -0300
Subject: [PATCH 02/14] add back start/end margins to emojipicke rdialog

---
 .../main/res/layout/fragment_bottom_sticker_emoji_dialog.xml    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml b/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
index 354d55202..aab035d9b 100644
--- a/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
+++ b/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
@@ -12,6 +12,8 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
+        android:layout_marginEnd="16dp"
+        android:layout_marginStart="16dp"
         />
 </RelativeLayout>
 

From c2561cf85ad657345d534be93636efafc7675058 Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Thu, 7 Nov 2019 13:55:06 -0300
Subject: [PATCH 03/14] centers emoji in picker item

---
 app/src/main/res/layout/row_emoji.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/main/res/layout/row_emoji.xml b/app/src/main/res/layout/row_emoji.xml
index 0c27bed1f..3abaf965f 100644
--- a/app/src/main/res/layout/row_emoji.xml
+++ b/app/src/main/res/layout/row_emoji.xml
@@ -8,4 +8,5 @@
     android:layout_margin="4dp"
     android:padding="2dp"
     android:textColor="#FFFFFF"
+    android:textAlignment="center"
     android:textSize="35sp"/>

From 713824b212869498bdc7bbd25e62d8a3c61d8f1b Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 11:53:10 -0300
Subject: [PATCH 04/14] moved some constant dps to dimens

---
 .../res/layout/fragment_bottom_sticker_emoji_dialog.xml  | 4 ++--
 app/src/main/res/layout/row_emoji.xml                    | 9 ++++-----
 app/src/main/res/values/dimens.xml                       | 4 ++++
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml b/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
index aab035d9b..9893fcc0f 100644
--- a/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
+++ b/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
@@ -12,8 +12,8 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
-        android:layout_marginEnd="16dp"
-        android:layout_marginStart="16dp"
+        android:layout_marginEnd="@dimen/emoji_picker_whole_list_side_margin"
+        android:layout_marginStart="@dimen/emoji_picker_whole_list_side_margin"
         />
 </RelativeLayout>
 
diff --git a/app/src/main/res/layout/row_emoji.xml b/app/src/main/res/layout/row_emoji.xml
index 3abaf965f..3b4c04463 100644
--- a/app/src/main/res/layout/row_emoji.xml
+++ b/app/src/main/res/layout/row_emoji.xml
@@ -1,12 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.emoji.widget.EmojiTextView
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.emoji.widget.EmojiTextView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/txtEmoji"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:layout_margin="4dp"
-    android:padding="2dp"
+    android:layout_margin="@dimen/emoji_picker_item_margin"
+    android:padding="@dimen/emoji_picker_item_padding"
     android:textColor="#FFFFFF"
     android:textAlignment="center"
-    android:textSize="35sp"/>
+    />
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 1f67d013e..89c615ba6 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -39,6 +39,10 @@
     <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>
+    <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>

From 53d5779b0a4203278e3cadbb40cbe3278475005d Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 12:02:35 -0300
Subject: [PATCH 05/14] forgot to set initial fontSize on row_emoji

---
 app/src/main/res/layout/row_emoji.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/main/res/layout/row_emoji.xml b/app/src/main/res/layout/row_emoji.xml
index 3b4c04463..312457e9f 100644
--- a/app/src/main/res/layout/row_emoji.xml
+++ b/app/src/main/res/layout/row_emoji.xml
@@ -8,4 +8,4 @@
     android:padding="@dimen/emoji_picker_item_padding"
     android:textColor="#FFFFFF"
     android:textAlignment="center"
-    />
+    android:textSize="@dimen/emoji_picker_initial_text_size" />

From e6df0f3068d2f82b14273c35b98d8d2ca365419e Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 12:18:44 -0300
Subject: [PATCH 06/14] using TextView instead of
 androidx.emoji.widget.EmojiTextView to make use of
 app:autoSizeTextType=uniform for automatic font resizing

---
 app/src/main/res/layout/row_emoji.xml | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/main/res/layout/row_emoji.xml b/app/src/main/res/layout/row_emoji.xml
index 312457e9f..a4b458015 100644
--- a/app/src/main/res/layout/row_emoji.xml
+++ b/app/src/main/res/layout/row_emoji.xml
@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.emoji.widget.EmojiTextView 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"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/txtEmoji"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
+    android:layout_width="48dp"
+    android:layout_height="48dp"
     android:layout_margin="@dimen/emoji_picker_item_margin"
     android:padding="@dimen/emoji_picker_item_padding"
     android:textColor="#FFFFFF"
     android:textAlignment="center"
-    android:textSize="@dimen/emoji_picker_initial_text_size" />
+    app:autoSizeTextType="uniform" />

From 21430d8a747efe96b9da628c2e83db54e888ebd5 Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 12:27:10 -0300
Subject: [PATCH 07/14] using EmojiCompat callback to process emoji through
 latest compatibility Font

---
 .../compose/emoji/EmojiPickerFragment.kt      | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index 5819fc20b..4dfa9309a 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -8,6 +8,7 @@ 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
@@ -75,7 +76,26 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
         }
 
         override fun onBindViewHolder(holder: ViewHolder, position: Int) {
-            holder.txtEmojiRef.text = emojiList[position]
+            // 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 regularTextView = holder.txtEmojiRef
+                    if (regularTextView != null) {
+                        val compat = EmojiCompat.get()
+                        regularTextView.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 {

From 000e8c2d765004e2107341264473b30e520be4f4 Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 12:51:18 -0300
Subject: [PATCH 08/14] calculating emoji view width on the fly, fontSize gets
 adjusted automatically with autoSizeTextType='uniform'

---
 .idea/codeStyles/Project.xml                  | 67 ++++---------------
 .../compose/emoji/EmojiPickerFragment.kt      | 28 ++++++++
 app/src/main/res/layout/row_emoji.xml         |  4 +-
 app/src/main/res/values/dimens.xml            |  3 +
 4 files changed, 46 insertions(+), 56 deletions(-)

diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index ff49b3831..ffee00cd2 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -1,5 +1,8 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
+    <AndroidXmlCodeStyleSettings>
+      <option name="ARRANGEMENT_SETTINGS_MIGRATED_TO_191" value="true" />
+    </AndroidXmlCodeStyleSettings>
     <JavaCodeStyleSettings>
       <option name="FIELD_NAME_PREFIX" value="m" />
       <option name="STATIC_FIELD_NAME_PREFIX" value="s" />
@@ -59,6 +62,7 @@
               <match>
                 <AND>
                   <NAME>xmlns:android</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
@@ -69,6 +73,7 @@
               <match>
                 <AND>
                   <NAME>xmlns:.*</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
@@ -80,6 +85,7 @@
               <match>
                 <AND>
                   <NAME>.*:id</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
                 </AND>
               </match>
@@ -90,6 +96,7 @@
               <match>
                 <AND>
                   <NAME>.*:name</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
                 </AND>
               </match>
@@ -100,6 +107,7 @@
               <match>
                 <AND>
                   <NAME>name</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
@@ -110,6 +118,7 @@
               <match>
                 <AND>
                   <NAME>style</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
@@ -120,74 +129,23 @@
               <match>
                 <AND>
                   <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
               <order>BY_NAME</order>
             </rule>
           </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:layout_width</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-            </rule>
-          </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:layout_height</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-            </rule>
-          </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:layout_.*</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-              <order>BY_NAME</order>
-            </rule>
-          </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:width</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-              <order>BY_NAME</order>
-            </rule>
-          </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:height</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-              <order>BY_NAME</order>
-            </rule>
-          </section>
           <section>
             <rule>
               <match>
                 <AND>
                   <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
                 </AND>
               </match>
-              <order>BY_NAME</order>
+              <order>ANDROID_ATTRIBUTE_ORDER</order>
             </rule>
           </section>
           <section>
@@ -195,6 +153,7 @@
               <match>
                 <AND>
                   <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>.*</XML_NAMESPACE>
                 </AND>
               </match>
diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index 4dfa9309a..5e49f7286 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -14,6 +14,7 @@ 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.*
@@ -21,6 +22,7 @@ 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) {
@@ -45,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")
@@ -72,6 +93,13 @@ 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.getLayoutParams()
+                // Changes the height and width to the specified *pixels*
+                params.height = it
+                params.width = it
+                view.setLayoutParams(params)
+            }
             return ViewHolder(view)
         }
 
diff --git a/app/src/main/res/layout/row_emoji.xml b/app/src/main/res/layout/row_emoji.xml
index a4b458015..711ed4162 100644
--- a/app/src/main/res/layout/row_emoji.xml
+++ b/app/src/main/res/layout/row_emoji.xml
@@ -3,8 +3,8 @@
     xmlns:tools="http://schemas.android.com/tools"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/txtEmoji"
-    android:layout_width="48dp"
-    android:layout_height="48dp"
+    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"
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 89c615ba6..8f6d9e73c 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -40,6 +40,9 @@
 
     <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>

From dfd266f6119ab80776f6c3a4b41088059d4087ad Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 13:12:55 -0300
Subject: [PATCH 09/14] removed space

---
 .../automattic/portkey/compose/emoji/EmojiPickerFragment.kt   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index 5e49f7286..b121aff73 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -52,7 +52,7 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
         }
     }
 
-    private fun getEmojiViewWidthForScreenWidthAndColumns(screenWidth: Int, columns: Int) : Int {
+    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
@@ -143,6 +143,6 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
     }
 
     companion object {
-        const val COLUMNS = 6
+        const val COLUMNS = 12
     }
 }

From 6a024a8976722f0c7b1d63cdb545acac567f8e48 Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 13:14:46 -0300
Subject: [PATCH 10/14] fixed comment

---
 .../com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index b121aff73..9d35d2fdc 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -95,7 +95,7 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
             val view = LayoutInflater.from(parent.context).inflate(R.layout.row_emoji, parent, false)
             emojiViewWidth?.let {
                 val params = view.getLayoutParams()
-                // Changes the height and width to the specified *pixels*
+                // Changes the height and width to the specified dp
                 params.height = it
                 params.width = it
                 view.setLayoutParams(params)

From 6649adeb4abc2894c9ea401f3b5d4d89605c05c6 Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 13:15:59 -0300
Subject: [PATCH 11/14] removed commented code

---
 .../com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index 9d35d2fdc..06d64f76c 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -104,7 +104,6 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
         }
 
         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() {

From 498882424e32c1d92c14869c5b1e19112c27cb1d Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Fri, 8 Nov 2019 13:16:41 -0300
Subject: [PATCH 12/14] fixed columns number to 6

---
 .../com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index 06d64f76c..e92934c24 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -142,6 +142,6 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
     }
 
     companion object {
-        const val COLUMNS = 12
+        const val COLUMNS = 6
     }
 }

From 78ffcf34daf51995b8e4d8c76af4f06b37494c52 Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Tue, 19 Nov 2019 11:04:25 -0300
Subject: [PATCH 13/14] removed unnecessary temporary val and null check

---
 .../portkey/compose/emoji/EmojiPickerFragment.kt           | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index e92934c24..21d7a7172 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -109,11 +109,8 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
                 override fun onInitialized() {
                     EmojiCompat.get().unregisterInitCallback(this)
 
-                    val regularTextView = holder.txtEmojiRef
-                    if (regularTextView != null) {
-                        val compat = EmojiCompat.get()
-                        regularTextView.text = compat.process(emojiList[position])
-                    }
+                    val compat = EmojiCompat.get()
+                    holder.txtEmojiRef.text = compat.process(emojiList[position])
                 }
 
                 override fun onFailed(throwable: Throwable?) {

From ba15ab1a3e64e360dc7bf623a5d6ca2f0f185522 Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Tue, 19 Nov 2019 11:07:13 -0300
Subject: [PATCH 14/14] using kotlin property access syntax on view
 LayoutParams

---
 .../automattic/portkey/compose/emoji/EmojiPickerFragment.kt   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index 21d7a7172..8852cce64 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -94,11 +94,11 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
         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.getLayoutParams()
+                val params = view.layoutParams
                 // Changes the height and width to the specified dp
                 params.height = it
                 params.width = it
-                view.setLayoutParams(params)
+                view.layoutParams = params
             }
             return ViewHolder(view)
         }