Customize cancel button of searchbar in titanium

Question

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.

1. I created a view, a searchbar without cancel button and a customized button.
2. Added the searchbar to that view

3. 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.

Answer 1

There aren't bult-in-methods for this. Your working solution is the best one.