{"id":13712555,"url":"https://github.com/xabre/xamarin-forms-tab-badge","last_synced_at":"2025-05-16T09:04:11.158Z","repository":{"id":44889496,"uuid":"70319904","full_name":"xabre/xamarin-forms-tab-badge","owner":"xabre","description":"Xamarin Forms bindable Tab badges for iOS, Android, UWP, MacOS and WPF","archived":false,"fork":false,"pushed_at":"2022-01-20T11:09:41.000Z","size":6751,"stargazers_count":304,"open_issues_count":26,"forks_count":76,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-05-14T16:16:34.436Z","etag":null,"topics":["badge","tab","tablayout","uwp","wpf","xamarin-android","xamarin-forms","xamarin-ios","xamarin-mac","xamarin-plugin"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xabre.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-08T09:21:45.000Z","updated_at":"2025-04-19T17:24:45.000Z","dependencies_parsed_at":"2022-09-10T20:21:59.800Z","dependency_job_id":null,"html_url":"https://github.com/xabre/xamarin-forms-tab-badge","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabre%2Fxamarin-forms-tab-badge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabre%2Fxamarin-forms-tab-badge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabre%2Fxamarin-forms-tab-badge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabre%2Fxamarin-forms-tab-badge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xabre","download_url":"https://codeload.github.com/xabre/xamarin-forms-tab-badge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501557,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["badge","tab","tablayout","uwp","wpf","xamarin-android","xamarin-forms","xamarin-ios","xamarin-mac","xamarin-plugin"],"created_at":"2024-08-02T23:01:19.814Z","updated_at":"2025-05-16T09:04:11.138Z","avatar_url":"https://github.com/xabre.png","language":"C#","funding_links":[],"categories":["UI"],"sub_categories":[],"readme":"# \u003cimg src=\"icon_small.png\" width=\"80\" height=\"80\"/\u003e xamarin-forms-tab-badge [![Build Status](https://app.bitrise.io/app/6fbb08a710d8f2aa/status.svg?token=SlEUDTzwNV54nK7HHhUdOQ)](https://www.bitrise.io/app/6fbb08a710d8f2aa)\n**Xamarin Forms** bindable tab badges for iOS, Android, UWP, MacOS and WPF. The plugin creates a custom renderer (for each platform) and a custom attached property for adding tab bar badges which can be bound in XF shared code.\n\n## Sample\n\u003cimg src=\"Screencasts/xamarin.forms.android.gif\" height=\"600\"/\u003e\u003cimg src=\"Screencasts/xamarin.forms.ios.gif\" height=\"600\"/\u003e\n\n## Support \u0026 Limitations\n\n| Feature / Availability  | Xamarin.Android (1) | Xamarin.iOS | UWP (2) | MacOS (3) | WPF (4) |\n| ------------- | ----------- | ----------- | ----------- | ----------- | ----------- |\n| Bindable Badge Text | ✓ | ✓ (\u003e=8.0) | ✓ | ✓ | ✓ |\n| Bindable Badge Color | ✓ | ✓ (\u003e= 10.0) | ✓ | ✓ | ✓ |\n| Bindable Badge Text Color | ✓ | ✓ (\u003e= 10.0) | ✓ | ✓ | ✓ |\n| Bindable Badge Font | ✓\\* | ✓ \\*(\u003e= 10.0) | ✓ | ✓ | ✓ |\n| Bindable Badge Postion | ✓ | ✕ | ✓ | ✓ | ✓ |\n| Bindable Badge Margin | ✓ | ✕ | ✓ | ✓ | ✓ |\n| Dynamic tab add/removal | ✓ | No overflow | ✓ | ✓ | ✓ |\n\n\\*(1) Min Android **API level 15**, bottom placement also supported starting with v2.1.0\n\n\\*(2) **Min UWP version**: Win 10 Fall Creators Update (XF.3 has a .netstandard 2 requirement).\n\n\\*(3) **MacOS version**: -\n\n\\*(4) **WPF version**: -\n\n\\*\\***Font restrictions**: able to bind font attributes and family but not size\n\n## Installation\n\n- Make sure to install the package in your Xamarin.Forms shared/core project as well as a platform specifc projects.\n\n```\n// stable\nInstall-Package Plugin.Badge\n// or pre-release\nInstall-Package Plugin.Badge -Pre\n```\n[![NuGet](https://img.shields.io/nuget/v/Plugin.Badge.svg?label=NuGet\u0026style=flat-square)](https://www.nuget.org/packages/Plugin.Badge) [![NuGet Beta](https://img.shields.io/nuget/vpre/Plugin.Badge.svg?label=NuGet%20Beta\u0026style=flat-square)](https://www.nuget.org/packages/Plugin.Badge)\n\n\n### iOS, Android, UWP, MacOS, WPF\n\nYou have to register the custom renderer. I usually put this in the AssemblyInfo.cs file of my Platform specific project (iOS, Android, UWP, MacOS, WPF) csproj.\n\n```\n[assembly: ExportRenderer(typeof(TabbedPage), typeof(BadgedTabbedPageRenderer))]\n```\n\n**Caution**: *If you are using the **NON AppCompat** MainActivity (i.e. you Main activity inherits from FormsApplicationActivity) please register the 'Legacy' renderer*\n\n```\n[assembly: ExportRenderer(typeof(TabbedPage), typeof(LegacyBadgedTabbedRenderer))]\n```\n\n### Caution - Custom TabbedPage / Custom Renderers\n\nIf 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.\n\n### Linker\n\nAs you already know when you enable linkling for your application the linker might remove some of the methods/types/properties/events used by third party libraries. This is why it's necessary to update your `LinkerPleaseInclude.cs`. Check this [blogpost](https://lostechies.com/jimmybogard/2014/11/11/dealing-with-the-linker-in-xamarin-apps/) for more linker info.\n\n- For iOS add the following lines:\n```\npublic void Include(UITabBarItem item)\n{\n    item.BadgeColor = UIColor.Red;\n    item.BadgeValue = \"badge\";\n}\n```\n- For Android no issues detected yet :). Feel free to report any issues here.\n\n## Usage\n\n### Badge Text\n\nFor each **child page** of the TabbedPage just bind the custom attached property \n[`TabBadge.BadgeText` (XAML) or `TabBadge.BadgeTextPropery` (CSharp)]\n\n#### XAML\n\nThe important line here is binding the attached property:\n```\n  plugin:TabBadge.BadgeText=\"{Binding Count}\"\n```\n\nExample tabbed page with badged children:\n```\n\u003cTabbedPage xmlns=\"http://xamarin.com/schemas/2014/forms\"\n             xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n             xmlns:plugin=\"clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions\" \n             x:Class=\"Plugin.Badge.Sample.TabXaml\"\u003e\n  \u003cTabbedPage.Children\u003e\n    \u003cContentPage Title=\"Tab1\" \n                 Icon=\"icontab1.png\"\n                 plugin:TabBadge.BadgeText=\"{Binding Count}\"\u003e\n      \u003cStackLayout\u003e...\u003c/StackLayout\u003e\n    \u003c/ContentPage\u003e\n    ...\n  \u003c/TabbedPage.Children\u003e\n\u003c/TabbedPage\u003e\n```\n#### CSharp codebehind\n\n```\nvar tab1 = new ContentPage //assume this is a child page of your Tab\n{\n    Title = \"Tab1\",\n    Content = tab1Layout\n};\n\ntab1.SetBinding(TabBadge.BadgeTextProperty, new Binding(\"Count\"));\n```\n\n### Badge Color\n\nVery similar to `BadgeText` just use [`TabBadge.BadgeColor` (XAML) or `TabBadge.BadgeColorPropery` (CSharp)].\n\n\u003cimg src=\"Screencasts/xamarin.forms.tabbadge.colors.png\" height=\"100\"/\u003e\n\n### Badge Text Color\n\nVery similar to `BadgeColor` just use [`TabBadge.BadgeTextColor` (XAML) or `TabBadge.BadgeTextColorPropery` (CSharp)].\n\n\u003cimg src=\"Screencasts/xamarin.forms.tabbadge.textcolors.PNG\" height=\"100\"/\u003e\n\n### Badge Font Attributes\n\nVery similar to `BadgeColor` just use [`TabBadge.BadgeFont` (XAML) or `TabBadge.BadgeFontPropery` (CSharp)].\n\n\u003cimg src=\"Screencasts/xamarin.forms.tabbadge.fontattributes.PNG\" height=\"100\"/\u003e\n\nToDo:\n- you can alo try to set font family, should work in theory\n- font size is not supported yet on android ......\n\n### Badge Position\n\nVery similar to `BadgeColor` just use [`TabBadge.BadgePosition` (XAML) or `TabBadge.BadgePositionPropery` (CSharp)].\n\n| TopLeft | BottomLeft | BottomRight | Center | TopCenter | BottomCenter | LeftCenter | RightCenter |\n| ------------- | ----------- | ----------- | ----------- | ----------- | ----------- | ----------- | ----------- |\n| \u003cimg src=\"Screencasts/badge_topleft.PNG\" height=\"50\"/\u003e | \u003cimg src=\"Screencasts/badge_bottomleft.PNG\" height=\"50\"/\u003e | \u003cimg src=\"Screencasts/badge_bottomright.PNG\" height=\"50\"/\u003e | \u003cimg src=\"Screencasts/badge_center.PNG\" height=\"50\"/\u003e | | | | |\n\n## Showning / Hiding the badge\nIf 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\n\n# Generic Badge View\n\nAs of v2.2.0 the package also contains a XF Badge view that is based on a XF Frame View and can be added to any layout and bound using the usual approach. The generic badge view can also be added to custom *NavigationPage.TitleView* layouts.\n\nCheckout the Sample-App for more.\n\n\u003cimg src=\"Screencasts/tabbadge.genericbadge.PNG\" height=\"200\"/\u003e\n\n\n# Licence\n\n[MIT](https://github.com/xabre/xamarin-forms-tab-badge/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxabre%2Fxamarin-forms-tab-badge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxabre%2Fxamarin-forms-tab-badge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxabre%2Fxamarin-forms-tab-badge/lists"}