How to integrate Emojis keyboard (SuperNova-Emoji) into your Android application?

Nowadays, Emojis are an awesome way to express our feelings, thoughts etc. So that people with different languages can understand it. Every social network application will provide you a set of Emojis. So it is very important to have them in your applications.

So here, we show you how to integrate Emojis keyboard into your app easily by using SuperNovaEmoji library.

We can either use EmojiconTextView or EmojiconEditText for this. EmojiconEditText is an EditText with more custom attributes.

dependencies

{

//Supernova Emoji

  compile 'hani.momanii.supernova_emoji_library:supernova-emoji-library:0.0.2'
}

 1. Simple Integration

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

In xml layout, we can use EmojiconEditText instead of 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= "28 sp" />

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= "28 sp" />

 2. Change default Toggle Icon

For switching between normal keyboard and Emojis keyboard, you can call setIconsIds() method.

emojIcon.setIconsIds(R.drawable.ic_action_keyboard,R.drawable.smiley);

3. Using device default Emojis

SuperNova-Emoji allows you to use device emojis in a simple way.

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

xml attribute

emojicon:emojiconUseSystemDefault="true"

4. Changing Emojis size

We can change the size of the emoji by changing the size of the text.

textView.setEmojiconSize(30);

5. Changing the Emoji keyboard color to match your app theme

You can set three colors to the Emoji keyboard.

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

6. Sample App

Now we will create a sample 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 "http://dl.bintray.com/hani-momanii/maven"}

}

dependencies
 {

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

package info.androidhive.emojis;

3. Open your main activity activity_main.xml and write the codes for emojiconTextView and emojiconEditText which we have already mentioned.

or follow this below example

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="com.techaxiom.supernovaemoji.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.

com.techaxiom.supernovaemoji;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import andriod.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 CopoundButton.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);
}
});
}
}

5. Test and run the app

 

PS : Check out SuperNova-emoji github repository  :  https://github.com/hani-momanii/SuperNova-Emoji