How to change StatusBar color in MAUI

MAUI Community Toolkit provides us StatusBarBehavior to change status bar color and style. So In this article, I’m going to show you how to change StatusBar color in MAUI.

Let’s Start

In this sample demo we will use CommunityToolkit.Maui nuget package.

CommunityToolkit.Maui

CommunityToolkit.Maui is a collection of Converters, Behaviours, Animations, Custom Views, Effects, Helpers etc. It simplifies the developers task when building Android, iOS, macOS and WinUI applications using MAUI.

1 – Install CommunityToolkit.Maui nuget package

2 – In order to use the .NET MAUI Community Toolkit we need to call the extension method in MauiProgram.cs file as follows

using CommunityToolkit.Maui;
using Microsoft.Extensions.Logging;

namespace MAUIiOSStatusBarBehaviorDemo;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

3 – iOS Setup

We need to add following key value to the Info.plist file.

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

We don’t require any extra setup for Android.

4 – Setting up the UI

4.1 – Create a MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MAUIiOSStatusBarBehaviorDemo.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Name="MainContainer">

    <ScrollView>
        <VerticalStackLayout Padding="30,30" Spacing="25">

            <FlexLayout
                x:Name="StackColorList"
                AlignItems="Center"
                BindableLayout.ItemsSource="{Binding Colors}"
                Direction="Row"
                FlexLayout.AlignSelf="Center"
                HorizontalOptions="FillAndExpand"
                JustifyContent="Center"
                Wrap="Wrap">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Button
                            BackgroundColor="{Binding Color}"
                            BorderColor="Transparent"
                            BorderWidth="2"
                            Command="{Binding BindingContext.ColorItemClickedCommand, Source={x:Reference MainContainer}}"
                            CommandParameter="{Binding .}"
                            CornerRadius="0"
                            HeightRequest="100"
                            WidthRequest="100">
                            <Button.Triggers>
                                <DataTrigger
                                    Binding="{Binding IsSelected}"
                                    TargetType="Button"
                                    Value="True">
                                    <Setter Property="BorderColor" Value="Red" />
                                </DataTrigger>
                            </Button.Triggers>
                        </Button>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </FlexLayout>

            <Button
                x:Name="CounterBtn"
                Command="{Binding ChangeStatusBarColorCommand}"
                HorizontalOptions="Center"
                Text="Change StatusBar Color" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

As in the above MainPage.xaml I have used a bindable layout to show a list of colors and button to change the status bar color.
So when a user selects a color from a list and clicks on the change status bar button then that picked color will be set in the status bar.

5 – Setting up the ViewModel

using CommunityToolkit.Maui.Core;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace MAUIiOSStatusBarBehaviorDemo
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public ICommand ColorItemClickedCommand { get; set; }
        public ICommand ChangeStatusBarColorCommand { get; set; }
        private ColorItem _lastSelectedItem;

        private ObservableCollection<ColorItem> _colors;
        public ObservableCollection<ColorItem> Colors
        {
            get { return _colors; }
            set
            {
                _colors = value;
                OnPropertyChanged(nameof(Colors));
            }
        }

        public MainPageViewModel()
        {
            ColorItemClickedCommand = new Command<ColorItem>((i) => OnColorItemClicked(i));
            ChangeStatusBarColorCommand = new Command(OnChangeStatusBarColor);

            Colors = new ObservableCollection<ColorItem>()
            {
                new ColorItem(){ Color = Color.FromArgb("#F7DC6F") },
                new ColorItem(){ Color = Color.FromArgb("#7DCEA0") },
                new ColorItem(){ Color = Color.FromArgb("#7FB3D5") },
                new ColorItem(){ Color = Color.FromArgb("#9B59B6") },
                new ColorItem(){ Color = Color.FromArgb("#641E16") },
                new ColorItem(){ Color = Color.FromArgb("#00FF00") },
                new ColorItem(){ Color = Color.FromArgb("#1ABC9C") },
                new ColorItem(){ Color = Color.FromArgb("#1B4F72") },
                new ColorItem(){ Color = Color.FromArgb("#D7DBDD") },
            };
        }

        private void OnColorItemClicked(ColorItem item)
        {
            if (item != null)
            {
                if (_lastSelectedItem != null)
                    _lastSelectedItem.IsSelected = false;

                _lastSelectedItem = item;
                item.IsSelected = true;
            }
        }

        private void OnChangeStatusBarColor()
        {
            if (_lastSelectedItem != null)
            {
                CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(_lastSelectedItem.Color);
                CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(StatusBarStyle.LightContent);
            }
        }

        public void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class ColorItem : INotifyPropertyChanged
    {
        private bool _isSelected;
        public bool IsSelected
        {
            get { return _isSelected; }
            set
            {
                _isSelected = value;
                OnPropertyChanged();
            }
        }

        private Color _color;
        public Color Color
        {
            get { return _color; }
            set
            {
                _color = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

As in the above MainPageViewModel, I have created a list of colors and bind this to a bindable layout.
OnColorItemClicked() method called when a user select or pick a color from bindable layout.
OnChangeStatusBarColor() method gets called when a user clicks on the button. This method contains the code to change the status bar color from viewmodel.
We can also change status bar color from xaml and c#.

From xaml

<ContentPage.Behaviors>
      <toolkit:StatusBarBehavior StatusBarColor="Red" StatusBarStyle="LightContent" />
</ContentPage.Behaviors>

From C#

class MainPage : ContentPage
{
    public MainPage()
    {
        this.Behaviors.Add(new StatusBarBehavior
        {
            StatusBarColor = Colors.Red,
            StatusBarStyle = StatusBarStyle.LightContent
        });
    }
}

Result