Vista de Android EditText Sugerencia flotante en Material Design


96

¿API 21 proporciona un método para utilizar la siguiente función?

http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels

Estoy tratando de hacer flotar las sugerencias de EditText.

¡Gracias!



Me encontré con esto también durante mi búsqueda, pero me preguntaba si Android proporcionaba un método nativo.
xsorifc28

1
Esto nos hace pensar que algo anda mal con Android. Hay varias lagunas faltantes en la API para Material Design. Otro ejemplo es el botón de acción flotante.
motobói

Respuestas:


3

Necesita agregar lo siguiente al archivo build.gradle de su módulo:

implementation 'com.google.android.material:material:1.0.0'

Y use com.google.android.material.textfield.TextInputLayout en su XML:

       <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/my_hint">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
   </com.google.android.material.textfield.TextInputLayout>

108

Indicación flotante EditText:

Agregue la siguiente dependencia en gradle:

compile 'com.android.support:design:22.2.0'

En diseño:

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

3
Tenga cuidado con: TextInputLayout no muestra la sugerencia EditText antes de que el usuario se enfoque en él, existe un error en la biblioteca de soporte de diseño22.2.0
Ivan Chau

1
¿Cuál es la diferencia entre usar EditText y TextInputEditText en este XML?
desarrollador de Android

2
La dependencia recién renombrada parece ser implementation 'com.google.android.material:material:1.0.0-rc01'.
rmtheis

60

Sí, a partir del 29 de mayo de 2015, esta funcionalidad ahora se proporciona en la biblioteca de compatibilidad de diseño de Android

Esta biblioteca incluye soporte para

  • Etiquetas flotantes
  • Botón de acción flotante
  • Snackbar
  • Cajón de navegación
  • y más

3
¿Conoce un tutorial para etiquetas flotantes con EditTexts como OP mencionado?
AdamMc331


1
¡Wow gracias! ¡Revisaré estos y les haré saber cómo va!
AdamMc331

2
El tercero era lo que estaba buscando. Me topé con TextInputLayout, pero no pude encontrar un buen ejemplo (probablemente buscando todos los términos incorrectos). ¡Gracias!
AdamMc331

18

La biblioteca de soporte de Android se puede importar dentro de gradle en las dependencias:

    compile 'com.android.support:design:22.2.0'

¡Debería incluirse en GradlePlease! Y como ejemplo para usarlo:

 <android.support.design.widget.TextInputLayout
    android:id="@+id/to_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextViewTo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="To"
        android:layout_marginTop="45dp"
        />
</android.support.design.widget.TextInputLayout>

Por cierto, es posible que el editor no comprenda que AutoCompleteTextView está permitido dentro de TextInputLayout.


11

Android no ha proporcionado un método nativo. Ni AppCompat.

Pruebe esta biblioteca: https://github.com/rengwuxian/MaterialEditText

Esto puede ser lo que quieras.


1
Recibo un error: (1) "El atributo" color "ya se ha definido" en la sincronización de Gradle, probablemente debido a la aplicación appcompat-v7. No puedo deshacerme de eso. ¿Alguna sugerencia?
mdzeko

MaterialEditText no ha definido un atributo llamado "color", por lo que debe haber algo mal en otro lugar.
rengwuxian

9

Importe las bibliotecas de soporte. En el archivo build.gradle de su proyecto, agregue las siguientes líneas en las dependencias del proyecto:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'
}

Utilice el siguiente TextInputLayout en su diseño de interfaz de usuario:

<android.support.design.widget.TextInputLayout
    android:id="@+id/usernameWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

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

Entonces, llame a setHint en TextInputLayout justo después de la llamada a setContentView porque, para animar la etiqueta flotante, solo necesita establecer una pista, usando el método setHint.

final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
usernameWrapper.setHint("Username");

1
Usando 23.1.1 al menos, no necesita usar una llamada explícita a setHint(). Funciona con la sugerencia establecida en el EditTextxml de diseño.
Ionoclast Brigham

3

La sugerencia de @ andruboy de https://gist.github.com/chrisbanes/11247418 es probablemente tu mejor opción.

https://github.com/thebnich/FloatingHintEditText funciona con appcompat-v7 v21.0.0, pero dado que v21.0.0 no admite colores de acento con subclases de EditText, el subrayado FloatingHintEditTextserá el negro o blanco sólido predeterminado. Además, el relleno no está optimizado para el estilo Material EditText, por lo que es posible que deba ajustarlo.


Gracias. Supongo que Google tampoco ha proporcionado una API para crear advertencias de edición de texto de estilo de material, como en google.com/design/spec/components/ ... Lo siento por las preguntas de aficionados, estoy tratando de adaptarme al diseño de materiales tanto como puedo usar la API / bibliotecas de Google y tratar de averiguar todo lo que se ha proporcionado frente a cualquier biblioteca externa. ¡Gracias de nuevo!
xsorifc28


0

Para una manera más fácil de usar InputTextLayout, he creado esta biblioteca que corta su código XML a menos de la mitad y también le brinda la capacidad de establecer un mensaje de error, así como un mensaje de sugerencia y una manera fácil de hacer su validaciones. https://github.com/TeleClinic/SmartEditText

Simplemente agregue

compile 'com.github.TeleClinic:SmartEditText:0.1.0'

Entonces puedes hacer algo como esto:

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/emailSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Email"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setRegexErrorMsg="Wrong email format"
    app:setRegexType="EMAIL_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/passwordSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Password"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setPasswordField="true"
    app:setRegexErrorMsg="Weak password"
    app:setRegexType="MEDIUM_PASSWORD_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/ageSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Age"
    app:setMandatory="false"
    app:setRegexErrorMsg="Is that really your age :D?"
    app:setRegexString=".*\\d.*" />

0

Prueba de esta manera

ingrese la descripción de la imagen aquí

  dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
  }

para más referencia haga clic aquí


0

Utilice lo TextInputLayoutproporcionado por la biblioteca de componentes de materiales :

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

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

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

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.