Author: Chris Chuah
I recently received some questions on how to display a circular badge icon and badge value on a tab item in TTabControl.
Badge icons are commonly set to indicate a status change. The number displayed on the badge is frequently tied to a local notification or a push notification that’s been received.
For example, popular social media apps show a badge value on the Notifications tab to show the number of new comments that you’ve received on a post while email clients display a badge value on the Inbox tab to indicate the number of unread emails.
In today’s post, I thought I would show you how to set the badge icon and value on a selected tab item. This works with both the default native styles as well as custom styles, including the styles that are part of the premium style pack.
This demo uses a client aligned TTabControl with 3 tab items. After enabling the switch, a badge icon is shown on the “badge item” tab, and you can increment the value.
Note: Since this is just a quick demo to illustrate how to increment the badge value, we are using TSpinBox, but it’s recommended to use a TSpeedButton with the correct “stepper” styling when adding app navigation that allows the user to increase/decrease values. This is especially true for iOS to ensure you are adhering to Apple’s UI guidelines.
Example:
You can also customize the fill color of the circle along with the font color:
You can adjust the positioning of the badge icon as well. For example, it’s common practice on iOS to display the badge icon on top of the tab icon. Using the code shown below, you can easily shift the location of the badge as desired.
Platform styling:
Custom UI Styling using one of the premium iOS styles. Change to the positioning of the badge icon also apply to custom styles. See above for a code example.
Download the project here.
[DownloadButton Product=’Delphi’ Caption=’Download a RAD Studio Trial Today!’]