[Spec] Badge support for Shell

[Dresel]

Summary

There are requests for badge support for classic tabs and there are also some libraries out there which kinda support that. With shell it's not possible to use this libraries without touching / replacing too much of the shell internals so it would be great if shell supports this scenario out of the box. I couldn't find anything related in shell spec, that's why I'm proposing it here.

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

Screenshots

TODO: Add them here

Feedback welcome.

[samhouts]

Sounds great to me! @davidortinau @pauldipietro Anything to add?

[Dresel]

I have started implementation for bottom tabs support (see fork), because this will cover most needs and is the easiest to implement.

How should I proceed? Should I go for a PR? Do you want to refine specification or implementation details?

Android

iOS

[PureWeen]

@Dresel can you create a draft PR against your fork and then we can check it out?

[Dresel]

Feel free to test.

[Dresel]

Little dot mode might be looking something like this (Android):

[TheBaileyBrew]

Badge support shouldn't be limited to only Tabs (top or bottom) - it should also be supported in the FlyoutMenu itself so the badges can be seen when the flyout opens and users don't need to navigate into each page to see the badges.

[Dresel]

Badge support shouldn't be limited to only Tabs (top or bottom) - it should also be supported in the FlyoutMenu itself so the badges can be seen when the flyout opens and users don't need to navigate into each page to see the badges.

Yes, it's on my (extended) list, might look similar to

Since Flyout Items are rendered with forms controls and can use custom templates, it's (from an implementations perspective) different though. I will update the spec according to that soon.

[andreinitescu]

Can we please have this for non Shell too? I am thinking that it should be first implemented in the non Shell (classic) and then surfaced in Shell.

If we start having having feature discrepancies between Shell and non-Shell that doesn’t sound good to me. I am referring to only features like this one, obviously not everything can or should be in non Shell, that’s the reason why Shell exists.

[Dresel]

Can we please have this for non Shell too? I am thinking that it should be first implemented in the non Shell (classic) and then surfaced in Shell.

If we start having having feature discrepancies between Shell and non-Shell that doesn’t sound good to me. I am referring to only features like this one, obviously not everything can or should be in non Shell, that’s the reason why Shell exists.

What's wrong with packages like xamarin-forms-tab-badge? Problem with shell is that it's not possible to use this libraries without touching / replacing too much of the shell internals, that's why I was proposing this in the first place.

[andreinitescu]

My suggestion is not related to that package, it might be a great package. I was only suggesting a way I think it's best to handle this, which is to give this new feature to non-Shell apps too. I just wanted to share my feedback, your proposal is great.

[Dresel]

Spec updated.

[motoko89]

This is great! Hopefully it's available in pre-release soon

[TraceFerrier]

Yep, for our app to be able to continue to use the new Shell, this is a must! Thanks, and waiting anxiously!

[codrinamerigo]

Yep, for our app to be able to continue to use the new Shell, this is a must! Thanks, and waiting anxiously!

Also for our app! This is highly requested from the business side

[alex-relov]

when will the badge for shell appear in xamarin forms?
Can you show an example of a renderer for Tab (ShellSection) with badge?

[Dresel]

I'm currently waiting for review / feedback from the XF team, I cannot tell you when this will be ready.

Can you show an example of a renderer for Tab (ShellSection) with badge?

If you want you can build the XF repo and play with the Control Gallery sample or check the PR sources.

[imranaz]

@Dresel do you have an ETA when badge support within toolbar and flyout menu will be available? We're released a Xamarin based app and user engagement is being impacted by the lack of badges. In-app badges are essential for all modern apps and I'm surprised that this feature is not getting prioritized on the Xamarin team. Thanks and looking forward to your feedback.

[Dresel]

@Dresel do you have an ETA when badge support within toolbar and flyout menu will be available? We're released a Xamarin based app and user engagement is being impacted by the lack of badges. In-app badges are essential for all modern apps and I'm surprised that this feature is not getting prioritized on the Xamarin team. Thanks and looking forward to your feedback.

PR is ready for review - hopefully soon 👍

[jennablackwell]

When is this going to be released?

[Dresel]

When is this going to be released?

I'm currently waiting for review. I don't know how work items are prioritized, maybe @samhouts can tell you more.

[RodSanford]

I'm pretty sure you have a team of testers ready to check it out, myself included.

[jennablackwell]

When is this going to be released?

I'm currently waiting for review. I don't know how work items are prioritized, maybe @samhouts can tell you more.

@samhouts will this be included anytime soon? Been waiting on this for awhile since switching to AppShell! It's pretty much expected in apps to have a red badge on a tab icon for notifications....

[samhouts]

We're still reviewing the PR. We hope to have it ready soon! Thanks for your patience!

[mohamadayash]

Hello @samhouts really this is an urgent in our software , I hope it will be applied so soon
Thank you

[SnowPowerCore]

Hello. +1 assigning to the priority of this feature. It's a "must-have" thing for Xamarin.Forms development with the help of Shell.

[sgreifeneder]

What does "ready soon" mean? I don't know why this takes so long, it's open for more than a year now and a very basic feature. I hope it will be really ready soon ...

[saiyamshah143]

+1

[chadzhao]

vNext+1 means 4.8.0? have it done in 4.8.0, please.

[galadril]

Im really waiting for this feature! Thanks @Dresel

[tawreyhap]

@galadril
Thank you for your work on providing a workaround example for shell tabbar badges.
Is there any chance you could please share the XAML referenced in CustomShellBottomAppearance.cs's SetAppearance method for the iOS platform?

There is not XAML reference in the iOS CustomShellBottomAppearance.cs's SetAppearance ...?

Very true @galadril there is no XAML referenced in your iOS platform's CustomShellBottomAppearance.cs's SetAppearance method but where we assign the badge value:  "controller.TabBar.Items[2].BadgeValue = badge.ToString();". We are setting the value to a badge which I assume is either created on the client XAML side or in code for the iOS implementation of the Shell's tabbar. I am curious to see how you added the badges for iOS to the tabbar. Thank you in advance for your help.

Hi @tawrey , I have the same question. Did you find how the XAML is?

No, I did not come up with a XAML to handle the iOS workaround version.
Can anyone else provide a working example please?

[samhouts]

Work is still ongoing on the associated PR. Thanks for your patience!

[samirgcofficial]

Any updates when can we expect this feature on Xamarin Forms Version ?

[galadril]

I've quickly setup a NuGet package / Plugin library to ease the implementation for a badge on a bottom bar for you guys:
https://github.com/galadril/Xam.Shell.Badge

( @angelru @jmelendez025 @tawrey @kamranmasud @tawreyhap @thuyetpv @dan5602 )

You can use the nuget package, or look at the code on how to do it yourself

[Deepfreezed]

FIXED, Looks like this is the reason it doesn't display https://github.com/xamarin/Xamarin.Forms/pull/10063. When default color is not specified, it goes to white. You have to basically replicate code in SetAppearance and ResetAppearance when overriding the renderer on Android.

Also, you can also use platform specific Dependency injection to control the badge label. Alternative for using messaging.

@galadril iOS seems to be working without issues, thanks!

Although, I am having an issue with Android. Looks like the Shell.TabBarTitleColor is not getting set when overriding the Renderer. The selected tab color is not set. I don't think any of the shell tab color setting are applied on Android. Any idea?

Do we have to persist IShellAppearanceElement from SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)?

[decv86]

+1 when...

[alekssam]

I've quickly setup a NuGet package / Plugin library to ease the implementation for a badge on a bottom bar for you guys:
https://github.com/galadril/Xam.Shell.Badge

( @angelru @jmelendez025 @tawrey @kamranmasud @tawreyhap @thuyetpv @dan5602 )

You can use the nuget package, or look at the code on how to do it yourself

Not working for me. Nothing happens

[SnowPowerCore]

I've quickly setup a NuGet package / Plugin library to ease the implementation for a badge on a bottom bar for you guys:
https://github.com/galadril/Xam.Shell.Badge
( @angelru @jmelendez025 @tawrey @kamranmasud @tawreyhap @thuyetpv @dan5602 )
You can use the nuget package, or look at the code on how to do it yourself

Not working for me. Nothing happens

Hello @alekssam, library has been updated, please, try again with new version. Also, please read repository readme.md info, as there are some breaking changes.

[galadril]

Although, I am having an issue with Android. Looks like the Shell.TabBarTitleColor is not getting set when overriding the Renderer. The selected tab color is not set. I don't think any of the shell tab color setting are applied on Android. Any idea?

@Deepfreezed > There is a new version, please check that one. (v1.0.8)

[John0King]

It's unbelievable that current Xamarin doesn't support it.
just look at the Wechat mini program

• navigation https://developers.weixin.qq.com/miniprogram/en/dev/api/route/wx.switchTab.html
• ability https://developers.weixin.qq.com/miniprogram/en/dev/api/ui/tab-bar/wx.showTabBarRedDot.html

[jfversluis]

@John0King you're referencing things in a tab bar. Badges are supported in the TabView that is available in this Toolkit. Did you see that one?

I think there is some exploration going on about integrating that into Shell so that it's also available there

[John0King]

@jfversluis is there any document about how to using that ?

[jfversluis]

Not published yet. We have some minimal info here: https://github.com/MicrosoftDocs/xamarin-communitytoolkit/blob/master/docs/views/tabview.md

And you can always check out the sample app: https://github.com/xamarin/XamarinCommunityToolkit/tree/main/samples/XCT.Sample/Pages/Views/TabView

[angelru]

TabView is fine but not lazy loading yet. Let's see if Badge comes out soon in Shell

[decv86]

TabView is fine but not lazy loading yet. Let's see if Badge comes out soon in Shell

I think never ... Probably all efforts are directed to the new MAUI

[jfversluis]

@decv86 this project won't do anything on regard to .NET MAUI, all efforts will target Forms 5 and that includes Shell

[vniehues]

@Dresel Do you have an update on this for us? :)

[angelru]

I don't know if they will leave it for MAUI or what will happen...

[smhasan]

Any update on this topic

[TanishqThakral]

@samhouts @Dresel Any updates??

[angelru]

any idea of this for MAUI?

[nichojo89]

I've quickly setup a NuGet package / Plugin library to ease the implementation for a badge on a bottom bar for you guys: https://github.com/galadril/Xam.Shell.Badge

( @angelru @jmelendez025 @tawrey @kamranmasud @tawreyhap @thuyetpv @dan5602 )

You can use the nuget package, or look at the code on how to do it yourself

This nuget was a life saver, thank you @galadril !

[pictos]

This will not happen on this project, since it's in code freeze mode. IF you want to see this feature, open a discussion around it here

[PlaysafePP]

So if I get this right, some great badge support was suggested 4 years ago. Some great progress was made, but it was never integrated in any Xamarin release, however a nuget is available to add support show badges in bottom tabs,

What about badges in shell flyout items? Does anybody have any solutions for this?

[angelru]

@PlaysafePP Maybe on MAUI or the MAUI Community Toolkit.