Exploring Qiscus SDK Android #1: Create Custom Bubble Chat with Qiscus SDK

Over the past couple of months, I have been develop Buddy Chat for android with custom features chatroom . You can found detail of application in here.

Based on my experience, Qiscus SDK support to develop sending payload message. You can make your custom payload based on what your data to include in your custom bubble chatroom. For example, user interface of bubble survey in LINE Chat Application .

Firstly, we have to analyze widgets requirement from the picture to implement in file item_message.xml. Furthermore, you can use ConstraintLayout to build responsive ui, however, others people says build with Relativelayout its better.

1. Custom Bubble Item

This is example using Relativelayout :

This is illustrate of this layout.


2.ChatRoom Architecture Components

Second, We make Activity, Fragment, Adapter, and ViewHolder classes extend with class including in Qiscus SDK. After we extend Qiscus base to our custom classes, we can override methods in Qiscus Base.

Chatroom Class Diagram

For instance, in BubbleChatActivity.java we can override getResourceLayout() to implement custom main layout. You can add new toolbar with cool widgets like CircleImageView, Textview for name and new status, new feature include in Chatroom Activity.

Next, in BubbleChatFragment.java we can custom bottom bar, not only edittext message, but also a size of list chat, new feature import image from the gallery, until custom payload like sendSurvey() method.

Next, We can analyze this method, we found a payload(JSONObject) initialization with dummy data object. Before send to sendQiscusComment() method, we have to generete custom message with the paramater provided in QiscusComment.generateCutomMessage().

In adapter class, we have 3 methods to setting an item bubblechat. We can set different layout form others with getIntemResourceLayout(), including set widgets item in QiscusBaseMessegeViewHolder().

Run, run, run!


Here you have the code that we developed in this Part :



As you can see, it’s really easy to custom ui bubblechat with Qiscus SDK.

Please, if you find something to improve or any suggestion, don’t hesitate to contact me, I’ll try to do my best to answer any question or improve this tutorial.

See you in the next story!