UIProgressView custom track and progress images in iOS 7.1

Question

iOS 7.1 seems to have broken the custom image properties in UIProgressView. Code that used to successfully customize progress views now yields the default appearance.

I set up a sample project that does this in viewDidLoad:

self.progressView.frame = CGRectMake(self.progressView.frame.origin.x, self.progressView.frame.origin.y, self.progressView.frame.size.width, 9);
UIImage *img = [UIImage imageNamed:@"progress_bar_fill.png"];
img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(0, 4, 0, 4)];
self.progressView.progressImage = img;

img = [UIImage imageNamed:@"progress_bar_empty.png"];
img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(0, 4, 0, 4)];
self.progressView.trackImage = img;

I still get the default appearance. I've stepped through and verified that img is non-nil as expected. What's going on?

UPDATE: There is an OpenRadar for this, and I've also filed a radar of my own complete with a sample project.

UPDATE 2: As noted by Axy below, you have to add this to get the JEProgressView to work correctly:

_progressBar.tintColor = [UIColor clearColor];

Roadblock

I don't really like fixes (though it may work, and I may have to use it anyway). How can we know / be notified when this is officially fixed ? – Impeachment

I'd bet it'll be fixed in the next iOS update. And you'll hear shouting from the rooftops. – Roadblock

Answer 1

This is very annoying. I didn't find a way to fix this without subclassing UIProgressView.

Anyway here's how I fixed this: https://gist.github.com/JohnEstropia/9482567

You will have to change occurrences of UIProgressView to JEProgressView, including those in NIBs and storyboards.

Basically, you'd need to force assigning the images directly to the UIProgressView's children UIImageViews.

The subclass is needed to override layoutSubviews, where you adjust the heights of the imageViews according to the image sizes.

Jardena

Great googamooga, it worked! I had to remove .origin.y assignments for the track and progress image frames to get the position right but other than that it works great. – Twotone

I love it when someone posts a complete implementation of a fix. Great job. – Lawgiver

Answer 2

You are correct. This bug has been present since 7.1 first made its appearance in Xcode 5.1 seed 1. I submitted (and resubmitted) the same bug for all 5 seeds of Xcode 5.1, and now on Xcode 5.1. But Apple did not fix it.

Please submit this bug too! You may refer to my bug if you like: 15547259. The more the better! I regard this as serious breakage, because it means that an app that was working fine is now broken (if it uses a progress view with a progressImage).

Catacaustic

Why is Apple ignoring this all the time? – Villareal

As of today (oct 2014) the bug is still in iOS 8. Still not fixed. – Hierarch

And still in iOS 8.1. – Catacaustic

Still in iOS 8.4 it appears. – Burbank

@RandyHill But fixed in iOS 9! – Catacaustic

Answer 3

I used John Estropia solution, but it was showing the blu tint bar in overlay to mine, with quite a strange graphical effect.

I added

_progressBar.tintColor = [UIColor clearColor];

and It went just fine. Thanks for the solution man.

Agential

I had to do the same thing. – Roadblock

It doesn't work, the interesting thing is that when you set in the storyboard to clearColor and during debug it goes back to grey color (printing the outlet in the console) but then you set it in viewDidLoad to clearColor - The set worked but it still shows grey color. – Valles

Answer 4

Hello friends I have used the following code to add UIProgressView in my app:

UIProgressView *progressView;
progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];      
progressView.progressTintColor[UIColor colorWithRed:187.0/255 green:160.0/255 blue:209.0/255 alpha:1.0];
[[progressView layer]setCornerRadius:10.0f];
[[progressView layer]setBorderWidth:2.0f];
[[progressView layer]setMasksToBounds:TRUE];
progressView.clipsToBounds = YES;
[[progressView layer]setFrame:CGRectMake(30, 295, 260, 25)];[[progressView     layer]setBorderColor[UIColor whiteColor].CGColor]; 
progressView.trackTintColor = [UIColor clearColor];
[progressView setProgress: (float)count/15 animated:YES];

Hope the code will be helpful to you, I found it here : Source of Code

Skindeep

Answer 5

I have tried to implement the JEProgressView files from John Estropia - but it doesn't work. I must have done something wrong - but I'm a little new to this. Can someone explain how exactly to do this? I know it might be a stupid question - but after a lot of googling I thought asking was the only way.

Brittne

#22540700 – Protrusion

Answer 6

I'm also catched this bug. I tried to fix it playing with UIProgressView properties but without result. John's Estropia solution posted above, also don't work for me, maybe it's not support auto layout, so I made my own temporary solution for bypassing this bug. https://github.com/ninjaproger/AKProgressView

Kerns

Answer 7

For me this worked for iOS version 7.1 and above for progress image:

if ([[UIDevice currentDevice] systemVersion] >= 7)
    self.progressView.tintColor = [UIColor colorWithPatternImage:img];

Reformism

Answer 8

With Xcode5 it is now possible to make resizable images with Interface Builder too. We can specify the resizing direction and content inset and select the area of to be strecthed right within the interface builder.

To avail this feature you have use Asset Catalog for the image you want to resize.

Mastiff