Android edittext keyboard with emojis

In all the famous chat applications like watsapp,hike it is possible to add emoji’s to the message while chatting. There will be a separate panel for selecting emoji’s when the keyboard for edittext pops up. In this tutorial we will learn how to implement emoji’s to edittext keyboard in android using a Supernova-Emoji library.

Steps

1. Create project in android studio
2. Configure gradle file by adding necessary libraries.
3. Implement the layout file
4. Develop code for adding emoji’s

Create project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Configure gradle file

Add the following repository above dependencies

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

And compile the following line inside the dependencies.

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

Implement Layout

A layout file will be automatically created while you are doing this as new project ,if not right click on res->layout folder and click on New -> Layout resource file. Now add the following code in to the XML file created .Now you need to replace the layout file with the following code. The layout file will contain a EditText,TextView and 2 button (one is for sending posting the content in edittext and displaying in TextView and the Other button is for showing the emoji panel on EditText keyboard).

<?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"
tools:context="com.codesfor.smiley.MainActivity">

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

<ImageView
android:id="@+id/btn_emoji"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@+id/btn_submit"
android:padding="5dp"
android:src="@drawable/emoji_people" />

<hani.momanii.supernova_emoji_library.Helper.EmojiconEditText
android:id="@+id/ed_emoji"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@id/btn_emoji"
emojicon:emojiconSize="28sp"
android:inputType="text"
android:imeOptions="actionSend" />

<hani.momanii.supernova_emoji_library.Helper.EmojiconTextView
android:id="@+id/tv_emoji"
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="Emojis Selected will be displayed here"
emojicon:emojiconAlignment="bottom" />

</RelativeLayout>

Develop Java code

Now simply add the following code to your java file.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
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 {

EmojiconEditText ed_emoji;
EmojiconTextView textView;
ImageView btn_emoji;
ImageView btn_submit;
View rootView;
EmojIconActions emojIcon;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);


rootView = findViewById(R.id.root_view);
btn_emoji = (ImageView) findViewById(R.id.btn_emoji);
btn_submit = (ImageView) findViewById(R.id.btn_submit);
ed_emoji = (EmojiconEditText) findViewById(R.id.ed_emoji);
textView = (EmojiconTextView) findViewById(R.id.tv_emoji);
emojIcon = new EmojIconActions(this, rootView, ed_emoji, btn_emoji);
emojIcon.closeEmojIcon();
emojIcon.ShowEmojIcon();

btn_submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
textView.setText(ed_emoji.getText().toString());
}
});

}

}

Output