Set StatusBar color and StatusBarStyle for iOS Android and UWP from Page

[KSemenenko]

Description of Change

With the advent of the black theme on iOS and generally good opportunities for adjusting colors, there was a need to be able to change the color of the StatusBar on the page.

Issues Resolved

• fixes [Enhancement] Set StatusBar color for iOS and Android from any Page #7314

API Changes

New properties for Page

public Color StatusBarColor { get; set; } // color for StatusBar
public StatusBarStyle StatusBarStyle { get; set; } //style for StatusBar content (Dark or Light)

Added:

Page.StatusBarColor;
Page.StatusBarStyle;

public enum StatusBarStyle
{
      Default = 0,
      LightContent = 1,
      DarkContent = 2
}

Important

For iOS it require changes into info.plist (maybe it can be put into Xamarin.Forms project template for VS and VS for Mac)
If this flag is not set, then the StatusBarStyle will not be changed.

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

The priority settings for the StatusBar are on the container pages TabbedPage, CaruselPage, NaviationPage. it is higher than just pages. And their StatusBar settings will overwrite the settings of the page.

Platforms Affected

• Core/XAML (all platforms)
• iOS
• Android

Behavioral/Visual Changes

@jsuarezruiz thanks for this animation

Before/After Screenshots

Testing Procedure

1. Open Controll Gallery
2. Page StatusBar Gallery
3. Move R, G, and B sliders
4. Toggle Switch
5. Press buttons to check different pages

PR Checklist

• Targets the correct branch
• Tests are passing (or failures are unrelated)

[jsuarezruiz]

The implementation in UWP would not be complex.
You should use for Desktop:
var titleBar = ApplicationView.GetForCurrentView().TitleBar;
And:
var statusBar = StatusBar.GetForCurrentView();
For mobile.

Then, you could modify the BackgroundColor (you also have access to opacity, back button color, etc.).

[KSemenenko]

@jsuarezruiz thanks for help with UWP :)

[KSemenenko]

@jsuarezruiz I also want to add the ability to change the color of the text in the StatusBar.
but for now I have problems with this.

[jsuarezruiz]

@KSemenenko Let's see if I can help you a little bit.

Let's start with UWP. This case is quite simple. You can access to the TitleBar and set custom colors for the background and text color:

var titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ForegroundColor = Windows.UI.Colors.White;
titleBar.BackgroundColor = Windows.UI.Colors.Green;

It is also possible to modify back button colors, inactive status colors, etc. More info: https://docs.microsoft.com/en-us/windows/uwp/design/shell/title-bar

In Android you have the code for the background color. After get the current Window, use the SetStatusBarColor method.

currentWindow.SetStatusBarColor(Android.Graphics.Color.Red);

Since Android M (23) it is possible to set a predefined status bar text colour theme to light or dark https://developer.android.com/reference/android/R.attr#windowLightStatusBar.

if (Build.VERSION.SdkInt >= BuildVersionCodes.M)
{
     currentWindow.DecorView.SystemUiVisibility = (StatusBarVisibility)SystemUiFlags.LightStatusBar;
}

In iOS, since iOS 7 it is possible to set a predefined status bar text colour theme to light or dark. You have to manipulate the Info.plist.

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

Next:

UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.LightContent, false);
GetCurrentViewController().SetNeedsStatusBarAppearanceUpdate();

I hope that helps!

[KSemenenko]

Hello @jsuarezruiz I fixed the code.

[KSemenenko]

But there’s something else to fix.

[KSemenenko]

about if (Element.HasAppeared) problem. While I was testing, I came to the conclusion that I can set this property before adding the page to the visual tree. but executing this command will change the color of the status bar of the current window. @jsuarezruiz @PureWeen

[KSemenenko]

So, GetEffectiveValue this is a very cool idea. but unfortunately this is not enough.

[KSemenenko]

I updated the branch and now the code works as it should. Pay attention TabbedPage Pages - each tab has its own color. @jsuarezruiz

[KSemenenko]

If I need to fix something, please write to me, I will do everything quickly.

[PureWeen]

@KSemenenko are your latest commits a merging of what I was thinking and what you have?

[KSemenenko]

yes @PureWeen, that’s all I have with some of your fixes.
It seems that all this works as it should.
For example, pages in TabbedPage may have their own color.

[KSemenenko]

@PureWeen btw, thank for this

var pageContainer = this as IPageContainer<Page>; 
if (pageContainer?.CurrentPage == null)

it's real cool!

[KSemenenko]

Conflicts fixed.

[sthewissen]

@KSemenenko I'm not sure if (or when) this could get merged into Xamarin.Forms. However, would you be willing to contribute this to the Xamarin.CommunityToolkit if it is decided that it won't make it in? I think people would love to be able to use this functionality sooner than later 👍 (I know I would)

https://github.com/xamarin/XamarinCommunityToolkit

[KSemenenko]

Hello @sthewissen
there are 2 ways

1. do it well, as part of the Page.
2. do it somehow.

I need to know exactly whether the page is showing now or not.
In my PR I added a property to the page. At first public (and I'm sure a lot of people are waiting for it), but it was rejected. then I added private and that's a problem too, so that's why it can not be merged.

So I have no idea how I can add this to XamarinCommunityToolkit.
Except as some kind of static extension method.

[pictos]

@KSemenenko you can do it without Page control, on XCT you can implement just like you do when you need to access native APIs.

// shared layer
public static ChangeStatusBarColor(Color color) => PlatformChangeStatusBarColor(color);



//Platform Specific
static PlatformChangeStatusBarColor(color)
{
    // Do stuffs here
}

[jsuarezruiz]

Could we move this to the Xamarin Community Toolkit?

[jamesmontemagno]

I think that makes a lot of sense to move it over.

[pictos]

Great, so @jamesmontemagno and @jsuarezruiz we already have an opened PR for this feature on XCT xamarin/XamarinCommunityToolkit#812

So, can we close this one?