style - textinputlayout android
cómo cambiar el color de la etiqueta de TextinputLayout y editar texto subrayar android (9)
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
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.
Agregue este atributo en la etiqueta Edittext y disfrute:
android:backgroundTint="@color/colorWhite"
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:
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" ...>
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));
}
}
});
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).
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" ...
<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
<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.