Xamarin.Forms.Shell: how to manage StatusBar color

Question

I've developed a small Xamarin.Forms.Shell app and I didn't found how to apply a custom color for the StatusBar Foreground and Background.

My app use a very basic color scheme:

• black for the Foreground of the NavigationBar and the TabBar
• white for the Background of the NavigationBar and the TabBar

I would like to keep the same colors for the StatusBar, but it's not the case:

• on iOS, the StatusBar color seems to be managed by the LightMode/DarkMode

=> on devices that doesn't manage DarkMode, or when LightMode is active, the StatusBar informations are well displayed

=> but it's not the case when the DarkMode is active, as these informations are hidden

• on Android, the StatusBar color seems to be managed by the styles.xaml file and the android:statusBarColor property

=> if I specify a white color, the StatusBar informations are not visible as there are also white

=> whereas if I specify a gray color, the StatusBar informations are well visible

So I've tried to apply a solution given there:

• this doens't work on iOS: I still have the same behavior, as the StatusBar informations are not visible as there are also white when DarkMode is active
• this seems to work on Android, but this doesn't cover all Android versions (as it works from Marshmallow version)

=> How could I manage the iOS StatusBar Foreground color? Is it enough for Android?

Answer 1

you can use the following method for iOS (white status bar with black texts)

    public void SetWhiteStatusBar()
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
            {
                UIView statusBar = new UIView(UIApplication.SharedApplication.KeyWindow.WindowScene.StatusBarManager.StatusBarFrame);
                statusBar.BackgroundColor = UIColor.White;
                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.White;
                }
            }
            UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.DarkContent, false);
            GetCurrentViewController().SetNeedsStatusBarAppearanceUpdate();
        });
    }

Check my question/answer

Xamarin Forms - how to change the status bar color without a navigation page

The full working sample is here https://github.com/georgemichailou/ShaXam

Answer 2

Op solved the problem by the solution in this thread.

public void SetColoredStatusBar(string hexColor)
{
    Device.BeginInvokeOnMainThread(() =>
    {
        if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
        {
            UIView statusBar = new UIView(UIApplication.SharedApplication.KeyWindow.WindowScene.StatusBarManager.StatusBarFrame);
            statusBar.BackgroundColor = Color.FromHex(hexColor).ToUIColor();
            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 = Color.FromHex(hexColor).ToUIColor();
            }
        }
        UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.LightContent, false);
        GetCurrentViewController().SetNeedsStatusBarAppearanceUpdate();
    });
}

=========================================================================

Does you app support dark mode?

If you app is under DarkMode, the status bar text color will change to white. If you does not support Darkmode and still white for the Background of the NavigationBar and the TabBar, white text won't visible under white background.

You can use AppThemeBinding to set different color under different mode.

<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">#2196F3</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
            <Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light=Black, Dark=White}" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="White" />
            <Setter Property="Shell.TabBarForegroundColor" Value="Red"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="Black"/>
            <Setter Property="Shell.TabBarTitleColor" Value="Black"/>
        </Style>
        <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
    </ResourceDictionary>
</Shell.Resources>

If you want to keep the status bar color same under different app theme, use a custom renderer:

[assembly:ExportRenderer (typeof(ContentPage), typeof(customPageRenderer))]
namespace App479.iOS
{
    public class customPageRenderer : PageRenderer
    {

        public override void ViewDidAppear(bool animated)
        {
            base.ViewDidAppear(animated);

            this.NavigationController.NavigationBar.BarStyle = UIBarStyle.Default;

        }

        //if you content page does not have a NavigationBar, oveerride this method
        public override UIStatusBarStyle PreferredStatusBarStyle()
        {
            return UIStatusBarStyle.DarkContent;
        }
    }
}

And also add a key to info.plist:

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

Refer: preferredstatusbarstyle