How to set grey color background for UIActivityIndicator when loading on UIView in iOS

Question

I currently have a UIActivityIndicator appearing on screen for a second or two. I would like to set grey out the background as this appears on screen but I am not sure how to do this...

Here's how I have initialized the indicator so far.

- (void)viewDidLoad
{
//...

    activity = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 32.0f, 32.0f)];
    [activity setCenter:CGPointMake(160.0f, 208.0f)];
    [activity setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleGray];

    [self.tableView addSubview:activity];

    [activity startAnimating];

    [activity performSelector:@selector(stopAnimating) withObject:nil afterDelay:1.0];


}

Any help would be greatly appreciated.

Marimaria

Please clarify what you mean by "grey out the background". Do you put a "shade" over the whole screen? Otherwise dim it somehow? Or change the table view rows to be disabled? Or something else? – Zweig

shade out the whole view or just the tableview and not the navigationcontroller. I am guessing its some kind of bakgroundframe thats black with its opacity set to .5 or something... I just don't know because I have never seen it done before. – Marimaria

Answer 1

You should check out the SVProgressHUD

It has options for masking the background and is dead simple to work with.

The SVProgressHUDMaskType has options to

enum {
 SVProgressHUDMaskTypeNone = 1, // allow user interactions, don't dim background UI (default)
SVProgressHUDMaskTypeClear, // disable user interactions, don't dim background UI
SVProgressHUDMaskTypeBlack, // disable user interactions, dim background UI with 50% translucent black
SVProgressHUDMaskTypeGradient // disable user interactions, dim background UI with translucent radial gradient (a-la-alertView)
};`

Bogoch

yes I have seen this a couple of times.. but wanted to learn how to set this up myself.. but I think maybe this will something I should be using in my project.. – Marimaria

Just check out the source code for that project. The simplest way would be to make an 'overlay' view thats the size of your window with a semi-transparent black background. Then add the activity indicator as a subview of that overlay view. – Bogoch

is it possible to set these up with timers? – Marimaria

okay cool thankyou for that.. I think I will have a go at this now.. because it dose have some nice functionality. – Marimaria

[self performSelector:@selector(showSpinner) withObject:nil afterDelay:5]; [self performSelector:@selector(dismissTheSpinner) withObject:nil afterDelay:10]; – Bogoch

okay pretty much got it working sweet.. actually quite nice.. however As I see the thing loading.. and when it stops my app crashes with this msg ** +[SVProgressHUD stopAnimating]: unrecognized selector sent to class 0x5cc10** – Marimaria

Answer 2

No need for a separate view. Here's a simple mechanism:

    UIActivityIndicatorView *activity = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];

    self.activityIndicatorView = activity;
    // make the area larger
    [activity setFrame:self.view.frame;
    // set a background color
    [activity.layer setBackgroundColor:[[UIColor colorWithWhite: 0.0 alpha:0.30] CGColor]];
    CGPoint center = self.view.center;
    activity.center = center;
    [activity release];

Binge

Hm, this looks good, but I'm getting an error on the [activity.layer ...] line. It says "Receiver type 'CALayer' for instance method is a forward declaration." I set up "activityIndicatorView" as a property of my VC, is there anything else I need to do to make this work? EDIT: Also, I'm using ARC, so I don't have the last line either. – Formulism

Have you included QuartzCore.h? – Binge

Answer 3

Try this simple method

Its working well for me....

- (void)viewDidLoad
{
    UIActivityIndicatorView *activityIndicator= [[UIActivityIndicatorView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
    activityIndicator.layer.cornerRadius = 05;
    activityIndicator.opaque = NO;
    activityIndicator.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.6f];
    activityIndicator.center = self.view.center;
    activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
    [activityIndicator setColor:[UIColor colorWithRed:0.6 green:0.8 blue:1.0 alpha:1.0]];
    [self.view addSubview: activityIndicator];
}

Amaze

Answer 4

Actually I think you can do it more simply :)

[_activityIndicator setBounds:self.view.frame];
[_activityIndicator setCenter:self.view.center];
[_activityIndicator setAlpha:0.5f];
[_activityIndicator startAnimating];

You can set the background color in the storyboard or do it programmatically using

    UIColor *activityBackgroundColor = [UIColor colorWithRed:0.6 green:0.8 blue:1.0 alpha:1.0];
[_activityIndicator setColor:activityBackgroundColor];

Make sure to check "Hides When Stopped" in the attributes inspector in Xcode with the activity indicator selected.

Gerfen

Answer 5

You could put a view in to the window that has a background color of black with opacity of 0.5. Putting it into the window will block navigation controllers and tab bar controllers as well.

Matted

hrmm.. I'm scouting around for examples of a good way to do this.. but they are pretty thin and view between... – Marimaria

What Micah said, is what I do as well. I put the code in the AppDelegate. Whenever I need to block the UI, I get a reference to the AppDelegate and call the method to add the 'carpet view', as I like to call it :) – Lox

Answer 6

Even simpler, you can set layer background colour to semi-transparent black (or any other colour):

self.activityIndicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
self.activityIndicatorView.layer.backgroundColor = [[UIColor colorWithWhite:0.0f alpha:0.5f] CGColor];
self.activityIndicatorView.hidesWhenStopped = YES;
self.activityIndicatorView.frame = self.view.bounds;
[self.view addSubview:self.activityIndicatorView];

Of course, don't forget to:

#import <QuartzCore/QuartzCore.h>

This way also the spinner will remain opaque.

Alsacelorraine

Answer 7

@SVMRAJESH Answer in Swift 2.0

 let loadingIndicator = UIActivityIndicatorView(frame: CGRectMake(0, 0, 50, 50))
    loadingIndicator.layer.cornerRadius = 05

    loadingIndicator.opaque = false
    loadingIndicator.backgroundColor = UIColor(white: 0.0, alpha: 0.6)
    loadingIndicator.center = self.view.center;
    loadingIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
    loadingIndicator.color = UIColor(red:0.6,green:0.8,blue:1.0,alpha:1.0)
    loadingIndicator.startAnimating()
    self.view.addSubview(loadingIndicator)

Plashy

Answer 8

As of Xcode 8.3, there's a way to do this in storyboard:

1. Add the Activity View into your scene, preferably to the bottom of the list of objects in your view, so that it'll appear "on top" of everything
2. Make it cover the entire view by adding constraints
3. Click on the Attributes Inspector
4. Enable "Hides When Stopped"
5. Set "Alpha" > 0 (0.3 is good)
6. Set "Background" to a dark color (black works well)

Here's a screenshot.

Sardius

Answer 9

Swift 3

To set backgroundColor

activityIndicatorView.backgroundColor = UIColor.gray // Set Activity indicator backgroundColor 

To create and configure activity indicator

var activityIndicatorView   : UIActivityIndicatorView! // Declare variable to hold activity indicator

In viewDidLoad, Call the below method to create and configure the activity indicator, also don't forget to add to the view (where you would like to show the activity indicator) by calling view.addSubview(activityIndicatorView) in viewDidLoad. Also set constraints to it.

func createAndconfigureActivityIndicatorView() {

        activityIndicatorView  = UIActivityIndicatorView(activityIndicatorStyle: .white) 

        activityIndicatorView.backgroundColor = UIColor.gray // Set Activity indicator backgroundColor 

        activityIndicatorView.startAnimating() // To start animation

        activityIndicatorView.hidesWhenStopped = true // Setting this true means, when you stop the activity indicator, its automatically hidden (see below)
}

// Stops and Hides Activity Indicator
activityIndicatorView.stopAnimating()

Horoscope