Implementing a cool concept of flag animation for chat and create a library as ChatAdapter on Android
Our company started working on a chat application and we were looking for the prototypes and different UIs to implement something unique.
To stand out, to be under the spotlight, you have to do something no body else has done so far.
We saw a design and showed it to everyone in the company, after a positive response, we got approval to start working on it.
We started brain storming and searched for end of the rope (The place we had to start from).
TL;DR
Designing the chat cell
Instead of creating two different cells for sender and receiver, we created single cell and decided to amend it in recycler view adapter as needed.
This made our code more maintainable and extendable. In case of any bugs or change in design, we will only have to work on single file instead of multiple files and thats how we reduced chances of error by 50%.
Designing the date cell
Create animation
XML is very powerful for animations. You can work with percentages of views and no need of writing kotlin/java code in your recycler view hence keeping it clean.
Write the adapter (Abstract RecyclerViewAdapter)
Here comes the tricky part.
We divided the RecyclerViewAdapter in multiple parts — divide and conquer.
- Created two different view types for chat and date.
2. Few abstract functions which will let user to extend from this adapter and use the most of it with minimum effort.
3. onBindViewHolder; bind the data with views, set color, set side i.e. sender/receiver and in the end, animate if needed.
4. Create click listener for callback.
How to use
I have created this library which is published on github.
It have quite understandable readme with easy to use sample.
Write couple of lines, achieve this cool chat adapter in minutes and impress your colleagues ;)
Please don’t forget to star the library if you liked it.
