Android Chat Interface Using RecyclerView and Groupie

Eric Ampire
Mar 11 · 4 min read
https://unsplash.com/photos/GWkioAj5aB4

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.

  1. Activate databinding
  2. Activate android extension

3. Adding Groupie dependencies

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


The main GUI contains a RecyclerView, a button, and an EditText, the following code defines the components of the GUI.

activity_main.xml

Let dive in Groupie

With Groupie we don’t need the ViewHolder that we often create when we want to link the data to the RecyclerView, all we need to do is create a class that will represent an element of our RecyclerView and to do that we just have to do something like this

.MessageItem.kt

In our case, we created two classes, the ReceiveMessageItem class, and SendMessageItem the two classes inherited from the BindableItem class and this supports databinding, that’s why the layout of the item_message_send.xml file supports databinding.

The type parameter of the BindableItem class must be a class that inherits from the ViewBinding class, like the ItemMessageSend class generated from the item_message_send.xml file.

The SendMessageItem class has a Message property which is then passed to the layout in the bind method.

The getLayout method only returns the id of the relevant layout. In our case, it is the layout item_message_send or item_message_receive in the case of the ItemMessageReceive class.

Connecting the Adapter to the RecyclerView

MainActivity.kt

With Groupie we need to create an Adapter for the RecyclerView and even less for the ViewHolder, Groupie offers us directly a GroupAdapter class and a GroupieViewHolder class that we just have to use.

If you notice very well you will see when in MainActivity a property has been created this way.

Then we use this property as an adaptation of RecyclerView.

In the populateData method you can notice that depending on the value of the sendBy property you add in the adapter either an object of type SendMessageItem or ReceiveMessageItem.

And in setOnClickListener we use SendMessageItem and then we call a method that simulates the arrival of a new message using coroutines

The file project on this link

References

The Startup

Medium's largest active publication, followed by +611K people. Follow to join our community.

Eric Ampire

Written by

iOS and Android Engineering at ZX Connect • Kotlin enthusiast passionate about mobile development, learning and sharing.

The Startup

Medium's largest active publication, followed by +611K people. Follow to join our community.

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade