cómo cambiar el color de la etiqueta de TextinputLayout y editar texto subrayado android

120

Estoy usando la biblioteca de diseño de Android TextinputLayout. Pero no se pudo personalizar el color de la sugerencia, el color de la etiqueta y el color del subrayado del EditTextinterior TextinputLayout. Por favor ayuda.

Nitesh Verma
fuente
1
Debe tener el color de acento de acuerdo con las pautas de diseño, ¿verdad?
Raghunandan
ya, pero tendré muchos editTexts con colores diferentes al color de acento del tema.
Nitesh Verma
posible duplicado de EditText subrayado debajo de la propiedad del texto
Anirudh Sharma
Por favor, verifique mi respuesta aquí para cambiar el color de la etiqueta
Summved Jain
Podría cambiar el subrayado de manera confiable tanto en el estado enfocado como desenfocado mediante el uso de un diseño de fondo personalizado especificado en stackoverflow.com/a/36543554/2413303
EpicPandaForce

Respuestas:

256

Cambiar el color de la línea de fondo:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

Para obtener más información, consulte este hilo .

Cambiar el color de la pista cuando está flotando

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

y utilícelo así:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

Cambie el color de la pista cuando no sea una etiqueta flotante:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

Gracias a @AlbAtNf

Pankaj Arora
fuente
No puedo cambiar el color de la pista (cuando no es una etiqueta). ¿Podrían ayudarme?
Nitesh Verma
Estoy realmente preocupado por el tamaño de mi aplicación, considerando eso, ¿alguna idea de cuánto tamaño adicional se espera que ponga en mi aplicación?
Nitesh Verma
lo siento, no recibí su pregunta, por favor explique más, el tamaño en qué contexto, el tamaño de los gráficos del peso de la aplicación (como apk es de más de 20 MB o algo así), y antes acepta mi respuesta y nuevamente elimina su aceptación, puedo preguntar , y entonces?
Pankaj Arora
becoz, no pude cambiar el color de la pista después de su respuesta. Una parte funcionó para mí, pero esta no es una solución completa para lo que pregunté. Con respecto al tamaño de la aplicación, ¿no aumenta el tamaño de la aplicación agregar una biblioteca externa como Material EdiTText?
Nitesh Verma
4
@NiteshVerma encontró la solución para el ajuste de color Indirecta, cuando no es un flotante lable: basta con establecer android:textColorHintque TextInputLayouten XML.
AlbAtNf
30

Basado en Fedor Kazakov y otras respuestas, creé una configuración predeterminada.

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Widget.Design.TextInputLayout" parent="AppTheme">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
        <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
        <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
        <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
        <!-- Floating label appearance here -->
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
        <!-- Error message appearance here -->
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">20sp</item>
    </style>

</resources>

activity_layout.xml

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text hint here"
        android:text="5,2" />

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

Centrado:

Enfocado

Sin foco:

Sin foco

Mensaje de error:

ingrese la descripción de la imagen aquí

Douglas Nassif Roma Junior
fuente
8
¿Qué debo hacer para obtener también el color rosa para el ejemplo "Sin foco"?
John Smith
¿Cómo usar este estilo?
Hanzala
23

Con la biblioteca de componentes de materiales puede utilizar lacom.google.android.material.textfield.TextInputLayout .

Puede aplicar un estilo personalizado para cambiar los colores.

Para cambiar el color de la pista , debe utilizar estos atributos:
hintTextColory android:textColorHint.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/selector_hint_text_color</item>
</style>

Debería utilizar un selector para android:textColorHint. Algo como:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>

Para cambiar el color de fondo que usted tiene que utilizar el atributo: boxStrokeColor.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    ....
    <item name="boxStrokeColor">@color/selector_stroke_color</item>
</style>

También en este caso debería utilizar un selector. Algo como:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

También puede aplicar estos atributos en su diseño:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/selector_stroke_color"
    app:hintTextColor="?attr/colorPrimary"
    android:textColorHint="@color/selector_hint_text_color"
    ...>
Gabriele Mariotti
fuente
1
¿Cómo cambiar el color de subrayado de EditText dentro de TextinputLayout? Me refiero a un estado desenfocado. Es grisáceo
Evgenii Vorobei
@EvgeniiVorobei Se describe en la respuesta. Está definido por boxStrokeColor. En el ejemplo, selector_stroke_coloren particular, la última línea:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
Gabriele Mariotti
¡Muchas gracias! No pude entenderlo por mí mismo.
Evgenii Vorobei
19

Agregue este atributo en la etiqueta Edittext y disfrute:

 android:backgroundTint="@color/colorWhite"
pm dubey
fuente
5
efecto: cambia el color de la línea en dispositivos con API nivel 21 y superior
Someone Somewhere
17

Esta publicación de blog describe varios aspectos de estilo EditTexty AutoCompleteTextViewenvueltos por TextInputLayout.

Por EditTexty AppCompat lib 22.1.0+ se puede establecer el atributo de tema con algunos ajustes relacionados con el tema:

<style name="StyledTilEditTextTheme">
   <item name="android:imeOptions">actionNext</item>
   <item name="android:singleLine">true</item>
   <item name="colorControlNormal">@color/greyLight</item>
   <item name="colorControlActivated">@color/blue</item>
   <item name="android:textColorPrimary">@color/blue</item>
   <item name="android:textSize">@dimen/styledtil_edit_text_size</item>
</style>

<style name="StyledTilEditText">
    <item name="android:theme">@style/StyledTilEditTextTheme</item>
    <item name="android:paddingTop">4dp</item>
</style>

y aplicarlos en EditText:

<EditText
    android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

Porque las AutoCompleteTextViewcosas son más complicadas porque envolverlo TextInputLayouty aplicar este tema rompe el comportamiento de la etiqueta flotante. Necesitas arreglar esto en el código:

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

y en Activity.onCreate:

setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
    if(hasFocus) {
        setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
    } else {
        if(autoCompleteTextView.getText().length() == 0) {  
              setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
        }
    }
});
Patryk Lenza
fuente
8

Si desea cambiar el color de la barra / línea y el color del texto de la sugerenciaTextInputLayout (cuál es normalmente el color de acento), simplemente cree este estilo:

<style name="MyStyle">
    <item name="colorAccent">@color/your_color</item>
</style>

Luego aplícalo a tu TextInputLayoutcomo tema :

<android.support.design.widget.TextInputLayout
    ...
    app:theme="@style/MyStyle" />

Básicamente, esto establece un tema (no estilo) en una vista (a diferencia de toda la actividad).

Farbod Salamat-Zadeh
fuente
Su SDK mínimo debe ser 21
Azizjon Kholmatov
5
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
</style>

Puede anular este estilo para el diseño

Y también puede cambiar el estilo interno del elemento EditText.

Fedor Kazakov
fuente
¿Cómo usar este estilo? ¿Hay alguna forma de anular el estilo de todas las aplicaciones en un solo lugar?
Hanzala
5
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@color/actionBar_background</item>
    <item name="colorControlActivated">@color/actionBar_background</item>
    <item name="colorControlHighlight">@color/actionBar_background</item>
    <item name="colorAccent">@color/actionBar_background</item>
    <item name="android:textColorHint">@color/actionBar_background</item>
</style>

aplicar este estilo a TextInputLayout

Komal Nikhare
fuente
2
solo una nota rápida para aplicar el estilo a TextInputLayout:android:theme="@style/EditScreenTextInputLayoutStyle"
jackycflau
5

A TextinputLayoutno es una vista, sino a Layout, como muy bien lo describe Dimitrios Tsigouris en su publicación de blog aquí . Por lo tanto, no necesita un Style, que es Viewssolo para , pero use un Theme. Después de la publicación del blog, terminé con la siguiente solución:

Empiece en su styles.xmlcon

<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="android:textColor">@color/your_colour_here</item>
        <item name="android:textColorHint">@color/your_colour_here</item>
        <item name="colorControlNormal">@color/your_colour_here</item>
        <item name="colorControlActivated">@color/your_colour_here</item>
        <item name="colorControlHighlight">@color/your_colour_here</item>
</style>

Y en tu diseño agrega

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...
Paul Spiesberger
fuente
1
Use Widget.MaterialComponents.TextInputLayout.OutlinedBox en parent
Sudip Sadhukhan