2

Xamarin forms – multi line page title

On a current Xamarin forms project I’m working on, there came the question if it would be possible to show 2 lines in the title bar of our app instead of 1.
Normally this is not something you would do, seeing the default behaviour on iOS and Android, an app would only display 1 line and cut if off by adding ‘…’.

But in our case we are showing detail information on a conversation and it would help the user if we could show some more context.

The goal would be like this:

Screen Shot 2016-05-30 at 22.04.41

Screen Shot 2016-05-30 at 22.05.27

To achieve this result, you’ll need to implement a custom renderer on each platform. Both on iOS and Android of the type PageRenderer.

First iOS.
In your Xamarin Forms solution, underneath the iOS project add a folder called CustomRenderers and add a class called CustomContentPageRenderer.cs.
Here we will implement a PageRenderer with following code

Inside the WillMoveToParentViewController method we will grab the current page and see if it does contain an actual Title ( not each page needs one ).
If so, we’ll new up an UILabel because with this iOS control we can set how many lines need to be used ( if needed ) : titleLabel.Lines = 2.
We must ofcourse not forget to pass the current page title to it and only thing left afterwards is placing this UILabel in the TitleView of the current navigation page : parent.NavigationItem.TitleView = titleLabel.

By doing this we will override the normal Xamarin Forms rendering of the title in a navigation page and allowing use of 2 lines in it!

Secondly Android.
Same setup as in iOS, so a CustomRenderers folder with a CustomContentPageRenderer class file. But there is a bit more code needed for this to work now…

You’ll see now that we are using the OnElementChanged method to do almost the same as in iOS. So again check if the actual page does have a title or not and when it does, create a new TextView element.
On this Android control we can also indicate that we want to use 2 lines is needed : title.SetMaxLines(2).
And also here we need to pass in the actual page title and adjust the default Xamarin forms rendering view : actionBar.SetCustomView (title, new ActionBar.LayoutParams (LayoutParams.MatchParent, LayoutParams.MatchParent)).

What is different on Android, is that the ActionBar ( where the title is shown ) is shared across all pages. Thus once you’ve manipulated it, it will be fixed for all.
Meaning that when you have navigation and go back in the navigation stack, you’ll see that the set title will no longer change!
To counter this, we’ll need to hook into another event to keep track of this back stack navigation and if needed reapply the title.
This is done by monitoring the Element.Appearing event and when we enter this, reset the page title : ((TextView)actionBar.CustomView).Text = page.Title.

Hope this makes some sense and can help those out there that do need this feature 🙂

As always all the code can be found on my github right here… https://github.com/Depechie/XamarinFormsMultiLineTitle

Depechie

2 Comments

  1. Is there a way to adapt this code to use Toolbar instead of ActionBar?

    Thanks

  2. Hey Daniel,
    Well I would think that would also work, but I haven’t tried that myself yet… so sorry no code available 🙁
    Not tried the new material design for Xamarin forms Android yet, so not sure what needs to be changed.
    Code is up on GitHub maybe you could try and fork it?

Leave a Reply

Your email address will not be published. Required fields are marked *