How to add small red dot in UITabBarItem

ios swift uitabbaritem badge
tounaobun picture tounaobun · Jul 10, 2015 · Viewed 20.1k times · Source

How to add red dot on the top right side of the UITabBarItem. enter image description here

I have searched a while and some guys said this can be done setting Badge Value of the UITabBarItem.But when I give it a try and set badge value to empty space " ",the red dot is somewhat big.How can I get a proper one?Big thanks.

enter image description here

Answer

Max Chuquimia picture Max Chuquimia · Jul 24, 2018

If you want to avoid traversing subviews & potentially dangerous hacks in general, what I've done is set the badge's background colour to clear and used a styled bullet point to appear as a badge:

tabBarItem.badgeValue = "●"
tabBarItem.badgeColor = .clear
tabBarItem.setBadgeTextAttributes([NSAttributedStringKey.foregroundColor.rawValue: UIColor.red], for: .normal)

This seems more future-proof than the other answers.

Related questions

Changing tab bar item image and text color iOS

Here is my tab bar: The following image shows the program being run and the "NEWS" item selected: It is clear the bar tint color is working fine as I want ! But the tintColor only affects the image and not …

Read More
Remove tab bar item text, show only image

Simple question, how can I remove the tab bar item text and show only the image? I want the bar items to like in the instagram app: In the inspector in xcode 6 I remove the title and choose a @2x (50…

Read More
IOS 8 Tab Bar Item Background Colour

I've been trying to find the solution to this for the last week, and I have had no luck after trying every possible solution I could find or think of. Every solution I found and have attempted has either not …

Read More