[Spec] Badge support for Shell

Dresel commented 5 years ago

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.

galadril commented 4 years ago

So this is still not in the new version that came out.. 4.8.0..?

Remmo commented 4 years ago

So this is still not in the new version that came out.. 4.8.0..?

at the moment there's no version planned, they removed it from .NET MAUI too....

BartoszKopec commented 4 years ago

@samhouts why this simple functionality isn't merged yet? We have 3 workarounds here but still without official support form Xamarin. Fourth workaround could be to stick bottmbar contentview (with badges) to pages and hide shell's bottombar and still using magic of shell's navigation. Maybe at least allow to write own bottombar contentview (or at least bottombar's buttons as contentview) in place of shell's bottombar (without badges).

tawreyhap commented 4 years ago

@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 commented 4 years ago

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

samirgcofficial commented 4 years ago

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

galadril commented 4 years ago

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 commented 4 years ago

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

Droid_Tabbar1 Droid_Tabbar2

decv86 commented 4 years ago

+1 when...

alekssam commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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

jfversluis commented 3 years ago

@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 commented 3 years ago

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

jfversluis commented 3 years ago

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 commented 3 years ago

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

decv86 commented 3 years ago

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 commented 3 years ago

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

vniehues commented 3 years ago

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

angelru commented 3 years ago

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

smhasan commented 3 years ago

Any update on this topic

TanishqThakral commented 2 years ago

@samhouts @Dresel Any updates??

angelru commented 2 years ago

any idea of this for MAUI?

nichojo89 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@PlaysafePP Maybe on MAUI or the MAUI Community Toolkit.

xamarin / XamarinCommunityToolkit