How to make a text input layout with box?

Viewed 2579

like this: enter image description here

The words email or phone are the hint which jumps to top on gaining focus. i tried searching for a library and even looking into code of text input layout, but couldn't understand how to get something like that???

1 Answers

To get that general appearance, all you have to do is apply the "outline" style to your TextInputLayout tag:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    ...>

    <com.google.android.material.textfield.TextInputEditText
        .../>

</com.google.android.material.textfield.TextInputLayout

The "Email or phone" text that jumps to the top is the "hint" text set on the layout.

<com.google.android.material.textfield.TextInputLayout
    android:hint="Email or phone"
    ...>

Developer guide for TextInputLayout: https://material.io/develop/android/components/text-input-layout/

You will need the Google Material Components library in your app. Getting started guide: https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

Related