We will make use of an open source library called ChatKit to create the chat view's layout. ChatKit is an Android library that provides flexible components for chat user interface implementation in Android projects as well as utilities for chat-user-interface data management and customization.

We added ChatKit to the Messenger project with the following line of code in the build.gradle script:

implementation 'com.github.stfalcon:chatkit:0.2.2'

As mentioned earlier, ChatKit provides a number of useful user interface widgets for creating a chat UI. Two of these widgets are MessagesList and MessageInput. The MessagesList is a widget for the display and management of messages in conversation threads. MessageInput is a widget for entering text messages. In addition to supporting several styling options, MessageInput supports simple input validation processes.

Let's see how we can use MessagesList and MessageInput in a layout file. Create a new chat package within com.example.messenger.ui and add a new empty activity named ChatActivity to it. Open the ChatActivity activities layout file (activity_chat.xml) and add the following XML to it:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
  tools:context="com.example.messenger.ui.chat.ChatActivity">
  <com.stfalcon.chatkit.messages.MessagesList
    android:id="@+id/messages_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/message_input"/>
  <com.stfalcon.chatkit.messages.MessageInput
    android:id="@+id/message_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:inputHint="@string/hint_enter_a_message" />
</RelativeLayout>

As you can see in the preceding XML, we made use of ChatKit's MessagesList and MessageInput UI widgets just as we would any other Android widgets. Both MessagesList and MessageInput are located within the com.stfalcon.chatkit.messages package. Open the layout design window to see how the layout looks visually.

Next on our agenda is the creation of a ChatView class:

package com.example.messenger.ui.chat

import com.example.messenger.ui.base.BaseView
import com.example.messenger.utils.message.Message
import com.stfalcon.chatkit.messages.MessagesListAdapter


interface ChatView : BaseView {

  interface ChatAdapter {
    fun navigateToChat(recipientName: String, recipientId: Long, 
    conversationId: Long? = null)
  }

  fun showConversationLoadError()

  fun showMessageSendError()

  fun getMessageListAdapter(): MessagesListAdapter<Message>
}

Within ChatView, we defined a ChatAdapter interface declaring a single navigateToChat(String, Long, Long) function. This interface should be implemented by adapters that are capable of directing a user to the ChatView. Both the ConversationsAdapter and ContactsAdapter that we earlier created implement this interface.

The showConversationLoadError() and showMessageSendError() are functions that, when implemented, must display appropriate error messages when the loading of a conversation and the loading of a message fail, respectively.

ChatKit's MessagesList UI widget must possess a MessagesListAdapter for the management of its messages dataset. getMessageListAdapter() is a function that, when implemented by a ChatView, will return the MessagesListAdapter of the UI's MessagesList.