Sometimes we need to add a badge to a toolbar item to show a dynamic counter. An example of this might be when having a shopping cart on a e-commerce application (Showing how many items there are in the cart), Notifications (Showing how to many new notifications you have), etc.

The actual way that I had seen people doing this is just hiding the navigation bar and using a badge view (https://alexdunn.org/2017/03/15/xamarin-controls-badgeview/). Other way I have seen this is by using different images for each number.

In this article I will show you how to do it, using the ToolbarItem that already exists on the Navigation Bar.

Let’s code

For this sample I will use a dependency service with a SetBadge method to be able to add a badge to a ToolbarItem.

1-Create a new interface called IToolbarItemBadgeService and add the SetBadge method.

This method will have 5 parameters:

Page: Current page
Item: Actual toolbar item in which will add the badge
Value: Actual number of the badge (Is a string so you can set numbers and texts, but just tested with 2 digits numbers :P).
BackgroundColor: To set the badge background color
TextColor: To set the badge text color

public interface IToolbarItemBadgeService
    {
        void SetBadge(Page page,ToolbarItem item, string value,Color   backgroundColor,Color textColor);
    } 

2-In your Android and iOS projects create a new class and implement the interface already created.

[assembly: Dependency(typeof(ToolbarItemBadgeService))]
namespace ToolbarItemBadgeSample.Droid.Services
{
    public class ToolbarItemBadgeService : IToolbarItemBadgeService
    {
        public void SetBadge(Page page,ToolbarItem item, string value,Color backgroundColor,Color textColor)
        {
            //Implementation here
        }
    }
}

3-Let’s add the magic on Android

Create the badge

We will add a new class called BadgeDrawable which creates the badge drawable. Check the code here:

https://github.com/CrossGeeks/ToolbarItemBadgeSample/blob/master/ToolbarItemBadgeSample/ToolbarItemBadgeSample.Android/BadgeDrawable.cs

Adding the badge to the toolbar item

To do this we will use the plugin called Plugin.CurrentActivity by James Montemagno, to detect the actual Activity shown.

Then in our service SetBadge method we will look for the native MenuItem which should match our ToolbarItem index, then we apply the badge to the MenuItem by calling the SetBadgeText static method of BadgeDrawable class.

using Plugin.CurrentActivity;
using ToolbarItemBadgeSample.Droid.Services;
using ToolbarItemBadgeSample.Services;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: Dependency(typeof(ToolbarItemBadgeService))]
namespace ToolbarItemBadgeSample.Droid.Services
{
    public class ToolbarItemBadgeService : IToolbarItemBadgeService
    {
        public void SetBadge(Page page,ToolbarItem item, string value,Color backgroundColor,Color textColor)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                var toolbar = CrossCurrentActivity.Current.Activity.FindViewById(Resource.Id.toolbar) as Android.Support.V7.Widget.Toolbar;
                if (toolbar != null)
                {
                    if (!string.IsNullOrEmpty(value))
                    {
                        var idx = page.ToolbarItems.IndexOf(item);
                        if (toolbar.Menu.Size() > idx)
                        {
                            var menuItem = toolbar.Menu.GetItem(idx);
                            BadgeDrawable.SetBadgeText(CrossCurrentActivity.Current.Activity, menuItem, value, backgroundColor.ToAndroid(), textColor.ToAndroid());
                        }
                    }
                }
            });
        }
    }
}

4-Let’s add the magic on iOS

On iOS we have to use some Objective C native apis and map them into C#. That’s why created the BarButtonItemExtension class which allows to update badges in Bar Button Items.

public static class BarButtonItemExtensions
    {
         … 
        public static void UpdateBadge(this UIBarButtonItem barButtonItem, string text, UIColor backgroundColor, UIColor textColor)
        {
            var bLayer = GetBadgeLayer(barButtonItem);

            if (string.IsNullOrEmpty(text) || text == "0")
            {
                bLayer?.RemoveFromSuperLayer();

                objc_setAssociatedObject(barButtonItem.Handle, BadgeKey.Handle, new CAShapeLayer().Handle, AssociationPolicy.ASSIGN);
                return;
            }

            var textLayer = bLayer?.Sublayers?.First(p => p is CATextLayer) as CATextLayer;
            if (textLayer != null)
            {
                    textLayer.String = text;
            }
            else
            {
                barButtonItem.AddBadge(text, backgroundColor, textColor);
            }
        }

    }

Full class source here: https://github.com/CrossGeeks/ToolbarItemBadgeSample/blob/master/ToolbarItemBadgeSample/ToolbarItemBadgeSample.iOS/Services/ToolbarItemBadgeService.cs

Adding the badge to the toolbar item using the UpdateBadge extension method we already created.

Same concept as in android we look for the native BarButtonItem that matches the ToolbarItem index and apply the badge to it.

using ToolbarItemBadgeSample.iOS.Services;
using ToolbarItemBadgeSample.Services;
using Xamarin.Forms;
using ToolbarItemBadgeSample.iOS.Utils;
using Xamarin.Forms.Platform.iOS;

[assembly: Dependency(typeof(ToolbarItemBadgeService))]
namespace ToolbarItemBadgeSample.iOS.Services
{
    public class ToolbarItemBadgeService : IToolbarItemBadgeService
    {
        public void SetBadge(Page page, ToolbarItem item, string value,Color backgroundColor, Color textColor)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                var renderer = Platform.GetRenderer(page);
                if (renderer == null)
                {
                    renderer = Platform.CreateRenderer(page);
                    Platform.SetRenderer(page, renderer);
                }
                var vc = renderer.ViewController;

                var rightButtomItems = vc?.ParentViewController?.NavigationItem?.RightBarButtonItems;
                var idx = page.ToolbarItems.IndexOf(item);
                if (rightButtomItems != null && rightButtomItems.Length > idx)
                {
                    var barItem = rightButtomItems[idx];
                    if (barItem != null)
                    {
                        barItem.UpdateBadge(value, backgroundColor.ToUIColor(), textColor.ToUIColor());
                    }
                }

            });
        }
    }
}

You can find the full source code sample here:

https://github.com/CrossGeeks/ToolbarItemBadgeSample

References:

https://github.com/Diaspora-for-Android/diaspora-android/blob/master/app/src/main/java/com/github/dfa/diaspora_android/ui/BadgeDrawable.java

https://gist.github.com/freedom27/c709923b163e26405f62b799437243f4

Happy badge!