How to Integrate Emojis Keyboard in Android App

How to Integrate Emojis Keyboard in Android App

Welcome folks I am back with another blog post. In this post we will be implementing Android Emojis Keyboard in our Android Application. Emojis play a very vital role in the success of many realtime chatting apps like Whatsapp, Facebook Messenger and Snapchat. So integrating them is quite easy with the library called SuperNova-Emoji library. We will be using this library in this tutorial. So let get’s started with the post.

 

To get started with the library you need to include it in the top level or project level build.gradle file of your Android project. Just add the following lines of code given below under repositories.

 

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

 

To get started with the library just copy paste the code under the dependencies section of the module build.gradle file of the app.

 

implementation 'com.github.hani-momanii:SuperNova-Emoji:1.1'

 

INTEGRATING EMOJIS KEYBOARD IN ANDROID APP

 

The first step is to create the layout of the android application. Just copy paste the following code in to the activity_main.xml file.

 

<?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:background="#ffffff">

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

    <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"
        android:imeOptions="actionSend"
        android:inputType="text"
        emojicon:emojiconSize="28sp"/>


    <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText
        android:id="@+id/emojicon_edit_text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/emojicon_edit_text"
        android:imeOptions="actionSend"
        android:inputType="text"
        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:lineSpacingExtra="17sp"
        android:text="Hello Emojis !"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="#000000"
        emojicon:emojiconAlignment="bottom"/>
</RelativeLayout>

 

 

After making the layout of the app we must also write code for the logic of the app so just copy paste the below code into the java file.

 

package com.codingshiksha.androidcaptcha;

import android.support.v7.app.AppCompatActivity;
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 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 {

    CheckBox mCheckBox;
    EmojiconEditText emojiconEditText, emojiconEditText2;
    EmojiconTextView textView;
    ImageView emojiButton;
    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);
        emojiButton = (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);
        emojiconEditText2 = (EmojiconEditText) findViewById(R.id.emojicon_edit_text2);
        textView = (EmojiconTextView) findViewById(R.id.textView);
        emojIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiButton);
        emojIcon.ShowEmojIcon();
        emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {
            @Override
            public void onKeyboardOpen() {
                Log.e("Keyboard", "open");
            }

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

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

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


}

 

 

 

 

 

As you can see whenever the user launches the app it receives the emojis keyboard with the default option of selecting the default emojis and also disabling that option and having the custom emojis in the keyboard. This is the functionality of emojis we have successfully implemented in our app.

 

Congratulations we are done implementing Emojis Keyboard in our Android App using the SuperNova Emojis Library. Thanks for reading the post and if you want to receive more tutorials like this please subscribe to the newsletter.

Leave a Reply

Close Menu