RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
Delphi

Setting a Tab Item Badge Value

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!’]

 

 


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

Related posts
CodeDatabaseDelphiRAD Studio

Quickly Share Data Between Datasets Using CloneCursor In This Native Windows Sample For Delphi

CodeDelphiRAD Studio

Powerful Optical Barcode Recognition Component For Delphi Firemonkey By Winsoft

RAD StudioTech Partner

Powerful Live Local And Remote Application Logging With CodeSite Express In Delphi

News

RAD Studio November 2020 Roadmap PM Commentary

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES