Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-19199] Android: Picker in ActionBar shown expanded on app launch with SDK 4.0.1, 4.1.0.GA

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2015-08-14T21:20:19.000+0000
Affected Version/sn/a
Fix Version/sRelease 5.0.0
ComponentsAndroid
Labelsactionbar, android, picker
ReporterTim Poulsen
AssigneeAshraf Abu
Created2015-06-03T17:56:46.000+0000
Updated2015-08-18T22:51:59.000+0000

Description

In our app, we have a picker added to the ActionBar with code like the following. Building with the 3.5.x branch SDKs, the picker is collapsed as expected. Building the same project with SDK 4.1.0.GA (or 4.0.1), the picker is expanded as shown in the attached graphic when the app is launched. Users have to tap outside the picker to collapse it.
$.tabGroup.addEventListener("open", function () {
  var activity = $.tabGroup.getActivity();
  activity.onCreateOptionsMenu = function (e) {
    var settings, item, picker, menu, data = [];
    menu = e.menu;
    menu.clear();
    picker = Ti.UI.createPicker();
    data.push(
      Ti.UI.createPickerRow({
        title: 'Live',
        value: 'live'
      }));
    data.push(
      Ti.UI.createPickerRow({
        title: 'Ended',
        value: 'buyingended'
      }));
    picker.add(data);
    picker.addEventListener('change', pickLiveEnded);
    item = menu.add({
      title: "Live",
      showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
    });
    item.actionView = picker;
    picker.setSelectedRow(0, Alloy.Globals.selectedAuctionsPickerRow, false); //  column, row, [animated]
    settings = menu.add({
      icon: '/images/gear.png',
      showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
    });
    settings.addEventListener('click', function () {
      Alloy.createController('account').getView().open({
        modal: true
      });
    });
  };
  activity.invalidateOptionsMenu();
});
Edit: I added a graphic showing how it's supposed to look on launch, with picker collapsed. (I deleted the app name & icon from this new graphic.)

Attachments

FileDateSize
acv_main.png2015-06-03T18:04:44.000+000067752
device-2015-06-01-163837.png2015-06-03T17:50:13.000+000072358
picker expanded.png2015-07-09T19:21:20.000+000035887

Comments

  1. Tim Poulsen 2015-07-09

    Testing today with the new 4.1.0.GA release, the behavior is even worse. The picker now briefly appears in the top-left corner of the screen, after which it jumps to the correct locations. It remains expanded. See https://goo.gl/photos/d1VeZe18LDiFohR26 It should be rendered closed, and in the correct location.
  2. Tim Poulsen 2015-07-09

    Also: tap the picker, choose an option and the picker remains open. It should close after the user selects one of the items.
  3. Ashraf Abu 2015-07-23

  4. Tim Poulsen 2015-07-23

    The code below demonstrates the biggest of the problems: the picker is drawn expanded in the top left corner when you open the app and each time you switch between tabs. However it does not jump into its proper location as my video above shows. Neither does the picker remain open in this sample. Some difference between our app's code and this example is probably the reason.
       // this sets the background color of the master UIView (when there are no windows/tab groups on it)
       Titanium.UI.setBackgroundColor('#000');
       
       // create tab group
       var tabGroup = Titanium.UI.createTabGroup();
       
       
       //
       // create base UI tab and root window
       //
       var win1 = Titanium.UI.createWindow({  
           title:'Fruit',
           backgroundColor:'#fff'
       });
       var tab1 = Titanium.UI.createTab({  
           icon:'KS_nav_views.png',
           title:'Fruit',
           window:win1
       });
       
       var label1 = Titanium.UI.createLabel({
       	color:'#999',
       	text:'Pick a fruit',
       	font:{fontSize:20,fontFamily:'Helvetica Neue'},
       	textAlign:'center',
       	width:'auto'
       });
       
       win1.add(label1);
       
       //
       // create controls tab and root window
       //
       var win2 = Titanium.UI.createWindow({  
           title:'Veggies',
           backgroundColor:'#fff'
       });
       var tab2 = Titanium.UI.createTab({  
           icon:'KS_nav_ui.png',
           title:'Veggies',
           window:win2
       });
       
       var label2 = Titanium.UI.createLabel({
       	color:'#999',
       	text:'Pick a veggie',
       	font:{fontSize:20,fontFamily:'Helvetica Neue'},
       	textAlign:'center',
       	width:'auto'
       });
       
       win2.add(label2);
       
       
       
       //
       //  add tabs
       //
       tabGroup.addTab(tab1);  
       tabGroup.addTab(tab2);  
       
       
       /*
       	Code below adds a picker to the ActionBar with different options
       	for each tab. In order to have different picker options on each
       	tab, the picker is redrawn when you switch tabs but it maintains 
       	the selection you chose previously.
       */
       var activeTab = 0,
       	selectedPickerRow = {
       		tab0: 0,
       		tab1: 0
       	};
       function doPickerChange(e) {
       	if(activeTab === 0) {
       		selectedPickerRow.tab0 = e.rowIndex;
       		label1.text = 'You chose: ' + ((e.rowIndex) ? 'Banana' : 'Apple');
       	} else {
       		selectedPickerRow.tab1 = e.rowIndex;
       		label2.text = 'You chose: ' + ((e.rowIndex) ? 'Beans' : 'Corn');
       	}
       }
       
       tabGroup.addEventListener("open", function () {
       	var activity = tabGroup.getActivity();
       	activity.onCreateOptionsMenu = function (e) {
       		var item, 
       			settings,
       			data = [],
       			menu = e.menu, 
       			picker = Ti.UI.createPicker();
       		menu.clear();
       		if (activeTab === 0) {
       			data.push(
       				Ti.UI.createPickerRow({
       					title: 'Apple',
       					value: '0'
       				}));
       			data.push(
       				Ti.UI.createPickerRow({
       					title: 'Banana',
       					value: '1'
       				}));
       			picker.add(data);
       			picker.addEventListener('change', doPickerChange);
       			item = menu.add({
       				title: "Apple",
       				showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
       			});
       			item.actionView = picker;
       			picker.setSelectedRow(0, selectedPickerRow.tab0, false); //  column, row, [animated]
       		} else {
       			data.push(
       				Ti.UI.createPickerRow({
       					title: 'Corn',
       					value: '0'
       				}));
       			data.push(
       				Ti.UI.createPickerRow({
       					title: 'Beans',
       					value: '1'
       				}));
       			picker.add(data);
       			picker.addEventListener('change', doPickerChange);
       			item = menu.add({
       				title: "Corn",
       				showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
       			});
       			item.actionView = picker;
       			picker.setSelectedRow(0, selectedPickerRow.tab1, false); //  column, row, [animated]
       		}
       	};
       	activity.invalidateOptionsMenu();
       });
       
       function redrawMenu() {
       	var activity = tabGroup.getActivity();
       	activity.invalidateOptionsMenu();
       }
       tabGroup.addEventListener("focus", function (e) {
       	activeTab = e.index;
       	redrawMenu();
       });
       
       
       // open tab group
       tabGroup.open();
       
    When selecting a picker row with picker.setSelectedRow(), the picker should not be expanded. The row title of the selected row should be shown in the collapsed picker. Alternatively, if that can't be done, there should be a separate option to select the row without expanding the picker.
  5. Ashraf Abu 2015-07-24

    So the issue right now is that the picker.setSelectedRow() is also expanding the picker. Will look into separating or solving the selection of a picker and the expanding of the picker.
  6. Tim Poulsen 2015-07-24

    And the picker is rendered in the top-left corner of the screen... !https://dl.dropboxusercontent.com/u/5989721/device-2015-07-23-222843.png!
  7. Ashraf Abu 2015-07-24

    I'm testing it with a Nexus 9 running 5.1.1. I don't see that. May I know which version of Android and device you are using?
  8. Ashraf Abu 2015-07-24

    PR: https://github.com/appcelerator/titanium_mobile/pull/6982 This PR is to fix the expanded picker on selection issue.
  9. Tim Poulsen 2015-07-24

    The screenshot I posted above was taken on a Galaxy Nexus running 4.2.2. While the picker is expanded on my S5 running 5.0, it's in the correct location. So, maybe showing the picker in the top-left on my GNex has something to do with AppCompat or the Titanium theme?? I haven't tested your PR yet, so these comments are based on 4.0.0.GA.
  10. Lokesh Choudhary 2015-08-18

    Verified the fix. The picker on the actionbar does not appear expanded & also does not appear on the left side on android 4.2.2. Closing. Environment: Appc Studio : 4.2.0.201508062204 Ti SDK : 5.0.0.v20150818082827 Ti CLI : 4.1.4 Alloy : 1.6.2 MAC Yosemite : 10.10.4 Appc NPM : 4.1.0 Appc CLI : 4.2.0-57 Node: v0.10.37 One plus One - Android 5.0.1 Android Emulator : Android 4.2.2 Node : v0.10.37

JSON Source