How to set a different color for statusBar and navBar

NicolasKrier

Hello everyone,

Here is a screenshot of what I'm trying to achieve.

Right now, I've a generic style which set both background and foreground color. Something like this

<Style TargetType="NavigationPage">
   <Setter Property="BarBackgroundColor" Value="{StaticResource MyBackgroundColor}" />
   <Setter Property="BarTextColor" Value="{StaticResource MyForegroundColor}" />
</Style>

It works great but I'd like to have a different status bar color than the navbar color. Is it possible from Xamarin Forms ?
If it's not, did anyone already do that with custom renderer and is willing to help me with a link or some code ?

Thanks !! Have all a good day

M_Shah04

@NicolasKrier said:
Hello @M_Shah04 thanks for your answer.
I'm looking for a way to do what you gave me for Android on iOS.
Do you know how to do that on iOS ?
Thanks again for your precious time.

You can try this to change statusbar color for iOS:
Write this code in your AppDelegate.cs file before LoadApplication

var statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
{
    statusBar.BackgroundColor = UIColor.FromRGB(66, 134, 244);
    statusBar.TintColor = UIColor.White;
}

M_Shah04

You can set the color of your statusbar by applying color in your Styles.xml file, located under Resources -> values Folder.

  <!-- colorPrimaryDark is used for the status bar -->
  <item name="colorPrimaryDark">#1eb6ed</item>

Place this and it should work.
Hope this may help you.

NicolasKrier

Hi @M_Shah04 thank you a lot. Any idea for iOS ?

M_Shah04

@NicolasKrier said:
Hi @M_Shah04 thank you a lot. Any idea for iOS ?

Great that it helped you to solve your issue, for iOS you can refer the links provided here:
https://forums.xamarin.com/discussion/124134/how-can-i-change-color-for-statusbar-on-ios-xamarin-forms

NicolasKrier

Thanks again for the help provided. That's what I already did but it sets the same color for both the satusBar (the bar with the wifi signal, the % battery etc) and the navBar (with the back button, titlePage etc). I'm looking for a way to have a different color for each one like in the screenshot below :

M_Shah04

@NicolasKrier said:
Hi @M_Shah04 thank you a lot. Any idea for iOS ?

Great that it helped you to solve your issue, for iOS you can refer the links provided here:
https://forums.xamarin.com/discussion/124134/how-can-i-change-color-for-statusbar-on-ios-xamarin-forms

NicolasKrier

Hello, that's already what I did for iOS : as you can see in my screenshot.

I will take a look on how to change the NavigationBar with a custom renderer. Thus, the BarBackgroundColor and BarTextColor will change the statusBar and maybe the navBar will have a different look.

M_Shah04

@NicolasKrier said:
Thanks again for the help provided. That's what I already did but it sets the same color for both the satusBar (the bar with the wifi signal, the % battery etc) and the navBar (with the back button, titlePage etc). I'm looking for a way to have a different color for each one like in the screenshot below :

You can try this for android, it should work fine.

 <!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#26ace2</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#246782</item>

You should mention user name like @M_Shah04 , as I didn't get your comments and not able to answer your questions, was just checking randomly and got this post.

NicolasKrier

Hello @M_Shah04 thanks for your answer.
I'm looking for a way to do what you gave me for Android on iOS.
Do you know how to do that on iOS ?
Thanks again for your precious time.

M_Shah04

@NicolasKrier said:
Hello @M_Shah04 thanks for your answer.
I'm looking for a way to do what you gave me for Android on iOS.
Do you know how to do that on iOS ?
Thanks again for your precious time.

You can try this to change statusbar color for iOS:
Write this code in your AppDelegate.cs file before LoadApplication

var statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
{
    statusBar.BackgroundColor = UIColor.FromRGB(66, 134, 244);
    statusBar.TintColor = UIColor.White;
}

NicolasKrier

Oh yeah @M_Shah04 you rock thanks a lot buddy !!!!

Here is the like and accepted answer you deaserve !

And thanks also for your tenacity. I was suprised that you keep trying to help me. It doesn't happen as often as I would like

I wish you the best and a good day !

M_Shah04

@NicolasKrier said:
Oh yeah @M_Shah04 you rock thanks a lot buddy !!!!

Here is the like and accepted answer you deaserve !

And thanks also for your tenacity. I was suprised that you keep trying to help me. It doesn't happen as often as I would like

I wish you the best and a good day !

Glad that it solved your problem, these kind of amazing responses motivates me to answering the questions! keep it up and have a good day

DavePilks_za

How would we solve this on iOS13? as the above solution crashes the app.

XamarinInfo

@DavePilks hi ,did yu solve the issue in ios 13+???/

XamarinInfo

@M_Shah04 do you have a solution to solve the same issue in ios 13+ versions.?????

M_Shah04

@XamarinInfo you can try this one if it works:
Refer this for more details: https://stackoverflow.com/questions/58069085/change-status-bar-colour-on-ios13/58075860

If in Forms project , you can have a try with invoking method in AppDelegate.cs

           public override void OnActivated(UIApplication uiApplication)
    {
        if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
        {
            // If VS has updated to the latest version , you can use StatusBarManager , else use the first line code
            // UIView statusBar = new UIView(UIApplication.SharedApplication.StatusBarFrame);
            UIView statusBar = new UIView(UIApplication.SharedApplication.KeyWindow.WindowScene.StatusBarManager.StatusBarFrame);
            statusBar.BackgroundColor = UIColor.Red;
            UIApplication.SharedApplication.KeyWindow.AddSubview(statusBar);
        }
        else
        {
            UIView statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
            if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
            {
                statusBar.BackgroundColor = UIColor.Red;
                UIApplication.SharedApplication.StatusBarStyle = UIStatusBarStyle.BlackOpaque;
            }
        }
        base.OnActivated(uiApplication);
    }