Adding emoji keyboard

Now our SDK sample app supports emoji. The sample app now ships with a library by which you can use emoji keyboard in your application.
To use the emoji keyboard, import the “EmojiKeyboard” library to your project and add it to the “project.properties” file of your project as follows:

Adding emoji keyboard to your project

Once this done, now you need to modify following things in order to use the emoji keyboard:

  1. Layout of your chat activity
  2. Textview of message
  3. Your chat activity

Modification for the chat layout
The basic structure of your chat layout has to be in following structure


 <LinearLayout
        android:id="@+id/linearLayoutFooter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" >

      . . .
      . . .
      //your chat UI
      <LinearLayout
            android:id="@+id/footer_for_emoticons"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:orientation="horizontal"
            android:visibility="gone" />

</LinearLayout >

The outer LinearLayout acts as a container in which you can place your EditText, send button, smiley button etc. At the end of LinearLayout you must place theLinearLayout where the emoji keyboard will be displayed.
You will find the example in activity_chat.xml layout of sample app.

Modification in TextView of message
Now next step is you need to modify the TextView you used to show the messages. Now you will replace your TextView with the EmojiTextView that came along with the library. So in layout the TextView will look like follows:

<com.inscripts.emoji.custom.EmojiTextView
            android:id="@+id/textViewMessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxWidth="250dp"
            android:text="Message"
            android:textColor="#000"
            android:textSize="16sp" />

Once you are using thie EmojiTextView, when you set the text , you will not use “setText()” method instead you have to use “setEmojiText()” method.

Modification in chat activity
First of all, you need to have instance of “SmileyKeyBoard”, which you can obtain as follows:

SmileyKeyBoard smiliKeyBoard = new SmileyKeyBoard();

Now you need to implement “EmojiClickInterface” interface to your activity, which will help to get the emoji you click from the keyboard. On implementing the interface you need to override the getClickedEmoji() method as follows:

@Override
public void getClickedEmoji(int gridviewItemPosition) {
	smiliKeyBoard.getClickedEmoji(gridviewItemPosition);
}

Now next step is to enable the smiley keyboard. The syntax for this is as follows:

enable(Activity activity, EmojiClickInterface clickListener, Integer emojiFooterId, EditText messagefield)

e.g

smiliKeyBoard.enable(this, this, R.id.footer_for_emoticons, messageField);

The description of the parameters is as follows:
Activity: Pass “this” to bind the keybord to the activity in which you wish to display the keyboard
EmojiClickInterface: Pass “this” as we have implemented the EmojiClickInterface interface to this activity
Integer emojiFooterId: The id of linearlayout which you have added as footer where the keyboard will be displayed
EditText: The object of EditText so that keyboard will be attached below it.

Next step is crucial as it helps to set the height of your keyboard, use the checkKeyboardHeight() function which determines the height.
The syntax for this function is as follows:

checkKeyboardHeight(View view)

In our sample app we have done it as follows:

RelativeLayout chatFooter = (RelativeLayout) findViewById(R.id.relativeBottomArea);
smiliKeyBoard.checkKeyboardHeight(chatFooter);

Here the relativeBottomArea is a container which holds the EditText, send button and smiley button.

Final step is to enable the Emoji keyboard which we have specified in the layout. You can do so as follows:

smiliKeyBoard.enableFooterView(messageField);

Pass the EditText object for which the emoji keyboard needs to be enabled.

Once this is done your keyboard is ready to use. Now whenever you wish to use the keyboard just use showKeyboard() function to make it visible. The syntax of this function is as follows:

showKeyboard(View parentLayout)

In our sample app this is done as follows:

smiliKeyBoard.showKeyboard(chatFooter)

The showkeyboard will toggle the visibility of keyboard.
By performing all above steps as it is your keyboard will look like as follows:

Sample emoji keyboard

If the height of keyboard is not as per your wish, then you can change the height of keyboard by using function setKeyBoardHeight(). The syntax for this is as follows:

setKeyBoardHeight(int height)

e.g

smiliKeyBoard.setKeyBoardHeight(640);

By using this function, keyboard will not calculate size on its own, it will follow the sizes you provide. If you wish to reset this behaviour pass “-1” to setKeyBoardHeight, so the keyboard will start calculating the size on its own.

Not finding what you need?

The CometChat team is here to help!