Photo by Domenico Loia on Unsplash

iOS Notes 30: How to customize UISearchBar? [Updated v2]

Updated: Jan 31, 2020

UISearchBar is really easy to use. However, its customization is not that easy, at least you have to search on the internet.

How to change textColor?

// TextField Color Customization
let textFieldInsideSearchBar = searchBar.value(forKey: “searchField”) as? UITextField
textFieldInsideSearchBar?.textColor = UIColor.white

How to change placeHolder’s Color?

// Placeholder Customization
let textFieldInsideSearchBarLabel = textFieldInsideSearchBar!.value(forKey: “placeholderLabel”) as? UILabel
textFieldInsideSearchBarLabel?.textColor = UIColor.white

How to change Glass Icon’s Color?

// Glass Icon Customization
let glassIconView = textFieldInsideSearchBar?.leftView as? UIImageView
glassIconView?.image = glassIconView?.image?.withRenderingMode(.alwaysTemplate)
glassIconView?.tintColor = UIColor.white

How to change clearButton’s Color?

iOS 11 Solution :
Unfortunately, in iOS 11 we cannot change the clear button’s the rendering mode programmatically(I have no idea why). First set your new clear icon image programmatically and then go to the Assets folder and change your icon’s rendering mode manually.

let clearButton = textFieldInsideSearchBar?.value(forKey: “clearButton”) as! UIButton
clearButton.setImage(UIImage(named: "ic_clear"), for: .normal)
clearButton.tintColor = .white

iOS 10 and Below:

// Clear Button Customization
let clearButton = textFieldInsideSearchBar?.value(forKey: “clearButton”) as! UIButton
clearButton.setImage(clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate), for: .normal)
clearButton.tintColor = UIColor.white

Final Result

Seach Style: Minimal

This is just a suggestion, I like the searchBar with minimal style :)

If you have any question, ask me :)