Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28299] Android: Add new material theme styles to "TextField" and "TextArea"

GitHub Issuen/a
TypeImprovement
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2021-03-05T15:57:14.000+0000
Affected Version/sn/a
Fix Version/sRelease 10.0.0
ComponentsAndroid
LabelsTextArea, TextField, android, breaking-change, material-design, material-theme, theme
ReporterJoshua Quick
AssigneeJoshua Quick
Created2020-12-19T04:16:59.000+0000
Updated2021-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

FileDateSize
TextField-Android-Dark.png2021-02-23T02:39:36.000+0000483176
TextField-Android-Light.png2021-02-23T02:39:36.000+0000472133
TextFieldBorderTest.js2021-02-23T02:41:19.000+00001603
TextField-iOS.png2021-02-23T02:39:36.000+0000835942

Comments

  1. Joshua Quick 2020-12-19

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/12353
  2. Christopher Williams 2021-03-05

    merged to master and 10_0_X for 10.0.0 release target.

JSON Source