var search = Titanium.UI.createSearchBar({
                backgroundGradient: {
                    type: 'linear',
                    colors: [{ color: '#dee2ea', position: 0.0 }, { color: '#bdc2ca', position: 1.0}]
                },
                hintText: 'search',
            });

tableView = Titanium.UI.createTableView({
                data: [],
                backgroundColor: '#dadee6',
                separatorColor: '#c5c9d0',
                filterAttribute: "searchstring",
                search: search
            });

var search = Titanium.UI.createSearchBar({
                backgroundGradient: {
                    type: 'linear',
                    colors: [{ color: '#dee2ea', position: 0.0 }, { color: '#bdc2ca', position: 1.0}]
                },
                hintText: 'search',
                top: 0,
                height: 40
            });

window.add(search);

tableView = Titanium.UI.createTableView({
                data: [],
                backgroundColor: '#dadee6',
                separatorColor: '#c5c9d0',
                filterAttribute: "searchstring",
                top: 40
            });

5 Answers

• I've encountered this problem too.

  If you set backgroundColor to be a color somewhere between #dee2ea and #bdc2ca you should be able to achieve a similar effect by tinting.

• Ok, thank you. Still seems like a bug then that needs to be fixed?

• Sorry, settings the backgroundColor does not work either…

• If your searchbar is connected to your tableview, a workaround I use is to add the tableview and searchbar to the window AFTER you create and/or populate the data for the tableview. A hide() and show() will not do it. Nor will only removing and adding the searchbar. It's not ideal, but it works as a workaround.

  Example:

  var searchbar = Titanium.UI.createSearchBar({...});
  var tableview = Titanium.UI.createTableView({...});
  
  win.add(tableview);
  win.add(searchbar);
  

  For me, I have a function that refreshes the tableview so I need to remove the tableview and searchbar from the window, refresh the data, and then add the tableview and searchbar back to the window.

  Example:

  var searchbar = Titanium.UI.createSearchBar({...});
  var tableview = Titanium.UI.createTableView({...});
  
  function refreshdata() {
    win.remove(tableview);
    win.remove(search);
    tableview.data = newdata;
    win.add(tableview);
    win.add(searchbar);
  }
  

• If your searchbar is connected to your tableview, a workaround I use is to add the tableview and searchbar to the window AFTER you create and/or populate the data for the tableview. A hide() and show() will not do it. Nor will only removing and adding the searchbar. It's not ideal, but it works as a workaround.

  Example:

  var searchbar = Titanium.UI.createSearchBar({...});
  var tableview = Titanium.UI.createTableView({...});
  
  win.add(tableview);
  win.add(searchbar);
  

  For me, I have a function that refreshes the tableview so I need to remove the tableview and searchbar from the window, refresh the data, and then add the tableview and searchbar back to the window.

  Example:

  var searchbar = Titanium.UI.createSearchBar({...});
  var tableview = Titanium.UI.createTableView({...});
  
  function refreshdata() {
    win.remove(tableview);
    win.remove(search);
    tableview.data = newdata;
    win.add(tableview);
    win.add(searchbar);
  }