Material-components-android: [TextInputLayout] Support prefix/suffix text

Created on 30 Jul 2019  路  16Comments  路  Source: material-components/material-components-android

Is your feature request related to a problem? Please describe.
Per the "Prefix and suffix text" section at https://material.io/design/components/text-fields.html material text fields should be able to display non-editable text before/after the user's input.
Screen Shot 2019-07-30 at 11 23 05 AM

Describe the solution you'd like
I have no strong opinions on the API, but I would consider the minimum-viable functionality to be setting a start-justified prefix text or end-justified suffix text. It would be nice to have the ability to set the start/end gravity of the user's input text (ex: the "55/100" example in the screenshot above), but I wouldn't consider it essential. I assume that the hint/label animation would be omitted when prefix/suffix text is provided, otherwise the visibility will need to be coordinated.

Describe alternatives you've considered

  • Using a TextWatcher and calculating start/end indices manually, as well as setting spans for text color. Ridiculously tedious and error-prone.
  • Setting a TextDrawable on the left of the TextInputEditText. Causes the label to be misaligned when the field is focused, and also overrides the drawable tint color:
    Screen Shot 2019-07-30 at 11 23 51 AM
  • Setting a TextDrawable as the startIconDrawable on the TextInputLayout. Does not line up with the user's cursor, padding must be set, and also overrides the drawable tint color:
    Screen Shot 2019-07-30 at 11 24 30 AM

  • Subclassing TextInputLayout and using a custom CollapsingTextHelper. Tedious and fragile (uses reflection); see https://stackoverflow.com/a/39568320

  • Using a custom view and ignore TextInputLayout entirely. Doable but would like to avoid trying to duplicate the exact styles and positions of views, since we use TextInputLayout in many places and want a uniform experience.
feature request

Most helpful comment

We've decided to start working on support for suffix/prefix on text fields

All 16 comments

I need this.. pls

@thevoiceless Seems feasible. I wouldn't mind putting the time in to add this feature. But is there any way to double-check that a pull request for it would actually be accepted? (Has it already been rejected? Any other technical issues? Is there a feature roadmap for v1.1.0?)

We currently don't have plans for this, but we would be interested in a PR. It might also be useful to put together a high level proposal of how you think it will work for us to look at before you put a lot of work into it as well.

I ended up using https://github.com/HITGIF/TextFieldBoxes for my particular use case, but it has its own peculiarities (rounded boxes, default implementation has a ripple on the view, custom methods for setting text watchers, etc). The prefix/suffix functionality appears to work as desired, though. I haven't delved into the implementation, but perhaps it could be used as inspiration.

@cketcham this is uncharted territory for me personally; what exactly does a "proposal" entail?

We've decided to start working on support for suffix/prefix on text fields

Sounds good! Will probably end up cleaner than me mucking around the code.

@leticiarossi Amazing news, is there any eta or projected release this will be a part of?

This should be in the current alpha.

I have not seen these changes present in version 1.1.0-beta01 or the docs - Can someone confirm if this is intentional or a mistake

Should be this commit 6e5ddcfb0ee4e8fb9ff96a5c818c3f5c0593482b. I don't think it's in the beta, but will be in releases afterwards.

When it gonna be include in alpha or beta. Don't get the update in latest beta.

@ldjcmu can this be re-opened? It might be dev-done but it isn't available within the library

@ldjcmu can this be re-opened? It might be dev-done but it isn't available within the library

agree

Released in 1.2.0-alpha01.

seeing the alignment issues when using the prefixtext. Has this been addressed already?

Can you add the gravity attribute for the suffix? In my case, I need the suffix to be positioned at the end of the typed text, not the view.
For example: 2,250.00 $

Was this page helpful?
0 / 5 - 0 ratings