How To Create Simple Custom View Chat Using Qiscus Chat SDK

The Customers have various requirements, their request become our concern. One of the interesting requirement is user able to chat and call in chat room.

requirement view
Using Qiscus Chat SDK we can do. Qiscus has great chat sdk that allow your creativity move beyond

And as developer it is very easy to build it.

First let see it more wider the concept is very simple, just focus on toolbar layout, chat will handle by Qiscus.

Implement UI

1. Let’s create UI

Assume we had integrated qiscus in your project, otherwise you can integrate it with this link https://github.com/qiscus/qiscus-sdk-android

Ok, we create layout as customer requirement, let’s say in 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 activity, we create toolbar view like usually we did, just make sure your toolbar has same as per requirement, how about chat view? 
simple, just add this part.

FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />

this is will be our container chat.

2. Extend QiscusBaseChatActivity

We only extend QiscusBaseActivity, then return 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 create fragment for chat layout only, so here UI looks like

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

by this code our chat view is already created

<include
layout="@layout/fragment_qiscus_chat"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>

And here is for java that extend 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. Finaly, Build it …

And viola we successfully create layout as user want . Horray!!

We had experience to handle custom view, just wait another post.