Saturday, 17 January 2015

Xamarin Forms – A light status bar for iOS

I’m writing an app in Xamarin Forms at the moment and as part of that I want to have a light on dark theme rather than the dark on light default. Ultimately there will be a background image on the pages that extends into the navigation area at the top of the screen, but for now a coloured backgound will do. This post will show how to accomplish this.

I started with a simple Xamarin Forms app and set the BackgroundColor of the content page to Green, here’s what I got…

Screen Shot 2015-01-17 at 10.26.28

That status bar isn’t much good is it? To alter it you need to do two things…

  • Alter the info.plist file and set the Status Bar Style to LightContent
  • Add an additional item to the .plist file

Open info.plist and scroll down to the following section…

Screen Shot 2015-01-17 at 10.27.07

You may or may not want a status bar whilst the app is starting up – if not then check “Hide during application launch”.

Next, at the bottom of the plist editor there’s three tabs, click on Source and then add in the following…

Screen Shot 2015-01-17 at 10.27.42When you click “Add New Entry” you can then select “View controller-based status bar appearance” from the dropdown, then click/tab off it and it’ll change the type column to Boolean. The default is Yes, you need to set it to No.

With that done, rebuild your app and run it and voila, you get this…

Screen Shot 2015-01-17 at 10.28.18

Looking good! But that’s not the end of the story – what happens when you add a navigation bar to the app? Ah, well – you get this…

Screen Shot 2015-01-17 at 10.29.52

That’s with the following code in my App.cs file…

public class App
{
    public static Page GetMainPage ()
    {   
        var mainPage = new MainPage ();
        var navPage = new NavigationPage (mainPage);
        navPage.BarBackgroundColor = Color.Green;
        return navPage;
    }
}

And if I happen to set a title on my content page it shows as follows…

Screen Shot 2015-01-17 at 10.57.05

Now at this point in my travels around the intertubes I found a bunch of articles that stated I should override some method of the view and explicitly state that I wanted a light status bar. I spent a load of time on this but all to no avail, so I went back to the original code and had a poke around and what did I find but the BarTextColor property. Setting that had the desired effect…

Screen Shot 2015-01-17 at 10.57.44

The code is now as follows…

public class App
{
    public static Page GetMainPage ()
    {   
        var mainPage = new MainPage ();
        var navPage = new NavigationPage (mainPage);
        navPage.BarBackgroundColor = Color.Green;
        navPage.BarTextColor = Color.White;
        return navPage;
    }
}

I hope that helps someone as there seems to be a lot of misinformation on the intertubes about how to get this to work. I’m on the latest Xamarin Forms build, as of today that’s 1.3.1.6296.

5 comments:

Daniel Nordmark said...

Thanks for this, unfortunately when I try this my app crashes.

Objective-C exception thrown. Name: NSInvalidArgumentException Reason: -[__NSDictionaryI __setObject:forKey:]: unrecognized selector sent to instance 0x7fe9eee0

If I remove the BarTextColor property everything works again. I'm using the same version of Xamarin.Forms as you are.

Morgan said...

Daniel - I've emailed a link to a project which includes a light status bar. Hope it helps!

Harish Dantuluri said...

A million thanks Morgan. This worked like a charm.

Trevi Awater said...

This works until you have a MasterDetailPage, you aren't allowed to put that in a NavigationPage, any suggestions?

Paul Freedman said...

@Trevi - with a MasterDetailPage your detail page can be a NavigationPage. e.g.:

Detail = new NavigationPage (new Page1 ()) {
BarTextColor = Color.White
};

This worked for me