Emojis 😛 are amazing way to express our feeling and deliver our thoughts that people with deferent languages can understand it even children’s can understand it. Any popular social network application provide you a set of Emojis. Take a look at your last messages to see how much you are using them. It’s very important to have them in your applications. Android OS can render Emojis on Text fields.

This article explains how to integrate emojis keyboard into your app easily with many customization options using SuperNova-Emoji library.

Android supernova emojis keyboard

1. Simple Integration

Below is the syntax of a simple integration for Emojis Keyboard. The EmojiIconActions constructer accept four parameters, Context, RootView, EmojiconEditText, and ImageView. 
Usually passing the parent layout as RootView is the best option to show the Emojis Keyboard above all views.
 The EmojiconEditText is a EditText with more custom attributes to enable emojis rendering. 
And the last parameter the ImageView will used to switch between the normal keyboard and the emojis keyboard.

To display emojis in TextView we will use EmojiconTextView which is also a TextView with more custom attributes to enable emojis rendering



EmojIconActions emojIcon= new EmojIconActions(this, rootView, emojiconEditText, 
                            emojiImageView);


emojIcon.ShowEmojIcon();



If you want to use it in xml layout, we will use EmojiconEditText instead of the normal EditText.

<hani.momanii.supernova_emoji_library.Helper.EmojiconEditText
    android:id="@+id/emojicon_edit_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    emojicon:emojiconSize="28sp" />

And EmojiconTextView instead of TextView

<hani.momanii.supernova_emoji_library.Helper.EmojiconTextView
    android:id="@+id/emojicon_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    emojicon:emojiconSize="28sp"/>


android-supernova-emojis-keyboard

2. Change the default Toggle Icon

For switching between normal keyboard and emojis keyboard, 
you can call setIconsIds() method which takes two parameters, keyboard Icon ID and smiley Icon ID.

emojIcon.setIconsIds(R.drawable.ic_action_keyboard,R.drawable.smiley);
android-super-nova-emojis-keyboard

3. Using device default Emojis

SuperNove-Emoji allow you to use device emojis ins simple way, you need to set the boolean value of setUseSystemEmoji() and setUseSystemDefault() methods to TRUE in every EmojiconTextView and EmojiconEditText you use to display the emojis.

emojIcon.setUseSystemEmoji(true);
textView.setUseSystemDefault(true);

emojiconEditText.setUseSystemDefault(true);



Xml attribute:

emojicon:emojiconUseSystemDefault="true"


4. Changing Emojis Size

In order to change Emojis size, 
you have to change the text size by setting the value of setEmojiconSize() method.

textView.setEmojiconSize(30);

XML code


emojicon:emojiconSize="28sp"
android-emojis-keyboard-bigger-emojis

5. Detect When the Keyboard Opened or closed

SuperNova-Emoji let you detect when the user open the keyboard or close it to take some actions if needed like show some views when the keyboard open and hide it when the keyboard closed. Use the below code block to achieve this.

emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {
            @Override
            public void onKeyboardOpen() {
                Log.i("Keyboard","open");
            }

            @Override
            public void onKeyboardClose() {
                Log.i("Keyboard","close");
            }
        });

6. Changing the Emoji Keyboard colors to match your app theme

You can set three colors to the emojis keyboard by adding three parameters to the constructer which they are pressed tabs icons color, tabs color, and background color. 
We will use the same above constructer with the colors value.


EmojIconActions emojIcon= new EmojIconActions(this, rootView, emojiconEditText, emojiImageView,
"#F44336","#e8e8e8","#f4f4f4");


emojIcon.ShowEmojIcon();

android-emojis-keyboard-custom-color

7. Creating Sample App

Now we’ll create a simple app integrating the emojis to get a good understanding of it in a real app.

1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project.

2. Open build.gradle and add supernova emoji library. You need to add its maven repository too.

repositories {
    maven { url "https://dl.bintray.com/hani-momanii/maven"}
}

dependencies {
    .
    .
    .
    // Supernova Emoji
    compile 'hani.momanii.supernova_emoji_library:supernova-emoji-library:0.0.2'
}

3. Open the layout file your main activity activity_main.xml and add below code. Here you can see that I have added the emojiconEditText, emojiconTextView and the ImageView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:emojicon="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="info.androidhive.emojis.MainActivity">

    <ImageView
        android:id="@+id/emoji_btn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:padding="4dp"
        android:src="@drawable/ic_insert_emoticon_black_24dp" />

    <ImageView
        android:id="@+id/submit_btn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:padding="4dp"
        android:src="@android:drawable/ic_menu_send" />

    <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText
        android:id="@+id/emojicon_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@id/submit_btn"
        android:layout_toRightOf="@id/emoji_btn"
        emojicon:emojiconSize="28sp" />


    <CheckBox
        android:id="@+id/use_system_default"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:checked="false"
        android:text="Use System Default?" />

    <hani.momanii.supernova_emoji_library.Helper.EmojiconTextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="26dp"
        android:text="Hello Emojis!"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="#000000"
        emojicon:emojiconSize="45sp"
        emojicon:emojiconUseSystemDefault="true" />
</RelativeLayout>

4. Now open MainActivity.java and make the changes as mentioned below. This activity show the different scenarios of implementing the SuperNova-Emoji as explained above.

package info.androidhive.emojis;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ImageView;

import hani.momanii.supernova_emoji_library.Actions.EmojIconActions;
import hani.momanii.supernova_emoji_library.Helper.EmojiconEditText;
import hani.momanii.supernova_emoji_library.Helper.EmojiconTextView;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();
    CheckBox mCheckBox;
    EmojiconEditText emojiconEditText;
    EmojiconTextView textView;
    ImageView emojiImageView;
    ImageView submitButton;
    View rootView;
    EmojIconActions emojIcon;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rootView = findViewById(R.id.root_view);
        emojiImageView = (ImageView) findViewById(R.id.emoji_btn);
        submitButton = (ImageView) findViewById(R.id.submit_btn);
        mCheckBox = (CheckBox) findViewById(R.id.use_system_default);
        emojiconEditText = (EmojiconEditText) findViewById(R.id.emojicon_edit_text);
        textView = (EmojiconTextView) findViewById(R.id.textView);
        emojIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiImageView);
        emojIcon.ShowEmojIcon();
        emojIcon.setIconsIds(R.drawable.ic_action_keyboard, R.drawable.smiley);
        emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {
            @Override
            public void onKeyboardOpen() {
                Log.e(TAG, "Keyboard opened!");
            }

            @Override
            public void onKeyboardClose() {
                Log.e(TAG, "Keyboard closed");
            }
        });

        mCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                emojIcon.setUseSystemEmoji(b);
                textView.setUseSystemDefault(b);

            }
        });


        submitButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String newText = emojiconEditText.getText().toString();
                textView.setText(newText);
            }
        });
    }
}

Run And test the app.

android-integrating-emojis-keyboard
Subscribe
Notify of
guest
56 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
baha_odeh
baha_odeh
4 years ago

good start hani , nice tutorial

Nikolai Kanchev
Nikolai Kanchev
4 years ago

Very useful! Keep up the good work!

Lucky
Lucky
4 years ago

Mast

Ravi Tamada
4 years ago

Good article Hani.

Alan Kluz'em
Alan Kluz'em
4 years ago

Great work bro……………

slidenerd
4 years ago

pretty solid post man!

Tarun Voora
Tarun Voora
4 years ago

nice post..very helpful..

Harsh
Harsh
4 years ago

Hey Ravi, thanks for sharing this tutorial. I have one doubt related to Service. that is when my app closes my background service runs but when i removed it from my task manager then the background Service also Stops.So if i want to start that service then what i do for that. Because my push notification are also not receives with this kind of issue, Please Kindly help. 🙂

Ahana
Ahana
4 years ago

sir great tutorial, sir please tell me how i add extra emoji which i make i want to add extra emoji in emoji keyboard how i add please reply sooner

Riya Sharma
Riya Sharma
3 years ago

Hello Sir,I make this app emojis-keyboard-app but my emoji icons are not displayed when i press the emoji button and check the checkbox.
If you have any solution of my problem then please tel me.
And thanking you for this tutorial.

Ankesh Roy
Ankesh Roy
3 years ago

Hii sirr i want open this emoji keyboard in a dialog on click of button and on click of any emoji form dialog i want to display that over a image view or any layout how to do this please help me sir………

Sma Rahman
Sma Rahman
3 years ago

very nice tutorial. Its very helpful. But I have one doubt if I enter any emoji icon in edittext how can I get the unicode of the emoji ? Pls guide me.

ND
ND
2 years ago
Reply to  Sma Rahman

Hello Rahman,
Have you got any clue to get unicode for the emoji ?

tuneer mahatpure
tuneer mahatpure
3 years ago

sir, it’s good but i want to create my own emoji keyboard pls help me how to do it. Without using any other emoji keyboard library

CopyCat
CopyCat
1 month ago

Simple ,
Take any library modify it as per your requirement

Dang Vu
Dang Vu
3 years ago

It’s not working on DialogFragment.

Kumaravel Karunakaran
Kumaravel Karunakaran
2 years ago
Reply to  Dang Vu

use rootview as your activity xml file rootview

Mrityunjay Kumar
Mrityunjay Kumar
3 years ago

Can we add this code to our costom keyboard?

Jugalkishor
Jugalkishor
3 years ago

inputtext=”textShortMessage”

RickyBush_
RickyBush_
2 years ago

Did you ever make a keyboard with this? 🤔🤨🤪

Vikram Ujjainkar
Vikram Ujjainkar
3 years ago

fail to resolve ‘hani.momanii.supernova_emoji_library:supernova-emoji-library:0.0.2’
please help

Erick Ribeiro
Erick Ribeiro
3 years ago

You can user the lastest version

compile ‘com.github.hani-momanii:SuperNova-Emoji:1.1’

questions in:
https://github.com/hani-momanii/SuperNova-Emoji/issues/15

Hamza Minhaj Msm
Hamza Minhaj Msm
2 years ago
Reply to  Erick Ribeiro

Error is still..

Katta Prasanth Kumar
Katta Prasanth Kumar
3 years ago

Error:(29, 13) Failed to resolve: com.github.hani-momanii:SuperNova-Emoji:1.1
Show in FileShow in Project Structure dialog

Jyoti Sharma
Jyoti Sharma
3 years ago

Attempt to invoke virtual method ‘android.view.ViewTreeObserver android.view.View.getViewTreeObserver()’ on a null object reference
at hani.momanii.supernova_emoji_library.Helper.EmojiconsPopup.setSizeForSoftKeyboard

Hemant Kumar Gupta
Hemant Kumar Gupta
3 years ago

i have done qwerty keyboard and emoji keyboard and integrate done also but it doesn’t load on simulator please tell me what should i do for this?

Anaeligbo Joseph
Anaeligbo Joseph
3 years ago

I have been following your post for years now.. AndroidHive, you guys are doing a great job, although at previous times, I had issues with getting your tutorials workable but recently it has been a PLUS… Thanks

Ravi Tamada
3 years ago

Thanks for being a good follower of androidhive 🙂

Aviroop Sanyal
Aviroop Sanyal
3 years ago

absolutely

Pallavi S
Pallavi S
3 years ago

hello..this is indeed a great article..but the a icon in the 4th tab is showing a code instead of the icon as

Pallavi S
Pallavi S
3 years ago
Reply to  Pallavi S

comment image

Pallavi S
Pallavi S
3 years ago
Reply to  Pallavi S

Can you please sort this issue..Thanks in advance.

RickyBush_
RickyBush_
2 years ago
Reply to  Pallavi S

Hey did you make this into a system wide keyboard! 🤞

Rana
Rana
3 years ago

hello .please teach emoji keyboard without ” emojiconEditText ” .so we can add it to our custom keyboard .

Josee Naava
Josee Naava
3 years ago

If I want to save the emoji in the database as it would be

Manoz
Manoz
3 years ago

Thank u Man

Anoop Lakhera
Anoop Lakhera
3 years ago

dependency not sync in my project. do you have any solution plz do comments

Victory Christian
Victory Christian
2 years ago

Please how can i implement this usinge eclipse ide?

Ravi Tamada
2 years ago

Still using Eclipse?

Ziddi Khattak
Ziddi Khattak
2 years ago
Reply to  Ravi Tamada

first of all come out from eclipse bro, install android studio for better development 🙂

RickyBush_
RickyBush_
2 years ago

Hey has anyone made this into a system wide keyboard!! 🤔🤨

I like the look of gboard but not the way they show the emojis I love the way WhatsApp shows them and this looks a lot like it so I’m hoping someone has made one 😅🤩comment imagecomment image

RickyBush_
RickyBush_
2 years ago
Reply to  RickyBush_

😩😩😩😩

Hamza Minhaj Msm
Hamza Minhaj Msm
2 years ago

Failed to resolve: compile ‘com.github.hani-momanii:SuperNova-Emoji:0.0.2’
Failed to resolve: compile ‘com.github.hani-momanii:SuperNova-Emoji:1.1’

how to handle this issue??

Ravi Tamada
2 years ago

Have you added jitpack maven url to build.gradle?

repositories {
maven { url 'https://jitpack.io' }
}

Hamza Minhaj Msm
Hamza Minhaj Msm
2 years ago
Reply to  Ravi Tamada

Thanks allot. And specially thanks Hani Sir.

AQeel
AQeel
2 years ago

how can i add further emojis in this keyboard and what about defining logic of unicode

nitya
2 years ago

can i integrate with huawei keyboard ?

Bhavin Dhorajiya
Bhavin Dhorajiya
2 years ago

ravi,unable to compile due to not resolve symbol hani
plz guide me for same………..

Raviraj Desai
Raviraj Desai
2 years ago

Hey Ravi, thanks for sharing this tutorial, But foods icons (Strawbery,Banana) show opposite direction

Himanshi Thakur
Himanshi Thakur
1 year ago

Hi Hani ,
Thanks for sharing tutorial . I am facing this issue “Error: Program type already present: android.support.v4.app.FragmentTransitionCompat21$1” .
Please tell me how to resolve this issue .

szii
szii
1 year ago

emojIcon.setUseSystemEmoji(true);

If you use the above option, the Emoji keyboard will run first when you start the keyboard
Can I get my default keyboard to run first?

Appy Earn❄
Appy Earn❄
1 year ago

How can I use my own picture as emoji, I don’t mean sticker, I mean emoji, my picture would be small and tiny like an emoji.
How can I do that?

Usup Suparma
Usup Suparma
1 year ago
Reply to  Appy Earn❄

i same problem with you. how i can use my own picture?

Prasanna Kumar
Prasanna Kumar
1 year ago

by using this library my app size got increased 6 Mb more after removing this library it got reduced the size so without increasing size of the app is there any other choice to use emoji in keyboard

ganesh kavhar
10 months ago

there are lot of changes try to provide updated contents ,,,!!!

Rahee
Rahee
7 months ago

Hi,, Have you found the solution yet ?

56
0
Would love your thoughts, please comment.x
()
x