Introducing the New Emoji Picker Library in Android

Photo by Domingo Alvarez E on Unsplash

Emojis have become a part of our communucation through messages. Nearly everyone uses them nowadays. Android development team is also aware of this and they recently provided a Emoji Picker for Android. The library, let us implement a Emoji Picker in our app with just few lines of code. In this tutorial, we will learn how to implement a Emoji Picker in our app using Emoji Library.

Dependencies

without going any further, first we need to set our compileTarget sdk as 34. this is required due to emoji picker library.

android {
    ...
    compileSdkVersion 34
    ...
}

Now we need to add the library to our dependencies. we can do this by adding the following line to our app level build.gradlefile.

dependencies {
   implementation "androidx.emoji2:emojipicker:1.4.0"
}

Note that the version of the library may change depending on the time you are reading this tutorial. So, make sure to check the latest version of the library from here.

After adding the library, we need to sync our project. Everything should be fine now. Let’s move on to the next step.

Implementation

Lets continue by adding a TextView and an EmojiPicker view into our screen.

 <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=":D"
        android:textSize="56sp"
        android:layout_marginTop="36dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

   <androidx.emoji2.emojipicker.EmojiPickerView
        android:id="@+id/emojiPickerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:emojiGridColumns="6"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
    />

Now when you run the app, it should layout the TextView and the EmojiPickerView as shown below.

Lets make things more interesting by adding a listener to emoji picker so that when we select an emoji, it will be displayed in the TextView. (I assume you are familiar with view binding and you are already enable it in your project)

binding.emojiPickerView.setOnEmojiPickedListener {
  binding.textView.text = it.emoji
}

Now when you run the app, you should be able to see the emoji picker and when you select an emoji, it should be displayed in the TextView.

New emoji versions are released every year, and we’ll keep the collection updated to include these new ones. These latest emojis will display flawlessly on more expensive phones. Newer emoji may appear as a little square box called tofu (☐) on lower-end smartphones. The library promises to find and get rid of them. By doing this, the library is made interoperable with various Android versions and devices. Thus, We can be sure that the selected emoji will be displayed wihout any errors, or in other words we will not see any tofu emoji.

Details

In more details, the library allows you to change the grid count of the picker view as you like. you can change the number of the colums by either from xml via “app:emojiGridColumns” attribute or via programmatically. Since the Xml version is already shown, I will show you how to do it programmatically. First lets add two buttons to change the column count when we click on them.

 <Button
        android:id="@+id/c_minus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C-"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintStart_toStartOf="parent"
   />

    <Button
        android:id="@+id/c_plus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C+"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView"
   />

After adding these lines, we should have something like this.

Next, implement the click listeners of the buttons as shown below.

binding.cMinus.setOnClickListener {
   binding.emojiPickerView.emojiGridColumns = binding.emojiPickerView.emojiGridColumns - 1
}

binding.cPlus.setOnClickListener {
    binding.emojiPickerView.emojiGridColumns = binding.emojiPickerView.emojiGridColumns + 1
 }

Now when you run the app, you should be able to change the column count of the emoji picker view by clicking on the buttons.

Additionally, It is possible to customize the EmojiPickerView. You just need to create your own style to override common theme attributes and apply the style to the EmojiPickerView. For instance, you can customize colors of the emoji picker.

 <style name="EmojiPickerViewStyle" >
   <item name="colorControlNormal">#665558</item>
   <item name="colorAccent">#0277BD</item>
 </style>

And then we just need to apply it to the emoji picker view.

 <androidx.emoji2.emojipicker.EmojiPickerView
        android:id="@+id/emojiPickerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:theme="@style/EmojiPickerViewStyle"
        app:emojiGridColumns="6"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
   />

Now when you run the app, you should be able to see the colors of the emoji picker view changed.

In this tutorial, we learned how to implement a Emoji Picker in our app using Emoji Library. Consider using it when you want to add a emoji picker to your app. I think they will be a great option if you are working on a chat app. I hope you enjoyed this tutorial. If you have any questions, please let me know in the comments below.

References

https://android-developers.googleblog.com/2023/08/introducing-jetpack-emoji-picker.html

Emoji Picker | Android Developers

LinkedIn

Love you all.

Stay tune for upcoming blogs.

Take care.