Xamarin.Forms - Change StatusBar Color

Question

I search but I can\'t find if it\'s possible to change the StatusBar color for each platform, from my portable code? (for Android, iOS & WinPhone 8.1)

Answer 1

Using this approach you can change it on every page.

Application.Current.MainPage.SetValue(NavigationPage.BarBackgroundColorProperty, Color.Black);

Answer 2

On the latest versions of Xamarin you no longer need sketchy plugins and can instead do the following on Android:

var androidColor = color.ToAndroid();               
Xamarin.Essentials.Platform.CurrentActivity.Window.SetStatusBarColor(androidColor);

So a complete dependency example in Android:

using System;
using Android.OS;
using WikiSpiv.Droid.Extras;
using WikiSpiv.Extras;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: Dependency(typeof(Statusbar))]
namespace WikiSpiv.Droid.Extras
{
    public class Statusbar : IStatusBarPlatformSpecific
    {
        public Statusbar()
        {
        }

        public void SetStatusBarColor(Color color)
        {
            if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
            {
                var androidColor = color.ToAndroid();
                Xamarin.Essentials.Platform.CurrentActivity.Window.SetStatusBarColor(androidColor);
            }
        }
    }

}

In Forms:

using System;
using Xamarin.Forms;

namespace WikiSpiv.Extras
{
    public interface IStatusBarPlatformSpecific
    {
        public void SetStatusBarColor(Color color);
    }
}

And it can be called like this:

var statusbar = DependencyService.Get<IStatusBarPlatformSpecific>();
statusbar.SetStatusBarColor(Color.Green);

Answer 3

I believe you would be better off writing a little bit of platform-specific code:

For Android:

On your MainActivity.cs on the Droid project, right after

LoadApplication(new App());

of the overriden OnCreate method, add:

Window.SetStatusBarColor(Android.Graphics.Color.Argb(255, 0, 0, 0));

Like so:

protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);            
            LoadApplication(new App());
            Window.SetStatusBarColor(Android.Graphics.Color.Argb(255, 0, 0, 0)); //here
        }

Answer 4

Another option for Android: change the color in the file \Resources\values\styles.xml (Android project).

<item name="colorPrimaryDark">#00FF00</item>

Answer 5

Maybe I'm not understanding the question, but I hope this helps.

After searching around quite a bit trying to find out how to change the iPhoneX status bar color (the bit behind the notch), I found out that it automatically sets itself based on the BackroundColorproperty of the root ContentPage.

So in Xaml it's as easy as this:

   <ContentPage.BackgroundColor>
        <OnPlatform x:TypeArguments="Color"
                    iOS="Navy"
                    Android="Yellow"
                    />
    </ContentPage.BackgroundColor>

I'm basically using the approach described in one of the answers here: https://stackoverflow.com/a/46199029/960691, but modifying it a little by giving you a code snippet that I've focused for your individual question (at least I think!)

Answer 6

I'm coming back to this answer years later to fix it because my answer had been wrong even though it had been accepted as the correct answer. I have now fixed it.

I had misread the question to want to change the navigation bar or that it worked differently in Android at that time.

I think at least this is a much better answer and should be better help to change the color of the navigationbar in Android and iOS.

Add this code to your Xamarin.Forms project

public interface IStatusBarPlatformSpecific
{
  void SetStatusBarColor(Color color);
}

add this class to your Android project

[assembly: Dependency(typeof(MyDemo.Droid.CustomRenderers.Statusbar))]
namespace MyDemo.Droid.CustomRenderers
{
    public class Statusbar : IStatusBarPlatformSpecific
    {
       public Statusbar()
       {
       }

       public void SetStatusBarColor(Color color)
       {
         // The SetStatusBarcolor is new since API 21
         if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
        {
          var androidColor = color.AddLuminosity(-0.1).ToAndroid();
         //Just use the plugin
 CrossCurrentActivity.Current.Activity.Window.SetStatusBarColor(androidColor);
         }
         else
         {
          // Here you will just have to set your 
          // color in styles.xml file as shown below.
         }
       }
   }
}

Add this CurrentActivityPlugin to your projects

Now you can change the color in your Forms project like this

var statusbar = DependencyService.Get<IStatusBarPlatformSpecific>();
statusbar.SetStatusBarColor(Color.Green);

Note the else statement above. If you are using an older buildversion than 21 you will need to hard-code your color to the styles.xml in your Android project like this

<?xml version="1.0" encoding="utf-8" ?>
<resources>
   <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
      <item name="android:statusBarColor">#544054</item>  
   </style>
</resources>

For iOS its similar

add this to your Info.plist (more docs here)

<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

and add this code to your SetStatusBarColor ethod in the iOS version of the StatusBar class

UIView statusBar = UIApplication.SharedApplication.ValueForKey(
new NSString("statusBar")) as UIView;

 if (statusBar != null && statusBar.RespondsToSelector(
 new  ObjCRuntime.Selector("setBackgroundColor:")))
 {
   // change to your desired color 
   statusBar.BackgroundColor = Color.FromHex("#7f6550").ToUIColor(); 
 }

I wrote a more detailed blog post on how to set the color of the statusbar from Xamarin.Forms if somebody is interested. It does only talk about Android and iOS but should give you an idea what to do with other platforms.