StatusBar unter Android, iOS und UWP einfärben

Die drei großen Plattformen verfügen jeweils über eine StatusBar, welche man je nach der eigenen App einfärben möchte. Leider ist dies zum jetzigen Zeitpunkt nicht im plattformunabhängigen Code möglich, daher muss dies tatsächlich auf jeder Plattform implementiert werden. In diesem Beitrag möchte ich euch nun für jede Plattform zeigen, wie man die StatusBar entsprechend einfärben kann.

Android

Werfen wir zunächst einen Blick auf Android. Hier öffnen wir die Datei MainActivity.cs und ergänzen in der Methode OnCreate den Aufruf der Methode SetStatusBarColor. Hier können wir eine beliebige Farbe übergeben.

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    SetStatusBarColor(Xamarin.Forms.Color.FromHex("#CC0000").ToAndroid());

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
    LoadApplication(new App());
}

UWP

Als nächsten werfen wir einen Blick auf UWP. Hier öffnen wir die Datei MainPage.xaml.cs innerhalb des UWP-Projekts. Im Konstruktor holen wir und für die aktuelle View die TitleBar und aktualisieren die Hintergrundfarbe.

public MainPage()
{
    this.InitializeComponent();

    LoadApplication(new XFStatusBar.App());

    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.BackgroundColor = Xamarin.Forms.Color.FromHex("#CC0000").ToWindowsColor();
}

iOS

Jetzt fehlt nur noch die Umsetzung für das Apple-Betriebssystem iOS. Hier ist es leider nicht ganz so einfach, wie für die anderen beiden Plattformen. Zunächst öffnen wir die Datei Info.plist im Editor und ergänzen den folgenden Eintrag.

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

Nun öffnen wir die Datei AppDelegate.cs und setzen die Translucent-Eigenschaft der UINavigationBar auf false.

UINavigationBar.Appearance.Translucent = false;

Damit leider noch nicht genug, denn nun muss noch der Renderer für die ContentPage überschrieben werden. Hier holen wir uns wieder das StatusBar-Objekt und aktualisieren entsprechend die Hintergrundfarbe.

[assembly: ExportRenderer(typeof(ContentPage), typeof(CustomPageRenderer))]
namespace XFStatusBar.iOS.Renderers
{
    public class CustomPageRenderer : PageRenderer
    {
        protected override void OnElementChanged(
            VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
                return;

            try
            {
                UpdateStatusBarColor();
            }
            catch(Exception ex)
            {
                Debug.WriteLine($"{GetType().Name} | " +
                    $"{nameof(OnElementChanged)} | {ex}");
            }
        }

        private void UpdateStatusBarColor()
        {
            var statusBar = GetStatusBar();
            statusBar.BackgroundColor = 
                Color.FromHex("#CC0000").ToUIColor();
        }

        private UIView GetStatusBar()
        {
            UIView statusBar;

            if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
            {
                var customTag = 12456789;
                var window = UIApplication.SharedApplication
                    .Windows.FirstOrDefault();

                statusBar = window.ViewWithTag(customTag);

                if (statusBar == null)
                {
                    statusBar = new UIView(UIApplication.SharedApplication
                        .StatusBarFrame)
                    {
                        Tag = customTag
                    };

                    window.AddSubview(statusBar);
                }
            }
            else
            {
                statusBar = UIApplication.SharedApplication
                    .ValueForKey(new NSString("statusBar")) as UIView;
            }

            return statusBar;
        }
    }
}

Damit haben wir jetzt für alle drei Plattformen eine Lösung gefunden, um die StatusBar jeweils einzufärben. Ich habe euch ein Beispiel-Projekt auf GitHub abgelegt, so dass ihr dieses für eure nächsten Projekte einfach übernehmen könnt.