聊天布局像whatsapp

Question

Im trying to build a chat layout like whatsapp. I don't understand how they were able to place 'date' at bottom in rightmost corner of layout.

1. I saw their code, it uses horizontal LinearLayout in which there is message and date side by side, but then how does the 'I love' part of message print above date ?
2. Another problem is that if I use relativelayout to push date to extreme right using alignparentright = true, it expands the entire layout to match parent, which is obvious but undesirable

Please advice me on this

Answer 1

As sketchy as it seems, I can only see that end result being accomplished with four text views.

Name at the top, two lines for the message, and one for the date.

One message line extends all the way across and above the date, the other is below it and next to the date.

You would need to test the textview length to see how much text you can apply to it before it starts to cut off, and apply the remainder to the second message textview.

Gross.

Answer 2

You can try using a FrameLayout in which there is a LinearLayout at the bottom which contains the name of the sender and the message. Then, add a TextView whose layout_gravity is set to bottom|right

Answer 3

You can use the layout and code below to achieve the desired effect. Source code gist

What I have used is get the width of the text + the time layout and check if this exceeds the container layout width, and adjust the height of the container accordingly. We have to extend from FrameLayout since this is the one which allows overlapping of two child views.

This is tested to be working on English locale. Suggestions and improvements are always welcome :)

Hope I've helped someone looking for the same solution.

Answer 4

I would recommend using the android:layout_gravity="bottom|right" tag on the date TextView . This will attempt to lay out the View as if the container was "pushing" it to the bottom and right corner.

This may or may not work for all View s. But as @codeMagic said, if you saw their code, then it should be apparent, right?