I am working on a chat application but I am struggling to figure out how to display the calendar date on the top of chat messages; for example, something like this:
Another image with timestamps:
As you see in the example, the date is displayed on top of a fresh new batch of text messages. I would like to do the same, just for a batch of messages related to a specific date. Say if I have messages for October 19, it shows October 19 on top followed by messages for October 20 and so on... Here's the working sample code similar to mine:
http://www.codeproject.com/Tips/897826/Designing-Android-Chat-Bubble-Chat-UI
The construction of the code is same as mine except for the date being displayed on top which is something I am stuck on. I have my timestamps showing for every message, I just want to display the date in the format "Monday, October 19, 2015" for the batch of messages; just once on top, from October 19, and likewise calendar dates for past and future messages, as shown in the image. Any clues? Thanks!
Just create a viewgroup of messages within that date. Or I would recommend a structure like this:
As far as I understand you want to show time/date only for certain group of messages and not for each message. So here is how to do that. Precondition: I assume each message item has time stamp based on which we will do our grouping Idea: we will need each list item to have timeview:TextView element and we will show and hide that element based on it's position and TS (time stamp) Example:
item.xml
ChatRecyclerAdapter.java
what left is to create your RecylcerView and give it this adapter
Use this xml which helps to creating layout which you are looking for as per your link - Designing Android Chat Bubble (Chat UI) suggest.
I update this code for
date
texview:-Ok; this is a solution that will give you an idea to build upon. It will solve your date issues and gives you a hint on how to solve how you display your times. This kind of program involves a lot of work to make it viable as an app. You need to take into account timezones, where you store the messages and so on.
Now stack overflow does not serve the purpose of designing programs for people, but to try and help steer people into the right direction.
For the purposes of answering your question; I am covering the basics, I'm not giving you the code ready to run, you will need to do some of the work :)
This could be solved in numerous ways I have chosen the following:
Using shared preferences to store the latest date time. I considered accessing the chat message arrays, but figured this may be simpler. I chose shared preferences so that the date of the last message would be retained when the app is closed and reopened. (Eventually the chat messages would need to be retained in a database [SQLite] so that the messages will still be there when the app is closed and opened). Please see my comment at the end.
In your onclick listener, you test that the last stored date is todays date, if it's not, it is converted into a chatmessage, so it's value can be added to the array and displayed. You will have to tweak how you format these message types, and you can even add a unique id for these date messages and test for that, or test for no id.. there's many solutions.
xml Ok, now you don't want the date floating at the top of the screen when there's only one message. So group it with the scroll list and then set this relative to the screen layout as the list alone was. A linear layout will do for this, just ensure it's orientation is set to vertical.
Pin these together.
Change display for each message You will need to stop displaying the date time for each message. If you wish to show the time for each message individually, and skip those within the same minute, as you mentioned in the comments, then I've given you the framework, to work out how to test for this and the program logic of whether or not it is displayed.
You need to change this in your:
Don't forget to apply all necessary imports.
I suggest if you start to use databases that you access the last date from there without shared preferences, or continue to use shared preferences. This becomes more complicated as there are multiple chats being saved, in which case using the database would be preferable.
Vilen answer is right. I am just improving perfomance. Instead of doing view gone and visible for every view, we can add a text view programmatically when condition true.
ChatAdapter.java
Also time formatting and checking for every message is expensive. To minimize this code execution actually we can compare the time stamp while sending the message. Get the time stamp of last message and compare with current message. If greater than 24 hrs then send to the server with isNewGroup:true. Then populating adapter can done without time comparison like below.