Xamarin Forms bindable tab badges for iOS and Android. The plugin creates a custom renderer (iOS & Android) and a custom attached property for adding tab bar badges which can be bound in XF shared code.
| Feature / Availability | Xamarin.Android | Xamarin.iOS |
|---|---|---|
| Bindable Badge Text | ✓* | ✓ (iOS >=8.0) |
| Bindable Badge Color | ✓* | ✓ (iOS >= 10.0) |
| Dynamic tab add/removal | ✓* | On overflow, 'More' / '...' menu don't have badges...yet. |
*Caution: For Xamarin.Forms Android make sure to use AppCompat. I.e.inherit from FormsAppCompatActivity
- Make sure to install the package in your Xamarin.Forms PCL, iOS and Android project.
// stable
Install-Package Plugin.Badge
// or pre-release
Install-Package Plugin.Badge -Pre
You have to register the custom renderer. I usually put this in the AssemblyInfo.cs file of my iOS csproj.
[assembly: ExportRenderer(typeof(TabbedPage), typeof(BadgedTabbedPageRenderer))]
You have to register the custom renderer. I usually put this in the AssemblyInfo.cs file of my Android csproj.
[assembly: ExportRenderer(typeof(TabbedPage), typeof(BadgedTabbedPageRenderer))]
If you are using a custom renderer for TabbedPage please change it to inherit from BadgedTabbedPageRenderer and you are all set. Of course dont forget to register your own renderer.
As you already know when you enable linkling for your application the likner might remove some of the methods/types/proeprties/events used by third party libraries. This is why it's necessary to update your LinkerPleaseInclude.cs. Check this blogpost for more linker info.
- For iOS add the following lines:
public void Include(UITabBarItem item)
{
item.BadgeColor = UIColor.Red;
item.BadgeValue = "badge";
}
- For Android no issues detected yet :). Feel free to report any issues here.
For each child page of the TabbedPage just bind the custom attached property
[TabBadge.BadgeText (XAML) or TabBadge.BadgeTextPropery (CSharp)]
The important line here is binding the attached property:
plugin:TabBadge.BadgeText="{Binding Count}"
Example tabbed page with badged children:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
x:Class="Plugin.Badge.Sample.TabXaml">
<TabbedPage.Children>
<ContentPage Title="Tab1"
Icon="icontab1.png"
plugin:TabBadge.BadgeText="{Binding Count}">
<StackLayout>...</StackLayout>
</ContentPage>
...
</TabbedPage.Children>
</TabbedPage>
var tab1 = new ContentPage //assume this is a child page of your Tab
{
Title = "Tab1",
Content = tab1Layout
};
tab1.SetBinding(TabBadge.BadgeTextProperty, new Binding("Count"));
Very similar to BadgeText just use [TabBadge.BadgeColor (XAML) or TabBadge.BadgeColorPropery (CSharp)].
If the value of the BadgeText is set to null or empty string the badge is hidden. To show it again set a non null or empty value