Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16223] Android: Add support selectedBackgroundGradient for ListView

GitHub Issuen/a
TypeNew Feature
PriorityMedium
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 3.2.1
Fix Version/sn/a
ComponentsAndroid
Labelsqe-3.2.1
ReporterParas Mishra
AssigneeAshraf Abu
Created2014-01-17T11:50:33.000+0000
Updated2016-06-30T04:35:53.000+0000

Description

Android: List View selectedBackgroundGradient not working It is reproducible on SDK: 3.2.0.GA, 3.1.3.GA as well Steps to reproduce: 1. Run the app.
var _window = Ti.UI.createWindow({
	backgroundColor: '#fff'
});
var search = Titanium.UI.createSearchBar({
			    barColor:'#000',
			    showCancel:true,
			    height:43,
			    top:0,
			});
			search.addEventListener('cancel', function(){
			    search.blur();
			});
			search.addEventListener('change', function(e){
			    listView.searchText = e.value;
			});
			 
			var listView = Ti.UI.createListView({headerView:search});
			 
			var listSection = Ti.UI.createListSection();
			 
			var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate'];
			 
			var gradient = {
			    colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.5 }, { color: 'red', offset: 1.0 } ],
			    type: 'linear'
			};
			var gradient2 = {
			    colors: [ { color: 'purple', offset: 0.0}, { color: 'yellow', offset: 0.5 }, { color: 'purple', offset: 1.0 } ],
			    type: 'linear'
			};
			 
			var data = [];
			for (var i = 0; i < fruits.length; i++) {
			    data.push({
			        properties: {
			            title: fruits[i],
			            searchableText: fruits[i],
			            backgroundGradient: gradient,
			            selectedBackgroundGradient: gradient2
			        }
			    });
			}
			 
			listSection.setItems(data);
			listView.sections = [listSection];
			_window.add(listView);
			 
			 
			var view = Ti.UI.createView({
			    backgroundGradient: gradient,
			    width: 100,
			    height: 100,
			    bottom: 0,
			    left: 0
			});
			var view2 = Ti.UI.createView({
			    backgroundGradient: gradient2,
			    width: 100,
			    height: 100,
			    bottom: 0,
			    right: 0
			});
			_window.add(view);
			_window.add(view2);

				
		_window.open();

2. Click on any fruit item. Expected: Clicked item should turn into purple,yellow,purple background gradient color. Actual: Nothing happens

Comments

  1. Ashraf Abu 2014-12-23

    In the interim, a person can achieve the desired selectedBackgroundGradient functionality on Android as follows:
       var _window = Ti.UI.createWindow({
       	backgroundColor: '#fff'
       });
       var search = Titanium.UI.createSearchBar({
       			    barColor:'#000',
       			    showCancel:true,
       			    height:43,
       			    top:0,
       			});
       
       			 
       			var listView = Ti.UI.createListView({headerView:search});
       			 
       			var listSection = Ti.UI.createListSection();
       			 
       			var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate'];
       			 
       			var gradient = {
       			    colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.5 }, { color: 'red', offset: 1.0 } ],
       			    type: 'linear'
       			};
       			var gradient2 = {
       			    colors: [ { color: 'purple', offset: 0.0}, { color: 'yellow', offset: 0.5 }, { color: 'purple', offset: 1.0 } ],
       			    type: 'linear'
       			};
       			 
       			var data = [];
       			for (var i = 0; i < fruits.length; i++) {
       			    data.push({
       			        properties: {
       			            title: fruits[i],
       			            searchableText: fruits[i],
       			            backgroundGradient: gradient,
       			            selectedBackgroundGradient: gradient2
       			        }
       			    });
       			}
       			var currentSelected = -1;
       			var previousSelected = -1;
       			 
       			listSection.setItems(data);
       			listView.sections = [listSection];
       			listView.addEventListener('itemclick', function(e) {
       				Ti.API.info('The '+e.type+' event happened at '+ e.itemIndex);
       				if (currentSelected != e.itemIndex) {
       					listSection.updateItemAt(e.itemIndex, 
       						{
       							properties: {
       					            title: fruits[e.itemIndex],
       					            searchableText: fruits[e.itemIndex],
       					            backgroundGradient: gradient2
       					        }
       					    }
       					)
       					previousSelected = currentSelected;
       					currentSelected = e.itemIndex;
       				}
       				if(previousSelected > -1) {
       					listSection.updateItemAt(previousSelected, 
       						{
       							properties: {
       					            title: fruits[previousSelected],
       					            searchableText: fruits[previousSelected],
       					            backgroundGradient: gradient
       						    }
       					    }
       					)
       				}				
       				
       			});
       			
       			search.addEventListener('cancel', function() {
       			    search.blur();
       			});
       			search.addEventListener('change', function(e) {
       			    listView.searchText = e.value;
       			    listSection.updateItemAt(currentSelected, 
       						{
       							properties: {
       					            title: fruits[currentSelected],
       					            searchableText: fruits[currentSelected],
       					            backgroundGradient: gradient
       					        }
       					    }
       					)
       				currentSelected = -1;
       				previousSelected = -1;
       			});
       			
       			_window.add(listView);
       			 
       			 
       			var view = Ti.UI.createView({
       			    backgroundGradient: gradient,
       			    width: 100,
       			    height: 100,
       			    bottom: 0,
       			    left: 0
       			});
       			var view2 = Ti.UI.createView({
       			    backgroundGradient: gradient2,
       			    width: 100,
       			    height: 100,
       			    bottom: 0,
       			    right: 0
       			});
       			_window.add(view);
       			_window.add(view2);
       
       				
       		_window.open();
       

JSON Source