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.
Add the iOS-only 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.
This can be tested with the attached TextFieldBorderTest.js script which will displays what's shown in the below screenshots.
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.