[TIMOB-808] Implement Pickers for Android

Having a go, at don's suggestion.

Is there an ETA for this? When is 1.5 due?

This one keeps bouncing to next release. Currently planning on using pickers in our next release, is this for sure 1.5?

The following will at a minimum be done by 1.5:

• A plain picker with a single column, text only (i.e., the "title" property of the PickerRow object).

• A date picker.

• A time picker.

(Android has no native support for a date+time picker.)

Note that the projected date for 1.5 has not been set yet. However as we implement these things, we'll update this ticket and you'll be able to get the new stuff from our http://developer.appcelerator.com/doc/mobile/get_continuous_builds"> continuous build page.

Multi-column support would be ideal. For a single column 'picker', tableviews can already meet that need for us.

Bryan,

Do you mean multi-column wherein each column inside the picker can "spin" (so to speak) to select its own value, or do you mean multi-column in the sense that more than one column can be displayed per row of data, but when you select a row you're selecting the "whole thing". (If you know what I mean.) In the former case, each column has its own set of rows (like a date picker that has columns for month, day, year). In the latter case, there is only one set of rows.

• Bill

The case where each column can spin.

Example:

Enter height: 6' 1"

Feet and inches would be selected independently.

The problem is that I don't think there is native support for that in Android. I could be wrong about that, and I'll be checking more deeply later. Meanwhile, if you've seen any Android apps with that, let me know so I can have a look at them.

Urbanspoon did this but it wasn't a native control. They basically created an iPhone look-alike picker.

It looks like you will have to roll something custom to get pickers to be useful on android. It looks like at least one project out there has started something:
http://code.google.com/p/android-wheel/">http://code.google.com/p/android-wheel/

If you implement the default android picker I don't think it would be compatible at all with the iPhone version so we would end up with a lot of "if iphone then" code. I would hope for a custom wheel based implementation so it works pretty much the same on both platforms.

Looks nice. Too bad the license is not compatible with Titanium.

Apache 2.0 is not compatible with GPL 3?

http://www.gnu.org/licenses/quick-guide-gplv3.html">http://www.gnu.org/licenses/quick-guide-gplv3.html

We won't use any GPL'd code, no matter the license version.

As a follow-up to that:

http://www.apache.org/licenses/GPL-compatibility.html">http://www.apache.org/licenses/GPL-compatibility.html

It's the wrong direction of a one-way compatibility, so to speak.

I should say I'm hardly an expert. I just know that it is Appcelerator's policy not to use GPL code of any version.

I contacted the author and he changed the license to Apache 2.0

update:

Our http://developer.appcelerator.com/doc/mobile/get_continuous_builds"> latest code contains plain picker, date picker and time picker (not date+time, not countdown).

• Plain picker: this is the native Android Spinner. Supports only one column, and only plain text. We will adapt the to an iPhone-type spinner with multiple columns probably this week, thanks to Bryan Jackson asking the creator of http://code.google.com/p/android-wheel/">http://code.google.com/p/android-wheel/ to change the license to Apache.

• Date picker: by default, also the native Android date picker. however we've added a special creation-time property useSpinner: true to use android-wheel, which looks iPhone-ish. Thanks again to Bryan.

• Time picker: same as date picker in that by default it uses an Android native control, but you can use useSpinner: true to use the android-wheel.

Bill,

I'm using the latest build and the date pickers seem to be working. However, I'd like to use the DatePickerDialogs, which seems to be implemented under showDatePickerDialog(). I'm having a hard time figuring out how to invoke this though. Is this function good to go or does something else need to be updated before it can be used?

Ryan,

This probably is not the "final way" we'll do this, but for now you can use it in this wacky way: create an instance of a picker (any picker, in fact) and call it:

    var picker = Ti.UI.createPicker();
    picker.showDatePickerDialog({
      value: new Date(2010,8,1), // initial date to display
      callback: function(e) {
        if (e.cancel) {
          Ti.API.info('user canceled dialog');
        } else {
          Ti.API.info('user selected date: ' + e.value);
        }
      }
    });
    

(I didn't test that code block. :) )

This is a really strange way to do it, creating an instance of picker just to call this. Better would be to simply have Ti.UI.showDatePickerDialog, but we have an issue right now whereby "modules" like Ti.UI are shared across javascript contexts, so if we put it there the actual date dialog might not appear in the right place. We're working on how modules interact with contexts for Titanium 1.5, so -- to reiterate -- this may change.

Regards,

Bill

Thanks Bill. This works great. I'll be on the lookout for commit changes that affect this, but I'd also appreciate it if you could follow up on this thread if it becomes more complex.

Note: the spinner-style (iphone-looking) picker does not currently support any border width attributes. I'll be working on that too in the coming weeks.

Hi. I need time picker and tried:
var timePicker = Ti.UI.createPicker();

    timePicker.showTimePickerDialog({
          value: new Date(2010,8,1,1,9), // initial time to display
          callback: function(e) {
            if (e.cancel) {      
                ..
            } else {
                ..
            }
          }
    

}); It works fine but how to switch between 12h/d to 24h/d time.
Now picker shows 12h/d time picker.

Indeed, there is a property you can set for that. Sorry, this will all be documented eventually -- I'm just hesitating because -- as I indicated earlier -- we're not sure if showTimePickerDialog and showDatePickerDialog will stay in the places where they currently are.

Anyway:

    timePicker.showTimePickerDialog({
          format24: false, // <--------------------
          value: new Date(2010,8,1,1,9), // initial time to display
          callback: function(e) {
            if (e.cancel) {      
                ..
            } else {
                ..
            }
          }
    });
    

Is it currently possible to have the TimePicker increment by a certain duration (say a half hour rather than a minute)?

Really glad to see this work progressing.

The http://developer.android.com/reference/android/widget/TimePicker.html"> "native" time picker, which is the one you get by default, doesn't seem to have that capability. (Link is to Android docs.)

The "spinner" version of the time picker, which you get by passing useSpinner: true as one of the creation arguments to createPicker(), will have it, because our Titanium API documentation (originating from our iOS implementation) http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Picker-object"> says it should (the minuteInterval property). Alas, I haven't coded it yet. I will "soon". (I keep saying soon here but I keep getting lots of other stuff I need to do. -- but i want this in 1.5.)

Currently, only the spinner supports minDate/maxDate. Will the picker support minDate/maxDate when 1.5 is final?

Will it be possible to change the title (which currently displays the date eg. 'September 04 2010') of the date dialog on each change?

(from [dc0620a5f5711fd299c6b842060d05e1018f4d6d]) [#808] maxDate/minDate support for native date picker (not date picker dialog) http://github.com/appcelerator/titanium_mobile/commit/dc0620a5f5711fd299c6b842060d05e1018f4d6d"> http://github.com/appcelerator/titanium_mobile/commit/dc0620a5f5711...

I found out that the picker does ignore width / height property. Will it be possible to allow this?

#2364, #2365, #2366, #2367 take over some of the issues from this ticket.