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
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
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.
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
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
val text: String = "",
val sendBy: String = ""
The main GUI contains a RecyclerView, a button, and an EditText, the following code defines the components of the GUI.
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
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
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.
private val messageAdapter = GroupAdapter<GroupieViewHolder>()
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