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


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

karthik anu said...

I wondered upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.
iOS Training in Chennai
Android Training in Chennai
php Training in Chennai

Banu said...

Nice it seems to be good post... It will get readers engagement on the article since readers engagement plays an vital role in every blog.. i am expecting more updated posts from your hands.
Mobile App Development Company in Chennai
Android app Development Company in Chennai
ios app development Company in Chennai

sunitha vishnu said...

It's interesting that many of the bloggers your tips helped to clarify a few things for me as well as giving.. very specific nice content. And tell people specific ways to live their lives.Sometimes you just have to yell at people and give them a good shake to get your point across.
Mobile App Development Company
Android app Development Company
ios app development Company
Mobile App Development Companies

ASO Services said...

Thanks for your marvelous posting! It is very useful and good. Come on. I want to introduce the best aso services for you, I try it and I feel it is so good to rank app to top in app store search results, have you ever heard it?

for IT the said...

Thanks for the post, I am techno savvy. I believe you hit the nail right on the head. I am highly impressed with your blog. It is very nicely explained. Your article adds best knowledge to our Java Online Training from India. or learn thru Java Online Training India Students.

or learn thru JavaScript Online Training from India. Appreciating the persistence you put into your blog and detailed information you provide. Kindly keep blogging.

Oliver Maurice said...

I believe you should look here for some info on how you can write good essay hook. I think that you will greatly improve your writing skill and become better overall

Nefilim NEf said...

EduBirdie essay writing service is well liked among many students, especially on Reddit discussions. But people often ask, "Does Edubirdie work? Is it legit?" So I tested this website and wrote my own EduBirdie Review. If you are looking for information about “edubirdie quote”, welcome to Scamfighter!

Andrew Harret said...

Before you start writing your personal statement, understand that you are conveying to your audience why a pharmacy career is your life’s pursuit. This significant question should provoke you to make notes of every single reason that pops in your head. Often, the decision to pursue pharmacy is due to a combination of things, and your essay can show these unique factors. Your personal statement creates an impact if you explain the multiple factors fully, emphasizing exact life experiences and incidents that brought you here. You want the reader to have total comprehension of these factors. Click here for detailed information.

SpeedyPaper said...

Look at this essay topic generator.

SheritaGreen456 said...

So it is fascinating and great post In iOS there are two conceivable styles that you could set to the UI route bar UI bar style default and UI bar style dark changing the UI route bar style will change the style of the status bar naturally. Essentially need to state your work is exceptional thank you for sharing this post. Stormzy Style Black Jacket