chat messaging app xml ui design for android

Android Chat Interface Using RecyclerView and Groupie

Result

Introduction

Groupie is a simple, flexible library for complex RecyclerView layouts.

Groupie lets you treat your content as logical groups and handles change notifications for you — think sections with headers and footers, expandable groups, blocks of vertical columns, and much more. It makes it easy to handle asynchronous content updates and insertions and user-driven content changes. At the item level, it abstracts the boilerplate of item view types, item layouts, viewholders, and span sizes.

In this article, we will see how to create a small chat interface using the Groupie library that you can find on the following link

Configuration

To be able to use groupie, it is necessary to add certain elements in your build.gradle file.

Activate databinding
Activate android extension

3. Adding Groupie dependencies

          implementation "com.xwray:groupie:2.7.0"
implementation "com.xwray:groupie-databinding:2.7.0"
implementation "com.xwray:groupie-kotlin-android-extensions:2.7.0"

Application UI

As our project is configured, we now need to create the graphical interface of our application, we will start by creating a layout that will be used to display the send message which is green has the following code.

item_message_send.xml

The above code produces the following result

The interface only contains a TextView for which the background attribute is associated with the file bg_receive_message.xml which allowed us to round the borders of the TextView, here is the content of the file bg_receive_message.xml

bg_receive_message.xml

Just repeat the same procedure to create the second layout that will display the received message or just download the source code of the project at this link.

When parsing the item_message_send.xml file, you will notice that a message variable of type Message has been declared in it and the content of the text property has been assigned to the application's unique TextView

          class Message(
            val text: String = "",
            val sendBy: String = ""
)