Tweak sizes and padding of various keyboard elements.

2026-02-28 21:57:17 +00:00 · 2021-07-13 19:37:30 -04:00
parent 55c69cd50a
commit 916006e664
23 changed files with 136 additions and 132 deletions
--- a/app/src/main/java/org/thoughtcrime/securesms/components/emoji/EmojiItemDecoration.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/emoji/EmojiItemDecoration.kt
@@ -10,9 +10,10 @@ import org.thoughtcrime.securesms.components.emoji.EmojiPageViewGridAdapter.Emoj
 import org.thoughtcrime.securesms.util.InsetItemDecoration
 import org.thoughtcrime.securesms.util.ViewUtil

-private val EDGE_LENGTH: Int = ViewUtil.dpToPx(7)
-private val HORIZONTAL_INSET: Int = ViewUtil.dpToPx(8)
-private val VERTICAL_INSET: Int = ViewUtil.dpToPx(8)
+private val EDGE_LENGTH: Int = ViewUtil.dpToPx(6)
+private val HORIZONTAL_INSET: Int = ViewUtil.dpToPx(6)
+private val EMOJI_VERTICAL_INSET: Int = ViewUtil.dpToPx(5)
+private val HEADER_VERTICAL_INSET: Int = ViewUtil.dpToPx(8)

 /**
 * Use super class to add insets to the emojis and use the [onDrawOver] to draw the variation
@@ -41,11 +42,12 @@ class EmojiItemDecoration(private val allowVariations: Boolean, private val vari

  private class SetInset : InsetItemDecoration.SetInset() {
    override fun setInset(outRect: Rect, view: View, parent: RecyclerView) {
-      val isFirstHeader = view.javaClass == AppCompatTextView::class.java && getPosition(view, parent) == 0
+      val isHeader = view.javaClass == AppCompatTextView::class.java
+
      outRect.left = HORIZONTAL_INSET
      outRect.right = HORIZONTAL_INSET
-      outRect.top = if (isFirstHeader) 0 else VERTICAL_INSET
-      outRect.bottom = VERTICAL_INSET
+      outRect.top = if (isHeader) HEADER_VERTICAL_INSET else EMOJI_VERTICAL_INSET
+      outRect.bottom = if (isHeader) 0 else EMOJI_VERTICAL_INSET
    }
  }
 }
--- a/app/src/main/java/org/thoughtcrime/securesms/components/emoji/EmojiPageView.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/emoji/EmojiPageView.java
@@ -19,11 +19,9 @@ import org.thoughtcrime.securesms.R;
 import org.thoughtcrime.securesms.components.emoji.EmojiPageViewGridAdapter.EmojiHeader;
 import org.thoughtcrime.securesms.components.emoji.EmojiPageViewGridAdapter.EmojiNoResultsModel;
 import org.thoughtcrime.securesms.components.emoji.EmojiPageViewGridAdapter.VariationSelectorListener;
-import org.thoughtcrime.securesms.emoji.EmojiCategory;
 import org.thoughtcrime.securesms.util.ContextUtil;
 import org.thoughtcrime.securesms.util.DrawableUtil;
 import org.thoughtcrime.securesms.util.MappingModel;
-import org.thoughtcrime.securesms.util.MappingModelList;
 import org.thoughtcrime.securesms.util.ViewUtil;

 import java.util.List;
@@ -31,7 +29,6 @@ import java.util.Optional;

 public class EmojiPageView extends RecyclerView implements VariationSelectorListener {

-  private EmojiPageModel                   model;
  private AdapterFactory                   adapterFactory;
  private LinearLayoutManager              layoutManager;
  private RecyclerView.OnItemTouchListener scrollDisabler;
@@ -125,45 +122,15 @@ public class EmojiPageView extends RecyclerView implements VariationSelectorList
  }

  public void onSelected() {
-    if (getAdapter() != null && (model == null || model.isDynamic())) {
+    if (getAdapter() != null) {
      getAdapter().notifyDataSetChanged();
    }
  }

-  public void setList(@NonNull List<MappingModel<?>> list) {
-    this.model = null;
+  public void setList(@NonNull List<MappingModel<?>> list, @Nullable Runnable commitCallback) {
    EmojiPageViewGridAdapter adapter = adapterFactory.create();
    setAdapter(adapter);
-    adapter.submitList(list);
-  }
-
-  public void setModel(@Nullable EmojiPageModel model) {
-    this.model = model;
-
-    EmojiPageViewGridAdapter adapter = adapterFactory.create();
-    setAdapter(adapter);
-    adapter.submitList(getMappingModelList());
-  }
-
-  public void bindSearchableAdapter(@Nullable EmojiPageModel model) {
-    this.model = model;
-
-    EmojiPageViewGridAdapter adapter = adapterFactory.create();
-    setAdapter(adapter);
-    adapter.submitList(getMappingModelList());
-  }
-
-  private @NonNull MappingModelList getMappingModelList() {
-    if (model != null) {
-      boolean emoticonPage = EmojiCategory.EMOTICONS.getKey().equals(model.getKey());
-      return model.getDisplayEmoji()
-                  .stream()
-                  .map(e -> emoticonPage ? new EmojiPageViewGridAdapter.EmojiTextModel(model.getKey(), e)
-                                         : new EmojiPageViewGridAdapter.EmojiModel(model.getKey(), e))
-                  .collect(MappingModelList.collect());
-    }
-
-    return new MappingModelList();
+    adapter.submitList(list, commitCallback);
  }

  @Override
--- a/app/src/main/java/org/thoughtcrime/securesms/keyboard/emoji/EmojiKeyboardPageFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/keyboard/emoji/EmojiKeyboardPageFragment.kt
@@ -85,7 +85,7 @@ class EmojiKeyboardPageFragment : Fragment(R.layout.keyboard_pager_emoji_page_fr
    }

    viewModel.pages.observe(viewLifecycleOwner) { pages ->
-      emojiPageView.setList(pages)
+      emojiPageView.setList(pages) { (emojiPageView.layoutManager as? LinearLayoutManager)?.scrollToPositionWithOffset(1, 0) }
    }

    viewModel.selectedKey.observe(viewLifecycleOwner) { updateCategoryTab(it) }
--- a/app/src/main/java/org/thoughtcrime/securesms/keyboard/emoji/search/EmojiSearchFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/keyboard/emoji/search/EmojiSearchFragment.kt
@@ -56,7 +56,7 @@ class EmojiSearchFragment : Fragment(R.layout.emoji_search_fragment), EmojiPageV
    searchBar.callbacks = SearchCallbacks()

    viewModel.emojiList.observe(viewLifecycleOwner) { results ->
-      emojiPageView.setList(results.emojiList)
+      emojiPageView.setList(results.emojiList, null)

      if (results.emojiList.isNotEmpty() || results.isRecents) {
        emojiPageView.visibility = View.VISIBLE
--- a/app/src/main/java/org/thoughtcrime/securesms/keyboard/sticker/StickerInsetSetter.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/keyboard/sticker/StickerInsetSetter.kt
@@ -0,0 +1,25 @@
+package org.thoughtcrime.securesms.keyboard.sticker
+
+import android.graphics.Rect
+import android.view.View
+import androidx.appcompat.widget.AppCompatTextView
+import androidx.recyclerview.widget.RecyclerView
+import org.thoughtcrime.securesms.util.InsetItemDecoration
+import org.thoughtcrime.securesms.util.ViewUtil
+
+private val horizontalInset: Int = ViewUtil.dpToPx(8)
+private val verticalInset: Int = ViewUtil.dpToPx(8)
+
+/**
+ * Set insets for sticker items in a [RecyclerView]. For use in [InsetItemDecoration].
+ */
+class StickerInsetSetter : InsetItemDecoration.SetInset() {
+  override fun setInset(outRect: Rect, view: View, parent: RecyclerView) {
+    val isHeader = view.javaClass == AppCompatTextView::class.java
+
+    outRect.left = horizontalInset
+    outRect.right = horizontalInset
+    outRect.top = verticalInset
+    outRect.bottom = if (isHeader) 0 else verticalInset
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/keyboard/sticker/StickerKeyboardPageFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/keyboard/sticker/StickerKeyboardPageFragment.kt
@@ -21,11 +21,14 @@ import org.thoughtcrime.securesms.stickers.StickerEventListener
 import org.thoughtcrime.securesms.stickers.StickerRolloverTouchListener
 import org.thoughtcrime.securesms.stickers.StickerRolloverTouchListener.RolloverStickerRetriever
 import org.thoughtcrime.securesms.util.DeviceProperties
+import org.thoughtcrime.securesms.util.InsetItemDecoration
 import org.thoughtcrime.securesms.util.MappingModel
+import org.thoughtcrime.securesms.util.MappingModelList
 import org.thoughtcrime.securesms.util.Throttler
 import org.whispersystems.libsignal.util.Pair
 import java.util.Optional
 import kotlin.math.abs
+import kotlin.math.max

 class StickerKeyboardPageFragment :
  LoggingFragment(R.layout.keyboard_pager_sticker_page_fragment),
@@ -48,6 +51,7 @@ class StickerKeyboardPageFragment :
  private val packIdSelectionOnScroll: UpdatePackSelectionOnScroll = UpdatePackSelectionOnScroll()
  private val observerThrottler: Throttler = Throttler(500)
  private val stickerThrottler: Throttler = Throttler(100)
+  private var firstLoad: Boolean = true

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
@@ -72,6 +76,7 @@ class StickerKeyboardPageFragment :
    stickerList.adapter = stickerListAdapter
    stickerList.addOnItemTouchListener(listTouchListener)
    stickerList.addOnScrollListener(packIdSelectionOnScroll)
+    stickerList.addItemDecoration(InsetItemDecoration(StickerInsetSetter()))

    stickerPacksRecycler = view.findViewById(R.id.sticker_packs_recycler)

@@ -106,13 +111,22 @@ class StickerKeyboardPageFragment :
    viewModel = ViewModelProviders.of(requireActivity(), StickerKeyboardPageViewModel.Factory(requireContext()))
      .get(StickerKeyboardPageViewModel::class.java)

-    viewModel.stickers.observe(viewLifecycleOwner, stickerListAdapter::submitList)
+    viewModel.stickers.observe(viewLifecycleOwner, this::updateStickerList)
    viewModel.packs.observe(viewLifecycleOwner, stickerPacksAdapter::submitList)
    viewModel.getSelectedPack().observe(viewLifecycleOwner, this::updateCategoryTab)

    viewModel.refreshStickers()
  }

+  private fun updateStickerList(stickers: MappingModelList) {
+    if (firstLoad) {
+      stickerListAdapter.submitList(stickers) { layoutManager.scrollToPositionWithOffset(1, 0) }
+      firstLoad = false
+    } else {
+      stickerListAdapter.submitList(stickers)
+    }
+  }
+
  private fun onTabSelected(stickerPack: KeyboardStickerPackListAdapter.StickerPack) {
    scrollTo(stickerPack.packRecord.packId)
    viewModel.selectPack(stickerPack.packRecord.packId)
@@ -188,9 +202,8 @@ class StickerKeyboardPageFragment :
  }

  private fun calculateColumnCount(@Px screenWidth: Int): Int {
-    val modifier = resources.getDimensionPixelOffset(R.dimen.sticker_page_item_padding).toFloat()
-    val divisor = resources.getDimensionPixelOffset(R.dimen.sticker_page_item_divisor).toFloat()
-    return ((screenWidth - modifier) / divisor).toInt()
+    val divisor = resources.getDimensionPixelOffset(R.dimen.sticker_page_item_width).toFloat() + resources.getDimensionPixelOffset(R.dimen.sticker_page_item_padding).toFloat()
+    return max(1, (screenWidth / divisor).toInt())
  }

  private inner class UpdatePackSelectionOnScroll : RecyclerView.OnScrollListener() {
--- a/app/src/main/java/org/thoughtcrime/securesms/keyboard/sticker/StickerSearchDialogFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/keyboard/sticker/StickerSearchDialogFragment.kt
@@ -16,7 +16,9 @@ import org.thoughtcrime.securesms.keyboard.findListener
 import org.thoughtcrime.securesms.mms.GlideApp
 import org.thoughtcrime.securesms.stickers.StickerEventListener
 import org.thoughtcrime.securesms.util.DeviceProperties
+import org.thoughtcrime.securesms.util.InsetItemDecoration
 import org.thoughtcrime.securesms.util.ViewUtil
+import kotlin.math.max

 /**
 * Search dialog for finding stickers.
@@ -50,6 +52,7 @@ class StickerSearchDialogFragment : DialogFragment(), KeyboardStickerListAdapter

    list.layoutManager = layoutManager
    list.adapter = adapter
+    list.addItemDecoration(InsetItemDecoration(StickerInsetSetter()))

    val viewModel: StickerSearchViewModel = ViewModelProviders.of(this, StickerSearchViewModel.Factory(requireContext())).get(StickerSearchViewModel::class.java)

@@ -80,9 +83,8 @@ class StickerSearchDialogFragment : DialogFragment(), KeyboardStickerListAdapter
  }

  private fun calculateColumnCount(@Px screenWidth: Int): Int {
-    val modifier = resources.getDimensionPixelOffset(R.dimen.sticker_page_item_padding).toFloat()
-    val divisor = resources.getDimensionPixelOffset(R.dimen.sticker_page_item_divisor).toFloat()
-    return ((screenWidth - modifier) / divisor).toInt()
+    val divisor = resources.getDimensionPixelOffset(R.dimen.sticker_page_item_width).toFloat() + resources.getDimensionPixelOffset(R.dimen.sticker_page_item_padding).toFloat()
+    return max(1, (screenWidth / divisor).toInt())
  }

  override fun onStickerClicked(sticker: KeyboardStickerListAdapter.Sticker) {
--- a/app/src/main/java/org/thoughtcrime/securesms/reactions/any/ReactWithAnyEmojiBottomSheetDialogFragment.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/reactions/any/ReactWithAnyEmojiBottomSheetDialogFragment.java
@@ -219,7 +219,7 @@ public final class ReactWithAnyEmojiBottomSheetDialogFragment extends BottomShee
      emojiPageView.addOnScrollListener(new TopAndBottomShadowHelper(requireView().findViewById(R.id.react_with_any_emoji_top_shadow),
                                                                     tabBar.findViewById(R.id.react_with_any_emoji_bottom_shadow)));

-      viewModel.getEmojiList().observe(getViewLifecycleOwner(), pages -> emojiPageView.setList(pages));
+      viewModel.getEmojiList().observe(getViewLifecycleOwner(), pages -> emojiPageView.setList(pages, null));
      viewModel.getCategories().observe(getViewLifecycleOwner(), categoriesAdapter::submitList);
      viewModel.getSelectedKey().observe(getViewLifecycleOwner(), key -> categoriesRecycler.post(() -> {
        int index = categoriesAdapter.indexOfFirst(EmojiKeyboardPageCategoryMappingModel.class, m -> m.getKey().equals(key));
--- a/app/src/main/res/drawable/keyboard_pager_fragment_category_selected.xml
+++ b/app/src/main/res/drawable/keyboard_pager_fragment_category_selected.xml
@@ -2,7 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <layer-list>
-            <item android:top="8dp" android:left="8dp" android:bottom="8dp" android:right="8dp">
+            <item android:top="6dp" android:left="6dp" android:bottom="6dp" android:right="6dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/signal_inverse_transparent_08" />
                    <corners android:radius="8dp" />
--- a/app/src/main/res/drawable/keyboard_pager_fragment_emoji_icon.xml
+++ b/app/src/main/res/drawable/keyboard_pager_fragment_emoji_icon.xml
@@ -2,9 +2,9 @@
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/keyboard_pager_fragment_selected" />
    <item
-        android:bottom="6dp"
+        android:bottom="4dp"
        android:drawable="@drawable/ic_emoji"
-        android:left="6dp"
-        android:right="6dp"
-        android:top="6dp" />
+        android:left="4dp"
+        android:right="4dp"
+        android:top="4dp" />
 </layer-list>
--- a/app/src/main/res/drawable/keyboard_pager_fragment_gif_icon.xml
+++ b/app/src/main/res/drawable/keyboard_pager_fragment_gif_icon.xml
@@ -2,9 +2,9 @@
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/keyboard_pager_fragment_selected" />
    <item
-        android:bottom="6dp"
+        android:bottom="4dp"
        android:drawable="@drawable/ic_gif_24"
-        android:left="6dp"
-        android:right="6dp"
-        android:top="6dp" />
+        android:left="4dp"
+        android:right="4dp"
+        android:top="4dp" />
 </layer-list>
--- a/app/src/main/res/drawable/keyboard_pager_fragment_sticker_icon.xml
+++ b/app/src/main/res/drawable/keyboard_pager_fragment_sticker_icon.xml
@@ -2,9 +2,9 @@
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/keyboard_pager_fragment_selected" />
    <item
-        android:bottom="6dp"
+        android:bottom="4dp"
        android:drawable="@drawable/ic_sticker_24"
-        android:left="6dp"
-        android:right="6dp"
-        android:top="6dp" />
+        android:left="4dp"
+        android:right="4dp"
+        android:top="4dp" />
 </layer-list>
--- a/app/src/main/res/layout/emoji_display_item_grid.xml
+++ b/app/src/main/res/layout/emoji_display_item_grid.xml
@@ -8,8 +8,8 @@

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/emoji_image"
-        android:layout_width="32dp"
-        android:layout_height="32dp"
+        android:layout_width="34dp"
+        android:layout_height="34dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
--- a/app/src/main/res/layout/emoji_grid_header.xml
+++ b/app/src/main/res/layout/emoji_grid_header.xml
@@ -6,8 +6,8 @@
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:gravity="center_vertical"
-    android:minHeight="48dp"
+    android:minHeight="36dp"
    android:singleLine="true"
-    android:textAppearance="@style/TextAppearance.Signal.Body1.Bold"
-    android:textColor="@color/signal_text_primary"
+    android:textAppearance="@style/TextAppearance.Signal.Body2.Bold"
+    android:textColor="@color/signal_text_hint"
    tools:text="@string/ReactWithAnyEmojiBottomSheetDialogFragment__activities" />
--- a/app/src/main/res/layout/gif_keyboard_page_fragment.xml
+++ b/app/src/main/res/layout/gif_keyboard_page_fragment.xml
@@ -35,7 +35,7 @@
    <LinearLayout
        android:id="@+id/gif_keyboard_packs_background"
        android:layout_width="match_parent"
-        android:layout_height="?actionBarSize"
+        android:layout_height="@dimen/keyboard_toolbar_height"
        android:layout_gravity="bottom"
        android:background="@drawable/keyboard_bottom_bar_background"
        android:gravity="center_vertical"
@@ -44,11 +44,11 @@

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/gif_keyboard_search"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
+            android:layout_width="@dimen/keyboard_toolbar_height"
+            android:layout_height="@dimen/keyboard_toolbar_height"
            android:background="?selectableItemBackground"
            android:contentDescription="@string/KeyboardPagerFragment_open_gif_search"
-            android:padding="13dp"
+            android:padding="11dp"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/ic_search_24"
            app:tint="@color/icon_tab_selector" />
--- a/app/src/main/res/layout/keyboard_pager_category_icon.xml
+++ b/app/src/main/res/layout/keyboard_pager_category_icon.xml
@@ -4,12 +4,12 @@
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
-    android:background="?selectableItemBackgroundBorderless">
+    android:background="?selectableItemBackground">

    <View
        android:id="@+id/category_icon_selected"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
+        android:layout_width="@dimen/keyboard_toolbar_height"
+        android:layout_height="@dimen/keyboard_toolbar_height"
        android:background="@drawable/keyboard_pager_fragment_category_selected" />

    <androidx.appcompat.widget.AppCompatImageView
--- a/app/src/main/res/layout/keyboard_pager_emoji_page_fragment.xml
+++ b/app/src/main/res/layout/keyboard_pager_emoji_page_fragment.xml
@@ -12,7 +12,8 @@
        android:layout_height="wrap_content"
        android:background="@color/signal_background_secondary"
        app:elevation="0dp"
-        app:expanded="false">
+        app:expanded="false"
+        tools:expanded="true">

        <org.thoughtcrime.securesms.keyboard.emoji.KeyboardPageSearchView
            android:id="@+id/emoji_keyboard_search_text"
@@ -20,11 +21,11 @@
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:paddingTop="8dp"
-            android:paddingBottom="8dp"
+            android:paddingBottom="4dp"
            app:click_only="true"
            app:layout_scrollFlags="scroll|snap"
-            app:search_icon_tint="@color/signal_icon_tint_tab_unselected"
            app:search_hint="@string/KeyboardPagerFragment_search_emoji"
+            app:search_icon_tint="@color/signal_icon_tint_tab_unselected"
            app:show_always="true" />

    </com.google.android.material.appbar.AppBarLayout>
@@ -34,15 +35,15 @@
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
-        android:paddingStart="8dp"
-        android:paddingEnd="8dp"
-        android:paddingBottom="?actionBarSize"
+        android:paddingStart="10dp"
+        android:paddingEnd="10dp"
+        android:paddingBottom="@dimen/keyboard_toolbar_height"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <LinearLayout
        android:id="@+id/emoji_keyboard_bottom_bar"
        android:layout_width="match_parent"
-        android:layout_height="?actionBarSize"
+        android:layout_height="@dimen/keyboard_toolbar_height"
        android:layout_gravity="bottom"
        android:background="@color/signal_background_secondary"
        android:gravity="center_vertical"
@@ -51,11 +52,11 @@

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/emoji_search"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
+            android:layout_width="@dimen/keyboard_toolbar_height"
+            android:layout_height="@dimen/keyboard_toolbar_height"
            android:background="?selectableItemBackground"
            android:contentDescription="@string/KeyboardPagerFragment_open_emoji_search"
-            android:padding="13dp"
+            android:padding="11dp"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/ic_search_24"
            app:tint="@color/icon_tab_selector" />
@@ -63,7 +64,7 @@
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/emoji_categories_recycler"
            android:layout_width="0dp"
-            android:layout_height="48dp"
+            android:layout_height="@dimen/keyboard_toolbar_height"
            android:layout_weight="1"
            android:orientation="horizontal"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
@@ -72,11 +73,11 @@

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/emoji_backspace"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
+            android:layout_width="@dimen/keyboard_toolbar_height"
+            android:layout_height="@dimen/keyboard_toolbar_height"
            android:background="?selectableItemBackground"
            android:contentDescription="@string/KeyboardPagerFragment_backspace"
-            android:padding="13dp"
+            android:padding="11dp"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/ic_backspace_24"
            app:tint="@color/icon_tab_selector" />
--- a/app/src/main/res/layout/keyboard_pager_fragment.xml
+++ b/app/src/main/res/layout/keyboard_pager_fragment.xml
@@ -8,14 +8,12 @@
    tools:layout_gravity="bottom"
    tools:maxHeight="339dp">

-    <ImageButton
+    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/keyboard_pager_fragment_emoji"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
-        android:layout_marginTop="2dp"
+        android:layout_width="@dimen/keyboard_toolbar_height"
+        android:layout_height="@dimen/keyboard_toolbar_height"
        android:layout_marginEnd="8dp"
-        android:layout_marginBottom="2dp"
-        android:background="?selectableItemBackgroundBorderless"
+        android:background="?selectableItemBackground"
        android:contentDescription="@string/KeyboardPagerFragment_emoji"
        android:padding="6dp"
        app:layout_constraintEnd_toStartOf="@id/keyboard_pager_fragment_sticker"
@@ -24,13 +22,11 @@
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/keyboard_pager_fragment_emoji_icon" />

-    <ImageButton
+    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/keyboard_pager_fragment_sticker"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
-        android:layout_marginTop="2dp"
-        android:layout_marginBottom="2dp"
-        android:background="?selectableItemBackgroundBorderless"
+        android:layout_width="@dimen/keyboard_toolbar_height"
+        android:layout_height="@dimen/keyboard_toolbar_height"
+        android:background="?selectableItemBackground"
        android:contentDescription="@string/KeyboardPagerFragment_stickers"
        android:padding="6dp"
        app:layout_constraintEnd_toStartOf="@id/keyboard_pager_fragment_gif"
@@ -39,14 +35,12 @@
        app:srcCompat="@drawable/keyboard_pager_fragment_sticker_icon"
        tools:selected="true" />

-    <ImageButton
+    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/keyboard_pager_fragment_gif"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
+        android:layout_width="@dimen/keyboard_toolbar_height"
+        android:layout_height="@dimen/keyboard_toolbar_height"
        android:layout_marginStart="8dp"
-        android:layout_marginTop="2dp"
-        android:layout_marginBottom="2dp"
-        android:background="?selectableItemBackgroundBorderless"
+        android:background="?selectableItemBackground"
        android:contentDescription="@string/KeyboardPagerFragment_gifs"
        android:padding="6dp"
        app:layout_constraintEnd_toEndOf="parent"
@@ -65,7 +59,6 @@
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
-        android:layout_marginTop="2dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/keyboard_pager_button_barrier" />

--- a/app/src/main/res/layout/keyboard_pager_sticker_page_fragment.xml
+++ b/app/src/main/res/layout/keyboard_pager_sticker_page_fragment.xml
@@ -21,7 +21,7 @@
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:paddingTop="8dp"
-            android:paddingBottom="8dp"
+            android:paddingBottom="4dp"
            app:click_only="true"
            app:layout_scrollFlags="scroll|snap"
            app:search_hint="@string/StickerSearchDialogFragment_search_stickers"
@@ -34,15 +34,15 @@
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
-        android:paddingStart="16dp"
-        android:paddingEnd="16dp"
-        android:paddingBottom="?actionBarSize"
+        android:paddingStart="8dp"
+        android:paddingEnd="8dp"
+        android:paddingBottom="@dimen/keyboard_toolbar_height"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <LinearLayout
        android:id="@+id/sticker_keyboard_packs_background"
        android:layout_width="match_parent"
-        android:layout_height="?actionBarSize"
+        android:layout_height="@dimen/keyboard_toolbar_height"
        android:layout_gravity="bottom"
        android:background="@color/signal_background_secondary"
        android:gravity="center_vertical"
@@ -51,11 +51,11 @@

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/sticker_search"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
+            android:layout_width="@dimen/keyboard_toolbar_height"
+            android:layout_height="@dimen/keyboard_toolbar_height"
            android:background="?selectableItemBackground"
            android:contentDescription="@string/KeyboardPagerFragment_open_sticker_search"
-            android:padding="13dp"
+            android:padding="11dp"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/ic_search_24"
            app:tint="@color/icon_tab_selector" />
@@ -63,7 +63,7 @@
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/sticker_packs_recycler"
            android:layout_width="0dp"
-            android:layout_height="48dp"
+            android:layout_height="@dimen/keyboard_toolbar_height"
            android:layout_weight="1"
            android:orientation="horizontal"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
@@ -72,11 +72,11 @@

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/sticker_manage"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
+            android:layout_width="@dimen/keyboard_toolbar_height"
+            android:layout_height="@dimen/keyboard_toolbar_height"
            android:background="?selectableItemBackground"
            android:contentDescription="@string/KeyboardPagerFragment_backspace"
-            android:padding="13dp"
+            android:padding="11dp"
            android:scaleType="fitCenter"
            app:srcCompat="@drawable/ic_plus_24"
            app:tint="@color/icon_tab_selector" />
--- a/app/src/main/res/layout/sticker_grid_header.xml
+++ b/app/src/main/res/layout/sticker_grid_header.xml
@@ -6,8 +6,8 @@
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:gravity="center_vertical"
-    android:minHeight="48dp"
+    android:minHeight="36dp"
    android:singleLine="true"
-    android:textAppearance="@style/TextAppearance.Signal.Body1.Bold"
-    android:textColor="@color/signal_text_primary"
+    android:textAppearance="@style/TextAppearance.Signal.Body2.Bold"
+    android:textColor="@color/signal_text_hint"
    tools:text="@string/ReactWithAnyEmojiBottomSheetDialogFragment__activities" />
--- a/app/src/main/res/layout/sticker_keyboard_page_list_item.xml
+++ b/app/src/main/res/layout/sticker_keyboard_page_list_item.xml
@@ -7,8 +7,8 @@

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/sticker_keyboard_page_image"
-        android:layout_width="88dp"
-        android:layout_height="88dp"
+        android:layout_width="@dimen/sticker_page_item_width"
+        android:layout_height="@dimen/sticker_page_item_width"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
--- a/app/src/main/res/layout/sticker_search_dialog_fragment.xml
+++ b/app/src/main/res/layout/sticker_search_dialog_fragment.xml
@@ -31,9 +31,9 @@
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:clipToPadding="false"
-        android:paddingStart="14dp"
+        android:paddingStart="8dp"
        android:paddingTop="12dp"
-        android:paddingEnd="14dp"
+        android:paddingEnd="8dp"
        android:scrollIndicators="top|bottom"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -6,7 +6,7 @@
    <dimen name="min_custom_keyboard_size">110dp</dimen>
    <dimen name="min_custom_keyboard_top_margin_portrait">170dp</dimen>
    <dimen name="min_custom_keyboard_top_margin_landscape_bubble">56dp</dimen>
-    <dimen name="emoji_drawer_item_width">48dp</dimen>
+    <dimen name="emoji_drawer_item_width">46dp</dimen>
    <dimen name="conversation_item_body_text_size">16sp</dimen>
    <dimen name="conversation_item_date_text_size">12sp</dimen>
    <dimen name="transport_selection_popup_width">200sp</dimen>
@@ -14,6 +14,7 @@
    <dimen name="transport_selection_popup_yoff">2dp</dimen>
    <dimen name="contact_photo_target_size">64dp</dimen>
    <dimen name="contact_selection_photo_size">50dp</dimen>
+    <dimen name="keyboard_toolbar_height">44dp</dimen>

    <dimen name="album_total_width">210dp</dimen>
    <dimen name="album_2_total_height">105dp</dimen>
@@ -87,8 +88,8 @@
    <dimen name="media_overview_detail_item_height">72dp</dimen>
    <dimen name="message_details_table_row_pad">8dp</dimen>

-    <dimen name="sticker_page_item_padding">8dp</dimen>
-    <dimen name="sticker_page_item_divisor">88dp</dimen>
+    <dimen name="sticker_page_item_padding">16dp</dimen>
+    <dimen name="sticker_page_item_width">72dp</dimen>
    <dimen name="sticker_page_item_multiplier">8dp</dimen>

    <dimen name="sticker_management_horizontal_margin">16dp</dimen>