The color of the badge on iOS does not change from version above 5.0.0.2125 (5.0.0.2196 etc.) [Bug]

[yurysemv]

Description

The color of the badge on iOS does not change from version above 5.0.0.2125 (5.0.0.2196 etc.). Background color is now always Red.

Steps to Reproduce

1. Use BadgeShellItemRenderer
   https://drive.google.com/file/d/1bfLjwiMLYELL4SXMoYB1Nbe6bJ8IKBAB/view?usp=sharing
   https://drive.google.com/file/d/1ht1RUyYhhpq0_3zSCfTr0qdWVDrRXACq/view?usp=sharing
2. Update Xamarin 5.0.0.2196
3. Background color is now always Red, text color also const

Workaround

In BadgeShellItemRenderer i use (Background color is now always Red)
private void ApplyBadge(int index, string text, Color bg, Color textColor)
{
if (TabBar?.Items != null && TabBar.Items.Any())
{
if (!string.IsNullOrEmpty(text))
{
var badgeValue = Convert.ToInt32(text);
if (badgeValue > 0)
{
TabBar.Items[index].BadgeValue = text;
TabBar.Items[index].BadgeColor = bg.ToUIColor();
TabBar.Items[index]
.SetBadgeTextAttributes(new UIStringAttributes()
{
ForegroundColor = textColor.ToUIColor()
}, UIControlState.Normal);
}
else
{
TabBar.Items[index].BadgeValue = "●";
TabBar.Items[index].BadgeColor = UIColor.Clear;
TabBar.Items[index]
.SetBadgeTextAttributes(new UIStringAttributes()
{
ForegroundColor = textColor.ToUIColor()
}, UIControlState.Normal);
}
}
else
{
TabBar.Items[index].BadgeValue = null;
TabBar.Items[index].BadgeColor = UIColor.Clear;
}
}
}

But if you use the code - the color changes, but only once

TabBar.Items[index].BadgeValue = text;

TabBar.ScrollEdgeAppearance.StackedLayoutAppearance.Disabled.BadgeBackgroundColor = bg.ToUIColor();
TabBar.ScrollEdgeAppearance.StackedLayoutAppearance.Focused.BadgeBackgroundColor = bg.ToUIColor();
TabBar.ScrollEdgeAppearance.StackedLayoutAppearance.Normal.BadgeBackgroundColor = bg.ToUIColor();
TabBar.ScrollEdgeAppearance.StackedLayoutAppearance.Selected.BadgeBackgroundColor = bg.ToUIColor();

TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Disabled.BadgeBackgroundColor = bg.ToUIColor();
TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Focused.BadgeBackgroundColor = bg.ToUIColor();
TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Normal.BadgeBackgroundColor = bg.ToUIColor();
TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Selected.BadgeBackgroundColor = bg.ToUIColor();

TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Normal.BadgeTextAttributes = new UIStringAttributes()
{
ForegroundColor = textColor.ToUIColor()
};

Something has changed in the new version Xamarin iOS (5.0.0.2196). I can’t update Xamarin, because the application uses color themes

[jfversluis]

Hey there, yes iOS 15 introduces some new things for Tab Bars and Navbars and now you have to set it through the appearances as you indeed discovered yourself.

I can't really say anything about the not updating of the color since I don't know what the rest of your renderer looks like with that second snippet of code.

[johnsheatjx]

@jfversluis I am running into this same issue. I am unable to set the UITabBar badge color, which had previously been working until I updated to the latest Xamarin Service release 10. I made similar fixes and also am experiencing the same thing, of being able to change the color once, before it defaults back to red. It seems that the issue may have been introduced as part of #14649, where it seems that in the TabbedPageRenderer.cs, where any changes made to the TabBar's appearance is being overwritten using a private _tabBarAppearance, overwriting any changes made to the BadgeBackgroundColor property of the appearance.

`void UpdateiOS15TabBarAppearance()
{
if (_tabBarAppearance == null)
{
_tabBarAppearance = new UITabBarAppearance();
_tabBarAppearance.ConfigureWithOpaqueBackground();
}

		var barBackgroundColor = Tabbed.BarBackgroundColor;
		var isDefaultBarBackgroundColor = barBackgroundColor.IsDefault;

		// Set BarBackgroundColor
		_tabBarAppearance.BackgroundColor = isDefaultBarBackgroundColor ? _defaultBarColor : barBackgroundColor.ToUIColor();

		var barTextColor = Tabbed.BarTextColor;
		var isDefaultBarTextColor = barTextColor.IsDefault;

		// Set BarTextColor
		_tabBarAppearance.StackedLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes
		{
			ForegroundColor = isDefaultBarTextColor ? _defaultBarTextColor : barTextColor.ToUIColor()
		};

		// Set SelectedTabColor
		if (Tabbed.IsSet(TabbedPage.SelectedItemProperty) && Tabbed.SelectedTabColor != Color.Default)
		{
			var foregroundColor = Tabbed.SelectedTabColor.ToUIColor();
			_tabBarAppearance.StackedLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes { ForegroundColor = foregroundColor };
			_tabBarAppearance.StackedLayoutAppearance.Selected.IconColor = foregroundColor;
		}
		else
		{
			var foregroundColor = UITabBar.Appearance.TintColor;
			_tabBarAppearance.StackedLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes { ForegroundColor = foregroundColor };
			_tabBarAppearance.StackedLayoutAppearance.Selected.IconColor = foregroundColor;
		}

		// Set UnselectedTabColor
		if (Tabbed.IsSet(TabbedPage.UnselectedTabColorProperty) && Tabbed.UnselectedTabColor != Color.Default)
		{
			var foregroundColor = Tabbed.UnselectedTabColor.ToUIColor();
			_tabBarAppearance.StackedLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes { ForegroundColor = foregroundColor };
			_tabBarAppearance.StackedLayoutAppearance.Normal.IconColor = foregroundColor;
		}
		else
		{
			var foreground = UITabBar.Appearance.TintColor;
			_tabBarAppearance.StackedLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes { ForegroundColor = foreground };
			_tabBarAppearance.StackedLayoutAppearance.Normal.IconColor = foreground;
		}

		// Set the TabBarAppearance
		TabBar.StandardAppearance = TabBar.ScrollEdgeAppearance = _tabBarAppearance;
	} 

[jfversluis]

Hey @johnsheatjx would you be able to share the code with which you set the color and where you call that in your app? Ideally with a small reproduction sample that shows the issue? That would really help me test the different scenarios here.

@yurisem I see you already posted some code, but it would be great to see a full working example. Because it seems I am missing a Badge object for instance?

Thanks!

[jfversluis]

In the meanwhile, it's a bit of a long shot, I opened a PR that possibly fixes this.

Would you be able to grab the NuGet as described here and let us know if this fixes this issue? Be sure to use the EXACT version on that PR, other versions (also newer ones) will not have this same change.

Besides verifying if this particular issue is fixed also be sure to check other scenarios in the same area to make sure that this fix doesn't accidentally has side-effects 🙂

If this doesn't fix it, please provide that reproduction, that should greatly speed up the process.

Thanks!

[johnsheatjx]

I was not able to test the PR as was not able to find the nuget. However, I ended up solving the issue. Made some changes similar to @yurisem but also made sure I was setting both the TabBar.StandardAppearance and TabBar.ScrollEdgeAppearance as I want the badge color to remain the same for all appearances. Here is a snippet of my code in my custom renderer where I set the tab color.

var tabColor = TabBadge.GetBadgeColor(element);
if (tabColor != Color.Default && TabBar.ScrollEdgeAppearance != null)
{
if (TabBar.StandardAppearance != null)
            {
	TabBar.StandardAppearance.StackedLayoutAppearance.Disabled.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.StandardAppearance.StackedLayoutAppearance.Focused.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.StandardAppearance.StackedLayoutAppearance.Normal.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.StandardAppearance.StackedLayoutAppearance.Selected.BadgeBackgroundColor = tabColor.ToUIColor();

	TabBar.StandardAppearance.InlineLayoutAppearance.Disabled.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.StandardAppearance.InlineLayoutAppearance.Focused.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.StandardAppearance.InlineLayoutAppearance.Normal.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.StandardAppearance.InlineLayoutAppearance.Selected.BadgeBackgroundColor = tabColor.ToUIColor();
}
if (TabBar.ScrollEdgeAppearance != null)
            {
	TabBar.ScrollEdgeAppearance.StackedLayoutAppearance.Disabled.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.ScrollEdgeAppearance.StackedLayoutAppearance.Focused.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.ScrollEdgeAppearance.StackedLayoutAppearance.Normal.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.ScrollEdgeAppearance.StackedLayoutAppearance.Selected.BadgeBackgroundColor = tabColor.ToUIColor();

	TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Disabled.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Focused.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Normal.BadgeBackgroundColor = tabColor.ToUIColor();
	TabBar.ScrollEdgeAppearance.InlineLayoutAppearance.Selected.BadgeBackgroundColor = tabColor.ToUIColor();
}
}

[jfversluis]

Yeah sorry, the CI pipeline has some issues so the NuGet isn't there :(

If I understand correctly, this makes it work for you in all scenarios and it stays the right color?

[jfversluis]

Seems this is solved (or solvable) then for now I assume. Let me know if anything is still needed. Thanks!