Adding sticker keyboard

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:

Adding emoji keyboard to your project

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

  1. Layout of your chat activity
  2. Text view of message
  3. Your chat activity

Modification for the chat layout
The basic structure of your chat layout has to be in the 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 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:

@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)

e.g

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

checkKeyboardHeight(View view)

In our sample app we have done it as follows:

RelativeLayout chatFooter = (RelativeLayout) findViewById(R.id.relativeBottomArea);
stickerKeyboard.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:

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:

Sample sticker keyboard

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:

showSticker(Context context, String message)

Pass the message which you used in sendSticker method.
e.g

showSticker(context, "bear_1");

Not finding what you need?

The CometChat team is here to help!