3

I want to create a text field where the label is inside the borders, something like this: enter image description here

How can I do this with the material components?

I don't want to have the label between the border like this: (doesn't look nice anymore when you have multiple filled fields, it's to nervous with all the interrupted borders in my opinion)

enter image description here

stefan.at.kotlin
  • 15,347
  • 38
  • 147
  • 270
  • I think there are only two 'official' styles: Widget.MaterialComponents.TextInputLayout.OutlinedBox and Widget.MaterialComponents.TextInputLayout.FilledBox. You might want to check out the second one, it doesn't have an outline. https://material.io/components/text-fields – einUsername May 09 '20 at 19:43
  • you are right that there are only 2 official styles, yet it's maybe possible to create some custom style. e.g. the Widget.MaterialComponents.TextInputLayout.FilledBox with a white background would be close, only missing the border. Maybe someone knows if/how that could be added. – stefan.at.kotlin May 09 '20 at 21:56
  • 1
    @stefan.at.wpf did you try creating a drawable background that looks like the desired rectangle and simply applying it to theWidget.MaterialComponents.TextInputLayout.FilledBox element in xml. – Njuacha Hubert Apr 24 '21 at 16:26

1 Answers1

-1

A simple thing you could do is to move the hint into the TextInputEditText and disable it on the TextInputLayout.
Then it behaves like the old EditTexts: The line doesn't get interrupted because the hint disappears when the user starts typing. You could use app:helperText if you need to show text permanently (or maybe put a TextView on top).
There are other ways to get the perfect result, but they seem "hacky". Like this and this.

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:hintEnabled="false"
    app:helperText="helperText"
    ... >

        <com.google.android.material.textfield.TextInputEditText
            android:hint="hint"
            ... />
</com.google.android.material.textfield.TextInputLayout>
einUsername
  • 1,569
  • 2
  • 15
  • 26