How to add small red dot in UITabBarItem How to add small red dot in UITabBarItem ios ios

How to add small red dot in UITabBarItem


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 = .cleartabBarItem.setBadgeTextAttributes([NSAttributedStringKey.foregroundColor.rawValue: UIColor.red], for: .normal)

This seems more future-proof than the other answers.


you can try this method:

func addRedDotAtTabBarItemIndex(index: Int) {    for subview in tabBarController!.tabBar.subviews {        if let subview = subview as? UIView {            if subview.tag == 1314 {                subview.removeFromSuperview()                break            }        }    }    let RedDotRadius: CGFloat = 5    let RedDotDiameter = RedDotRadius * 2    let TopMargin:CGFloat = 5    let TabBarItemCount = CGFloat(self.tabBarController!.tabBar.items!.count)    let HalfItemWidth = CGRectGetWidth(view.bounds) / (TabBarItemCount * 2)    let  xOffset = HalfItemWidth * CGFloat(index * 2 + 1)    let imageHalfWidth: CGFloat = (self.tabBarController!.tabBar.items![index] as! UITabBarItem).selectedImage.size.width / 2    let redDot = UIView(frame: CGRect(x: xOffset + imageHalfWidth, y: TopMargin, width: RedDotDiameter, height: RedDotDiameter))    redDot.tag = 1314    redDot.backgroundColor = UIColor.redColor()    redDot.layer.cornerRadius = RedDotRadius    self.tabBarController?.tabBar.addSubview(redDot)}


set the badgeValue for your desired UITabBarItem as follow:

    // for first tab    (tabBarController!.tabBar.items!.first! as! UITabBarItem).badgeValue = "1"    //for second tab    (tabBarController!.tabBar.items![1] as! UITabBarItem).badgeValue = "2"    // for last tab    (tabBarController!.tabBar.items!.last! as! UITabBarItem).badgeValue = "final"

for remove a badge from the UITabBarItem just assign nil

(tabBarController!.tabBar.items!.first! as! UITabBarItem).badgeValue = nil

you can get the output Like

enter image description here

for additional information please ref this link

Choice --2

    var lbl : UILabel = UILabel(frame: CGRectMake(225, 5, 20, 20))    lbl.layer.borderColor = UIColor.whiteColor().CGColor    lbl.layer.borderWidth = 2    lbl.layer.cornerRadius = lbl.bounds.size.height/2    lbl.textAlignment = NSTextAlignment.Center    lbl.layer.masksToBounds = true    lbl.font = UIFont(name: hereaddyourFontName, size: 13)    lbl.textColor = UIColor.whiteColor()    lbl.backgroundColor = UIColor.redColor()    lbl.text = "1"  //if you no need remove this    // add subview to tabBarController?.tabBar    self.tabBarController?.tabBar.addSubview(lbl)

the output is

enter image description here