[TIMOB-28427] Android: Add "borderStyle" and "hintText" properties to Ti.UI.Picker
GitHub Issue | n/a |
---|---|
Type | Improvement |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2021-05-26T15:32:56.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 10.0.1 |
Components | Android |
Labels | android, border, borderStyle, material-design, picker |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2021-04-24T04:11:28.000+0000 |
Updated | 2021-05-26T15:32:56.000+0000 |
Description
*Summary:*
On Android, if we display the picker as a read-only text field, then we should also add properties [borderStyle](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TextField-property-borderStyle) and [hintText](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TextField-property-hintText) that work similarly to
Ti.UI.TextField
.
*Drop-Down Picker Support:*
When a Ti.UI.Picker} is set up as [PICKER_TYPE_PLAIN](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI-property-PICKER_TYPE_PLAIN) (the default) and its [useSpinner](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker-property-useSpinner) property is set {{true
, then the picker is shown as a drop-down field. Titanium currently shows this as a borderless view using the Java Spinner
class as shown here...
https://developer.android.com/guide/topics/ui/controls/spinner
It should be changed to use a material [TextInputLayout](https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout) and [MaterialAutoCompleteTextView](https://developer.android.com/reference/com/google/android/material/textfield/MaterialAutoCompleteTextView) so that it will look like the below. This follows Google's material guidelines and Google's own apps.
!Picker-DropDown-Border-Light.png|thumbnail! !Picker-DropDownClicked-Border-Light.png|thumbnail!
!Picker-DropDown-Border-Dark.png|thumbnail! !Picker-DropDownClicked-Border-Dark.png|thumbnail!
*Compact Date/Time Picker Support:*
When we add support for [DATE_PICKER_STYLE_COMPACT](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS-property-DATE_PICKER_STYLE_COMPACT) via [TIMOB-28426], then the picker will appear as a read-only text field that shows a selection dialog when tapped on. The border style should be configurable to match the border style used by Ti.UI.TextField
views.
!Picker-Date-Border-Light.png|thumbnail! !Picker-Date-Border-Dark.png|thumbnail!
!Picker-Time-Border-Light.png|thumbnail! !Picker-Time-Border-Dark.png|thumbnail!
Attachments
File | Date | Size |
---|---|---|
DatePickerBorderTest.js | 2021-04-24T04:06:15.000+0000 | 844 |
Picker-Date-Border-Dark.png | 2021-04-24T04:08:48.000+0000 | 444954 |
Picker-Date-Border-Light.png | 2021-04-24T04:08:47.000+0000 | 441766 |
Picker-DropDown-Border-Dark.png | 2021-04-24T04:01:06.000+0000 | 434408 |
Picker-DropDown-Border-Light.png | 2021-04-24T04:01:08.000+0000 | 433427 |
PickerDropDownBorderTest.js | 2021-04-24T03:58:34.000+0000 | 1209 |
Picker-DropDownClicked-Border-Dark.png | 2021-04-24T04:01:06.000+0000 | 430968 |
Picker-DropDownClicked-Border-Light.png | 2021-04-24T04:01:06.000+0000 | 434317 |
Picker-Time-Border-Dark.png | 2021-04-24T04:11:15.000+0000 | 443481 |
Picker-Time-Border-Light.png | 2021-04-24T04:11:15.000+0000 | 440774 |
TimePickerBorderTest.js | 2021-04-24T04:09:49.000+0000 | 844 |
PR (master): https://github.com/appcelerator/titanium_mobile/pull/12745
merged to master and 10_0_X for 10.0.1 target