UIToolbar Transparency in iOS 7 & 8, Foreground Unaffected

UIToolbar Transparency, Once Upon a Time

Prior to iOS 7, UIToolbar transparency, or more precisely, the background transparency of a UIToolbar, was controlled via its barStyle property. For example, we could do something like this in Objective-C:

Objective-C

We could then add one or more UIBarButtonItem controls. These buttons had foreground text or an image on a rounded rectangle with colour gradient background. You know; your typical 3D-style button back in the skeuomorphic days.

Translucent Toolbar in iOS 6

How the New “Flat” Design Affects Transparency

With the new UI design that Apple introduced in iOS 7, toolbar buttons no longer have a background. This means that they are more difficult to see on a translucent toolbar. It’s probably why UIToolbar's translucent property behaves a little differently. It no longer gives the toolbar transparency. There is a difference between transparency and translucency and the property’s name since iOS 7 actually better represents its behaviour now. That is, you’ll get a little peak at what’s behind the toolbar but the entire toolbar will never be transparent enough for you to clearly see what lays beneath.

The resulting effect of colour and alpha is a somewhat complex combination of UIToolbar's barStyle, barTintColor, translucent and backgroundColor properties (and probably deserves its own article). Furthermore, translucency is actually not evenly distributed throughout the entire toolbar. The “flat” design isn’t as flat as you may have thought after all!

To control UIToolbar transparency, we could use the alpha property of UIToolbar's parent class, UIView. However, this will make the entire view transparent, including the toolbar’s buttons; and since our buttons are probably just text with no background, this is probably not what you want. So, with alpha a no-go, this is about as transparent as it gets.

UIBarStyle.Default; transparent = true;

UIBarStyle.Black; transparent = true;

(Note that the text is more legible in the lower area of the toolbar only)

A Possible Solution

So while all this behind-the-scenes magic helps your app to stay within the Apple-designed look and feel of iOS 7, sometimes you just want or need a really transparent toolbar. So, how can you achieve this without affecting its buttons? I’ve accomplished this by programatically creating a 1px by 1px background image with a particular colour and alpha and setting that image as the background image of the toolbar.

Swift

We now have a completely transparent toolbar whose alpha we can precisely control. Notice that the transparency is even throughout the whole toolbar, allowing all the text beneath it to be legible.

Using a background image to control the transparency of the toolbar

Finally, you can control the colour of the buttons via the toolbar’s tintColor property.

Swift

Ryan started programming at an early age of 10 and quickly chose to focus on C-based languages throughout his software development career and on iOS app development starting with the iPhone SDK released in 2008. He now specializes in iOS app development with C, C++, Objective-C and Swift as well as React and React Native app development. When he is not programming, he's usually honing his skills in human-based languages, including Spanish, French and Mandarin Chinese. Born in Trinidad, W.I., his travels have taken him all over North America, Europe and Asia. He still has his eyes set on South America.

4 Comments

  1. coolplasma 2 years ago

    Hi Ryan,

    Thanks for your suggestion about the toolbar transparency/translucency problem. Your suggested solution is brilliant, and exactly what I needed. I was having awful problems with it, using alpha property of the toolbar makes all the buttons go transparent, in really random ways (UISlider looks awful, for example). Using your suggested method, gives just the look I need.

    • Author
      Ryan H. 2 years ago

      You’re welcome coolplasma. Glad I could help. Yeah, I was having the same kinds of issues; the entire toolbar, buttons and all, would go transparent which didn’t make for a nice UI!

  2. Any chance for an Objective-C solution?

Leave a reply