Exploring a Chat UI in Xamarin Forms (Part. 2)

In the first part of this series we talked about how to create different UI cells to render chat messages depending on who sends the message. Also how to put the chat entry on the top of the keyboard when focused.

In this part we are going to talk about two things:

• Auto expand entry based on the text when typing
• Scroll to the last message.

Auto expand entry based on the text when typing

When typing a long message in an entry is really difficult to scroll horizontally to read the complete message. So we need an entry that can grow vertically based on the text content.

To achieve it we are going to use this (Extended Editor in Xamarin Forms) article, in which instead of using an entry we will use an editor.

We are going to use the same control and custom renderers of that previous article. Code here:

Android

We are going to limit the expansion of the editor to 5 lines, so when it gets to 5 lines typed the user will have to scroll vertically to read the previous text. We can do on this on the custom editor renderer by adding on OnElementChanged:

Control.SetMaxLines(5);

Code here:

iOS

On our chat input custom content view (ChatInputBarView) code behind we add a binding to the height of our custom content view so that is updated whenever our editor height changes:

            if (Device.RuntimePlatform == Device.iOS)
            {
                this.SetBinding(HeightRequestProperty, new Binding("Height", BindingMode.OneWay, null, null, null, chatTextInput));
            }

Note: This is not needed on Android which handles this by default

We are going to modify the custom renderer to handle the expand limit , invalidate height when there’s a new line and enable scrolling just when reaches the limit.

Full Code here:

Scroll to the last message.

To achieve it there are two ways to do it:

1-Use the list scroll to the last message

You just have to indicate the list you want to scroll, the object to scroll (in this case the last message of the list) and if you want to animate the scrolling or not.

In our case as we create a content view to have our editor, we are going to use a command to indicate to the main page it has to scroll.

• Define scroll command on the chat page, so that when it gets executed scrolls list to last message:

• Execute scroll command when message is sent:

The disadvantage of this approach is that each time you add new message you need to scroll to the latest message, so that you can see the last message was added. Also when loading the list of messages you will have to scroll to last message which is not a very smooth UX.

If you want to avoid this, you can use a different approach:

2-Rotate the list:

To achieve this we are going to rotate the ListView and ViewCells main layout to 180 degrees so that the list start from the bottom but by doing this the scroll bar now will appear at the left side. To fix that we are going to use the property FlowDirection (Released in the version 3.0 of Xamarin Forms).

So in the ListView we are going to set these two properties:

• FlowDirection=”RightToLeft”
• Rotation=”180″

And in the view cells main layout:

• FlowDirection=”LeftToRight”
• Rotation=”180″

Be aware that now that the ListView and ViewCells are rotated so you should consider that the bottom of your ListView is at the top, so for adding new messages we should add then at the first position because that’s the top of our ListView which is at the bottom.

We will have to change the code in our ViewModel, to add the new messages at the first position:

  Messages.Insert(0, new Message() { Text = TextToSend, User = App.User });

The main advantage of this approach is that it always starts at the bottom, so you don’t need to scroll. If there are new messages and you are at the bottom you don’t need to scroll either.

Result:

Check the full source code here:

https://github.com/rdelrosario/ChatUIXForms

I decided to do a third part on this to cover even more, so see you in the third part. We will cover Jump to last message, UI improvements and more…

Happy chat!