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

Answer 1

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];

Answer 2

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.

Answer 3

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.