Emoji and Sticker Keyboard

The emoji and sticker keyboards are now available as a part of the SDK and hence don not require any libraries to be added to the project as before.
This section provides you with a detailed guide on how to set up the emoji and sticker keyboards.

Emoji Keyboard

The first step to set up the emoji keyboard is to modify your layout file for your activity.

<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
      . . .
      . . .
        // layout for emoji keyboard
      <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 the a LinearLayout where the emoji keyboard will be displayed.

In the second step you need to modify the TextView you use to show the messages. The textviews need to be replaced by the EmojiTextView class. The implementation will look something like this:

<com.inscripts.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 these changes are done, instead of using the setText() method to set the text, you will have to use the setEmojiText() method.

Once these changes are done, you need to make changes to the activity file. 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)

For example:

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

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)

For Example:

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 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:

smiliKeyBoard.showKeyboard(chatFooter)

Calling the showKeyboard() method will display the keyboard to the user.

You can always have a look at our sample app source code to have a better understanding of the implementation of the emoji keyboard.

Sticker Keyboard

Similar to the emoji keyboard, to add the sticker keyboard, the UI file needs for the activity needs to be modified. You can also use the same layout used for the emoji keyboard.

<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
      . . .
      . . .
       // layout for sticker
      <LinearLayout
            android:id="@+id/footer_for_emoticons"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:orientation="horizontal"
            android:visibility="gone" />

</LinearLayout >

You can have a look at the activity_chat.xml in the sample app provided along with the SDK.

Once these changes are done, you need to make changes to your Activity class.

First of all, you need to have instance of “StickerKeyboard”, which you can obtain as follows:

StickerKeyboard stickerKeyboard = new StickerKeyboard();

Now you need to implement “StickerClickInterface” 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 getClickedSticker() method as follows:

@Override
public void getClickedSticker(int gridviewItemPosition) {
    stickerKeyboard.getClickedSticker(gridviewItemPosition);
}

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

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

For example:

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

Activity: Pass “this” to bind the keybord to the activity in which you wish to display the keyboard
StickerClickInterface : Pass “this” as we have implemented the StickerClickInterface 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:

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

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

stickerKeyboard.enableFooterView(messageField);

Pass the EditText object for which the sticker 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 the showKeyboard() function to make it visible. The syntax of this function is as follows:

stickerKeyboard.showKeyboard(chatFooter)

The showkeyboard will toggle the visibility of keyboard.

Please feel free to explore the source code of the sample app provided with the SDK for better understanding of the implementation.

  • Was this helpful?
  • Yes   No