How To Create Simple Custom Chat Rooms Using Qiscus Chat SDK
Business is a place where a seller meets a buyer. Buyers, also known as customers, have different personalities and various needs. The seller’s duty is to provide what is needed and make it fulfill the customer’s needs.
That principle also applies in Qiscus. We are always dealing with consumers who have various needs because every customer faces different problems in their respective businesses. One of the interesting needs that our customers have is to allow chats and making calls, either voice or video, in one screen of any chat room.

Qiscus Chat SDK can accommodate to your needs for various purposes of your business.
Our developers can easily make it happen for you.
Don’t think too hard about this but just focus on the simplicity of the concept, view the toolbar layout and let Qiscus handle the rest.

1. Start with a User Interface
We can integrate Qiscus into your project. Not yet integrated? Don’t worry, use this link https://github.com/qiscus/qiscus-sdk-android to integrate it.
Next, we’re about to make a layout as you wish and we shall name it as activity_layout.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/dark_white" android:orientation="vertical" tools:context=".ui.ChatActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primary"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/profile_consultant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_centerVertical="true" android:layout_toLeftOf="@+id/iv_voice_call" android:layout_toStartOf="@+id/iv_voice_call" android:orientation="vertical"> <TextView android:id="@+id/tv_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:singleLine="true" android:textColor="@color/white" /> <TextView android:id="@+id/tv_rate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="2dp" android:ellipsize="end" android:singleLine="true" android:textColor="@color/white_secondary" android:textSize="14sp" /> </LinearLayout> <ImageView android:id="@+id/iv_voice_call" android:layout_width="44dp" android:layout_height="44dp" android:layout_alignTop="@+id/iv_media" android:layout_centerVertical="true" android:layout_marginEnd="1dp" android:layout_marginLeft="1dp" android:layout_marginRight="1dp" android:layout_marginStart="1dp" android:layout_toLeftOf="@+id/iv_video_call" android:layout_toStartOf="@+id/iv_video_call" android:paddingEnd="8dp" android:paddingLeft="8dp" android:paddingRight="8dp" android:paddingStart="8dp" android:src="@drawable/ic_voice_call" android:tint="@color/white" /> <ImageView android:id="@+id/iv_video_call" android:layout_width="44dp" android:layout_height="44dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_alignTop="@+id/iv_media" android:layout_centerVertical="true" android:layout_marginEnd="1dp" android:layout_marginLeft="1dp" android:layout_marginRight="1dp" android:layout_marginStart="1dp" android:paddingEnd="9dp" android:paddingLeft="9dp" android:paddingRight="9dp" android:paddingStart="9dp" android:src="@drawable/ic_video_call" android:tint="@color/white" /> <ImageView android:id="@+id/iv_media" android:layout_width="44dp" android:layout_height="44dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginEnd="1dp" android:layout_marginLeft="1dp" android:layout_marginRight="1dp" android:layout_marginStart="1dp" android:paddingEnd="8dp" android:paddingLeft="8dp" android:paddingRight="8dp" android:paddingStart="8dp" android:src="@drawable/ic_media" android:visibility="gone" /> </RelativeLayout> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
In our activities, we create the toolbar look like we usually do, so make sure your toolbar is the same requirements. Then, what about a chat display?
Simple; just add the following section:
FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" />
Voila! Your chat room has materialized.
2. Extend Qiscus Base Chat Activity
We only extend QiscusBaseActivity, then we return to the R.layout.activity_chat
public class ChatActivity extends QiscusBaseChatActivity { @Override protected int getResourceLayout() { return R.layout.activity_chat; } @Override protected void onLoadView() { //here we set view on toolbar , like name, and rate tvName.setText(qiscusChatRoom.getName()); tvRate.setText(String.format(AndroidUtilities.getString(R.string.chat_activity_call_rate_per_minute), CurrencyFormater.format(mChatRoom.getRate()))); } @Override protected QiscusBaseChatFragment onCreateChatFragment() { return new ChatFragment.newInstance(qiscusChatRoom);; } @Override public void onUserStatusChanged(String user, boolean online, Date lastActive) { } @Override public void onUserTyping(String user, boolean typing) { } }
3. Create Fragment and Extend QiscusChatFragment
We only create the fragment for chat layout. So here, the UI looks like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.qiscus.sdkpoc.customitemview.ChatFragment"> <include layout="@layout/fragment_qiscus_chat" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </FrameLayout>
Using this code above, our chat room has been created!
<include layout="@layout/fragment_qiscus_chat" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/>
The text below is for java that extends QiscusChatFragment
public class ChatFragment extends QiscusChatFragment { public static ChatFragment newInstance(QiscusChatRoom qiscusChatRoom) { ChatFragment fragment = new ChatFragment(); Bundle bundle = new Bundle(); bundle.putParcelable(CHAT_ROOM_DATA, qiscusChatRoom); fragment.setArguments(bundle); return fragment; } @Override protected int getResourceLayout() { return R.layout.fragment_chat; } }
4. Finally, it’s built!
Voilá, we created a chat room like what you need.
Looks a little simple? It’s ok, we have experience in creating customised chat rooms. Look out for our next post on this!
This article was originally published by Catur Adi Nugroho on his Medium. Catur is an Android developer in Qiscus Pte Ltd. Get in touch with Catur through his LinkedIn profile here!
Comments
2 Comments
Nice post! Can i request article about `tips how to make chat list smooth when scrolling in android apps` Thanks!
sure, please wait for it ya. thanks.
Leave a Comment