I'm working on a titanium project. In which I need a customized searchbar like below.
But when I created the searchbar it looks like;
I want to change the image of cancel button. I searched a lot for customizing the searchbar in titanium, but couldn't find any solutions.
I'm creating searchbar in the following way:
var searchLocation = Ti.UI.createSearchBar({
showCancel:true,
height:55,
top:45,
width:'102%',
backgroundImage:"../../Images/bg_search.png",
borderRadius:'5'
});
Then I tried something different.
- I created a view, a searchbar without cancel button and a customized button.
- Added the searchbar to that view
Added the button to right of that searchbar.
//holder view var searchHolder = Ti.UI.createView({ height : 55, width : '100%', top : 45, backgroundImage:"../../Images/bg_header@2x.png", layout : 'horizontal' }); //search bar var serLocation = Ti.UI.createSearchBar({ height:55, top:0, width:'85%', backgroundImage:"../../Images/bg_header@2x.png" }); //Calendar button var calButton = Ti.UI.createButton({ height : 45, width : 45, backgroundImage:"../../Images/nav_calendar.png" }); searchHolder.add(serLocation); searchHolder.add(calButton );
It's working perfectly.
But I'm searching for any alternative solutions. Is there any built-in-methods to do this ?
Thanks in advance.