chore: update emoji picker ui [#WPB-14254] (#3786)

Co-authored-by: sergei.bakhtiarov <[email protected]>
wireapp · Jan 7, 2025 · eaa35af · eaa35af
1 parent 9d5c57c
commit eaa35af
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 14 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/ui/emoji/EmojiPicker.kt b/app/src/main/kotlin/com/wire/android/ui/emoji/EmojiPicker.kt
@@ -17,12 +17,13 @@
  */
 package com.wire.android.ui.emoji
 
-import android.widget.LinearLayout
+import android.view.View
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.platform.LocalContext
 import androidx.emoji2.emojipicker.EmojiPickerView
 import com.google.android.material.bottomsheet.BottomSheetDragHandleView
+import com.wire.android.R
 
 @Composable
 fun EmojiPickerBottomSheet(
@@ -33,21 +34,18 @@ fun EmojiPickerBottomSheet(
     val context = LocalContext.current
     val dialog = remember {
         HandleDraggableBottomSheetDialog(context).apply {
-            setContentView(
-                LinearLayout(context).apply {
-                    orientation = LinearLayout.VERTICAL
-                    val handle = BottomSheetDragHandleView(context)
+            setContentView(R.layout.view_emoji_picker).run {
+                findViewById<View>(R.id.emoji_picker_back_button)?.setOnClickListener {
+                    dismiss()
+                    onDismiss.invoke()
+                }
+                findViewById<EmojiPickerView>(R.id.emoji_picker)?.setOnEmojiPickedListener { emojiViewItem ->
+                    onEmojiSelected(emojiViewItem.emoji)
+                }
+                findViewById<BottomSheetDragHandleView>(R.id.handle)?.let { handle ->
                     getBehavior().dragHandle = handle
-                    addView(handle)
-                    addView(
-                        EmojiPickerView(context).apply {
-                            setOnEmojiPickedListener { emojiViewItem ->
-                                onEmojiSelected(emojiViewItem.emoji)
-                            }
-                        }
-                    )
                 }
-            )
+            }
             setOnCancelListener { onDismiss.invoke() }
         }
     }

diff --git a/app/src/main/res/layout/view_emoji_picker.xml b/app/src/main/res/layout/view_emoji_picker.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Wire
+  ~ Copyright (C) 2025 Wire Swiss GmbH
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program. If not, see http://www.gnu.org/licenses/.
+  -->
+<LinearLayout 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:orientation="vertical">
+
+    <com.google.android.material.bottomsheet.BottomSheetDragHandleView
+            android:id="@+id/handle"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/emoji_picker_header_color" />
+
+    <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/emoji_picker_header_color"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            android:paddingStart="16dp"
+            android:paddingBottom="16dp">
+
+        <ImageView
+                android:id="@+id/emoji_picker_back_button"
+                android:layout_width="16dp"
+                android:layout_height="16dp"
+                android:layout_marginEnd="16dp"
+                android:background="?selectableItemBackgroundBorderless"
+                android:src="@drawable/ic_arrow_left"
+                app:tint="@color/emoji_picker_icon_color" />
+
+        <TextView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:text="@string/emoji_picker_select_reaction"
+                android:textColor="@color/emoji_picker_text_color"
+                android:textFontWeight="500"
+                android:textSize="20sp" />
+
+    </LinearLayout>
+
+    <androidx.emoji2.emojipicker.EmojiPickerView
+            android:id="@+id/emoji_picker"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:theme="@style/EmojiPickerViewStyle"
+            app:emojiGridColumns="8" />
+</LinearLayout>
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
@@ -21,6 +21,9 @@
 
     <color name="background">#17181A</color>
     <color name="default_icon_color">#EDEFF0</color>
+    <color name="emoji_picker_icon_color">#C5C6CF</color>
+    <color name="emoji_picker_text_color">#C5C6CF</color>
+    <color name="emoji_picker_header_color">#17181A</color>
 
     <!-- Color palette for Composable Themes is in com.wire.android.ui.theme.WireColorPalette.kt -->
 

diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -21,6 +21,9 @@
 
     <color name="background">#EDEFF0</color>
     <color name="default_icon_color">#34373D</color>
+    <color name="emoji_picker_icon_color">#34373D</color>
+    <color name="emoji_picker_text_color">#34373D</color>
+    <color name="emoji_picker_header_color">#FFFFFF</color>
 
     <!-- Color palette for Composable Themes is in com.wire.android.ui.theme.WireColorPalette.kt -->
 

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -1674,4 +1674,5 @@ In group conversations, the group admin can overwrite this setting.</string>
     <string name="personal_to_team_migration_error_message_slow_network">Wire could not complete your team creation due to a slow internet connection.</string>
     <string name="personal_to_team_migration_error_message_unknown_error">Wire could not complete your team creation due to an unknown error.</string>
     <string name="reaction_sender_self">You</string>
+    <string name="emoji_picker_select_reaction">Select Reaction</string>
 </resources>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
@@ -26,6 +26,11 @@
         <item name="colorPrimary">@color/background</item>
     </style>
 
+    <style name="EmojiPickerViewStyle" >
+        <item name="colorControlNormal">@color/emoji_picker_icon_color</item>
+        <item name="android:textColorPrimary">@color/emoji_picker_text_color</item>
+    </style>
+
     <!-- This theme is only used as the splash screen -->
     <style name="AppTheme.SplashScreen" parent="Theme.SplashScreen">
         <item name="android:statusBarColor">@color/background</item>