I'm trying to set the badge color of a UITabBarItem from a resource file, but will settle for anything other than the default red.
I've created a custom ShellTabBarAppearanceTracker
for the iOS platform, and attempting to update the badge color from via an event handler.
class BadgeShellTabbarAppearanceTracker : ShellTabBarAppearanceTracker
{
private UITabBarItem? notificationTabbarItem;
public override void UpdateLayout(UITabBarController controller)
{
// Set event listener to UpdateBadge here when count changes
}
private void UpdateBadge(int count)
{
if (notificationTabbarItem is not null)
{
Color cyan;
if (App.Current.Resources.TryGetValue("CyanAccent", out var colorvalue))
{
cyan = (Color)colorvalue;
notificationTabbarItem.BadgeColor = cyan.ToPlatform();
}
}
}
}
All of the UpdateBadge
code is being reached on every count change. It even appears to be setting the color correctly when stepping through and inspecting the variables.
Replacing the lookup to the resource directory, and setting the color to a standard MAUI color doesn't change it either.
notificationTabbarItem.BadgeColor = Colors.Blue.ToPlatform();
I've tried invoking this on the main thread with no change:
MainThread.BeginInvokeOnMainThread(() =>
{
item.BadgeColor = Colors.Blue.ToPlatform();
});
And also directly through the TabBar.StandardAppearance
:
var appearance = controller.TabBar.StandardAppearance;
appearance.StackedLayoutAppearance.Normal.BadgeBackgroundColor = Colors.Pink.ToPlatform();
appearance.InlineLayoutAppearance.Normal.BadgeBackgroundColor = Colors.Pink.ToPlatform();
appearance.CompactInlineLayoutAppearance.Normal.BadgeBackgroundColor = Colors.Pink.ToPlatform();
Very similar code to the original snippet works perfectly for Android.
Where/how should I be setting the color of the badge?
Thanks in advance.
There is no direct API to modify the Badge Color in MAUI. You could raise a feature request on GitHub if you want.
And yes there is a workaround but a little bit tricky. That is to use Maui Handler.
I recommend you refer to How to Increase Font Size for TabBar Menu Items in .NET MAUI on iOS. Our workaround for this case also uses this process.
The only difference is for TabbedViewExtensions.cs. (The answer link I posted above adds some code to change UIStringAttributes
. Don't forget to delete them). Add the following line TabbedViewExtensions.cs to change the Badge Color,
internal static void UpdateiOS15TabBarAppearance(
this UITabBar tabBar,
ref UITabBarAppearance _tabBarAppearance,
UIColor? defaultBarColor,
UIColor? defaultBarTextColor,
Color? selectedTabColor,
Color? unselectedTabColor,
Color? barBackgroundColor,
Color? selectedBarTextColor,
Color? unSelectedBarTextColor)
{
...
//Add the following line
if (App.Current.Resources.TryGetValue("CyanAccent", out var colorvalue))
{
var cyan = (Color)colorvalue;
_tabBarAppearance.StackedLayoutAppearance.Normal.BadgeBackgroundColor = cyan.ToPlatform();
}
...
Here is the effect that change badge color from red to cyan.
Hope it helps!