Search code examples
androidtextviewandroid-textinputlayout

How to make a text input layout with box?

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

Solution

  • 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