Adding sticker keyboard

Warning! This documentation is outdated. Please refer to our new documentation at docs.cometchat.com.

Warning! This documentation is outdated. Please refer to our new documentation at docs.cometchat.com.

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

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

Layout of your chat activity

Text view of message

Your chat activity

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

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 sticker keyboard will be displayed.
You will find the example in activity_chat.xml layout of sample app.

Modification in TextView of message
If you are using our emoji keyboard then use EmojiTextView, else you can use normal textview to show the stickers.

Modification in chat activity
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:

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 keyboardStickerClickInterface : Pass “this” as we have implemented the StickerClickInterface interface to this activityInteger emojiFooterId: The id of linearlayout which you have added as footer where the keyboard will be displayedEditText: 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:

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:

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:

showKeyboard(View parentLayout)

In our sample app this is done as follows:

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

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

setKeyBoardHeight(int height)

e.g

stickerKeyboard.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.

You can set the size of sticker to be displayed in the message using the setStickerSize() function. The syntax for this is as follows:

setStickerSize(int size)

e.g

stickerKeyboard.setStickerSize(360);

The default size of sticker is 350.

Sending sticker
When you click on sticker you will get the clicked sticker, now you can send this sticker to another user by using sendSticker() function of CometChat. The syntax for this function is as follows:

sendSticker(String stickername, String userid, Callbacks callbacks);

Show sticker in textview
Once you have sent or received the sticker in order to show the sticker image use showSticker() of StickerKeyboard class. The syntax for this method is as follows: