How to change clear button image (x button) or atleast the color of the clear button image in UISearchbar?

Question

I need a fully transparent searchbar with cancel button. I have tried many solutions But I couldnt find a better solution yet. When I try to remove background color it shows scope bar. Can any one give me some source code for fully transperant Searchbar with can button. Here's

addSearchbar.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.5];
UITextField *sbTextField = (UITextField *)[self.addSearchbar.subviews lastObject];

for (UIView *subview in addSearchbar.subviews)
{
    NSLog(@"%@",subview);
    if ([subview isKindOfClass:[UITextField class]])
    {
        sbTextField = (UITextField *)subview;
        UIImage *image = [UIImage imageNamed: @"06_magnifying_glass.png"];
        UIImageView *iView = [[UIImageView alloc] initWithImage:image];
        iView.frame = CGRectMake(0, 0, 24, 24);
        sbTextField.leftView.frame = CGRectMake(0, 0, 24, 24);
        sbTextField.leftView = iView;
        [sbTextField.rightView removeFromSuperview];
        CGFloat myWidth = 24.0f;
        CGFloat myHeight = 24.0f;
        UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, myWidth, myHeight)];
        [myButton setImage:[UIImage imageNamed:@"clear.png"] forState:UIControlStateNormal];
        [myButton setImage:[UIImage imageNamed:@"clear.png"] forState:UIControlStateHighlighted];

        [myButton addTarget:self action:@selector(doClear:) forControlEvents:UIControlEventTouchUpInside];
        sbTextField.rightView = myButton;
        sbTextField.rightViewMode = UITextFieldViewModeWhileEditing;
        break;
    }
    if([subview isMemberOfClass:[UISegmentedControl class]])
    {
        UISegmentedControl *scopeBar=(UISegmentedControl *) subview;
        scopeBar.tintColor =  [UIColor clearColor];
    }
}
[sbTextField removeFromSuperview];
[addSearchbar addSubview:sbTextField];
[addSearchbar setSearchFieldBackgroundImage:[UIImage imageNamed:@"SearchBar.png"] forState:UIControlStateNormal];
CGRect sbFrame = self.addSearchbar.frame;
// Set the default height of a textfield
sbFrame.size.height = 31;

/* 8 is the top padding for textfield inside searchbar
 * You may need to add a variable to 8 according to your requirement.
 */
sbFrame.origin.y = 6+self.addSearchbar.frame.origin.y;
sbTextField.frame = sbFrame;
sbTextField.textColor = [UIColor lightGrayColor];
[sbTextField setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin];

Need a fully transparent searchbar with cancel button and clear button but without scopebar.

Thanks in advance

http://stackoverflow.com/questions/9704562/remove-or-override-the-clear-button-on-uisearchdisplaycontroller-in-a-uipopove — Nishant Tyagi, Oct 30 '12 at 17:27
I found out the solution but another pblm so I updated my ques — Arvind, Oct 30 '12 at 17:50

score 24 · Accepted Answer · answered Oct 30 '12 at 17:03

24

As of iOS 5.0 you can do the following:

UIImage *imgClear = [UIImage imageNamed:@"clear"];
[addSearchBar setImage:imgClear forSearchBarIcon:UISearchBarIconClear state:UIControlStateNormal];

Thats it. You might also want to repeat the line for the UIControlStateHighlighted state.

The last thing you should be doing is digging around inside the subviews of the search bar. It is guaranteed to break some day. Use the proper API to customize any control.

answered Oct 30 '12 at 17:03

rmaddy

314,917
42
532
579

2

unfortunately the latter part of your answer does not work. [see here](http://stackoverflow.com/questions/14720026/customizing-uisearchbariconclear-for-uicontrolstatehighlighted-does-not-work). – Dima Feb 11 '13 at 02:36
In iOS 7.1 this solution http://stackoverflow.com/questions/13862050/custom-clear-button-in-uisearchbar-text-field#answer-19438100 works perfect. – Alex May 27 '14 at 13:57
You have to use different image for highlighted and normal states. I mean, that the image can be the same, but NOT the same UIImage* reference. – Balazs Nemeth Jan 27 '15 at 16:55

score 6 · Answer 2 · answered Dec 10 '13 at 05:57

See that you set the UIControlHighlighted state image first and then the UIControlStateNormal state image or else you might face an issue wherein the clearIcon is not set in the highlighted state. (Not sure why this problem occurs.)

[_searchBar setImage:[UIImage imageNamed:@"ClearIcon"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateHighlighted];
[_searchBar setImage:[UIImage imageNamed:@"ClearIcon"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateNormal];

score 3 · Answer 3 · answered Nov 10 '15 at 21:17

For those of you trying this in Swift (I know someone is going to come here looking for this...) here you go:

    self.searchBar.setImage(UIImage(named: "ico-cancel"), forSearchBarIcon: UISearchBarIcon.Clear, state: UIControlState.Normal)
    self.searchBar.setImage(UIImage(named: "ico-cancel"), forSearchBarIcon: UISearchBarIcon.Clear, state: UIControlState.Highlighted)

Make sure you have the correct image in your Assets.xcassets folder.

score 0 · Answer 4 · answered Dec 22 '16 at 09:45

Here’s how you change the magnifying glass and clear button icon in a UISearchBar’s UITextField Without New Icons:

// Reference search display controller search bar's text field (in my case). 
UITextField *searchBarTextField = [self.searchDisplayController.searchBar valueForKey:@"_searchField"]; 

// Magnifying glass icon. 
UIImageView *leftImageView = (UIImageView *)searchBarTextField.leftView; 
leftImageView.image = [LeftImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; 
leftImageView.tintColor = [UIColor whiteColor]; 

   // Clear button 
UIButton *clearButton = [searchBarTextField valueForKey:@"_clearButton"]; 
[clearButton setImage:[clearButton.imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forState:UIControlStateNormal];
clearButton.tintColor = [UIColor whiteColor];

How to change clear button image (x button) or atleast the color of the clear button image in UISearchbar?

4 Answers4