Forum Xamarin.Forms

How to set a different color for statusBar and navBar

NicolasKrierNicolasKrier FRMember ✭✭✭

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

Best Answer

  • M_Shah04M_Shah04 USMember ✭✭✭
    Accepted Answer

    @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;
    }
    

Answers

  • M_Shah04M_Shah04 USMember ✭✭✭
    edited October 2018

    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.

  • NicolasKrierNicolasKrier FRMember ✭✭✭

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

  • M_Shah04M_Shah04 USMember ✭✭✭

    @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

  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited October 2018

    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_Shah04M_Shah04 USMember ✭✭✭

    @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

  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited October 2018

    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_Shah04M_Shah04 USMember ✭✭✭

    @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.

  • NicolasKrierNicolasKrier FRMember ✭✭✭

    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_Shah04M_Shah04 USMember ✭✭✭
    Accepted Answer

    @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;
    }
    
  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited November 2018

    Oh yeah @M_Shah04 you rock :D 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_Shah04M_Shah04 USMember ✭✭✭

    @NicolasKrier said:
    Oh yeah @M_Shah04 you rock :D 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_zaDavePilks_za USMember ✭✭

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

  • XamarinInfoXamarinInfo Member ✭✭

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

  • XamarinInfoXamarinInfo Member ✭✭

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

  • M_Shah04M_Shah04 USMember ✭✭✭

    @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);
        } 
    
Sign In or Register to comment.