How to change inside background color of UISearchBar component on iOS

Question

I know how to remove/change UISearchBar background color around search field:

[[self.searchBar.subviews objectAtIndex:0] removeFromSuperview];
self.searchBar.backgroundColor = [UIColor grayColor];

But don't know how to do this inside it like that:

This needs to be compatible with iOS 4.3+.

Solution 1

Use this code to change the searchBar's UITextField backgroundImage:

UITextField *searchField;
NSUInteger numViews = [searchBar.subviews count];
for (int i = 0; i < numViews; i++) {
    if ([[searchBar.subviews objectAtIndex:i] isKindOfClass:[UITextField class]]) { //conform?
        searchField = [searchBar.subviews objectAtIndex:i];
    }
}
if (searchField) {
    searchField.textColor = [UIColor whiteColor];
    [searchField setBackground: [UIImage imageNamed:@"yourImage"]]; //set your gray background image here
    [searchField setBorderStyle:UITextBorderStyleNone];
}

Use the below code to change the UISearchBarIcon:

 UIImageView *searchIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourSearchBarIconImage"]];
searchIcon.frame = CGRectMake(10, 10, 24, 24);
[searchBar addSubview:searchIcon];
[searchIcon release];

Also, to change the searchBar icon you can use the following built-in method on UISearchBar (which is available from iOS 5+):

- (void)setImage:(UIImage *)iconImage forSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state

Here you can set 4 types of UISearchBarIcon i.e.:

1. UISearchBarIconBookmark
2. UISearchBarIconClear
3. UISearchBarIconResultsList
4. UISearchBarIconSearch

I hope this help you...

Solution 2

Just customize the text field itself.

I am simply doing this and it works fine for me (iOS 7).

UITextField *txfSearchField = [_searchBar valueForKey:@"_searchField"];
txfSearchField.backgroundColor = [UIColor redColor];

This way you don't need to create an image, size it, etc...

Solution 3

Details

• Xcode Version 11.0 (11A420a), swift 5

UISearchBar customising sample

Solution

import UIKit

extension UISearchBar {
    func getTextField() -> UITextField? { return value(forKey: "searchField") as? UITextField }
    func setTextField(color: UIColor) {
        guard let textField = getTextField() else { return }
        switch searchBarStyle {
        case .minimal:
            textField.layer.backgroundColor = color.cgColor
            textField.layer.cornerRadius = 6
        case .prominent, .default: textField.backgroundColor = color
        @unknown default: break
        }
    }
}

Usage

let searchBar = UISearchBar(frame: CGRect(x: 0, y: 20, width: UIScreen.main.bounds.width, height: 44))
//searchBar.searchBarStyle = .prominent
view.addSubview(searchBar)
searchBar.placeholder = "placeholder"
searchBar.setTextField(color: UIColor.green.withAlphaComponent(0.3))

Result 1

 searchBar.searchBarStyle = .prominent // or default

Result 2

 searchBar.searchBarStyle = .minimal

Full sample

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let searchBar = UISearchBar(frame: CGRect(x: 0, y: 20, width: UIScreen.main.bounds.width, height: 44))
        //searchBar.searchBarStyle = .minimal
        searchBar.searchBarStyle = .prominent
        view.addSubview(searchBar)
        searchBar.placeholder = "placeholder"
        searchBar.setTextField(color: UIColor.green.withAlphaComponent(0.3))
    }
}

Solution 4

Solution which doesn't involve any private API ! :)

Currently (probably since iOS 5 ) you can do this, for simply one colour cases, in this way:

[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setBackgroundColor:[UIColor redColor]];

but please keep in mind that as it basis on appearance the change will be global for the app (it can be an advantage or a disadvantage of the solution).

For Swift you can use (it will work for iOS 9 and above):

if #available(iOS 9.0, *) {
    UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).backgroundColor = UIColor.darkGrayColor()
}

You do not need #available if your project supports iOS 9 and newer.

If you need to support earlier versions of iOS and want to use Swift take a look at this question.

Solution 5

According to the UISearchBar documentation:

You should use this function for iOS 5.0+.

- (void)setSearchFieldBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state

Usage example:

[mySearchBar setSearchFieldBackgroundImage:myImage forState:UIControlStateNormal];

Sadly, in iOS 4 you need to revert to less sophisticated methods. See other answers.

View more solutions

Comments

[Paras Joshi]

@BorutTomazin i just add the code for change the textfield backgroundcolor of searchbar and when i get output for search icon i'll also post code hope it help you...

[Accatyyc]

This way is not a good way to do it. It can easily break your app in coming iOS updates. EDIT Sorry, just saw that the OP needed it to be compatible with iOS 4.

[Paras Joshi]

@Accatyyc this is give perfact output which he wants and its problem occure in bellow the version of 5.0 or 4.3 so its fine and if you have a solution then post the code dude i have this solution which may useful ...

[Borut Tomazin]

Yes, this is what I was looking for. Thanks!

[Borut Tomazin]

This is fine if I am targeting only iOS 5+ devices.

[iwasrobbed]

This would likely be considered using private API, so I'd be cautious submitting an app with this.

[Yoon Lee]

Like @iWasRobbed mentioned, this is using private API that accesses hidden variable through KVC.

[k06a]

SearchBarStyle should be default! :)

[Legoless]

This doesn't work for me, not even on default or minimal style (iOS 8).

[Julian]

@iWasRobbed and please take a look at my answer, maybe that will be fine for you

[Mahmoud Adam]

sorry @JulianKról I just saw your answer now, didn't notice it before

[Julian]

no problem, just noticed yours, and checked how it is different :)

[Max MacLeod]

Works but iOS 9 only. Here is the Swift equivalent: UITextField.appearanceWhenContainedInInstancesOfClasses([UIS‌​earchBar.self]).back‌​groundColor = UIColor.darkGrayColor()

[Max MacLeod]

duplicates previous answer

[Julian]

@MaxMacLeod, thanks I have updated my answer based on what you posted

[TheCodingArt]

cough this can be rejected from Apple because you're accessing private variables cough

[jose920405]

Still Working in the last ios version

[Ivan]

This had no effect for me. But setting the textField.layer.backgroundColor does change the background color.

[Nubaslon]

Best and simple solution! Thnx! =)

[tanya]

This was killing me...thanks for pointing out that for minimal you had to do layer.backgroundColor...

[EmilDo]

One interesting problem with this solution is that when type is .minimal and one sets the background to white -> the background becomes grey. this is due to the fact that the top of the view is taken by an image named _UISearchBarSearchFieldBackgroundView

[Vasily Bodnarchuk]

Can't understand. Can you show the code? I have no problem with setting searchBar.backgroundColor = .white.

[Tim Friedland]

Beautiful solution! Thank you.

[Benjamin Wen]

This is surely the best and the most graceful way. Thanks! Saved my life.

[Benjamin Wen]

For guys looking for a better solution, I recommend you read EvGeniy Ilyin's, which is way bellow the many ugly solutions. (cmd+F, search this page.) UISearchBar.appearance().setSearchFieldBackgroundImage(white‌​Image, for: .normal)

[Benjamin Wen]

not the best solution. see EvGeniy Ilyin's, which is way bellow the many ugly solutions. (cmd+F, search this page.) UISearchBar.appearance().setSearchFieldBackgroundImage(white‌​‌​Image, for: .normal)

[coolcool1994]

iOS 11 for minimal searcher, setting .layer background doesn't work anymore. It seems there is an additional view on top of the textfield.

[Greg Brown]

It doesn't use private API but it still relies on private implementation details (i.e. the internal view hierarchy of the search bar). This implementation could change at any time.

[Jbryson]

This is the correct way. I was just about to post a version of this. Good work! Very Complete!

[Yogesh Patel]

why we use layer for minimal searchBarStyle .? because when I remove backgroundColor without layer it not set the color that's why .

[btomtom5]

Maybe I am doing something wrong, but this sets the background image of the entire search bar and not the just the background image inside the text field

[Partho63]

Pleas don't just put some code, provide some explanation also.

[Vasily Bodnarchuk]

@ApoorvKhatreja it is possible. I will wait for the official Xcode release and then update the code.

[Funnycuni]

how to you change the place holder text color for iOS 13 ?

[whyoz]

in iOS 13: Terminating app due to uncaught exception 'NSGenericException', reason: 'Access to UISearchBar's _searchField ivar is prohibited. This is an application bug' .. this is now going to cause app crashes, so you should change the solution to continue getting upvotes!

[Merricat]

Finally a solution that doesn't use the private API! I went with UISearchBar.appearance().setSearchFieldBackgroundImage(UIIma‌​ge(), for: .normal) to completely remove the grey image

[donjuedo]

iOS 13 gives me: reason: 'Access to UISearchBar's _searchField ivar is prohibited. This is an application bug'

[andygeers]

Although in iOS 13 onwards there is a public API _searchBar.searchTextField