style - textinputlayout android

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

Question

Estoy usando TextinputLayout la biblioteca de diseño de TextinputLayout . Pero no se pudo personalizar el color de la pista, el color de la etiqueta y el color de subrayado de EditText dentro de TextinputLayout . Por favor ayuda.

Answer 1

Para cambiar el color de la línea de fondo, puede usar esto en el tema de su aplicación:

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

Para cambiar el color de la etiqueta flotante

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

y úsalo como:

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

Actualizar:
Y úselo como a continuación, si desea cambiar el color de la pista, cuando no es una etiqueta flotante:

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

Gracias a @AlbAtNf

Answer 2

Agregue este atributo en la etiqueta Edittext y disfrute:

 android:backgroundTint="@color/colorWhite"

Answer 3

Basado en las respuestas de Fedor Kazakov y otros, 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>

Enfocado:

Sin foco:

Mensaje de error:

Answer 4

Con la Biblioteca de componentes de material puede usar com.google.android.material.textfield.TextInputLayout .

Puede aplicar un estilo personalizado para cambiar los colores.

Para cambiar el color de la pista , debe usar estos atributos:
hintTextColor y android:textColorHint .

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

Deberías usar un selector para android:textColorHint . Algo como:

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

Para cambiar el color de la línea inferior , debe usar 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ías usar 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>

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" ...>

Answer 5

Esta publicación de blog describe varios aspectos de estilo de EditText y AutoCompleteTextView envueltos por TextInputLayout .

Para EditText y AppCompat lib 22.1.0+ puede establecer el atributo del tema con algunas configuraciones relacionadas 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"

Para AutoCompleteTextView cosas son más complicadas porque envolverlo en TextInputLayout y aplicar este tema interrumpe el comportamiento de la etiqueta flotante. Necesita 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));
        }
    }
});

Answer 6

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

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

Luego aplíquelo a su TextInputLayout como tema :

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

Esto básicamente establece un tema (no estilo) en una vista (en oposición a toda la actividad).

Answer 7

Un TextinputLayout no es una vista, sino un Layout , como lo describe muy bien Dimitrios Tsigouris en su publicación de blog aquí . Por lo tanto, no necesita un Style , que es solo para Views , sino que usa un Theme . Después de la publicación del blog, terminé con la siguiente solución:

Comience en su styles.xml con

<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 su diseño agregue

<com.google.android.material.textfield.TextInputLayout android:theme="@style/TextInputLayoutAppearance" ...

Answer 8

<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

Answer 9

<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 también.