iOS Simulator shows white background on transparent images with template rendering mode

Question

The icons in my tab bar are showing white backgrounds behind them even though the image set in the Asset catalog has "Render As" set to "Template Image". Here are some cases:

No background set at all on the UITabBar

Same image darkened and contrast changed to bring out the background behind the icon

Same image but using a red background set with UITabBar.appearance().barTintColor = red

Here's a newly exported shape from Sketch's iOS UI library, exported with iOS settings and with all 3 sizes:

The final PNG that I use

The PNG as viewed from Pixelmator, showing transparency

The images are set to template mode in the asset catalog and programmatically. Each background set with UITabBars appearance() and I'm not subclassing UITabBarController, and I'm not using storyboards, and here is all the code I have to reproduce this issue with var names simplified:

// AppDelegate
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    window = UIWindow(frame: UIScreen.main.bounds)
    let tabBarController = UITabBarController()
    // let controllers = [...]
    tabBarController.setViewControllers(controllers, animated: false)
    UITabBar.appearance().tintColor = UIColor.brown
    UITabBar.appearance().barTintColor = // red, green, etc
    window!.rootViewController = tabBarController
    window!.makeKeyAndVisible()
    return true
}

And here is where I set the UITabBarItem in that controller:

// The controller with the tab icon
override init(style: UITableViewStyle) {
    super.init(style: style)        
    let booImage = UIImage(named: "boo")?.withRenderingMode(.alwaysTemplate)
    self.tabBarItem = UITabBarItem(title: "Controller", image: booImage, tag: 1)
}

Aside from these few lines of code, this is a fresh project with no other changes. It seems to see that the image is a template because I'm able to tint the shape any color I want, but that white background always remains.

Based on documentation, there are no other steps required to use a templated image as a UITabBarItem icon. Anyone have an idea why the white background shows up on the UITabBarItems? Does it have anything to do with the fact that its running in the simulator?

Can't reproduce (see my answer below). If you'd like to post a simple demonstration project somewhere, I'll be glad to download it and take a look at it. — matt, Dec 14 '17 at 17:32
Okay got it, I'm sorry! Won't do that again. Edit: I don't remember doing that before, but lesson learned — bpercevic, Jan 11 '18 at 16:12

score 1 · Accepted Answer · answered Dec 14 '17 at 17:31

1

Can't reproduce. Here's my app running in the 5s simulator (in landscape); there's no "white background":

Here's the entirety of the code:

// AppDelegate.swift

import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    func application(_ application: UIApplication, didFinishLaunchingWithOptions
        launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
            self.window = self.window ?? UIWindow()
            let tabBarController = UITabBarController()
            let controllers = [ViewController()]
            tabBarController.setViewControllers(controllers, animated: false)
            UITabBar.appearance().tintColor = .yellow
            UITabBar.appearance().barTintColor = .red
            self.window!.rootViewController = tabBarController
            self.window!.makeKeyAndVisible()
            return true
    }
}

// ViewController.swift

import UIKit
class ViewController: UIViewController {
    init() {
        super.init(nibName: nil, bundle: nil)
        let booImage = UIImage(named: "ghost")?.withRenderingMode(.alwaysTemplate)
        self.tabBarItem = UITabBarItem(title: "Controller", image: booImage, tag: 1)
        self.view.backgroundColor = .white
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

answered Dec 14 '17 at 17:31

matt

515,959
87
875
1,141

Thanks Matt. I tried the same thing with a new project and the image shows up without a background as expected. So I really don't understand what's happening but I think I may have to abandon this project and start fresh. Thanks for checking it out – bpercevic Dec 14 '17 at 17:53
My theory is that the image you think you're using, or the code you think you're running, etc., is not what's actually being used / run. As I said, I'll be happy to look at the project if you can eliminate whatever is irrelevant. – matt Dec 14 '17 at 18:18
Matt I figured it out. I has some swift file with a custom UIButton from some button collection repo on GitHub. After removing it, things work as expected. I didn't suspect this file because it wasn't changing the behavior of UIButton, it was only subclassing UIButton. Thanks for taking the time to look at this for me – bpercevic Dec 14 '17 at 18:43
The debugging technique I used, and which you also ended up using, of testing in a _clean vanilla project_, is a very important one. This often shows you that the problem lies elsewhere in your real project, and then you can build things up again from scratch to eliminate that problem. – matt Dec 14 '17 at 18:57
Very true. Thanks for the help! – bpercevic Dec 14 '17 at 18:59

score 0 · Answer 2 · answered Dec 13 '17 at 21:08

0

The UITabBar probably has background=white. Try to set background of the Tab Bar to clear. You can do this in the storyboard. There are also a few reasons you may want to extend the default UITabBar and update this in code.

Storyboard Color

answered Dec 13 '17 at 21:08

miex

64
6

Actually, I reworded the question. My issue is that the UITabBarItem's image is not transparent, even though it is a fully transparent png – bpercevic Dec 13 '17 at 21:29

iOS Simulator shows white background on transparent images with template rendering mode

2 Answers2