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)

public App()
{
    // Change the StatusBar color
    MainPage = new MainPageUser();
}

Answer 1

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 2

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.

Answer 3

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

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

Answer 4

Using this approach you can change it on every page.

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

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

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 7

Step 1. Add interface in shared class

    public interface IStatusBarColor
        {
            void changestatuscolor(string color);
        }

Step 2. on main activity inject dependency and implement the interface

[assembly: Dependency(typeof(ETCrewReport.Droid.MainActivity))]
 public class MainActivity : FormsAppCompatActivity, IStatusBarColor  
    {
      ......
      ...
      public static Context context;

        protected override void OnCreate(Bundle bundle)
        {
        }
 public void changestatuscolor(string color)
        {
            try
            {
                if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
                {
                    var c = MainActivity.context as FormsAppCompatActivity;
                    c?.RunOnUiThread(() => c.Window.SetStatusBarColor(Android.Graphics.Color.ParseColor(color)));
                }
            }
            catch (Exception ex)
            {
                 
            }

    }
    

Step 3. get the dependency in the required xaml.cs file on OnAppearing method

protected async override void OnAppearing()
        {
            try
            {
                DependencyService.Get<IStatusBarColor>().changestatuscolor(Color.Black.ToHex());
            }
            catch (Exception ex)
            {
                throw;
            }
        } 

Answer 8

in your android

MainActivity.cs

after the

LoadApplication(new App());

add this line

Window.SetStatusBarColor(Android.Graphics.Color.Argb(255, 62, 102, 226));

the color code is Argb format (Alpha,Red,Green,Blue) You can change your intensity with the alpha percentage from 0-255 below mentioned may help you with opacity of your alpha color for black with 50% alpha use Window.SetStatusBarColor(Android.Graphics.Color.Argb(80, 0, 0, 0));

• 100% - FF
• 95% - F2
• 90% - E6
• 85% - D9
• 80% - CC
• 75% - BF
• 70% - B3
• 65% - A6
• 60% - 99
• 55% - 8C
• 50% - 80
• 45% - 73
• 40% - 66
• 35% - 59
• 30% - 4D
• 25% - 40
• 20% - 33
• 15% - 26
• 10% - 1A
• 5% - 0D
• 0% - 00

Answer 9

For android:

protected override void OnCreate(Bundle savedInstanceState)
{
    AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightNo;

    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    this.SetStatusBarColor(Color.FromHex("#8EC5FC").ToAndroid());

    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    LoadApplication(new App());
}

Answer 10

This works for me.

In the App.xaml

 <Color x:Key="navBarRed">#AA0000</Color>
 <Color x:Key="navBarBlue">#F4721C</Color>
 <Color x:Key="navBarColour">#F4721C</Color>
 <Style TargetType="NavigationPage">
     <Setter Property="BarBackgroundColor" Value="{DynamicResource navBarColour}"/>
 </Style>

Then when you want to change the colour:

if (Condition == true)
    App.Current.Resources["navBarColour"] = App.Current.Resources["navBarBlue"];
else
    App.Current.Resources["navBarColour"] = App.Current.Resources["navBarRed"];