How to change background color of the text field i

Question

How to change the default grey background at UISearchController search text field?

Answer 1

Apple has key 'searchField' to detect textfield in searchBar. So first safely get that textfield and do the change whatever you want with textfield.

let searchController = UISearchController(searchResultsController: nil)
searchController.searchResultsUpdater = self
searchController.searchBar.placeholder = "Search here..."
searchController.searchBar.delegate = self
searchController.searchBar.tintColor = .white
searchController.searchBar.barTintColor = .white
searchController.hidesNavigationBarDuringPresentation = false
searchController.obscuresBackgroundDuringPresentation = false

if let textfield = searchController.searchBar.value(forKey: "searchField") as? UITextField {

    // Set text colour of text field   
    textfield.textColor = UIColor.blue

    if let backgroundview = textfield.subviews.first {

        // Get background view and change background color
        backgroundview.backgroundColor = UIColor.white

        // Set rounded corner
        backgroundview.layer.cornerRadius = 10
        backgroundview.clipsToBounds = true
    }
}

if #available(iOS 11.0, *) {
    self.navigationItem.searchController = searchController
} else {
    self.tblCustomers.tableHeaderView = searchController.searchBar
}

This is working code and I have implemented in my current project. Still if you have any query then let me know.

I hope this will help you.

Answer 2

On iOS13 and later, searchTextField is a member of UISearchBar. So you can use something like this:

searchController.searchBar.searchTextField.backgroundColor = UIColor.blue

Be careful, apple does not have proper notation in SDK showing that this property introduced in iOS 13, so if you are supporting iOS 12 or older it does not show you any warning. Make sure to wrap it for iOS 13 only.

Answer 3

To update background of UISearchController proper way is change background image.

If you see UISearchController in visual debugger you can find out that background of it is UIImageView:

So you should make small image of your search bar and set it to seachBar like this:

    lazy var searchController: UISearchController = {

        let searchController = UISearchController(searchResultsController: nil)

        searchController.searchBar.placeholder = "Search"
        searchController.searchBar.tintColor = UIColor.black
        searchController.searchBar.searchBarStyle = .minimal
        // Set background image to searchBar so it will resize
        searchController.searchBar.setSearchFieldBackgroundImage(UIImage(named: "oval_static"), for: .normal)

        definesPresentationContext = true

        return searchController
    }()

The image of searchBar (in project I recommend use .pdf or .png format of image here just screenshot):

The UISearchBar will resize it as need it and result is:

Moreover we can do something like this to create custom background just in code:

/// Just random extension to make image from UIView, you can use your own
extension UIView {

func asImage() -> UIImage {
    let renderer = UIGraphicsImageRenderer(bounds: bounds)
    return renderer.image { rendererContext in
        layer.render(in: rendererContext.cgContext)
    }
}}

lazy var searchController: UISearchController = {

        let searchController = UISearchController(searchResultsController: nil)

        searchController.searchBar.placeholder = "Search"
        searchController.searchBar.tintColor = UIColor.black
        searchController.searchBar.searchBarStyle = .minimal

        // Create own view with custom properties
        // Default height is 36 points
        let differentColorSearchBar = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 36))

        differentColorSearchBar.layer.cornerRadius = 8
        differentColorSearchBar.clipsToBounds = true
        differentColorSearchBar.backgroundColor = UIColor.blue

        searchController.searchBar.setSearchFieldBackgroundImage(differentColorSearchBar.asImage(), for: .normal)

        definesPresentationContext = true

        return searchController
    }

The Result is (of course you can change another properties of searchBar to make it better, but I just show you how change background properly):

I recommend avoid private properties just use open! Hope it's help.

Answer 4

There is no any proper/public way for changing this searchbar's background color. There are some ways by using private apis, like answer by @sanjayshah, but in that case, there are chances that apple might reject your application. I think you should move on using default background color. Most of the apps use the same.

Answer 5

A recursive version of @Kamran's answer with a better best-case and average running time. The accepted version does not work on iOS 13+ for me.

private lazy var searchTextField: UITextField? = { [unowned self] in
    guard let searchBar = self.searchController?.searchBar else { return nil }
    var views =  searchBar.subviews
    while !views.isEmpty {
        guard let view = views.popLast() else { break }
        if let textfield = view as? UITextField {
            return textfield
        }
        views += view.subviews
    }
    return nil
}()

Answer 6

Did you try something like

searchController.searchBar.backgroundColor = UIColor.blue