UISearchBar: clear background color or set background image

Question

How can set the background image, or clear the background, of a search bar, like the note application?

self.searchBar.setSearchFieldBackgroundImage(UIImage(), for: .normal) — AndrewK, Feb 23 '22 at 18:22

Rudolf Adamkovič · Answer 1 · 2012-09-27T11:59:27.373

175

A future-proof way:

[searchBar setBackgroundImage:[UIImage new]];
[searchBar setTranslucent:YES];

edited Sep 27 '12 at 11:59

answered Sep 26 '12 at 09:34

Rudolf Adamkovič

31,030
13
103
118

1

Working on ios 5 & ios 6 as well. Tested on IPad – AvtarSingh Suchariya Jan 25 '13 at 14:36
Great, but : `[UIImage new]` is equivalent to `[[UIImage alloc] init]`. Your image is never released. > Do `[searchBar setBackgroundImage:[[UIImage new]autorelease]];` – Martin May 23 '13 at 17:38
1

it's released for you if you use ARC though. – Kevlar May 29 '13 at 19:29
1

This should be the answer as well, IMO! – Kevlar May 29 '13 at 19:29
8

Martin no! Use ARC dammit. Unless you need super performant code, even then I'm not convinced ARC wont be better for most situations. – powerj1984 Jun 13 '13 at 16:47
This is the best answer if you ask me. It works perfectly, and is so clean and simple. Now, let's just see what iOS7 brings :) – Daniel Saidi Aug 22 '13 at 18:34
4

Confirmed this works with iOS 7 – RyanG Sep 25 '13 at 20:55
this does not work in iOS7. – Chisx Jan 11 '14 at 23:20
Confirmed working in iOS 7.1 for `UISearchBar`s with `SearchBarStyle` `UISearchBarStyleProminent` – Bobby Apr 01 '14 at 06:33
This works but be warned - it causes a bug: if you have a refresh control it will lie overtop the search bar instead of rendering underneath it when the two overlap. – Jordan H Oct 30 '14 at 19:27
Works on iOS 8 too.Thanks – iCodes Dec 05 '14 at 10:17
Simple and work pefectly ! – hahv May 25 '15 at 11:09
works ios8 couldn't be easier!! – Deprecated Darren Jul 24 '15 at 20:59
Works under iOS9 even without setting it to translucent – vilmoskörte Jan 24 '16 at 16:38

katbyte · Answer 2 · 2014-06-12T17:35:13.980

29

mj_ has the answer that i used. i was just going to comment as such but i can't yet. So i'll just post my own answer with my implementation where I add a search bar to the top of a table view with a semi-transparent BG.

DLog(@"    Add search bar to table view"); 

//could be a UIImageView to display an image..?
bg = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 45)] autorelease];
bg.backgroundColor        = [UIColor blackColor];
UISearchBar *sb           = [[[UISearchBar alloc]initWithFrame:CGRectMake(0, 0, 290, 45)] autorelease];
sb.barStyle               = UIBarStyleBlackTranslucent;
sb.showsCancelButton      = NO;
sb.autocorrectionType     = UITextAutocorrectionTypeNo;
sb.autocapitalizationType = UITextAutocapitalizationTypeNone;
sb.delegate               = self;
[bg addSubview:sb];
table.tableHeaderView     = bg;

for (UIView *subview in sb.subviews) {
    if ([subview isKindOfClass:NSClassFromString(@"UISearchBarBackground")]) {
        [subview removeFromSuperview];
        break;
    }
}

edited Jun 12 '14 at 17:35

answered Oct 03 '10 at 04:44

katbyte

2,665
2
28
19

3

+1 for still being accurate in 2011. I was looking for the last five lines of your example. Cheers! – epologee Jan 25 '11 at 21:20
if you use an uiimageview to display a backgroundimage and you want to hide the searchbar behind the navigationbar, the image needs to be 44 px height. Or use clipsToBounds = YES, otherwise there will be a 1 px line drawn under the navigationbar. – Olof Jul 25 '11 at 09:32
I did like this: NSClassFromString([NSString stringWithFormat:@"U%@Sea%@", @"I", @"rchBarBackground"]) in case apple would search for strings naming their private class.. but don't know if it would help(?) – hfossli Aug 19 '11 at 13:29
1

Will Apple reject this code because it's using private class "UISearchBarBackground"? – nonamelive Dec 25 '11 at 06:00
I used this in an application that was submitted to the app store and it was not rejected. – katbyte Dec 10 '12 at 19:45

score 14 · Answer 3 · answered Sep 24 '10 at 14:12

14

I had problems w/ the answer above. I used the following.

for (UIView *subview in searchBar.subviews) {
    if ([subview isKindOfClass:NSClassFromString(@"UISearchBarBackground")]) {
        [subview removeFromSuperview];
        break;
    }
}

answered Sep 24 '10 at 14:12

mj_

6,297
7
40
80

As of SDK 4.2, this breaks the buttons and fields. – Simon Woodside Nov 30 '10 at 04:30
I'm wrong, it only does that if you put this code in layoutSubviews. Duh. – Simon Woodside Nov 30 '10 at 04:41
3

Don't forget to set your color after `for` cycle - `[searchBar setBackgroundColor:[UIColor clearColor]];` – beryllium Feb 16 '12 at 14:04
This approach does not work in Xcode 4.4.1 on iOS 5.1. – Maksim Sep 26 '12 at 13:06

score 12 · Answer 4 · answered May 29 '11 at 22:59

This worked for me (ios4.2+)

// Change the search bar background
-(void)viewWillAppear:(BOOL)animated {
    for (UIView *subview in self.searchBar.subviews) {
        if ([subview isKindOfClass:NSClassFromString(@"UISearchBarBackground")]) {
            UIView *bg = [[UIView alloc] initWithFrame:subview.frame];
            bg.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"search_bar_bg"]];
            [self.searchBar insertSubview:bg aboveSubview:subview];
            [subview removeFromSuperview];
            break;
        }
    }   
}

score 8 · Answer 5 · edited May 23 '17 at 12:17

8

You have two questions here:
1.UISearchBar clear background color:
See my answer here

2.Set background image Solution:(If you are in iOS 5.0 +)

[[UISearchBar appearance]setSearchFieldBackgroundImage:[navBarGradImage resizableImageWithCapInsets:inset2] forState:UIControlStateNormal];

NOTE: You can also try using a transparent image as a background.

Hope this helps.

edited May 23 '17 at 12:17

Community

1
1

answered May 18 '12 at 06:10

geekay

1,655
22
31

Designerd · Accepted Answer · 2011-04-05T19:48:26.417

I just came up with a solution that works really well. You have to override the UISearchBar and then hide both the Background and Segment Control layers. Then Draw the background.

@ .m

#import "UISearchBar.h" 
#import <QuartzCore/QuartzCore.h>

@implementation UISearchBar(CustomBackground)

- (id)init
    {
        for ( UIView * subview in self.subviews ) 
        {
            if ([subview isKindOfClass:NSClassFromString(@"UISearchBarBackground") ] ) 
                subview.alpha = 0.0;  

            if ([subview isKindOfClass:NSClassFromString(@"UISegmentedControl") ] )
                subview.alpha = 0.0; 
        } 

        return self;
    }

+ (UIImage *) bgImagePortrait
    {
        static UIImage *image = nil;
        if (image == nil)
            image = [[UIImage imageNamed:@"UISearchBarBack.png"] retain ];

        return image;
    }

+ (UIImage *) bgImageLandscape
    {
        static UIImage *image = nil;
        if (image == nil)
            image = [[UIImage imageNamed:@"UISearchBarBack.png"] retain];

        return image;
    }

- (void) drawLayer:(CALayer *)layer inContext:(CGContextRef)contenxt
    {
        if ([self isMemberOfClass:[UISearchBar class]] == NO)
            return; 

        UIImage * image = ( self.frame.size.width > 320 ) ? [UISearchBar bgImageLandscape ] : [UISearchBar bgImagePortrait ];  

        for ( UIView * subview in self.subviews ) {
            if ([subview isKindOfClass:NSClassFromString(@"UISearchBarBackground") ] ) 
                subview.alpha = 0.0; 

            if ([subview isKindOfClass:NSClassFromString(@"UISegmentedControl") ] )
                subview.alpha = 0.0; 
        }

        CGContextTranslateCTM( contenxt , 0 , image.size.height );
        CGContextScaleCTM( contenxt, 1.0, -1.0 );
        CGContextDrawImage( contenxt , CGRectMake( 0 , 0 , image.size.width , image.size.height ), image.CGImage );
    }  

@end

@ .h

#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>


@interface UISearchBar(CustomBackground) 

@end

Hope this helps!

Doesn't work for me... (ios 4.2) – Chris May 27 '11 at 06:23 — Chris, May 27 '11 at 06:23
Also does not work for me on iOS 5 – jjxtra Jan 12 '12 at 22:55 — jjxtra, Jan 12 '12 at 22:55

score 4 · Answer 7 · answered Feb 03 '14 at 21:08

4

searchBar.searchBarStyle = UISearchBarStyleMinimal;

answered Feb 03 '14 at 21:08

Bradley Thomas

4,060
6
33
55

score 4 · Answer 8 · answered Mar 15 '12 at 21:32

4

I prefer to just set the alpha to 0 so you can hide/show on demand.

// Hide
[[self.theSearchBar.subviews objectAtIndex:0] setAlpha:0.0];

// Show
[[self.theSearchBar.subviews objectAtIndex:0] setAlpha:1.0];

answered Mar 15 '12 at 21:32

Michael Camden

1,183
8
9

This does not work in Xcode 4.4.1. – Maksim Sep 26 '12 at 13:04

score 4 · Answer 9 · edited Mar 29 '12 at 08:22

4

How to set background color in UISearchBar:

#import <QuartzCore/QuartzCore.h>

Then make an outlet connection to search bar (say, objSearchbar), and use these lines :

for (UIView *subview in self.objSearchbar.subviews) 
{
    if ([subview isKindOfClass:NSClassFromString(@"UISearchBarBackground")]) 
    {
        [subview removeFromSuperview];
        break;
    }
}

self.tweetSearchbar.layer.backgroundColor = [UIColor blueColor].CGColor;

edited Mar 29 '12 at 08:22

rickster

124,678
26
272
326

answered Mar 28 '12 at 15:41

iGautam

121
3
9

this thing is working fine for me. +1 rated. – Nirav Jain Jan 08 '13 at 06:00

score 2 · Answer 10 · edited Apr 17 '12 at 08:00

2

Look here: UISearchbar background image change

edited Apr 17 '12 at 08:00

Akshay Aher

2,525
2
18
33

answered Mar 27 '10 at 11:33

hennes

9,147
4
43
63

score 2 · Answer 11 · answered Dec 11 '14 at 11:30

with iOS8 sdks apple moved @"UISearchBarBackground" view one level deeper, so have will need to look at subviews of the child-views as bellow,

for (UIView *subview in searchBar.subviews) {
        for(UIView* grandSonView in subview.subviews){
            if ([grandSonView isKindOfClass:NSClassFromString(@"UISearchBarBackground")]) {
                grandSonView.alpha = 0.0f;
            }else if([grandSonView isKindOfClass:NSClassFromString(@"UISearchBarTextField")] ){
                NSLog(@"Keep textfiedld bkg color");
            }else{
                grandSonView.alpha = 0.0f;
            }
        }//for cacheViews
    }//subviews

score 1 · Answer 12 · answered Sep 21 '11 at 08:46

Set background image

    UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:searchBar.bounds];
    backgroundView.image = [UIImage imageNamed:@"xxxx.png"];
    [searchBar insertSubview:backgroundView atIndex:1]; // at index 1 but not 0
    [backgroundView release];

score 0 · Answer 13 · answered Oct 18 '11 at 05:47

0

One liner:

[[self.theSearchBar.subviews objectAtIndex:0] removeFromSuperview];

answered Oct 18 '11 at 05:47

gotnull

26,454
22
137
203

UISearchBar: clear background color or set background image

13 Answers13

Linked