Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-28299

Android: Add new material theme styles to "TextField" and "TextArea"

    Details

      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 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.

      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

          Activity

            People

            • Assignee:
              jquick Joshua Quick
              Reporter:
              jquick Joshua Quick
              Reviewer:
              Gary Mathews
              Tester:
              Lokesh Choudhary
            • Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Integration