How to change the background color of the background component of UISearchBar on iOS

Question

I know how to remove / change the background color of a UISearchBar in the search field:

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

But I don’t know how to do it inside:

This should be compatible with iOS 4.3+.

Answer 1

Use this code to change the searchBar 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 code below to change the UISearchBarIcon :

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

Alternatively, to change the searchBar icon, you can use the following built-in method on the 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 ie:

• UISearchBarIconBookmark
• UISearchBarIconClear
• UISearchBarIconResultsList
• UISearchBarIconSearch

I hope this helps you ...

Answer 2

Just customize the text box.

I just do it and it works great for me (iOS 7).

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

Thus, you do not need to create an image, its size, etc.

Answer 3

A solution that is not associated with any private API! :)

Currently ( possibly starting with iOS 5 ), you can do this simply for a single color case as follows:

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

but keep in mind that as a basis for appearance, the change will be global for the application (this may 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 support for earlier versions of iOS and want to use Swift, check out this question.

Answer 4

More details

• Xcode Version 11.0 (11A420a), swift 5

UISearchBar setup example

Decision

 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

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)) } } 

Answer 5

According to the UISearchBar documentation :

You must use this feature for iOS 5.0+.

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

Usage example:

 [mySearchBar setSearchFieldBackgroundImage:myImage forState:UIControlStateNormal]; 

Unfortunately, in iOS 4, you need to return to less complicated methods. See Other Answers.

Answer 6

As Accatyyc says for iOS5 +, use setSearchFieldBackgroundImage, but you need to either create graphics or do the following:

 CGSize size = CGSizeMake(30, 30); // create context with transparent background UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale); // Add a clip before drawing anything, in the shape of an rounded rect [[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0,0,30,30) cornerRadius:5.0] addClip]; [[UIColor grayColor] setFill]; UIRectFill(CGRectMake(0, 0, size.width, size.height)); UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); [self.searchBar setSearchFieldBackgroundImage:image forState:UIControlStateNormal]; 

Answer 7

what about the apple way?

 UISearchBar.appearance().setSearchFieldBackgroundImage(myImage, for: .normal) 

You can install any image on your design!

But if you want to create all the software, you can do it

---

my solution on Swift 3

 let searchFieldBackgroundImage = UIImage(color: .searchBarBackground, size: CGSize(width: 44, height: 30))?.withRoundCorners(4) UISearchBar.appearance().setSearchFieldBackgroundImage(searchFieldBackgroundImage, for: .normal) 

where i use helper extension

 public extension UIImage { public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) { let rect = CGRect(origin: .zero, size: size) UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0) color.setFill() UIRectFill(rect) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() guard let cgImage = image?.cgImage else { return nil } self.init(cgImage: cgImage) } public func withRoundCorners(_ cornerRadius: CGFloat) -> UIImage? { UIGraphicsBeginImageContextWithOptions(size, false, scale) let rect = CGRect(origin: CGPoint.zero, size: size) let context = UIGraphicsGetCurrentContext() let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius) context?.beginPath() context?.addPath(path.cgPath) context?.closePath() context?.clip() draw(at: CGPoint.zero) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext(); return image; } } 

Answer 8

I found this to be the best way to customize the look of the various search bar attributes in Swift 2.2 and iOS 8+ using UISearchBarStyle.Minimal

 searchBar = UISearchBar(frame: CGRectZero) searchBar.tintColor = UIColor.whiteColor() // color of bar button items searchBar.barTintColor = UIColor.fadedBlueColor() // color of text field background searchBar.backgroundColor = UIColor.clearColor() // color of box surrounding text field searchBar.searchBarStyle = UISearchBarStyle.Minimal // Edit search field properties if let searchField = searchBar.valueForKey("_searchField") as? UITextField { if searchField.respondsToSelector(Selector("setAttributedPlaceholder:")) { let placeholder = "Search" let attributedString = NSMutableAttributedString(string: placeholder) let range = NSRange(location: 0, length: placeholder.characters.count) let color = UIColor(white: 1.0, alpha: 0.7) attributedString.addAttribute(NSForegroundColorAttributeName, value: color, range: range) attributedString.addAttribute(NSFontAttributeName, value: UIFont(name: "AvenirNext-Medium", size: 15)!, range: range) searchField.attributedPlaceholder = attributedString searchField.clearButtonMode = UITextFieldViewMode.WhileEditing searchField.textColor = .whiteColor() } } // Set Search Icon let searchIcon = UIImage(named: "search-bar-icon") searchBar.setImage(searchIcon, forSearchBarIcon: .Search, state: .Normal) // Set Clear Icon let clearIcon = UIImage(named: "clear-icon") searchBar.setImage(clearIcon, forSearchBarIcon: .Clear, state: .Normal) // Add to nav bar searchBar.sizeToFit() navigationItem.titleView = searchBar 

Answer 9

without using private APIs:

 for (UIView* subview in [[self.searchBar.subviews lastObject] subviews]) { if ([subview isKindOfClass:[UITextField class]]) { UITextField *textField = (UITextField*)subview; [textField setBackgroundColor:[UIColor redColor]]; } } 

Answer 10

The best solution is to set the appearance of a UITextField inside a UISearchBar

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

Answer 11

Just move all the views using the category method (tested in iOS 7 and does not use a private API):

 @implementation UISearchBar (MyAdditions) - (void)changeDefaultBackgroundColor:(UIColor *)color { for (UIView *subview in self.subviews) { for (UIView *subSubview in subview.subviews) { if ([subSubview isKindOfClass:[UITextField class]]) { UITextField *searchField = (UITextField *)subSubview; searchField.backgroundColor = color; break; } } } } @end 

So, after importing a category into your class, just use it like:

 [self.searchBar changeDefaultBackgroundColor:[UIColor grayColor]]; 

Keep in mind that if you put this immediately after the [[UISearchBar alloc] init] , this will not work yet, since the sub-lights of the search bar are still being created. Put this a few lines down after you customize the rest of the search bar.

Answer 12

For color change only:

 searchBar.tintColor = [UIColor redColor]; 

To apply a background image:

 [self.searchBar setSearchFieldBackgroundImage: [UIImage imageNamed:@"Searchbox.png"] forState:UIControlStateNormal]; 

Answer 13

 - (void)viewDidLoad { [super viewDidLoad]; [[self searchSubviewsForTextFieldIn:self.searchBar] setBackgroundColor:[UIColor redColor]]; } - (UITextField*)searchSubviewsForTextFieldIn:(UIView*)view { if ([view isKindOfClass:[UITextField class]]) { return (UITextField*)view; } UITextField *searchedTextField; for (UIView *subview in view.subviews) { searchedTextField = [self searchSubviewsForTextFieldIn:subview]; if (searchedTextField) { break; } } return searchedTextField; } 

Answer 14

This is the Swift version (swift 2.1 / iOS 9)

 for view in searchBar.subviews { for subview in view.subviews { if subview .isKindOfClass(UITextField) { let textField: UITextField = subview as! UITextField textField.backgroundColor = UIColor.lightGrayColor() } } } 

Answer 15

To do this on iOS 13+,

 searchController.searchBar.searchTextField.backgroundColor = // your color here 

Note that the default searchTextField.borderStyle set to roundedRect , which imposes a slight gray overlay on top of the color you set. If this is undesirable, do

 searchController.searchBar.searchTextField.borderStyle = .none 

This will eliminate gray overlays and also eliminate rounded corners.

Answer 16

For iOS 9, use this:

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. // Remove lag on oppening the keyboard for the first time UITextField *lagFreeField = [[UITextField alloc] init]; [self.window addSubview:lagFreeField]; [lagFreeField becomeFirstResponder]; [lagFreeField resignFirstResponder]; [lagFreeField removeFromSuperview]; //searchBar background color change [[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setBackgroundColor:[UIColor greenColor]]; [[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTextColor:[UIColor blackColor]; return YES; } 

Answer 17

Swift 3

 for subview in searchBar.subviews { for innerSubview in subview.subviews { if innerSubview is UITextField { innerSubview.backgroundColor = UIColor.YOUR_COLOR_HERE } } } 

Answer 18

For Swift 3+ use this:

 for subView in searchController.searchBar.subviews { for subViewOne in subView.subviews { if let textField = subViewOne as? UITextField { subViewOne.backgroundColor = UIColor.red //use the code below if you want to change the color of placeholder let textFieldInsideUISearchBarLabel = textField.value(forKey: "placeholderLabel") as? UILabel textFieldInsideUISearchBarLabel?.textColor = UIColor.blue } } } 

Answer 19

In Swift 4, I would recommend you do this without additional code:

 self.searchBar.searchBarStyle = .prominent self.searchBar.barStyle = .black 

You can also change .prominent to .minimal if you do not want the background to be gray.

Answer 20

@ Evgeny Ilyin. Eugene Ilyin's idea is the best. I wrote a version of Objective-C based on this solution.

Create a UIImage category and advertise two classes of methods in UIImage + YourCategory.h

 + (UIImage *)imageWithColor:(UIColor *)color withSize:(CGRect)imageRect; + (UIImage *)roundImage:(UIImage *)image withRadius:(CGFloat)radius; 

Inject methods in UIImage + YourCategory.m

 // create image with your color + (UIImage *)imageWithColor:(UIColor *)color withSize:(CGRect)imageRect { UIGraphicsBeginImageContext(imageRect.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetFillColorWithColor(context, [color CGColor]); CGContextFillRect(context, imageRect); UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image; } // get a rounded-corner image from UIImage instance with your radius + (UIImage *)roundImage:(UIImage *)image withRadius:(CGFloat)radius { CGRect rect = CGRectMake(0.0, 0.0, 0.0, 0.0); rect.size = image.size; UIGraphicsBeginImageContextWithOptions(image.size, NO, [UIScreen mainScreen].scale); UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius]; [path addClip]; [image drawInRect:rect]; image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image; } 

Make your own UISearchBar in your ViewController

 CGRect rect = CGRectMake(0.0, 0.0, 44.0, 30.0); UIImage *colorImage = [UIImage imageWithColor:[UIColor yourColor] withSize:rect]; UIImage *finalImage = [UIImage roundImage:colorImage withRadius:4.0]; [yourSearchBar setSearchFieldBackgroundImage:finalImage forState:UIControlStateNormal]; 

Answer 21

It worked for me.

 - (void)setupSearchBar { [self.searchBar setReturnKeyType:UIReturnKeySearch]; [self.searchBar setEnablesReturnKeyAutomatically:NO]; [self.searchBar setPlaceholder:FOLocalizedString(@"search", nil)]; [self.searchBar setBackgroundImage:[UIImage new]]; [self.searchBar setBackgroundColor:[UIColor myGreyBGColor]]; [self.searchBar setBarTintColor:[UIColor myGreyBGColor]]; [self.searchBar setTintColor:[UIColor blueColor]]; } 

Answer 22

iOS 13, Swift 5

 searchBar.searchTextField.backgroundColor = .gray searchBar.searchTextField.tintColor = .white searchBar.searchTextField.textColor = .white 

Answer 23

This helped me change the background color of the textField in the search bar.

 UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .white