[Enhancement] Add BarStyleManager to manage navigation and status bar color

[maxkoshevoi]

Summary

Add methods to change status and navigation bar color and appearance (white or dark text color).

API Changes

Here is the interface that I use:

namespace MyProject.Core.Models.InterplatformCommunication
{
    public interface IBarStyleManager
    {
        void SetStatusBarColor(string hexColor);

        void SetNavigationBarColor(string hexColor);
    }
}

Android implementation (modified SO answer):

Show/Hide code

using Android.Graphics;
using Android.OS;
using Android.Views;
using MyProject.Core.Models.InterplatformCommunication;
using NureTimetable.Droid.Dependences;
using Xamarin.Essentials;
using MyProject.Core.Extensions;

[assembly: Xamarin.Forms.Dependency(typeof(BarStyleManager))]
namespace MyProject.Droid.Dependences
{
    public class BarStyleManager : IBarStyleManager
    {
        public void SetStatusBarColor(string hexColor)
        {
            if (Build.VERSION.SdkInt < BuildVersionCodes.M)
            {
                return;
            }

            Color color = Color.ParseColor(hexColor);
            MainThread.BeginInvokeOnMainThread(() =>
            {
                var currentWindow = GetCurrentWindow();
                SetBarAppearance(currentWindow, color == Color.White, null);
                currentWindow.SetStatusBarColor(color);
            });
        }

        public void SetNavigationBarColor(string hexColor)
        {
            if (Build.VERSION.SdkInt < BuildVersionCodes.M)
            {
                return;
            }

            Color color = Color.ParseColor(hexColor);
            MainThread.BeginInvokeOnMainThread(() =>
            {
                var currentWindow = GetCurrentWindow();
                SetBarAppearance(currentWindow, null, color == Color.White);
                currentWindow.SetNavigationBarColor(color);
            });
        }

        private static void SetBarAppearance(Window currentWindow, bool? statusBarLight = null, bool? navigationBarLight = null)
        {
            StatusBarVisibility barAppearanceOld = 0;
            WindowInsetsControllerAppearance barAppearanceNew = 0;
            if ((int)Build.VERSION.SdkInt < 30)
            {
#pragma warning disable CS0618 // Type or member is obsolete. Using new API for Sdk 30+
                barAppearanceOld = currentWindow.DecorView.SystemUiVisibility;
#pragma warning restore CS0618 // Type or member is obsolete
            }
            else
            {
                barAppearanceNew = (WindowInsetsControllerAppearance)currentWindow.InsetsController.SystemBarsAppearance;
            }

            if (statusBarLight == true)
            {
                barAppearanceOld = barAppearanceOld.AddFlag((StatusBarVisibility)SystemUiFlags.LightStatusBar);
                barAppearanceNew = barAppearanceNew.AddFlag(WindowInsetsControllerAppearance.LightStatusBars);
            }
            else if (statusBarLight == false)
            {
                barAppearanceOld = barAppearanceOld.RemoveFlag((StatusBarVisibility)SystemUiFlags.LightStatusBar);
                barAppearanceNew = barAppearanceNew.RemoveFlag(WindowInsetsControllerAppearance.LightStatusBars);
            }
            if (navigationBarLight == true)
            {
                barAppearanceOld = barAppearanceOld.AddFlag((StatusBarVisibility)SystemUiFlags.LightNavigationBar);
                barAppearanceNew = barAppearanceNew.AddFlag(WindowInsetsControllerAppearance.LightNavigationBars);
            }
            else if (navigationBarLight == false)
            {
                barAppearanceOld = barAppearanceOld.RemoveFlag((StatusBarVisibility)SystemUiFlags.LightNavigationBar);
                barAppearanceNew = barAppearanceNew.RemoveFlag(WindowInsetsControllerAppearance.LightNavigationBars);
            }
            
            if ((int)Build.VERSION.SdkInt < 30)
            {
#pragma warning disable CS0618 // Type or member is obsolete. Using new API for Sdk 30+
                currentWindow.DecorView.SystemUiVisibility = barAppearanceOld;
#pragma warning restore CS0618 // Type or member is obsolete
            }
            else
            {
                currentWindow.InsetsController?.SetSystemBarsAppearance((int)barAppearanceNew, (int)barAppearanceNew);
            }
        }

        private Window GetCurrentWindow()
        {
            Window window = Platform.CurrentActivity.Window;
            window.ClearFlags(WindowManagerFlags.TranslucentStatus);
            window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
            return window;
        }
    }
}

Intended Use Case

This will be used to more easily customize theme of the application

Who Will Do The Work?

• I am willing to take this on myself (but only for Android. I have no experience in iOS development and don't have Mac to do it)
• Just putting this out there for someone to pick up

[pictos]

@maxkoshevoi thanks a lot for this submission. Will be possible to instead of having a DI service, do it with AttachedProperties? This way we can set the values in xaml also. I think that could be a Page Attached property for StatusBarColor and a NavigationPage Attached property for the NavigationBarColor.

<StackLayout Page.StatusBarColor = "Red"  NavigationPage.NavBarColor = "Red"/>

For the NavigationBarColor you can use my PR on XF as a reference and for status bar color you can use this PR as a reference.

Please let me know what do you think.

[maxkoshevoi]

@pictos Thanks for the answer. So there is already a PR for this? Why isn't it merged yet?
I think there is a little misunderstanding with terminology. I borrowed those names from Android's window.SetStatusBarColor and window.SetNavigationBarColor methods. Here's what I mean by status (blue) navigation (red) bars:

I think they should both be Page attached properties or both be static API methods like you suggested here: xamarin/Xamarin.Forms#8298 (comment)
It seems like PR for status bar isn't going in exactly because StatusBarColor is Page attached property

[pictos]

@maxkoshevoi

So there is already a PR for this?

Yes, there's a PR, but for XF project.

Why isn't it merged yet?

I don't know, but I can guess that's because the team didn't have time to make those features feat in 5.0 release. After this release, the XF will not have new features added just bug fixes and improvements, said that this project is the right place to add those kinds of features. Actually, a good amount of XF PRs that didn't get merged will be moved here.

I think they should both be Page attached properties or both be static API methods like you suggested here

The attached properties fit better because that way devs can change the value easily in both XAML and code-behind. If you want you can send a spec for this API to me and others take a look and approval this Enhancement (:

Anything that you need please let me know.

[maxkoshevoi]

@pictos I see the benefits of implementing them as attached properties, I just don't have experience implementing any 😄 (I mean, I use MVVM, but that's about it). Page is defined inside XF, so how can I extend it from XCT? Will it look something like this?

<ContentPage 
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
    xct:Page.StatusBarColor = "Red">
...

1. It there some documentation on how to do this? I'll use PRs you provided as references, but if there are some docs, that would be great.
2. Is there some PR for navigation bar color? (that's red on my screenshot)
3. How does XCT gets current activity on Android?

[pictos]

@maxkoshevoi

It there some documentation on how to do this? I'll use PRs you provided as references, but if there are some docs, that would be great.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/attached-properties

Is there some PR for navigation bar color? (that's red on my screenshot)

As far as I know isn't a PR for that. Since this feature just makes sense on Android we need to think about how to add that on XCT. Probably using the PlatformSpecific API. Anyway, If we don't figure out a good way to implement this on Android right now, we can split this feature into two PRs.

How does XCT gets current activity on Android?

On my tests for Android implementation of the PopUp control I could get the Context using this line:
var ctx = Android.App.Application.Context;

If that doesn't work for you please let me know.

Also, we have a discord group that you can reach out if you have any further questions.

[acaliaro]

could be useful to have also the possibility to set the "accent" color?

[maxkoshevoi]

could be useful to have also the possibility to set the "accent" color?

Could you please explain what do you mean by "accent" color and how is it related to status bar style?
You can already create a color resource named AccentColor and use it in your application where it's needed.
If you mean "accent" color that is specified in styles.xml in Android project, I don't think it can be changed without restarting activity with different theme.

[acaliaro]

could be useful to have also the possibility to set the "accent" color?

Could you please explain what do you mean by "accent" color and how is it related to status bar style?
You can already create a color resource named AccentColor and use it in you r application where it's needed.
If you mean "accent" color that is specified in styles.xml in Android project, I don't think it can be changed without restarting activity with different theme.

Hi.
It's not related to StatusBar but I think it's a "style" that could be useful to have with StatusBar color. Now, to change the Accent color, i think the only way is to change it in the Android platform specific project, correct? or there is a way to change it in XF?

[maxkoshevoi]

@acaliaro If it's not related to StatusBar, could you please open a separate issue for it.

[maxkoshevoi]

Closed by #812