Transparent UISearchBar in iOS 13 or newer

The latest versions of iOS (i.e. iOS 13 or higher) changed the UISearchBar a little bit. If you want to add a transparent background or any other customization of the search bar in your iOS mobile app, I thought a simple tutorial like this would be useful.

Objects changed in iOS 13

Many well-known objects have been changed in iOS 13. Not always for good in my opinion, but this is another story. Examples? Take UISegmentedControl.

The UISearchBar has been modified in a similar way.

Previously, in the older iOS versions, to change the search bar's background color, we only needed to call this method:

let searchBar = UISearchBar()
searchBar.backgroundColor = .clear

The iOS 13 premiere made things less obvious. For changing the background in the UISearchBar you do not only need to set the .backgroundColor method, but also add some trick.

UISearchBar transparency in iOS 13

First of all, let’s create an empty UIImage:

let image = UIImage()

Then we need to assign it to our Search Bar:

searchBar.backgroundImage = image

After this, we can set the .backgroundColor method and .barTintColor. Both with clear UIColor.

Background color in the search bar

This solution also sets the background color for the text field inside the search bar:

searchBar.searchTextField.backgroundColor = .gray

Setting clear background color for UISearchBar is useful when we want to customize this object, e.g. by adding corner radius or integrating it with the whole view.

Now, that's it! If you found this one helpful or have another way of dealing with transparency and colors of UISearchBar, let me know in the comments section!