[TIMOB-17861] Android: Please add text settings (font size, family, color) to searchbar and searchview

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2015-02-02T23:03:35.000+0000
Affected Version/s	n/a
Fix Version/s	Release 4.0.0
Components	Android, iOS
Labels	Android, ios, searchbar, searchview
Reporter	Alex Wu
Assignee	Ingo Muschenetz
Created	2014-10-09T17:37:55.000+0000
Updated	2015-03-11T22:22:53.000+0000

Description

When I was app developing on Titanium SDK 3.2.3, I was using a custom theme with the parent Theme.Holo.Light. However, after I updated to 3.4.0, we were forced to change the parent theme Theme.AppCompat.Light. Before the change, the color of the searchbar text was black, and it worked fine with the white navigation bar. Now, the color of the text is white, which is almost invisible with the current theme. There is currently no way to change this through Titanium.

Comments

Mark Mokryn 2014-12-23

PR for color on Android SearchView: https://github.com/appcelerator/titanium_mobile/pull/6526 In my opinion this should close the ticket. I don't see the sense in modifying the font for these widgets since they are system styled and always look the same, have a single size, etc. The iOS SearchBar always has a white background so the color is not an issue. However in Android we must have this control due to different window/view/ActionBar backgrounds. The PR is trivially backported to 3.4.
Mark Mokryn 2015-01-30

[~ingo] can the PR please be reviewed? Very simple and we can close this ticket, no need for any iOS work or anything in Android besides text color.
Ingo Muschenetz 2015-01-30

[~hpham], if you can pull this forward into Sprint 02, great.

Hieu Pham 2015-02-02

Test case:

   var sections = [];
          
       var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
       var fruitDataSet = [
           {properties: { title: 'Apple', searchableText:' Fruits Apple', itemId:'0 0'}},
           {properties: { title: 'Banana', searchableText:'Fruits Banana', itemId:'0 1'}},
           {properties: { title: 'Cantaloupe', searchableText:'Fruits Cantaloupe', itemId:'0 2'}},
           {properties: { title: 'Fig', searchableText:'Fruits Fig', itemId:'0 3'}},
           {properties: { title: 'Guava', searchableText:'Fruits Guava', itemId:'0 4'}},
           {properties: { title: 'Kiwi', searchableText:'Fruits Kiwi', itemId:'0 5'}},
       ];
       fruitSection.setItems(fruitDataSet);
       sections.push(fruitSection);
          
       var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
       var vegDataSet = [
           {properties: { title: 'Carrots', searchableText:'Vegetables Carrots', itemId:'1 0'}},
           {properties: { title: 'Potatoes', searchableText:'Vegetables Potatoes', itemId:'1 1'}},
           {properties: { title: 'Corn', searchableText:'Vegetables Corn', itemId:'1 2'}},
           {properties: { title: 'Beans', searchableText:'Vegetables Beans', itemId:'1 3'}},
           {properties: { title: 'Tomato', searchableText:'Vegetables Tomato', itemId:'1 4'}},
       ];
       vegSection.setItems(vegDataSet);
       sections.push(vegSection);
          
          
       var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
       var fishDataSet = [
           {properties: { title: 'Cod', searchableText:'Fish Cod', itemId:'2 0'}},
           {properties: { title: 'Haddock', searchableText:'Fish Haddock', itemId:'2 1'}},
           {properties: { title: 'Salmon', searchableText:'Fish Salmon', itemId:'2 2'}},
           {properties: { title: 'Tuna', searchableText:'Fish Tuna', itemId:'2 3'}},
       ];
       fishSection.setItems(fishDataSet);
       sections.push(fishSection);
         
       var animalsSection = Ti.UI.createListSection({ headerTitle: 'Animals'});
       var animalsDataSet = [
           {properties: { title: 'Deer', searchableText:'Animals Deer', itemId:'3 0'}},
           {properties: { title: 'Dog', searchableText:'Animals Dog', itemId:'3 1'}},
           {properties: { title: 'Cat', searchableText:'Animals Cat', itemId:'3 2'}},
           {properties: { title: 'Elephant', searchableText:'Animals Elephant', itemId:'3 3'}},
       ];
       animalsSection.setItems(animalsDataSet);
       sections.push(animalsSection);
     
       var sv = Ti.UI.Android.createSearchView({
           hintText: "Search View",
           height: 150,
           top: 10,
           color: "green"
       });
         
      
         
       //The textfield must be a subview of the tableView to 
       //calculate correct contentInsets when keyboard is visible. 
       var listView = Ti.UI.createListView({searchView: sv, top: 250});
       listView.sections = sections;
        
       listView.addEventListener('itemclick', function(e){
           alert(
            "ItemId: " + e.itemId + "\n" +
            "BindId: " + e.bindId + "\n" +
            "Section Index: " + e.sectionIndex + ", Item Index: " + e.itemIndex
           );    
       });
         
       var win = Ti.UI.createWindow();
       win.add(listView);
       win.open();

1. Run code, type in searchView

Mark Mokryn 2015-02-03

[~hpham], [~ingo] thanks :)
Eric Wieber 2015-03-11

Verified fixed using: Titanium SDK 4.0.0.v20150311105810 Studio 4.0.0.201503062102 CLI 3.4.2 Xcode 6.2 Node 0.10.36 On: Galaxy Note 2, Android 4.3 SearchView is colored correctly.

JSON Source