[TIMOB-28299] Android: Add new material theme styles to "TextField" and "TextArea"
GitHub Issue | n/a |
---|---|
Type | Improvement |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2021-03-05T15:57:14.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 10.0.0 |
Components | Android |
Labels | TextArea, TextField, android, breaking-change, material-design, material-theme, theme |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2020-12-19T04:16:59.000+0000 |
Updated | 2021-03-05T15:57:14.000+0000 |
Description
*Summary:*
Our
Ti.UI.TextField
and Ti.UI.TextArea
views currently use the old holo theme which only shows an underline. We should update them to support the new material theme "filled" and "outlined" styles as shown below.
https://material.io/components/text-fields
*To-Do:*
Add the iOS-only [borderStyle](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TextField-property-borderStyle) property to Android's TextField
and TextArea
views. This gives us access to the following constants.
* Ti.UI.INPUT_BORDERSTYLE_BEZEL // iOS only inset frame.
* Ti.UI.INPUT_BORDERSTYLE_LINE // Rectangular border.
* Ti.UI.INPUT_BORDERSTYLE_NONE // No border.
* Ti.UI.INPUT_BORDERSTYLE_ROUNDED // Rounded rectangle border.
We should also add the following Android-only border style constants.
* Ti.UI.INPUT_BORDERSTYLE_FILLED // Android-only. The default material theme.
* Ti.UI.INPUT_BORDERSTYLE_UNDERLINED // Only Android holo theme.
We should change TextField
and TextArea
to default to the FILLED style since that's what is documented by Google's material theme guidelines.
*Test Code:*
This can be tested with the attached [^TextFieldBorderTest.js] script which will displays what's shown in the below screenshots.
!TextField-Android-Light.png|thumbnail! !TextField-Android-Dark.png|thumbnail! !TextField-iOS.png|thumbnail!
*Breaking-Change:*
The app must use a "Theme.MaterialComponents" based theme or else an exception will occur. So, app's using a custom theme based from "Theme.AppCompat" or similar will crash. This is normal and the exception will state that the theme will need to change.
Attachments
File | Date | Size |
---|---|---|
TextField-Android-Dark.png | 2021-02-23T02:39:36.000+0000 | 483176 |
TextField-Android-Light.png | 2021-02-23T02:39:36.000+0000 | 472133 |
TextFieldBorderTest.js | 2021-02-23T02:41:19.000+0000 | 1603 |
TextField-iOS.png | 2021-02-23T02:39:36.000+0000 | 835942 |
PR (master): https://github.com/appcelerator/titanium_mobile/pull/12353
merged to master and 10_0_X for 10.0.0 release target.