How to put a badge on customized UIBarButtonItem

I have a navigation bar with two buttons, one is a back button the other a chat symbol.

I write this code like this:

UIBarButtonItem *_btn=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"back.png"]

self.navigationItem.leftBarButtonItem.tintColor = [UIColor blackColor];

UIBarButtonItem *_btn2=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"chat.png"]

self.navigationItem.rightBarButtonItem.tintColor = [Utility colorWithHexValue:CyanBlue];

The problem I have is that whenever there is some new messages in the chat that I have not seen, there should be like a badge of some sort, or a customized label over the chat button, to indicate how many new messages you have.

How do I do this?


for Swift 3.0:



override func viewDidLoad() {

  // badge label
  let label = UILabel(frame: CGRect(x: 10, y: -10, width: 20, height: 20))
  label.layer.borderColor = UIColor.clear.cgColor
  label.layer.borderWidth = 2
  label.layer.cornerRadius = label.bounds.size.height / 2
  label.textAlignment = .center
  label.layer.masksToBounds = true
  label.font = UIFont(name: "SanFranciscoText-Light", size: 13)
  label.textColor = .white
  label.backgroundColor = .red
  label.text = "80"

  // button
  let rightButton = UIButton(frame: CGRect(x: 0, y: 0, width: 18, height: 16))
  rightButton.setBackgroundImage(UIImage(named: "inbox"), for: .normal)
  rightButton.addTarget(self, action: #selector(rightButtonTouched), for: .touchUpInside)

  // Bar button item
  let rightBarButtomItem = UIBarButtonItem(customView: rightButton)

  navigationItem.rightBarButtonItem = rightBarButtomItem

func rightButtonTouched() {
  print("right button touched")

in iOS 8 - I was able to do it by changing the badgeValue

            self.messageButton.badgeValue = @"5";

where message button is a UIBarButton

You have to include these two files to your xcode UIBarButtonItem+Badge.h UIBarButtonItem+Badge.m

which can be found here

Github link to files

You can try this piece of code:-

  UILabel *badgeLbl = [[UILabel alloc]initWithFrame:CGRectMake(16, -2, 18, 18)];
badgeLbl.backgroundColor = [UIColor whiteColor];
badgeLbl.textColor = [UIColor blackColor];
badgeLbl.textAlignment = NSTextAlignmentCenter;
badgeLbl.layer.cornerRadius = 9.0;
badgeLbl.layer.masksToBounds = true;
badgeLbl.text = @"10";

UIButton *notificationBtn = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 35, 35)];
[notificationBtn setBackgroundImage:[UIImage imageNamed:@"image_name"] forState:UIControlStateNormal];
[notificationBtn setTitle:@"" forState:UIControlStateNormal];
[notificationBtn addTarget:self action:@selector(onClickAction:) forControlEvents:UIControlEventTouchUpInside];

[notificationBtn addSubview:badgeLbl];

UIBarButtonItem *notificationBarBtn = [[UIBarButtonItem alloc]initWithCustomView:notificationBtn];
self.navigationItem.rightBarButtonItem = notificationBarBtn;

try custom methods



  3. How to add Badges on UIBarbutton item?


Good day! Here is my version - easy and without any problems:

navBar = [[UINavigationBar alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, 64)];
[self.view addSubview:navBar];

navItem    = [[UINavigationItem alloc] initWithTitle:NSLocalizedString(@"Meetings", nil)];

[navBar pushNavigationItem:navItem animated:NO];
    UIButton *chat = [UIButton buttonWithType: UIButtonTypeRoundedRect];
[chat setTitle:@"Chat" forState: UIControlStateNormal];
    UILabel *badge  = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, 20, 20)];
badge.textColor = [UIColor darkGrayColor];
badge.font      = [UIFont fontWithName: fontName size: 15];
badge.text      = @"10";
badge.textAlignment = NSTextAlignmentCenter;

badge.layer.cornerRadius = 10.0f;
badge.layer.backgroundColor = [UIColor yellowColor].CGColor;
badge.clipsToBounds      = YES; = CGPointMake(50, 20);

[chat addSubview: badge];

navItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView: chat];

have a nice day!

You can try this category


Try this customized control - mknumberbadgeview

Need Your Help

Setting up SSL on a local xampp/apache server

php apache ssl https xampp

I'm trying to access a Active Directory from my local webserver. To do this I'm using the latest version of xampp and a PHP script called adLDAP. If I understand things right, I need to enable SSL to

Feature detection with patent-free descriptors

algorithm opencv image-recognition feature-detection opencv3.0

I need the feature detection algorithm. I'm fed up surfing on the web finding nothing but SURF example and hints how to do that, but I did not find an example with other than patented descriptors l...