Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23281] Search Bar: search results listview background color change

GitHub Issuen/a
TypeImprovement
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2018-05-09T10:34:49.000+0000
Affected Version/sn/a
Fix Version/sRelease 6.1.0
ComponentsiOS
LabelsbackgroundColor, ios, listView, searchBar
ReporterLorenzo Piccinini
AssigneeVijay Singh
Created2015-12-09T15:27:48.000+0000
Updated2018-05-09T10:35:30.000+0000

Description

I have a window with backgroundImage and a listView with backgroundColor transparent and labels of all item white. When I click on searchBar and start typing the backgroundColor of listView became white and the results are unreadable because item's labels have the same color of background. Android work fine with the same component Ti.UI.createSearchBar

Attachments

FileDateSize
0.png2015-12-09T17:19:30.000+00001087121
1.png2015-12-09T17:19:45.000+0000667623
2.png2015-12-09T17:19:44.000+0000166627
3.png2015-12-09T17:19:54.000+0000168807

Comments

  1. Sharif AbuDarda 2015-12-10

    Hello, See the below code. I used opacity in the listview. The list items are visible. 
       var win = Ti.UI.createWindow({
       backgroundImage : '111.jpg',
       fullscreen : true
   });
   var search = Titanium.UI.createSearchBar({
       barColor : '#000',
       showCancel : true,
       height : 43,
       top : 0,
   });
   search.addEventListener('cancel', function() {
       search.blur();
   });
   
   var listView = Ti.UI.createListView({
       searchView : search,
       caseInsensitiveSearch : true,
       backgroundColor : '#3399CC',
       opacity : 0.5
   });
   
   var listSection = Ti.UI.createListSection();
   var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate'];
   var data = [];
   for (var i = 0; i < fruits.length; i++) {
       data.push({
           properties : {
               title : fruits[i],
               searchableText : fruits[i]
           }
       });
   }
   listSection.setItems(data);
   listView.addEventListener('noresults', function(e) {
       alert("No results found!");
   });
   listView.sections = [listSection];
   win.add(listView);
   win.open();
    Hope this helps, Thanks.
  2. Lorenzo Piccinini 2015-12-10

    Thank you for you solution but I don't like very much. Here my code with the bug: 
       	var win = Ti.UI.createWindow({
   	    backgroundColor : '#000',
   	    fullscreen : true
   	});
   	var search = Titanium.UI.createSearchBar({
   	    barColor : '#000',
   	    showCancel : true,
   	    height : 43,
   	    top : 0,
   	});
   	search.addEventListener('cancel', function() {
   	    search.blur();
   	});
   	 
   	var listView = Ti.UI.createListView({
   	    searchView : search,
   	    caseInsensitiveSearch : true,
   	    backgroundColor : 'transparent',
   	    //opacity : 0.5
   	    templates: {"a": {
   		        properties : {
   		            backgroundColor: 'transparent'
   		        },
   		        childTemplates : [
   		            {
   		                type : 'Ti.UI.Label',
   		                bindId : 'bindLabel',
   		                properties : {
   		                    color: '#fff'
   		                }
   		    
   		            }
   		        ]
   		    }
   	   }
   	});
   	 
   	var listSection = Ti.UI.createListSection();
   	var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate'];
   	var data = [];
   	for (var i = 0; i < fruits.length; i++) {
   	    data.push({
   	    	template : 'a',
   	        properties : {
   	            searchableText : fruits[i]
   	        },
   	        bindLabel: {
   	        	text : fruits[i]
   	        }
   	    });
   	}
   	listSection.setItems(data);
   	listView.addEventListener('noresults', function(e) {
   	    alert("No results found!");
   	});
   	listView.sections = [listSection];
   	win.add(listView);
   	win.open();
  3. Sharif AbuDarda 2015-12-13

    Hello, This is a default searchbar behavior. It's not a bug. This is the way it has worked on iOS for a long time now. The only answer would appear to be to modify the source. Here are some of the link ou can follow 1. [Link1](http://developer.appcelerator.com/question/155212/searchbar-results-tableviews-background-color-doesnt-change-can-it-be-a-bug). 2. [Link2](https://developer.appcelerator.com/question/151120/change-background-color-of-empty-search-result-rows). Hope this helps, Thanks.
  4. Hans Knöchel 2016-04-27

    Reopening, it's a valid improvement.
  5. Lorenzo Piccinini 2016-05-16

    Any news about it?
  6. Hans Knöchel 2016-05-18

    Hey there! We recently had a discussion about the interface architecture of this API on Github and the changes are in place. The PR is coming over the next 1-2 days. Thanks!
  7. Lorenzo Piccinini 2016-05-18

    Fantastic!! Thank you very much!
  8. Hans Knöchel 2016-05-18

    PR: https://github.com/appcelerator/titanium_mobile/pull/8006 Note: Please do not merge before next week, since it's dated for 6.0.0 [~otto.pic] can you test the changes? Thanks!
  9. Lorenzo Piccinini 2016-05-18

    Hans Knoechel, sure, I can test it in my app, but I have never done it before, can you explain me how to procede? Should I replace the files in my sdk? Thanks
  10. Hans Knöchel 2016-05-18

    Probably the easiest way to proceed, yes. You can replace it in ~/Library/Application Support/Titanium/mobilesdk/osx/<YOUR_SDK_VERSION>/iphone/Classes/TiUiListView.m. Written from the brain, place verify the path. Thanks!
  11. Lorenzo Piccinini 2016-05-18

    I have tried to replace TiUiListView.m in my current sdk 5.2.2 and set resultsBackgroundColor: 'transparent' to my listview but I have not obtained transparent results. Any suggests?
  12. Lorenzo Piccinini 2016-05-18

    I have tried with resultsBackgroundColor : 'red' and background result is correctly red, so the problem is the param "transparent"
  13. Chee Kiat Ng 2016-05-19

    Code reviewed ok. As Lorenzo has mentioned, the param "transparent" is not working for resultsBackgroundColor.
  14. Lorenzo Piccinini 2016-06-03

    Any news about it? Do you fixed transparency?
  15. Hans Knöchel 2016-06-03

    Unfortunately not, yet. It seems to make problems on the native side as well. Need more time to figure out a proper solution.
  16. Marian Kucharcik 2016-09-29

    Hi guys, I tried to set resultsBackgroundColor in my ListView constructor to red, but when I search listView, the backgroundColor is still white. Can you please post full example how to set this to make it work? Thank you
  17. Hans Knöchel 2016-09-29

    [~max87] The improvement is not in the SDK, yet. See that this ticket has the status Open. Although every color works, I don't want to submit the changes to review when knowing that the transparent color does not work. Or we would need to be aware of that glitch which doesn't look solid to me.
  18. Baharroth 2016-09-30

    Marian Kucharcik you can use the unofficial fix by hans https://github.com/appcelerator/titanium_mobile/pull/8006 I'am using and it's works. @Hans. I can understand your non submission, it's not 100% perfect because you seems still have a issue with transparency. But 1) You fixed the bug and 2) you add setBackground and setSeparatorInset who are great functions. I know it's not perfect but maybe you should submit and display a warning for the transparency using ? For all people who have to edit their latest sdk with your PR manually :)
  19. Hans Knöchel 2016-10-02

    PR: https://github.com/appcelerator/titanium_mobile/pull/8006 Demo (adjusted from above): 
        var win = Ti.UI.createWindow({
        backgroundColor: '#000',
        fullscreen: true
    });
    var search = Titanium.UI.createSearchBar({
        barColor: '#000',
        showCancel: true,
        height: 43,
        top: 0,
    });
    search.addEventListener('cancel', function() {
        search.blur();
    });
    
    var listView = Ti.UI.createListView({
        searchView: search,
        caseInsensitiveSearch: true,
        backgroundColor: 'transparent',
    
        // NEW since 6.1.0
        resultsBackgroundColor: "red",
        resultsSeparatorColor: "green",
        resultsSeparatorInsets: {
            left: 0
        },
    
        templates: {
            "a": {
                properties: {
                    backgroundColor: 'transparent'
                },
                childTemplates: [{
                    type: 'Ti.UI.Label',
                    bindId: 'bindLabel',
                    properties: {
                        color: '#fff'
                    }
    
                }]
            }
        }
    });
    
    var listSection = Ti.UI.createListSection();
    var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate'];
    var data = [];
    for (var i = 0; i < fruits.length; i++) {
        data.push({
            template: 'a',
            properties: {
                searchableText: fruits[i]
            },
            bindLabel: {
                text: fruits[i]
            }
        });
    }
    listSection.setItems(data);
    listView.addEventListener('noresults', function(e) {
        alert("No results found!");
    });
    listView.sections = [listSection];
    win.add(listView);
    win.open();
    Notes: I updated the docs to 6.1.0 and added support for a transparent background-color hack. I still Apple prevents this natively, since the result will show the below list-view that will overlap the contents. This happens because the search-results list is natively above the main list-view. I used a hack to generate a white color with a 0.0001 opacity and left a note about the non-official support. I guess we are pretty good with that. Alternatively, we would not have set it and throw a warning if used.
  20. Chee Kiat Ng 2016-10-03

    CR and FT Passed!
  21. Marian Kucharcik 2016-11-03

    I tried to use it like Baharroth mentioned and it works! Great job guys, thank you.
  22. Samir Mohammed 2016-12-05

    Verified improvement with the code provided by [~hansknoechel], Was able to see the background turn red when text was entered and that the text was still visible. *Environement* 
        Appcelerator Command-Line Interface, version 6.0.0
    IOS 9.3.4
    Iphone 6+ 
    Operating System Name: Mac OS X El Capitan
    Operating System Version: 10.11.6
    Node.js Version: 4.6.0
    npm: 4.2.8
    Titanium CLI Version: 5.0.10
    Titanium SDK Version: 6.1.0.v20161204170304
    Xcode: 8.0
    Appcelerator Studio: 4.8.0.201611121409
  23. Abir Mukherjee 2018-05-07

    [~ewieber] We got an email today which referenced this ticket and said "_This problem is resolved for Listview but not for Tableview. I think it's not a bug but the default behaviour on iOS, but with a black app interface.. it's a quite bad experience_." Can you try to reproduce? If it's valid, I'll reopen this ticket.
  24. Eric Wieber 2018-05-07

    [~amukherjee], [~hknoechel]: I am able to reproduce the issue in TableView. I am including code for an example that has a TableView example with the ListView example already in this ticket. Can we apply the changes made to ListView to TableView? The search results being on top of the contents is very annoying, but if Apple won't let us do anything about it, this is a good workaround. 
        var win = Ti.UI.createWindow({
      backgroundColor: 'blue'
    });
    
    // TableView
    var searchTable = Titanium.UI.createSearchBar({
      barColor: '#000',
      showCancel: true,
      height: 43,
      top: 0,
    });
    
    searchTable.addEventListener('cancel', function() {
        searchTable.blur();
    });
    
    var table = Ti.UI.createTableView({
      top: 20,
      height: 300,
      backgroundColor: 'transparent',
      data: [
        {title: 'Apples', backgroundColor: 'transparent', color: 'white'},
        {title: 'Bananas', backgroundColor: 'transparent', color: 'white'},
        {title: 'Carrots', backgroundColor: 'transparent', color: 'white'},
        {title: 'Potatoes', backgroundColor: 'transparent', color: 'white'}
      ],
      search: searchTable
    });
    
    //ListView
    var searchList = Titanium.UI.createSearchBar({
      barColor: '#000',
      showCancel: true,
      height: 43,
      top: 0,
    });
    
    searchList.addEventListener('cancel', function() {
        searchList.blur();
    });
    
    var list = Ti.UI.createListView({
      backgroundColor: 'transparent',
      top: 350,
      height: 300,
      searchView: searchList,
    
      resultsBackgroundColor: 'red',
        resultsSeparatorColor: 'green',
        resultsSeparatorInsets: {
            left: 0
        },
    
        templates: {
            'a': {
                properties: {
                    backgroundColor: 'transparent'
                },
                childTemplates: [{
                    type: 'Ti.UI.Label',
                    bindId: 'bindLabel',
                    properties: {
                        color: '#fff'
                    }
    
                }]
            }
        }
    });
    
    var section = Ti.UI.createListSection();
    var data = ['Apple', 'Banana', 'Carrots', 'Potatoes'];
    var items = [];
    for (var i = 0; i < data.length; i++) {
      items.push({
          template: 'a',
          properties: {
              searchableText: data[i]
          },
          bindLabel: {
              text: data[i]
          }
      });
    }
    section.setItems(items);
    list.sections = [section];
    
    win.add(table);
    win.add(list);
    win.open();
  25. Vijay Singh 2018-05-09

    [~hknoechel] has made PR for this only in ListView. Simply copying the code in TableView should work.
  26. Vijay Singh 2018-05-09

    PR - https://github.com/appcelerator/titanium_mobile/pull/10033 Test Case - 
        var win = Ti.UI.createWindow({
      backgroundColor: 'blue'
    });
     
    // TableView
    var searchTable = Titanium.UI.createSearchBar({
      barColor: '#000',
      showCancel: true,
      height: 43,
      top: 0,
    });
     
    searchTable.addEventListener('cancel', function() {
        searchTable.blur();
    });
     
    var table = Ti.UI.createTableView({
      top: 20,
      height: 300,
      backgroundColor: 'transparent',
      resultsBackgroundColor: 'red',
      resultsSeparatorColor: 'green',
       resultsSeparatorInsets: {
            left: 0
        },
      data: [
        {title: 'Apples', backgroundColor: 'transparent', color: 'white'},
        {title: 'Bananas', backgroundColor: 'transparent', color: 'white'},
        {title: 'Carrots', backgroundColor: 'transparent', color: 'white'},
        {title: 'Potatoes', backgroundColor: 'transparent', color: 'white'}
      ],
      search: searchTable
    });
     
    //ListView
    var searchList = Titanium.UI.createSearchBar({
      barColor: '#000',
      showCancel: true,
      height: 43,
      top: 0,
    });
     
    searchList.addEventListener('cancel', function() {
        searchList.blur();
    });
     
    var list = Ti.UI.createListView({
      backgroundColor: 'transparent',
      top: 350,
      height: 300,
      searchView: searchList,
     
      resultsBackgroundColor: 'red',
      resultsSeparatorColor: 'green',
      resultsSeparatorInsets: {
            left: 0
        },
     
        templates: {
            'a': {
                properties: {
                    backgroundColor: 'transparent'
                },
                childTemplates: [{
                    type: 'Ti.UI.Label',
                    bindId: 'bindLabel',
                    properties: {
                        color: '#fff'
                    }
     
                }]
            }
        }
    });
     
    var section = Ti.UI.createListSection();
    var data = ['Apple', 'Banana', 'Carrots', 'Potatoes'];
    var items = [];
    for (var i = 0; i < data.length; i++) {
      items.push({
          template: 'a',
          properties: {
              searchableText: data[i]
          },
          bindLabel: {
              text: data[i]
          }
      });
    }
    section.setItems(items);
    list.sections = [section];
     
    win.add(table);
    win.add(list);
    win.open();
  27. Hans Knöchel 2018-05-09

    Closing ticket again, since the parity (Ti.UI.TableView) is handled in TIMOB-26021 to keep the versioning scope clean.

JSON Source