Add Shell Badge support

[angelru]

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).

[jfversluis]

Copied the description from the original issue for Xamarin.Forms into here. I think some work even has been done at some point, so we might be able to salvage some code from there.

[Reed-Anderson]

What's the process for approving proposals like this? Is it likely for this to be approved and implemented within the next 6 months or so?

[angelru]

What's the process for approving proposals like this? Is it likely for this to be approved and implemented within the next 6 months or so?

I don't know how long it will take to approve it.

[DavidChoi2022]

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

[lucianparvu]

It is there a workaround ? From where can i start to make custom tabs with some badges and use shell in the same time ?

[angelru]

@lucianparvu

You can create a shell app that contains a page and within the page a view with https://github.com/roubachof/Sharpnado.Tabs

[swetaVanjara]

any example around this. I've added badge in iOS. how can i add in android ??

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[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

[dongfo]

any one work on it ?

[Kol-yan]

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

Thank you so much for sharing this!

[bidianqing]

any one work on it ? @jfversluis

[Abhayprince]

Got it working with custom platform specific shell handlers for Android and iOS
https://github.com/Abhayprince/TabbarBadgeShellMAUI

[Cybrosys]

Any update on this? I've looked at @Abhayprince 's example, but it hardcodes the tab index. I'm trying to achieve a more dynamic solution where in the renderer I could find pages that inherit from my base class or use a message from the page that includes some ID that I can identify in the renderer.

For now I'm getting a page's index with this in the ctor of the ContentPage:

var currentSection = Shell.Current.CurrentItem;
var currentContent = currentSection.CurrentItem.CurrentItem;
Index = currentSection.Items.IndexOf(currentContent);

My base ContentPage has a bindable property BadgeCountProperty which uses the WeakReferenceMessenger to send a message that my appearance tracker is listening for.

[smhasan]

@Cybrosys Would you like to share example code

[tonyedwardspz]

@Abhayprince That's the perfect starting point for me. Thanks for putting it together.

I'm struggling to get the badge color to chage to anything other than red, which is the iOS platform default. Did you have any luck using any other colors when creating that tutorial?

[angelru]

is there news?

[tonyedwardspz]

For anyone ending up here looking for a solution to changing the badge color on iOS, check out this answer to my
SO question..

For Android, refer to the github project shared by Abhay further up the thread.