iOS: How to add badge to UIBarButtonItem

In this tutorial I am going to show you how to add badge with count to any UIBarButtonItem. Which is not as easy as it might seem, since we can add badges to tab bar items pretty easily like so:

tabBarItem.badgeValue = "\(5)"

And we can also show badges over the app icon, assuming user gave us permission to do so.

However showing badges over UIBarButtonItem is not natively supported.
We have to do it the manual way. Which means adding subview to the button.

The first necessary step is to use UIButton inside UIBarButtonItem otherwise this won’t work. You can drag the plain UIButton over the UIBarButtonItem position in your storyboard and Xcode will create UIBarButtonItem with custom view which will be the UIButton. We will then remove its title and set icon to something we want.

Prepare button

Let’s start by adding UIButton to the navigation bar. The end result should look like this in the document outline:

Make sure to select the UIButton and not UIBarButtonItem, then delete its title and set image to bell.filled for example. It is available for iOS 13+ as a SF Symbol.

While you are in the storyboard, change button size in the Size inspector to be width of 34 and height of 44.

I have no idea why this is needed but without it, the badge would sometimes change position after navigating back to the view controller with badge..🤷

We can move on to code and create @IBOutlet for the button.

@IBOutlet var notificationsButton: UIButton!

One again, make sure to connect the UIButton and to the UIBarButtonItem 🙂

Just to be sure, I also set constraints in viewDidLoad:

NSLayoutConstraint.activate([
            notificationsButton.widthAnchor.constraint(equalToConstant: 34),
            notificationsButton.heightAnchor.constraint(equalToConstant: 44),
        ])

Creating the badge

The actual red badge with number will be just plain UILabel we can add to the button in code.

Let’s start by creating method that will return configured UILabel we can use later.

let badgeSize: CGFloat = 20
let badgeTag = 9830384

func badgeLabel(withCount count: Int) -> UILabel {
        let badgeCount = UILabel(frame: CGRect(x: 0, y: 0, width: badgeSize, height: badgeSize))
        badgeCount.translatesAutoresizingMaskIntoConstraints = false
        badgeCount.tag = badgeTag
        badgeCount.layer.cornerRadius = badgeCount.bounds.size.height / 2
        badgeCount.textAlignment = .center
        badgeCount.layer.masksToBounds = true
        badgeCount.textColor = .white
        badgeCount.font = badgeCount.font.withSize(12)
        badgeCount.backgroundColor = .systemRed 
        badgeCount.text = String(count)
        return badgeCount
    }

It is bit longer but nothing complicated. We first create the UILabel and make sure to specify width and height via frame so rounding corners with half the height will work. The tag is used to find the badge later and remove/modify it as needed. masksToBound is needed for the rounded corners.

We will be creating AutoLayout constraints in code hence the setting translatesAutoresizingMaskIntoConstraints to false.

Showing the badge

Our badge is ready. We can add it to the button.


func showBadge(withCount count: Int) {
        let badge = badgeLabel(withCount: count)
        notificationsButton.addSubview(badge)

        NSLayoutConstraint.activate([
            badge.leftAnchor.constraint(equalTo: notificationsButton.leftAnchor, constant: 14),
            badge.topAnchor.constraint(equalTo: notificationsButton.topAnchor, constant: 4),
            badge.widthAnchor.constraint(equalToConstant: badgeSize),
            badge.heightAnchor.constraint(equalToConstant: badgeSize)
        ])
    }

I found these constants to look best, but you can modify them as needed. The badge could theoretically be set just with frame but I found out that when switching between view controllers it would jump into another positions and couldn’t be animated. With this setup you can provide little animation for the bell button without badge causing issues.

Let’s check how the result looks:

Just like the system ones 🙂

Removing the badge

What about hiding the badge? We can simply remove it like so:

func removeBadge() {
        if let badge = notificationsButton.viewWithTag(badgeTag) {
            badge.removeFromSuperview()
        }
}

If you want to have the same notifications/badge button on multiple screens in your app (maybe using TabBarController) check out my post about NotificationCenter which can help you keep the badge count synchronized. 👍

iOS: How to notify parts of app about changes and send data in loosely coupled way

Filip Němeček ・ Feb 15 '20 ・ 3 min read

#ios #swift

Thanks for reading!

Is anything not clear? Do you want more information? Ask in the comments and I will do my best to help you.

--
Need to focus on your iPhone? Get free WebBlock app for scheduled website blocking from the App Store!

Blog