Emojis ūüėõ are amazing way to express our feeling and deliver our thoughts that people with different languages can understand it. Any popular social network application provide you a set of Emojis. 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.

1. how to Integrate Emojis

Below is the syntax of a simple integration for Emojis Keyboard. The EmojiIconActions constructor accept four parameters, Context, RootView, EmojiconEditText, and ImageView. Usually passing the parent layout as Root View 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.

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

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" />

Integrate Emojis Keyboard in Android

2. Change default Toggle Icon

to switch 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);

Integrate Emojis Keyboard in Android

3. Use 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);

unless add XML attribute.

emojicon:emojiconUseSystemDefault="true"

4. Change Emojis Size

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

emojIcon.ShowEmojIcon(30);

add size in XML code.

emojicon:emojiconSize="28sp"

Integrate Emojis Keyboard in Android

5. Detect 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.e(TAG, "Keyboard is Opened!");
    }

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

6. Change Emoji Keyboard colors to match app theme

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

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

Integrate Emojis Keyboard in Android

7. Creating Project

1. Create a new project in Android Studio from File ‚áí New Project.

2. Open build.gradle located under app folder and add SuperNova-Emoji dependencies.

build.gradle

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

dependencies {
    implementation 'hani.momanii.supernova_emoji_library:supernova-emoji-library:0.0.2'
}

3. Add the below resources to your strings.xml, dimens.xml, colors.xml and style.xml respectively.

strings.xml

<resources>
    <string name="app_name">Emojis Keyboard</string>
</resources>

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

4. 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.

activity_main.xml

<?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=".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>

5. 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 com.codedecode.androidemojikeyboard;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
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 = findViewById(R.id.emoji_btn);
        submitButton = findViewById(R.id.submit_btn);
        mCheckBox = findViewById(R.id.use_system_default);
        emojiconEditText = findViewById(R.id.emojicon_edit_text);
        textView = 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 is Opened!");
            }

            @Override
            public void onKeyboardClose() {
                Log.e(TAG, "Keyboard is 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 the project and test the app. Here is the screenshot of the final product.

Integrate Emojis Keyboard in Android

Download Code

Happy Coding ūüėÄ