Etiqueta flotante con TextInputLayout AndroidX y Kotlin

El componente TextInputLayout nos sirve para englobar los elementos de entrada mediante una etiqueta flotante cuando tienen el foco.

Dependencias

Añadir la siguiente dependencia en build.gradle de la app

dependecies {
    implementation 'com.google.android.material:material:1.2.1'
}

Componente layout

En el layout.xml se define de la siguiente manera, ver que TextInputEditText se encuentre dentro del TextInputLayout

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilUsername1"
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:hint="user name">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
</com.google.android.material.textfield.TextInputLayout>

Estilos TextInputLayout

El componente TextInputLayout ofrece dos tipos de estilos visuales

• 

• 

• 

• FilledBox: se mostrará con un fondo (por defecto)

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

• OutlineBox: se mostrará con un contorno

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Texto de la etiqueta

Para añadir el texto de la etiqueta flotante en el componente TextInputLayout se añade la propiedad android:hint

android:hint="user name"

Si se quiere añadir una ayudita de como el usuario debe rellenar el campo, con la propiedad app:helperText

app:helperText="campo requerido"

Si queremos mostrar un placeholder diferente al nombre de la etiqueta flotante, se hace con la propiedad app:placeHolderText

app:placeholderText="Tu nombre"

Mostrar errores

Puede agregar un mensaje de error en los campos, se realiza con la propiedad .error desde Kotlin

tilUsername1.error = "no valid field"

y para quitar el error se hace con la propiedad .isErrorEnabled a false

tilUsername1.isErrorEnabled = false

Añadir contador de carácteres

Para habilitar elcontador de carácteres se hace con la propiedad app:counterEnabled

app:counterEnabled="true"

para establecer un máximo de carácteres, que al llenar el campo sobrepase el valor, se hace con la propiedad app:counterMaxLength

app:counterMaxLength="20"

Al llenar el campo con más carácteres que indica el contador se mostrará con el color de error.

Si se quiere restringir que se llene más de 20 carácteres se debe establecer en el TextInputEditText el mismo valor en la propiedad android:maxLength

<com.google.android.material.textfield.TextInputLayout
    ...
    app:counterEnabled="true"
    app:counterMaxLength="20" >

    <com.google.android.material.textfield.TextInputEditText
        ...
        android:maxLength="20" />
</com.google.android.material.textfield.TextInputLayout>

Demostración

Para ver un ejemplo usable se puede descargar la app My Subscriptions es donde he implementado la mayor parte del detallado en este apunte sobre TextInputLayout

Anuncio publicitario