How to Implement Notification Badge on TabbedPage in .NET MAUI 8?

Question

Hello,

I have implemented a TabbedPage in my .NET MAUI application using AppTabbedPage.xaml. It contains 5 pages for tab navigation.

One of the tabs is dedicated to notifications, and I need to display a notification badge on this tab. The badge should display a count of notifications and update dynamically as the count changes.

Here are the specific details of what I need:

1. A mechanism to add a notification badge to a specific tab in TabbedPage.
2. A way to dynamically update the badge count based on the current notification count.

Does .NET MAUI provide built-in support for this, or do I need to use a custom solution (e.g., a custom handler)? If so, could you provide an example or point me in the right direction?

Thank you for your help!

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
    x:Class="Jacobs.AppTabbedPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:Jacobs.Views"
    xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
    android:TabbedPage.IsSwipePagingEnabled="False"
    BarBackgroundColor="{DynamicResource TabBarBackGroundColor}"
    SelectedTabColor="{DynamicResource TabBarSelectedTabColor}"
    UnselectedTabColor="{DynamicResource TabBarUnSelectedColor}"
    android:TabbedPage.ToolbarPlacement="Bottom"
    NavigationPage.HasNavigationBar="False">

    <pages:HomePage Title="Home" IconImageSource="{DynamicResource HomeIcon}" />
    <pages:AppContentPage Title="Jacobs Connect" IconImageSource="{DynamicResource JacobsConnectIcon}" />
    <pages:ChatBotContentPage Title="Atlas" IconImageSource="{DynamicResource AtlasIcon}" />
    <pages:NotificationPage Title="Notifications" IconImageSource="{DynamicResource NotificationTabIcon}" />
    <pages:ProfilePage Title="Profile" IconImageSource="{DynamicResource ProfileIcon}" />
</TabbedPage>

Answer 1

Hello,

In Android, this is usually achieved by changing the icon in the Tab. In Maui, you can use DynamicResource to control the application to display different icons when there are messages and no messages.

For example, when there is a message, display an icon with an exclamation point or a number.

Please refer to the follwoing key code:

<x:String x:Key="NotificationTabIcon">dotnet_bot.png</x:String>

<x:String x:Key="NotificationTabIcon_withMessage">test.png</x:String>

// 
App.Current.Resources["NotificationTabIcon"] = App.Current.Resources["NotificationTabIcon_withMessage"];

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

This is a massive pain in MAUI as the Android render seems to ignore the BadgeView, the answers provided aren't particularly helpful.

I ported this plugin to .NET8 as the .NET6 implementation would never work as you need reflection to get at the bottom tabbar in Android (nice), even after updating though, the badgeview never shows

https://github.com/felipebaltazar/maui-tab-badge/tree/master/Source/Plugin.Badge

Something like this would be simple in Flutter.