Add Shell Badge support

Description

Add badge support to Shell. Description copied from this original issue for Xamarin.Forms.

Public API Changes

Badges should be supported on all shell navigation patterns, which are

• Flyout menu items
• Bottom tabs
• Top tabs

I propose the following properties for first iteration of badge support:

Primary properties

BaseShellItem (bindable properties)

• BadgeText: string to set the number (or something else) of notification-like items
• BadgeMoreText: string to set the number (or something else) of the aggregated more tab
• BadgeTextColor: Foreground color of badge text
• BadgeUnselectedTextColor: Foreground color of badge text if underlying navigation item is in unselected state
• BadgeEffectiveTextColor (readonly): If BadgeUnselectedTextColor is unset, BadgeTextColor will be returned. Otherwise it will return BadgeTextColor if the underlying navigation item is in selected state or BadgeUnselectedTextColor if in unselected state.
• BadgeColor: background color of badge
• BadgeUnselectedColor: background color of badge if navigation item is in unselected state
• BadgeEffectiveColor (readonly): If BadgeUnselectedColor is unset, BadgeColor will be returned. Otherwise it will return BadgeColor if the underlying navigation item is in selected state or BadgeUnselectedColor if in unselected state.

Future implementations / considerations

• Add font image support (might also work for “little dot mode”)
• CSS Styling
• Inheritance of styling related properties
• Additional More properties (TextColor, UnselectedTextColor, Color, UnselectedColor, …)

Bottom tabs use the concept of the More tab if there are more than 5 items. All items with index >= 5 will be “hidden” by this more tab and handled by a platform specific context menu.

One use case would be the transformation of the underlying items hidden by this more tab. For example Item 5 (Messages) has “1” new item and Item 6 (Notifications) has “2” new items, so you could show “3” in the more tab, but the user would not how how this is split between the aggregated items.

We could think of modifying the text (e.g. for the example above “Messages (1)” and “Notifications (6)”). I’m proposing this because adding a badge to the underlying platform specific context menu could be too much work / impossible for a specific platform. Modifying the title value should definitely work though and we would see at least something.

Internal implementation

Android

Material components will support badges out of the box, which when I understood it correctly can be used when AndroidX is supported by Xamarin. In the meantime we have to supply a custom implementation like this for badges.

Flyout

Flyout menu is created by the ShellFlyoutTemplatedContentRenderer in combination with ShellFlyoutRecyclerAdapter. The data template is based on forms controls, so we just might use a Frame here for the default template. For custom templates the user has to provide the necessary controls and bind color, text, etc…

Bottom tabs

ShellItemRenderer uses BottomNavigationView, which can be used to retrieve the underlying BottomNavigationItemView items and inject the badge view.

The more tab uses a BottomSheetDialog.

Top tabs

ShellSectionRenderer uses TabLayout, which can be used to retrieve the underlaying TabView items and inject the badge view.

iOS

Flyout

Flyout menu is created by the ShellTableViewController in combination with ShellTableViewSource. The data template is based on forms controls, so we just might use a Frame here for the default template. For custom templates the user has to provide the necessary controls and bind color, text, etc…

Bottom tabs

ShellItemRenderer uses UITabBarController which can use the UITabBarItem to specify native Badge properties.

The more tab uses the default implementation of the MoreNavigationController of UITabBarController.

Top tabs

ShellSectionRootRenderer uses a UICollectionView, so you would have to modify ShellSectionHeaderCell and add a custom badge view (something like this).

[DavidChoi2022]

Badge in tab is useful, and it is also an indispensable part of the UI system. come on!

[victordscott]

This was holding me up from converting a Xamarin Forms application to Maui. I converted code from the Xam.Shell.Badge plugin and pulled it into my application to solve this for iOS and Android. Here is a sample application you can start with:

https://github.com/victordscott/MauiShellBadgeTest