android - tapa - El texto de error en TextInputLayout está cubierto por el teclado

ocultar teclado android edittext

Question

TextInputLayout contiene un EditText que a su vez recibe la entrada del usuario. Con TextInputLayout introducido con la Biblioteca de soporte de diseño de Android, se supone que debemos establecer el error en TextInputLayout que contiene el texto de edición en lugar del texto de edición en sí. Al escribir, la interfaz de usuario se centrará solo en el texto de edición y no en todo el TextInputLayout, lo que puede provocar que el teclado cubra el error. En el siguiente aviso GIF, el usuario debe quitar el teclado primero para ver el mensaje de error. Esto, en combinación con la configuración de acciones IME para continuar usando el teclado, lleva a resultados realmente confusos.

Código XML de diseño:

<android.support.design.widget.TextInputLayout
    android:id="@+id/uid_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true"
    android:layout_marginTop="8dp">

    <EditText
        android:id="@+id/uid_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:hint="Cardnumber"
        android:imeOptions="actionDone"/>

</android.support.design.widget.TextInputLayout>

Código Java que establece el error en TextInputLayout:

uidTextInputLayout.setError("Incorrect cardnumber");

¿Cómo puedo asegurarme de que el mensaje de error sea visible sin que el usuario actúe para verlo? ¿Es posible mover el foco?

Answer 1

Acabo de descubrir que si coloca el contenedor en una altura fija, el teclado deja espacio para el texto de error

<FrameLayout 
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:layout_alignParentBottom="true">

  <android.support.design.widget.TextInputLayout
    android:id="@+id/text_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    app:errorEnabled="true"
    app:errorTextAppearance="@style/ErrorText">

     <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:imeOptions="actionGo"
        android:inputType="textPersonName"
        android:singleLine="true" />
  </android.support.design.widget.TextInputLayout>
</FrameLayout>

Answer 2

Debe colocar todo en el contenedor ScrollView para que el usuario pueda al menos desplazarse y ver el mensaje de error. Eso es lo único que me funcionó.

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        ...
        other views
        ...
    </LinearLayout>
</ScrollView>

Answer 3

Es intrépido, pero esto es lo que hice para solucionar esto:

Como en este caso mi combo TextInputLayout / EditText en vivo dentro de un RecyclerView, simplemente me desplazo cuando configuro el error:

textInputLayout.setError(context.getString(R.string.error_message))
recyclerView.scrollBy(0, context.convertDpToPixel(24f))

Funciona, pero definitivamente es menos que ideal. Sería genial si Google solucionara esto, ya que definitivamente es un error.

Answer 4

Para asegurarme de que el mensaje de error sea visible sin que el usuario actúe para verlo, subclasifico TextInputLayout y lo coloqué dentro de un ScrollView . Esto me permite desplazarme hacia abajo si es necesario para revelar el mensaje de error, en cada ocasión se configura el mensaje de error. No se necesitan cambios en la clase de actividad / fragmento que la usa.

/**
 * [TextInputLayout] subclass that handles error messages properly.
 */
class SmartTextInputLayout @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : TextInputLayout(context, attrs, defStyleAttr) {

    private val scrollView by lazy { findParentOfType<ScrollView>() }
    private val nestedScrollView by lazy { findParentOfType<NestedScrollView>() }

    private fun scrollIfNeeded() {
        // Wait a bit (like 10 frames) for other UI changes to happen
        postDelayed({
            scrollView?.scrollDownTo(this)
            nestedScrollView?.scrollDownTo(this)
        }, 160)
    }

    override fun setError(value: CharSequence?) {
        val changed = error != value

        super.setError(value)

        // work around https://.com/q/34242902/1916449
        if (value == null) isErrorEnabled = false

        // work around https://.com/q/31047449/1916449
        if (changed) scrollIfNeeded()
    }
}

Aquí están los métodos de ayuda:

/**
 * Find the closest ancestor of the given type.
 */
inline fun <reified T> View.findParentOfType(): T? {
    var p = parent
    while (p != null && p !is T) p = p.parent
    return p as T?
}

/**
 * Scroll down the minimum needed amount to show [descendant] in full. More
 * precisely, reveal its bottom.
 */
fun ViewGroup.scrollDownTo(descendant: View) {
    // Could use smoothScrollBy, but it sometimes over-scrolled a lot
    howFarDownIs(descendant)?.let { scrollBy(0, it) }
}

/**
 * Calculate how many pixels below the visible portion of this [ViewGroup] is the
 * bottom of [descendant].
 *
 * In other words, how much you need to scroll down, to make [descendant]''s bottom
 * visible.
 */
fun ViewGroup.howFarDownIs(descendant: View): Int? {
    val bottom = Rect().also {
        // See https://.com/a/36740277/1916449
        descendant.getDrawingRect(it)
        offsetDescendantRectToMyCoords(descendant, it)
    }.bottom
    return (bottom - height - scrollY).takeIf { it > 0 }
}

También reparé TextInputLayout.setError () deja espacio vacío después de borrar el error en la misma clase.