Implementation of Badges for toolbar items in flyoutmenu without shell navbar

[Kelvyn14]

Hi everyone, hope you are doing great!

I have an application in Net Maui 8 which was migrated from Xamarin Forms.

In the app, there are some icons in toolbar with a flyout menu (the app does not use shell navbar).

When in xamarin, It was possible to define and show notification badges over icons by using drawables for specific platform as android, for example. But when it's about net maui, there is only documentation explaining how to include notification badges over app icon, but not over toolbar items inside the app pages.

So far, I couldn't find any docs about this kind of implementation.

Do anyone have some tips for that case, please?

I attached an example about where do I need to show the badges, over the bell icon.

[davidortinau]

The same code probably works in .NET MAUI also, but where to put it is the question. Tell me more about your platform-specific implementation? Is it like this? https://www.xamboy.com/2018/03/08/adding-badge-to-toolbaritem-in-xamarin-forms/

/cc @PureWeen

[Kelvyn14]

Hello @davidortinau, thanks for reply.
Yes that's exactly my implementation which worked previously for xamarin, but now on Net Maui, it's not possible to use.
I've tryied some modifications to keep this approach, but without any success to compile it.
So far the compiler keeps warning me about invalid casts and properties missing in any change I try.

[Kelvyn14]

Hi @davidortinau , today, with the help of my work team, we found a solution for this implementation for Android that works!
I'm putting the code block here for anyone else that might be strugling with the same problem.

We have this method implemented in a public class named ToolbarItemBadge for Android platform, which is call from a maui common class to set the counter notifications:

`public class ToolbarItemBadge : IToolbarItemBadgeService
{

public void SetBadge(Page page, ToolbarItem item, int value)
{
MainThread.BeginInvokeOnMainThread(() =>
{
var activity = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity;
var viewItem = activity?.FindViewById(Microsoft.Maui.Resource.Id.navigationlayout_appbar);

  if (viewItem == null) return;

  var toolbar = ((LinearLayout)viewItem).GetChildAt(0) as AndroidX.AppCompat.Widget.Toolbar;

  if (toolbar != null)
  {
    var idx = page.ToolbarItems.IndexOf(item);
    if (toolbar.Menu?.Size() > idx)
    {
      var menuItem = toolbar.Menu.GetItem(idx);
      if (activity != null && menuItem != null)
      {
        BadgeDrawable.SetBadgeText(activity, menuItem, value,
                                   Color.FromArgb("C64840").ToAndroid(),
                                   Color.FromArgb("#FFFFFF").ToAndroid());
      }
    }
  }
});

}
}`

Inside the BadgeDrawable class, we have this other method called SetBadgeText that follows:

`public class BadgeDrawable : Drawable
{
private Paint _badgeBackground;
private Paint _badgeText;
private Rect _textRect = new Rect();
private string _badgeValue = "";
private bool _shouldDraw = true;
private int factor;
Context _context;

public override int Opacity => (int)Format.Unknown;

public BadgeDrawable(Context context, Color backgroundColor, Color textColor)
{
_context = context;
_badgeBackground = new Paint();
_badgeBackground.Color = backgroundColor;
_badgeBackground.AntiAlias = true;
_badgeBackground.SetStyle(Paint.Style.Fill);

_badgeText = new Paint();
_badgeText.Color = textColor;
_badgeText.SetTypeface(Typeface.DefaultBold);
_badgeText.TextSize = 20;
_badgeText.AntiAlias = true;
_badgeText.TextAlign = Paint.Align.Center;

}

public override void Draw(Canvas canvas)
{
if (!_shouldDraw)
return;

Rect bounds = Bounds;
float width = bounds.Right - bounds.Left;
float height = bounds.Bottom - bounds.Top;
float oneDp = 1 * _context.Resources.DisplayMetrics.Density;

float radius = Java.Lang.Math.Max(width, height) / 2 / 2;
float centerX = width - radius - 1 + oneDp * 2;
float centerY = radius - 2 * oneDp;
canvas.DrawCircle(centerX, centerY, (int)(radius + oneDp * factor), _badgeBackground);

_badgeText.GetTextBounds(_badgeValue, 0, _badgeValue.Length, _textRect);
float textHeight = _textRect.Bottom - _textRect.Top;
float textY = centerY + (textHeight / 2f);
canvas.DrawText(_badgeValue, centerX, textY, _badgeText);

}

private void SetBadgeText(int text)
{
_badgeValue = text < 0 ? string.Empty : text.ToString() ;
_shouldDraw = !(text == 0);
factor = text < 0 ? 1 : 4;
InvalidateSelf();
}

public static void SetBadgeText(Context context, IMenuItem item, int text, Color backgroundColor, Color textColor)
{
if (item.Icon == null)
return;

var badge = new BadgeDrawable(context, backgroundColor, textColor);
var icon = new LayerDrawable(new Drawable[] { item.Icon, badge });
badge?.SetBadgeText(text);
item.SetIcon(icon);
icon.Dispose();

}

public override void SetAlpha(int alpha) { }
public override void SetColorFilter(ColorFilter cf) { }
}`

These implementations solved our problem.
Hope this helps.

[flogeiger]

What about IOS?