How to add dot icon for TabbedPage strong Xamarin - xamarin

Question

I'm trying to add a red dot as shown below for TabbedPage. I have searched the internet but it doesn't look like anything. It looks like Badges but it's not. I want to permanently assign it at any time. I also don't know what keywords to search for exactly. For Xamarin iOS and Android.
MainView.xaml
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:Appssss.Views"
x:Class="Appssss.Views.Mainview">
<!--Pages can be added as references or inline-->
<views:AboutPage Title="Page 1" IconImageSource="homeicon" BackgroundColor="#fff"/>
<views:LoginPage Title="Page 2" IconImageSource="feeds" BackgroundColor="#fff"/>
<views:AboutPage Title="Page 3" IconImageSource="moneys" BackgroundColor="#fbfbfb" />
<views:AboutPage Title="Page 4" IconImageSource="chats" BackgroundColor="#fff" />
<views:AboutPage Title="Page 5" IconImageSource="usericon" BackgroundColor="#fff"/>
</TabbedPage>
Ask for help from everyone. Thank you
Update
MyTabDotRenderer.cs
[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabDotRenderer))]
namespace XXXX.iOS
{
internal class MyTabDotRenderer : TabbedRenderer
{
private bool _initialized;
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
//TabBar.ClipsToBounds = true;
TabBar.TintColor = UIColor.Gray;
TabBar.BarTintColor = UIColor.White;
TabBar.BackgroundColor = UIColor.White;
MessagingCenter.Subscribe<object, int>(this, "Add", (obj, index) => {
TabBar.addItemBadge(index);
});
MessagingCenter.Subscribe<object, int>(this, "Remove", (obj, index) => {
TabBar.removeItemBadge(index);
});
}
public override void ViewWillAppear(bool animated)
{
if (!_initialized)
{
if (TabBar?.Items == null)
return;
foreach (var item in TabBar.Items)
{
item.Image = ScalingImageToSize(item.Image, new CGSize(20, 20)); // set the size here as you want
}
var tabs = Element as TabbedPage;
if (tabs != null)
{
for (int i = 0; i < TabBar.Items.Length; i++)
{
UpdateItem(TabBar.Items[i], tabs.Children[i].Icon, tabs.Children[i].StyleId);
}
}
_initialized = true;
}
base.ViewWillAppear(animated);
}
private void UpdateItem(UITabBarItem item, string icon, string badgeValue)
{
if (item == null) return;
if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
{
//change icon select
if (icon.EndsWith(".png"))
icon = icon.Replace(".png", "_selected.png");
else
icon += "_selected";
item.SelectedImage = UIImage.FromBundle(icon);
item.SelectedImage.AccessibilityIdentifier = icon;
item.SelectedImage = ScalingImageToSize(item.SelectedImage, new CGSize(20, 20)); // set the size here as you want
//change icon select
UITabBarAppearance app = new UITabBarAppearance();
app.ConfigureWithOpaqueBackground();
app.BackgroundColor = UIColor.Clear;
app.StackedLayoutAppearance.Normal.TitleTextAttributes = new UIStringAttributes() { Font = UIFont.FromName("Roboto Medium", 12), ForegroundColor = Color.FromHex("#808080").ToUIColor() };
app.StackedLayoutAppearance.Selected.TitleTextAttributes = new UIStringAttributes() { Font = UIFont.FromName("Roboto Medium", 13), ForegroundColor = Color.FromHex("#00AA13").ToUIColor() };
item.StandardAppearance = app;
if (UIDevice.CurrentDevice.CheckSystemVersion(15, 0))
{
item.ScrollEdgeAppearance = item.StandardAppearance;
}
}
}
public UIImage ScalingImageToSize(UIImage sourceImage, CGSize newSize)
{
if (UIScreen.MainScreen.Scale == 2.0) //#2x iPhone 6 7 8
{
UIGraphics.BeginImageContextWithOptions(newSize, false, 2.0f);
}
else if (UIScreen.MainScreen.Scale == 3.0) //#3x iPhone 6p 7p 8p...
{
UIGraphics.BeginImageContextWithOptions(newSize, false, 3.0f);
}
else
{
UIGraphics.BeginImageContext(newSize);
}
sourceImage.Draw(new CGRect(0, 0, newSize.Width, newSize.Height));
UIImage newImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return newImage;
}
}
public static class TabbarExtensions
{
readonly static int tabBarItemTag = 9999;
public static void addItemBadge(this UITabBar tabbar, int index)
{
if (tabbar.Items != null && tabbar.Items.Length == 0) return;
if (index >= tabbar.Items.Length) return;
removeItemBadge(tabbar, index);
var badgeView = new UIView();
badgeView.Tag = tabBarItemTag + index;
badgeView.Layer.CornerRadius = 5;
badgeView.BackgroundColor = UIColor.Red;
var tabFrame = tabbar.Frame;
var percentX = (index + 0.56) / tabbar.Items.Length;
var x = percentX * tabFrame.Width;
var y = tabFrame.Height * 0.1;
badgeView.Frame = new CoreGraphics.CGRect(x, y, 10, 10);
tabbar.AddSubview(badgeView);
}
public static bool removeItemBadge(this UITabBar tabbar, int index)
{
foreach (var subView in tabbar.Subviews)
{
if (subView.Tag == tabBarItemTag + index)
{
subView.RemoveFromSuperview();
return true;
}
}
return false;
}
}
}
MainView.xaml.cs
public MainView(int index)
{
NavigationPage.SetHasNavigationBar(this, false);
InitializeComponent();
On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
SetPage(index);
MessagingCenter.Send<object, int>(this, "Add", 1);
}
void SetPage(int index)
{
CurrentPage = Children[index];
}
Update 2
CustomTabbedPageRenderer.cs in project Android
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Appssss.Droid.Renderers;
using Google.Android.Material.BottomNavigation;
using Google.Android.Material.Tabs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using static Google.Android.Material.BottomNavigation.BottomNavigationView;
using static Google.Android.Material.Tabs.TabLayout;
using View = Android.Views.View;
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace Appssss.Droid.Renderers
{
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
TabbedPage tabbedPage;
List<Android.Views.View> list = new List<Android.Views.View>();
public CustomTabbedPageRenderer(Context context) : base(context)
{
for (int i = 0; i < 5; i++)
{
Android.Views.View view = LayoutInflater.From(Context).Inflate(Resource.Drawable.MyView, null);
list.Add(view);
}
}
protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
{
base.OnElementChanged(e);
if (e.NewElement == null || e.OldElement != null)
return;
if (e.NewElement != null)
{
MessagingCenter.Subscribe<object, int>(this, "Add", (obj, index) => {
TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);
ViewGroup vgroup = (ViewGroup)tablayout.GetChildAt(0);
for (int i = 0; i < vgroup.ChildCount; i++)
{
if (index == i)
{
var view = list[i];
if (view.Parent != null) break;
ViewGroup vvgroup = (ViewGroup)vgroup.GetChildAt(i);
MarginLayoutParams layout1 = new MarginLayoutParams(MarginLayoutParams.MatchParent, MarginLayoutParams.MatchParent);
layout1.SetMargins(120, -135, 0, 0);
vvgroup.AddView(view, layout1);
var ll = vvgroup.LayoutParameters as LinearLayout.LayoutParams;
ll.SetMargins(0, 30, 0, 0);
vvgroup.LayoutParameters = ll;
}
}
});
MessagingCenter.Subscribe<object, int>(this, "Remove", (obj, index) => {
TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);
ViewGroup vgroup = (ViewGroup)tablayout.GetChildAt(0);
for (int i = 0; i < vgroup.ChildCount; i++)
{
if (index == i)
{
var view = list[i];
if (view.Parent == null) break;
ViewGroup vvgroup = (ViewGroup)vgroup.GetChildAt(i);
vvgroup.RemoveView(view);
var ll = vvgroup.LayoutParameters as LinearLayout.LayoutParams;
ll.SetMargins(0, 0, 0, 0);
vvgroup.LayoutParameters = ll;
}
}
});
IEnumerable<View> children = GetAllChildViews(ViewGroup);
BottomNavigationView bottomNavBar = (BottomNavigationView)children.SingleOrDefault(view => view is BottomNavigationView);
if (bottomNavBar != null)
{
tabbedPage = e.NewElement;
bottomNavBar.NavigationItemSelected += BottomNavBar_NavigationItemSelected;
bottomNavBar.Menu.GetItem(0).SetIcon(Resource.Drawable.homeiconselect);
}
}
}
int previous;
private void BottomNavBar_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
{
var current = e.Item.ItemId;
switch (e.Item.ToString())
{
case "Page 1":
e.Item.SetIcon(Resource.Drawable.homeiconselect);
break;
case "Page 2":
e.Item.SetIcon(Resource.Drawable.feedsselect);
break;
case "Page 3":
e.Item.SetIcon(Resource.Drawable.moneysselect);
break;
case "Page 4":
e.Item.SetIcon(Resource.Drawable.chatsselect);
break;
case "Page 5":
e.Item.SetIcon(Resource.Drawable.usericonselect);
break;
default:
break;
}
var previousView = sender as BottomNavigationView;
IMenu menu = previousView.Menu;
var previousItem = menu.GetItem(previous);
if (previous != current)
{
if (previousItem.IsChecked)
{
switch (previousItem.ToString())
{
case "Page 1":
previousItem.SetIcon(Resource.Drawable.homeicon);
break;
case "Page 2":
previousItem.SetIcon(Resource.Drawable.feeds);
break;
case "Page 3":
previousItem.SetIcon(Resource.Drawable.moneys);
break;
case "Page 4":
previousItem.SetIcon(Resource.Drawable.chats);
break;
case "Page 5":
previousItem.SetIcon(Resource.Drawable.usericon);
break;
default:
break;
}
}
}
tabbedPage.CurrentPage = tabbedPage.Children[current];
previous = current;
}
private IEnumerable<View> GetAllChildViews(View view)
{
if (!(view is ViewGroup group))
return new List<View> { view };
List<View> result = new List<View>();
int childCount = group.ChildCount;
for (int i = 0; i < childCount; i++)
{
View child = group.GetChildAt(i);
List<View> childList = new List<View> { child };
childList.AddRange(GetAllChildViews(child));
result.AddRange(childList);
}
return result.Distinct();
}
}
}
MainView.xaml.cs
public Mainview(int index)
{
InitializeComponent();
On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
SetPage(index);
}
void SetPage(int index)
{
CurrentPage = Children[index];
}
protected override void OnAppearing()
{
base.OnAppearing();
MessagingCenter.Send<object, int>(this, "Add", 1);
///On iOS this works fine
}
Add a xml in drawable folder called MyView.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:background="#drawable/Reddot"
android:layout_width="12dp"
android:layout_height="12dp"/>
</LinearLayout>
Add a xml in drawable folder called Reddot.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#ff0000"/>
<size android:width="12dp" android:height="12dp"/>
</shape>

Answer 1

It could be achieved by creating a custom renderer for TabbedPage .
iOS Solution
[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabRenderer))]
namespace MyForms.iOS
{
internal class MyTabRenderer : TabbedRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
MessagingCenter.Subscribe<object, int>(this, "Add", (obj,index) => {
TabBar.addItemBadge(index);
});
MessagingCenter.Subscribe<object, int>(this, "Remove", (obj,index) => {
TabBar.removeItemBadge(index);
});
}
}
public static class TabbarExtensions
{
readonly static int tabBarItemTag = 9999;
public static void addItemBadge(this UITabBar tabbar, int index)
{
if (tabbar.Items != null && tabbar.Items.Length == 0) return;
if (index >= tabbar.Items.Length) return;
removeItemBadge(tabbar, index);
var badgeView = new UIView();
badgeView.Tag = tabBarItemTag + index;
badgeView.Layer.CornerRadius = 5;
badgeView.BackgroundColor = UIColor.Red;
var tabFrame = tabbar.Frame;
var percentX = (index + 0.56) / tabbar.Items.Length;
var x = percentX * tabFrame.Width;
var y = tabFrame.Height * 0.1;
badgeView.Frame = new CoreGraphics.CGRect(x, y, 10, 10);
tabbar.AddSubview(badgeView);
}
public static bool removeItemBadge(this UITabBar tabbar, int index)
{
foreach(var subView in tabbar.Subviews)
{
if(subView.Tag == tabBarItemTag + index)
{
subView.RemoveFromSuperview();
return true;
}
}
return false;
}
}
}
Android Solution
Add a xml in drawable folder called Reddot.xml .
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#ff0000"/>
<size android:width="12dp" android:height="12dp"/>
</shape>
Add a xml in drawable folder called MyView.xml .
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:background="#drawable/Reddot"
android:layout_width="12dp"
android:layout_height="12dp"/>
</LinearLayout>
3.custom renderer
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace MyForms.Droid
{
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
List<Android.Views.View> list = new List<Android.Views.View>();
public CustomTabbedPageRenderer(Context context) : base(context)
{
for (int i = 0; i < 3;i++)
{
Android.Views.View view = LayoutInflater.From(Context).Inflate(Resource.Drawable.MyView, null);
list.Add(view);
}
}
protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
{
base.OnElementChanged(e);
if (e.NewElement == null || e.OldElement != null)
return;
MessagingCenter.Subscribe<object, int>(this, "Add", (obj, index) => {
TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);
ViewGroup vgroup = (ViewGroup)tablayout.GetChildAt(0);
for (int i = 0; i < vgroup.ChildCount; i++)
{
if(index == i)
{
var view = list[i];
if (view.Parent != null) break;
ViewGroup vvgroup = (ViewGroup)vgroup.GetChildAt(i);
MarginLayoutParams layout1 = new MarginLayoutParams(MarginLayoutParams.MatchParent, MarginLayoutParams.MatchParent);
layout1.SetMargins(120, -135, 0, 0);
vvgroup.AddView(view,layout1);
var ll = vvgroup.LayoutParameters as LinearLayout.LayoutParams;
ll.SetMargins(0, 30, 0,0 );
vvgroup.LayoutParameters = ll;
}
}
});
MessagingCenter.Subscribe<object, int>(this, "Remove", (obj, index) => {
TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);
ViewGroup vgroup = (ViewGroup)tablayout.GetChildAt(0);
for (int i = 0; i < vgroup.ChildCount; i++)
{
if(index == i)
{
var view = list[i];
if (view.Parent == null) break;
ViewGroup vvgroup = (ViewGroup)vgroup.GetChildAt(i);
vvgroup.RemoveView(view);
var ll = vvgroup.LayoutParameters as LinearLayout.LayoutParams;
ll.SetMargins(0, 0, 0, 0);
vvgroup.LayoutParameters = ll;
}
}
});
}
}
}
Usage in Forms project
//add red dot
MessagingCenter.Send<object, int>(this, "Add", 1);
//remove red dot
MessagingCenter.Send<object, int>(this, "Remove", 1);
Screen shot