[TIMOB-1689] SearchBar doesn't correctly show background image

GitHub Issuen/a
Resolution Date2011-10-27T15:42:31.000+0000
Affected Version/sRelease 1.7.1
Fix Version/sSprint 2011-32, Release 1.8.0
ReporterDawson Toth
AssigneeBlain Hamon


Based on the official Titanium Mobile documentation the SearchBar component can have a background image but, right now in the 1.4.0 version this property is ignored.
For coherence with the rest of the API i think it's important to implement the barImage property just like in the Window object, so we can completely customize the UI.


  1. Dawson Toth 2011-07-06 I believe the documentation is wrong, and we can't really add backgroundImage etc to the TiSearchBar. It's a light wrapper around the UISearchBar. What we could do is add a special case for when you set the barColor to "transparent" to get rid of the gradient. That would free you up to place a view behind the search bar, and customize it however you like. That would actually help out quite a few customers, and it would keep good consistency with Android. What do you think, Reggie? Something like this:
       	UISearchBar *search = [self searchBar];
       	if ([value isEqualToString: @"transparent"]) {
       		[search setBarStyle:UIBarStyleBlack];
       		[search setTranslucent:YES];
       		[[search.subviews objectAtIndex:0] removeFromSuperview];
       	else {
       		TiColor * newBarColor = [TiUtils colorValue:value];
       		[search setBarStyle:[TiUtils barStyleForColor:newBarColor]];
       		[search setTintColor:[TiUtils barColorForColor:newBarColor]];
       		[search setTranslucent:[TiUtils barTranslucencyForColor:newBarColor]];
  2. Dawson Toth 2011-07-06 We have a pro customer interested in this now.
  3. Blain Hamon 2011-08-10 Question: As it is, when you do transparent, you do have the transparent black search field that you'd get natively. Wouldn't this new custom behavior break apps of other customers using this?
  4. Dawson Toth 2011-08-10 @Blain: Yup, good point. So maybe some other string would work here? What about "none"?
  5. Blain Hamon 2011-08-10 I did some R&D, and I found no combo that got better than the black translucent you see currently for 'transparent'. Worse, removing the subview index 0 could lead to some oddities. (IE, what if it's been already removed? What if searchBar changes this undocumented structure in the next release? Would this lead to requests to support 'none' elsewhere?) HOWEVER, the primary issue was that the customer couldn't customize the UI. We already have a property that's supposed to work, called backgroundImage, that there's a precedent for. Were the backgroundImage be properly placed over the default bar graphic but under the text field and buttons, that should solve the need. I have a working code that does that ready to commit/push. Sound good?
  6. Vikramjeet Singh 2011-08-29 Tested On: Mac OSX Lion TiMob: 1.8.0v20110819142548 TiStud: Devices: iPhone4 version 4.2.10 iPad2 version 4.3.5 iPod 3
  7. Ben S. 2011-08-30 So can we have a searchbar with transparent background now?
  8. steve course 2011-11-16 Hello setting the searchbar to barColor 'transparent' still gives the gradient background ios 5.0 1.80 beta do I have to make specific other changes to get the searchbar transparent so background view from behind searchbar is visible? thanks
  9. Dawson Toth 2011-11-16 @Ben S and @Steve Course: Setting barColor to transparent won't give you a transparent background. The gradient background image will always be there. But the backgroundImage property works properly now so that you can overlay an image on top of it. It isn't transparency, but it's what we can offer. If that doesn't work, you need to work on creating your own search bar (through the creative usage of text fields, buttons, or whatever else you can think of). This is what Apple gives us to work with.

JSON Source