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.