como alterar a cor do rótulo de TextinputLayout e editar texto sublinhado android


120

Estou usando a biblioteca de design do Android TextinputLayout. Mas não foi possível personalizar a cor da dica, a cor do rótulo e a cor do sublinhado de EditTextdentro TextinputLayout. Por favor ajude.


1
Deve ter a cor de destaque de acordo com as diretrizes de design, certo?
— Raghunandan

sim, mas terei muitos editTexts com cores diferentes da cor de destaque do tema.
— Nitesh Verma


Verifique minha resposta aqui para alterar a cor do rótulo
— Summved Jain

Eu poderia alterar o sublinhado de forma confiável no estado focado e desfocado usando o drawable de plano de fundo personalizado especificado em stackoverflow.com/a/36543554/2413303
— EpicPandaForce

Respostas:


256

Alterar a cor da linha inferior:

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

Para mais informações, verifique este tópico .

Alterar a cor da dica quando ela estiver flutuando

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

e use-o assim:

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

Altere a cor da dica quando não for um rótulo flutuante:

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

Obrigado a @AlbAtNf


Não consigo alterar a cor da dica (quando não é o rótulo). Você pode ajudar?
— Nitesh Verma

Estou realmente preocupado com o tamanho do meu aplicativo, considerando que, alguma ideia de quanto tamanho de adição se espera colocar no meu aplicativo?
— Nitesh Verma

desculpe, não recebi sua pergunta, explique mais, tamanho em que contexto, tamanho dos gráficos do peso do aplicativo (como o apk é acima de 20 MB ou algo assim), e antes você aceita minha resposta e novamente remove sua aceitação, posso perguntar , sim?
— Pankaj Arora

becoz, não consegui alterar a cor da dica após sua resposta. Parte disso funcionou para mim, mas esta não é a solução completa para o que eu perguntei. Com relação ao tamanho do aplicativo, adicionar biblioteca externa como Material EdiTText aumenta o tamanho do aplicativo?
— Nitesh Verma

4
@NiteshVerma encontrou a solução para definir Hint Color, quando não é uma etiqueta flutuante: basta definir android:textColorHintcomo TextInputLayoutem XML.
— AlbAtNf

30

Com base nas respostas de Fedor Kazakov e outros, criei uma configuração padrão.

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>

Focado:

Focado

Sem foco:

Sem foco

Mensagem de erro:

insira a descrição da imagem aqui


8
O que devo fazer para obter a cor rosa também no exemplo "Sem foco"?
— John Smith

como usar esse estilo?
— Hanzala

23

Com a Biblioteca de Componentes de Materiais, você pode usar o com.google.android.material.textfield.TextInputLayout.

Você pode aplicar um estilo personalizado para alterar as cores.

Para alterar a cor da dica, você deve usar estes atributos:
hintTextColore 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>

Você deve usar um seletor para o 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 alterar a cor da linha de fundo você tem que usar o atributo: boxStrokeColor.

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

Também neste caso você deve usar um seletor. 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>

insira a descrição da imagem aqui insira a descrição da imagem aqui

Você também pode aplicar estes atributos em seu layout:

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

1
Como alterar a cor de sublinhado de EditText dentro de TextinputLayout? Quero dizer estado fora de foco. É acinzentado
— Evgenii Vorobei

@EvgeniiVorobei É descrito na resposta. É definido pelo boxStrokeColor. No exemplo, selector_stroke_colorem particular a última linha:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
— Gabriele Mariotti

Muito obrigado! Eu não conseguia descobrir por mim mesma.
— Evgenii Vorobei

19

Adicione este atributo na tag Edittext e aproveite:

 android:backgroundTint="@color/colorWhite"

5
efeito: muda a cor da linha em dispositivos com API de nível 21 e acima
— Someone Somewhere

17

Esta postagem do blog descreve vários aspectos de estilo EditTexte AutoCompleteTextViewabrangidos por TextInputLayout.

Para EditTexte AppCompat lib 22.1.0+, você pode definir o atributo do tema com algumas configurações relacionadas ao 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>

e aplicá-los em EditText:

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

Pois as AutoCompleteTextViewcoisas são mais complicadas porque envolvê-lo TextInputLayoute aplicar este tema quebra o comportamento do rótulo flutuante. Você precisa corrigir isso no código:

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

e em 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));
        }
    }
});

8

Se você quiser alterar a cor da barra / linha e a cor do texto de dica do TextInputLayout(qual é a cor de destaque normalmente), basta criar este estilo:

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

Em seguida, aplicá-lo para o seu TextInputLayoutcomo um tema :

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

Isso basicamente define um tema (não estilo) para uma visualização (em oposição a toda a atividade).


Seu Min SDK deve 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>

Você pode substituir este estilo para o layout

E você também pode alterar o estilo interno do item EditText.


como usar esse estilo? existe alguma maneira de substituir o estilo de todos os aplicativos em um só 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>

aplique este estilo a TextInputLayout


2
apenas uma nota rápida para aplicar o estilo ao TextInputLayout:android:theme="@style/EditScreenTextInputLayoutStyle"
— jackycflau

5

A TextinputLayoutnão é uma visão, mas a Layout, como muito bem descrito por Dimitrios Tsigouris em sua postagem do blog aqui . Portanto, você não precisa de um Style, que é Viewsapenas para uso, mas use um Theme. Após a postagem no blog, acabei com a seguinte solução:

Comece no seu styles.xmlcom

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

E em seu layout, adicione

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

1
Use Widget.MaterialComponents.TextInputLayout.OutlinedBox no pai
— Sudip Sadhukhan
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.