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!