Search
Sunday 22 October 2017
  • :
  • :

How to Integrate Emoji Keyboard In Android

Emoji keyboard is the keyboard for android which allow you to input Emoji icons anywhere in a convenient way. Emoji icons are pictorial representation of emotions. They are mostly used in conversation to show emotions to others. In android there are lots of application in market which are using the emoji icons. These application supports chat features for using emoji icons. For example WhatsApp, SnapChat etc. Most ot the applications which has chat feature, will also have emoji keyboard.

There are three ways to use emoji keyboard in android application.

  • One is some android device comes with default emoji keyboard all we need to do is to enable it from Settings > Language And Inputs > Default and choosing the keyboard we want to use. If you have Android 4.4 or higher, the standard Google keyboard has an emoji option just type a word, such as “smile” to see the corresponding emoji.
  • Second is If your device didn’t come with a keyboard that has built-in emojis, you can download third-party keyboards that have this integrated.
  • Third is integrating emoji keyboard using external library which enables the keyboard only in our application by using third party external library.

Here in this example we will use external library by Hani Al-momani named SuperNova-Emoji to use emoji keyboard in our application. Android developers India will help you with a simple example to display the usage of emoji keyboard in application.

Dependency:

For using emoji keyboard we will need external dependencies which will allow us to use it’s emoji keyboard in our application. So for using emoji we will use supernova-emoji-library in our application. Below is our gradle file look like:

build.gradle :

repositories {
    maven { url "https://dl.bintray.com/hani-momanii/maven"}
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'hani.momanii.supernova_emoji_library:supernova-emoji-library:0.0.2'
}

We have used repositories in our application because this library is available from maven repositories. Our application will download this library from maven repository by using url that we have entered. After that for using this library we have provided the repository path in dependencies section in our gradle file to make all the features of this library available to use in our application.

Design:

Now that we have added the dependencies for using emoji keyboard, next we will use the custom emoji EditText that is provided by this library. Below is our layout file for main activity.

layout/activity_main.xml:

<RelativeLayout
    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/rl_root"
    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="com.example.emojiexample.MainActivity">
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/img_emoji_btn"
        android:src="@mipmap/ic_launcher"/>
    <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText
        android:id="@+id/edt_emoji"
        android:hint="Type emoji"
        app:emojiconSize="28sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/img_emoji_btn"/>
</RelativeLayout>

As we can see that we have added an ImageView in our layout file which is used to toggle the emoji keyboard and default text keyboard in our application. Below that we have added <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText> which is the custom EditText provided by the external library that we have included in our application. It is created by extending android’s default EditText view. We have added the parameter app:emojiconsize which is used to specify the size of our emoji icons that will be displayed in EditText.

Java Files:

After adding dependencies it is very easy to use emoji keyboard in our main activity. We just need to take a reference of the EditText provided by the library. We will use some methods also from this library. So below is full implementation of our main activity.

MainActivity.java :

public class MainActivity extends AppCompatActivity {
    EmojiconEditText etEmoji;
    ImageView imgEmojiBtn;
    RelativeLayout rlRootView;
    EmojIconActions emojAction;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        etEmoji = (EmojiconEditText) findViewById(R.id.edt_emoji);
        imgEmojiBtn = (ImageView) findViewById(R.id.img_emoji_btn);
        rlRootView = (RelativeLayout) findViewById(R.id.rl_root);
        emojAction = new EmojIconActions(this, rlRootView, etEmoji, imgEmojiBtn);
        emojAction.ShowEmojIcon();
        emojAction.setIconsIds(R.drawable.ic_action_keyboard,R.drawable.smiley);
        emojAction.setKeyboardListener(new EmojIconActions.KeyboardListener() {
            @Override
            public void onKeyboardOpen() {
            }
            @Override
            public void onKeyboardClose() {
            }
        });
    }
}

Now coming from top of code file we have added references for the views that we have implemented in our layout file. We have put the reference of class called EmojIconAction which is provided by the external library. This class will provide all the methods and listeners that are required to use emoji icons in application.

Coming from onCreate() method we have created the object of class EmojIconAction which accepts four parameters , First is Context to get the reference of activity, Second is View parameter which is required to assign root view of entire screen to open the emoji keyboard layout within root view of application. Third parameter is EmojiconEditText to open emoji keyboard and type emoji icons in this EditText. It looks same as android’s default EditText. Fourth parameter is ImageView to toggle between emoji keyboard and default android keyboard.

In next statement we have used the method ShowEmojIcon() to display the emoji keyboard from the EmojIconAction class by adding all required parameters by creating the object of this class. Next we have used the method called setIconIds(…) which will take the references of drawable resource to display the icons in ImageView that we have put in our layout file for toggle between emoji keyboard and default keyboard. After that we have added the listener called setKeyboardListener(…) which will open the emoji keyboard when clicking on EditText. This listener contains two overridden methods called onKeyboardOpen() and onKeyboardClosed(). We can put our additional actions to take in these method when keyboard is opened or closed.

This emoji keyboard library contains lots of emoji icons of smiles, cartoons, sports etc same as chat applications available in the market. We can use any of the emoji icons in our application. This library also provides it’s default TextView to display emoji icons on screen. This might be helpful if we want to develop any chat application using this library.

Application Screens:

1 2

Thanks for reading. Hope you liked this tutorial from our professional android developers in India. What do you think about this topic? Leave your questions, comments, and/or thoughts below!



Vijay is a compulsive blogger who likes to educate like-minded people on various new technologies and trends. He works with Aegis SoftTech as a software developer and has been developing software for years. Stay Connected to him on Facebook and Google+.