How to set the activity indicator in the navigation bar?

Question

I am new to iphone development. I want to set an activity indicator in the navigation bar. I see my activity indicator below the navigation bar. My code is here

- (IBAction) gomethod : (id) sender {
    xxMapSubviewcontroller = [[XxMapSubviewcontroller alloc] init];
    [self.navigationController pushViewController:xxMapSubviewcontroller animated:YES];

    activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    activityIndicator.frame = CGRectMake(0.0, 0.0, 20.0, 20.0);
    [activityIndicator startAnimating];

    [xxMapSubviewcontroller.view addSubview:activityIndicator];
}

How can i set my activity indicator in the navigation bar? Please help me out. Thanks.

score 87 · Accepted Answer · edited Mar 26 '19 at 15:30

87

I add the below piece of code in the view where i wanted the activity indicator in the navigation bar.

activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
UIBarButtonItem * barButton = [[UIBarButtonItem alloc] initWithCustomView:activityIndicator];
[self navigationItem].rightBarButtonItem = barButton;
[activityIndicator startAnimating];

edited Mar 26 '19 at 15:30

Lal Krishna

15,485
6
64
84

answered Feb 18 '10 at 19:01

Warrior

39,156
44
139
214

24

I noticed that on iOS 7 you need to use `activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];` or the indicator will not appear. – antf Jan 07 '14 at 19:27

score 29 · Answer 2 · edited Jul 02 '21 at 18:10

29

Swift Code:

let activityIndicator = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let barButton = UIBarButtonItem(customView: activityIndicator)
self.navigationItem.setRightBarButton(barButton, animated: true)
activityIndicator.startAnimating()

edited Jul 02 '21 at 18:10

Kiryl Bielašeŭski

2,663
2
28
40

answered Apr 12 '16 at 22:31

Mkey

291
3
3

score 14 · Answer 3 · answered Jul 15 '16 at 21:54

14

This worked for me in Swift:

let activityIndicator: UIActivityIndicatorView = UIActivityIndicatorView.init(activityIndicatorStyle: .White)
let refreshBarButton: UIBarButtonItem = UIBarButtonItem(customView: activityIndicator)
self.navigationItem.leftBarButtonItem = refreshBarButton
activityIndicator.startAnimating()

answered Jul 15 '16 at 21:54

Axe

6,285
3
31
38

This crashes in 10.1.1 with: libc++abi.dylib: terminating with uncaught exception of type NSException – Michael Garito Nov 08 '16 at 06:29
1

Works on 11.4 without any issues. – Baran Jul 19 '18 at 17:59

score 13 · Answer 4 · answered Feb 18 '10 at 14:59

13

You are creating a new activity indicator view here, which is fine, but you are not referring to the activity indicator in the status bar.

To show the activity indicator in the status bar, simply call this:

[[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:YES];

answered Feb 18 '10 at 14:59

Zoran Simic

10,293
6
33
35

5

I want to display the activity indicator in the navigation bar – Warrior Feb 18 '10 at 15:26
I needed Warrior's solution because I am hiding the status bar. Not that there's anything wrong with your solution of course! – Andrew Duncan Jan 31 '15 at 00:21

score 5 · Answer 5 · answered Dec 15 '14 at 12:51

5

On storyboard: Create BarButtonItem at the navigation bar. Add View to be son of your BarButtonItem and ActivityIndicator to be son of your View.

answered Dec 15 '14 at 12:51

evya

3,381
1
25
28

Yes, on StoryBoard: drag to navigation bar the BarButtonItem, now drag the UIView to be subview of BarButtonItem, now drag the ActivityIndicator to be subview of the UIView. – evya Dec 13 '17 at 08:17

Hamed · Answer 6 · 2019-12-14T05:49:59.277

Swift

Connect UIBarButtonItem from storyboard to yourViewController
remove week from its definition like: @IBOutlet var btNavigaitonRight: UIBarButtonItem!

Use these methods for start and stopping activity indicator:

var activityIndicator = UIActivityIndicatorView()

func startBarButtonIndicator() {
    activityIndicator = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
    activityIndicator?.color = .gray
    let barButton = UIBarButtonItem(customView: activityIndicator!)
    self.navigationItem.setRightBarButton(barButton, animated: true)
    activityIndicator?.startAnimating()
}

func stopBarButtonIndicator() {
    activityIndicator?.stopAnimating()
    navigationItem.setRightBarButton(btNavigaitonRight, animated: true)
}

score 3 · Answer 7 · edited Dec 21 '17 at 07:00

3

Like WhatsApp:

//Declare

let activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .gray)

//ViewDidLoad

self.activityIndicator.hidesWhenStopped = true

func showIndicator() {
    self.navigationItem.titleView = self.activityIndicator
    self.activityIndicator.isHidden = false
}

func hideIndicator() {
    self.navigationItem.titleView = nil
}

edited Dec 21 '17 at 07:00

Jay Patel

2,642
2
18
40

answered Nov 21 '17 at 08:10

Urvish Modi

1,118
10
11

score 2 · Answer 8 · answered Jul 10 '14 at 11:01

Thanks! My indicator is working now.

I am sharing a code example for fellow noobs, to put this in context.

- (void)viewDidLoad

// custom button images
UIImage *customImage = [UIImage imageNamed:@"menu24"];
UIImage *customImage2 = [UIImage imageNamed:@"search24"];
UIImage *customImage3 = [UIImage imageNamed:@"back24"];

// These are linked in my story board to Navigation Item
[self customiseBarBtnItem:[self menu_button] 
    customImage:customImage selector:@selector(menuPressed:)];
[self customiseBarBtnItem:[self search_button] 
    customImage:customImage2 selector:@selector(searchPressed:)];
[self customiseBarBtnItem:[self backButton] 
    customImage:customImage3 selector:@selector(backPressed:)];

//initialize the activity indicator - as @antf comment suggests for ios7   
UIActivityIndicatorView *actInd=[[UIActivityIndicatorView alloc]                                      
     initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

//store it as a property on the view controller
self.activityIndicator = actInd;

// this sets up activity indicator    
UIBarButtonItem *progress_indicator = [[UIBarButtonItem alloc] 
     initWithCustomView:[self activityIndicator]];

// link custom buttons AND activity indicator in desired order to navigation bar
self.navigationItem.rightBarButtonItems =
    [NSArray arrayWithObjects:
         self.menu_button,
         self.search_button, 
         progress_indicator, 
         nil];

// For completeness - this is how I programmatically show/hide my back button

if ( bShowBack == YES ) 
     self.navItemBar.leftBarButtonItem = self.backButton;
else 
     self.navItemBar.leftBarButtonItem = Nil;

// I use my activity indicator with a UIWebView so trigger it as follows

  - (void)webViewDidStartLoad:(UIWebView *)webView
  {    
    [[self activityIndicator] startAnimating];
  }

  - (void)didFailLoadWithError:(UIWebView *)webView 
          didFailLoadWithError:(NSError *)error
  {    
     [[self activityIndicator] stopAnimating];
  }

  - (void)webViewDidFinishLoad:(UIWebView *) webView
  {
     [[self activityIndicator] stopAnimating];
  }

score 2 · Answer 9 · answered Jan 07 '15 at 13:08

2

In Swift, I did the following:

Enable: UIApplication.sharedApplication().networkActivityIndicatorVisible = true

Disable: UIApplication.sharedApplication().networkActivityIndicatorVisible = false

answered Jan 07 '15 at 13:08

djbp

714
8
24

This goes into the status bar though – powerj1984 Feb 10 '15 at 15:02
1

You're not wrong. I mis-read the OP - apologies. Having said that, I came across this post searching for an answer of how to solve the problem of showing the network activity indicator in the status bar - hopefully my answer will still provide some help to someone, if not to the OP. – djbp Feb 11 '15 at 08:43

score 1 · Answer 10 · edited May 23 '17 at 12:02

1

I had a similar question with response here: iphone - programatically change navigation bar button to activity indicator

I wanted to change the refresh button in the nav bar to the activity indicator and back again.

edited May 23 '17 at 12:02

Community

1
1

answered Feb 18 '10 at 19:51

cagreen

1,627
1
14
29

score 1 · Answer 11 · edited Jul 17 '19 at 09:43

1

try this : self.navigationItem.leftBarButtonItem.customView = your_view

edited Jul 17 '19 at 09:43

Dhaval Bhimani

980
1
13
24

answered Feb 19 '10 at 07:37

iXcoder

1,564
4
20
41

score 0 · Answer 12 · answered Jan 01 '14 at 21:33

I tried to use it now and the code mentioned by warrior didn't work exactly as is. I had to change the initialization of activityIndicator:

activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

With this change it should work as expected.

How to set the activity indicator in the navigation bar?

12 Answers12