Como alterar a cor do rótulo flutuante de TextInputLayout


209

Com referência ao novo TextInputLayoutlançamento do Google, como altero a cor do texto da etiqueta flutuante?

Definindo colorControlNormal, colorControlActivated, colorControlHighLightem estilos não ajuda.

Isto é o que eu tenho agora:

Isto é o que eu tenho agora


8
Como você altera a cor da linha para vermelho?
Vlad

6
@ Vlad161 colorAccent
Kyle Horkley

@ Vlad161 poderia explicar onde você definiria colorAccent? Mudei o estilo personalizado colorAccentpara preto e a linha ainda refletia o que tenho colorControlNormalno estilo principal.
ElliotM

2
Encontrado bom exemplo aqui
Chintan Rathod

Verifique o seguinte link. Ele definiu a cor diferente para sugerir e sublinhar a cor: https://stackoverflow.com/a/45349177/3392323
SAndroidD

Respostas:


357

Experimente o código abaixo Funciona no estado normal

 <android.support.design.widget.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:theme="@style/TextLabel">

     <android.support.v7.widget.AppCompatEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:hint="Hiiiii"
         android:id="@+id/edit_id"/>

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

Na pasta Estilos, código TextLabel

 <style name="TextLabel" parent="TextAppearance.AppCompat">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

Definido para o tema principal do aplicativo, ele funciona apenas Apenas estado de destaque

 <item name="colorAccent">@color/Color Name</item>

Atualizar:

UnsupportedOperationException: não é possível converter para cor: digite = 0x2 na API 16 ou abaixo

Solução


6
Uau, estou trabalhando nisso há uma semana - voltei a essa pergunta várias vezes, você acabou de responder a todas as perguntas que já tive.
ElliotM

40
O aplicativo travou quando você definiu a mensagem de erro em TextInputLayout ou subjacente à exibição EditText:android.view.InflateException: Error inflating class TextView
Arvis

18
Cuidado, definir esse android:themeestilo TextInputLayoutresulta em InflateExceptionfalhas nos Zenphones ASUS (e possivelmente em outros dispositivos).
Friederbluemle

13
Oi nj, Desculpe por isso, eu não sei por que está acontecendo, mas eu mudei TextAppearance.AppCompat para ThemeOverlay.AppCompat.Light é bom funcionamento mesmo quando se utiliza a irregularidade definida para textinputlayout
Brahman Yamani

11
Definir pai para ThemeOverlay.AppCompat.Lightajudaram a resolver bater no meu ASUS Zenphone (@friederbluemle)
Lukasz Wiktor

103
<style name="TextAppearance.App.TextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/red</item>
    <item name="android:textSize">14sp</item>
</style>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@color/gray"  //support 23.0.0
    app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" >

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint" />
</android.support.design.widget.TextInputLayout>

16
É o mesmo que a resposta aceita, exceto com a implicação enganosa de que você precisa usar o AppCompatEditText. O AppCompatActivity usará automaticamente o AppCompatEditText para instâncias do EditText, você não precisará usá-lo especificamente.
Niall

4
A primeira linha de código acima logo após "<nome do estilo" apresenta um erro de ortografia. Eu acredito que "... TextAppearence ..." deve ser "... TextAppearance ..."
AJW

android:textColorHint="@color/gray" //support 23.0.0fiz a minha dica cor do texto visível (a cor do texto dica era preto por padrão, independentemente do conjunto de texto dica de cor I e se o fundo é preto o texto é completley escondido
Rajaraman

69

Encontrei a resposta, use o android.support.design:hintTextAppearanceatributo para definir sua própria aparência de rótulo flutuante.

Exemplo:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:hintTextAppearance="@style/TextAppearance.AppCompat">

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/prompt_password"/>
</android.support.design.widget.TextInputLayout>

Animação suave e agradável. Obrigado
Joaquin Iurchuk

Eu entendo Namespace 'android.support.design' not bound. Alguma sugestão?
Sunkas 17/06/2015

@Sunkas adicionar compile 'com.android.support:design:23.1.1'ao seu arquivo Gradle aplicativo
Ahmed Mostafa

23

Você não precisa android:theme="@style/TextInputLayoutTheme"alterar a cor da etiqueta flutuante, pois isso afetará todo o tema do pequeno TextView usado como etiqueta. Em vez disso, você pode usar app:hintTextAppearance="@style/TextInputLayout.HintText"onde:

<style name="TextInputLayout.HintText">
  <item name="android:textColor">?attr/colorPrimary</item>
  <item name="android:textSize">@dimen/text_tiny_size</item>
  ...
</style>

Deixe-me saber se a solução funciona :-)


22

como altero a cor do texto da etiqueta flutuante?

Com a biblioteca Material Components, você pode personalizar a TextInputLayoutcor do texto da dica usando (requer a versão 1.1.0)

  • No layout:

    • app:hintTextColor atributo: a cor do rótulo quando ele é recolhido e o campo de texto está ativo
    • android:textColorHint atributo: a cor do rótulo em todos os outros estados do campo de texto (como em repouso e desativado)
<com.google.android.material.textfield.TextInputLayout
     app:hintTextColor="@color/mycolor"
     android:textColorHint="@color/text_input_hint_selector"
     .../>
<style name="MyFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="hintTextColor">@color/mycolor</item>
    <item name="android:textColorHint">@color/text_input_hint_selector</item>
</style>

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

O seletor padrão para android:textColorHinté:

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


4

Ok, achei esta resposta muito útil e obrigado a todas as pessoas que contribuíram. Apenas para adicionar algo, no entanto. A resposta aceita é realmente a resposta correta ... MAS ... no meu caso, eu estava procurando implementar a mensagem de erro abaixo do EditTextwidget app:errorEnabled="true"e essa linha única dificultava minha vida. parece que isso substitui o tema escolhido android.support.design.widget.TextInputLayout, que possui uma cor de texto diferente definida por android:textColorPrimary.

No final, comecei a aplicar uma cor de texto diretamente ao EditTextwidget. Meu código é algo como isto:

styles.xml

<item name="colorPrimary">@color/my_yellow</item>
<item name="colorPrimaryDark">@color/my_yellow_dark</item>
<item name="colorAccent">@color/my_yellow_dark</item>
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:textColorSecondary">@color/dark_gray</item>
<item name="android:windowBackground">@color/light_gray</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColorHint">@color/dark_gray</item>
<item name="android:colorControlNormal">@android:color/black</item>
<item name="android:colorControlActivated">@android:color/white</item>

E meu widget:

<android.support.design.widget.TextInputLayout
        android:id="@+id/log_in_layout_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true">

        <EditText
            android:id="@+id/log_in_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="@android:color/black"
            android:ems="10"
            android:hint="@string/log_in_name"
            android:inputType="textPersonName" />
</android.support.design.widget.TextInputLayout>

Agora ele exibe a cor do texto em preto em vez do textColorPrimarybranco.


3

Sugiro que você crie um tema de estilo para TextInputLayout e altere apenas a cor de destaque. Defina pai como seu tema básico do aplicativo:

 <style name="MyTextInputLayout" parent="MyAppThemeBase">
     <item name="colorAccent">@color/colorPrimary</item>
 </style>

 <android.support.design.widget.TextInputLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:theme="@style/MyTextInputLayout">

2

Na versão mais recente da biblioteca de suporte (23.0.0+), utiliza TextInputLayouto seguinte atributo em XML para editar a cor do rótulo flutuante:android:textColorHint="@color/white"


2

Em vez da resposta de Brahmam Yamani, prefiro usar o Widget.Design.TextInputLayout como pai. Isso garante que todos os itens necessários estejam presentes, mesmo que nem todos os itens sejam substituídos. Na resposta da Yamanis, o aplicativo trava com um recurso não resolvível, se setErrorEnabled (true) for chamado.

Simplesmente mude o estilo para o seguinte:

<style name="TextLabel" parent="Widget.Design.TextInputLayout">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

1
funciona bem em Android 4.3 e 7, sem erros ao usar EditText.setError ()
Saul_programa

2

No meu caso, adicionei isso " app:hintTextAppearance="@color/colorPrimaryDark"no meu widget TextInputLayout.


Isso não funciona. error: '#FFFFFF' is incompatible with attribute hintTextAppearance
Taslim Oseni 07/07/19

1

Para alterar a cor da dica e editar a cor do sublinhado do texto: colorControlActivated

Para alterar a cor do contador de caracteres: textColorSecondary

Para alterar a cor da mensagem de erro: colorControlNormal

Para alterar a tonalidade do botão de visibilidade da senha: colorForeground

Para obter mais informações sobre o TextInputLayout, leia http://www.zoftino.com/android-textinputlayout-tutorial

<style name="MyAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorControlActivated">#e91e63</item>
    <item name="android:colorForeground">#33691e</item>
    <item name="colorControlNormal">#f57f17</item>
    <item name="android:textColorSecondary">#673ab7</item>
</style>

1

Programaticamente, você pode usar:

/* Here you get int representation of an HTML color resources */
int yourColorWhenEnabled = ContextCompat.getColor(getContext(), R.color.your_color_enabled);
int yourColorWhenDisabled = ContextCompat.getColor(getContext(), R.color.your_color_disabled);

/* Here you get matrix of states, I suppose it is a matrix because using a matrix you can set the same color (you have an array of colors) for different states in the same array */
int[][] states = new int[][]{new int[]{android.R.attr.state_enabled}, new int[]{-android.R.attr.state_enabled}};

/* You pass a ColorStateList instance to "setDefaultHintTextColor" method, remember that you have a matrix for the states of the view and an array for the colors. So the color in position "colors[0x0]" will be used for every states inside the array in the same position inside the matrix "states", so in the array "states[0x0]". So you have "colors[pos] -> states[pos]", or "colors[pos] -> color used for every states inside the array of view states -> states[pos] */
myTextInputLayout.setDefaultHintTextColor(new ColorStateList(states, new int[]{yourColorWhenEnabled, yourColorWhenDisabled})

Explicação:

Obtenha o valor da cor int a partir de um recurso de cores (uma maneira de apresentar as cores RGB usadas pelo Android). Eu escrevi ColorEnabled, mas realmente deveria ser, para esta resposta, ColorHintExpanded & ColorViewCollapsed. De qualquer forma, essa é a cor que você verá quando a dica de uma exibição "TextInputLayout" estiver no estado Expandido ou Recolhido; você o definirá usando a próxima matriz na função "setDefaultHintTextColor" da exibição. Referência: Referência para TextInputLayout - procure nesta página o método "setDefaultHintTextColor" para obter mais informações

Observando os documentos acima, você pode ver que as funções definem as cores da dica Expandida e Reduzida usando um ColorStateList.

Documentos do ColorStateList

Para criar o ColorStateList, primeiro criei uma matriz com os estados que eu quero, no meu caso state_enabled & state_disabled (cujos são, em TextInputLayout, é igual a Hint Expanded e Hint Collapsed apenas fazendo um teste]). Depois passo para o construtor do ColorStateList as matrizes com valores int dos recursos de cores, essas cores têm correspondências com a matriz de estados (cada elemento na matriz de cores corresponde à matriz respectiva na matriz de estados na mesma posição). Portanto, o primeiro elemento da matriz de cores será usado como cor para todos os estados da primeira matriz da matriz de estados (no nosso caso, a matriz possui apenas 1 elemento: estado habilitado = estado expandido da dica para TextInputLayut). As últimas coisas que os estados têm valores positivos / negativos e você tem apenas os valores positivos,

Espero que isso seja útil. Tchau, tenha uma boa codificação (:


Explicação? Estes são apenas 2 métodos: / De qualquer forma, ok, eu os adiciono rapidamente.
Z3R0 27/01

Apenas quatro linhas com muito texto - apenas explique brevemente os conceitos por trás deles e todo mundo tem um bom motivo para deixar um voto positivo :)
Nico Haase

1
Feito;) Espero que seja correto e útil. Tenha uma boa codificação: D
Z3R0 27/01

0

você deve mudar sua cor aqui

<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>

0

Agora, basta usar colorAccente colorPrimaryfuncionará perfeitamente.


4
Isso não fornece uma resposta para a pergunta. Para criticar ou solicitar esclarecimentos a um autor, deixe um comentário abaixo da postagem.
Swati

2
@Swati Esta é uma resposta para a pergunta. Estou dizendo para ele usar colorAccent e colorPrimary.
Kyle Horkley

6
Bem, é mais um comentário. Você pode ter razão se adicionar um código de exemplo.
Sufian

Na verdade, TextInputLayout adotou exatamente colorPrimaryo tema para definir a cor focalizada da dica e da linha de fundo. Embora realmente devesse ter havido alguma explicação / código para mostrá-lo nesta resposta
Kirill Starostin

0

Eu resolvo o problema. Este é o layout:

 <android.support.design.widget.TextInputLayout
           android:id="@+id/til_username"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="@string/username"
           >

           <android.support.v7.widget.AppCompatEditText android:id="@+id/et_username"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:singleLine="true"
               />
       </android.support.design.widget.TextInputLayout>

Este é o estilo:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>
<!-- Application theme. -->


 <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="colorAccent">@color/pink</item>
        <item name="colorControlNormal">@color/purple</item>
        <item name="colorControlActivated">@color/yellow</item>
    </style>

Você deve usar seu tema no aplicativo:

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
</application>

0

para mudar a cor do rótulo do texto quando você estiver focando nele. ou seja, digitando nele. você tem que adicionar especificar

<item name="android:textColorPrimary">@color/yourcolorhere</item>

Apenas uma observação: você precisa adicionar todas essas implementações ao seu tema principal.


0

Está funcionando para mim ..... adicione cor de dica em TextInputLayout

    <android.support.design.widget.TextInputLayout
        android:textColorHint="#ffffff"
        android:id="@+id/input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/edtTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:singleLine="true"
            />
    </android.support.design.widget.TextInputLayout>

0

Eu tentei usar android: textColorHint no android.support.design.widget.TextInputLayout funciona bem.

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColorHint="@color/colorAccent">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Hello"
                android:imeActionLabel="Hello"
                android:imeOptions="actionUnspecified"
                android:maxLines="1"
                android:singleLine="true"/>

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

0
  <style name="AppTheme2" parent="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlActivated">#fff</item></style>    

adicione isso aos estilos e defina o TextInputLayout Theam como App2 e ele funcionará;)


0
<com.google.android.material.textfield.TextInputLayout
    android:hint="Hint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TextInputLayoutHint">

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:maxLines="1"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_5sdp"
        android:textColor="#000000"
        android:textColorHint="#959aa6" />

</com.google.android.material.textfield.TextInputLayout>

res / valores / styles.xml

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">#545454</item>
    <item name="colorControlActivated">#2dbc99</item>
    <item name="android:textSize">11sp</item>
</style>

0

Pode usar app:hintTextColorse você usar com.google.android.material.textfield.TextInputLayout, tente isso

 <com.google.android.material.textfield.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="@string/app_name" 
     app:hintTextColor="@android:color/white">                   

     <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
 </com.google.android.material.textfield.TextInputLayout>

0

Experimente o código abaixo Funciona no estado normal

<android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/TextLabel">

 <android.support.v7.widget.AppCompatEditText
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="Hiiiii"
     android:id="@+id/edit_id"/>


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

Na pasta Estilos, código TextLabel

 <style name="TextLabel" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">@color/Color Name</item> 
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">@color/Color Name</item>
<item name="colorControlNormal">@color/Color Name</item>
<item name="colorControlActivated">@color/Color Name</item>
 </style>

0

A partir da documentação:

A dica deve ser definida no TextInputLayout, em vez do EditText. Se uma dica for especificada no EditText filho em XML, o TextInputLayout ainda poderá funcionar corretamente; TextInputLayout usará a dica do EditText como seu rótulo flutuante. No entanto, chamadas futuras para modificar a dica não atualizarão a dica do TextInputLayout. Para evitar comportamento não intencional, chame setHint (CharSequence) e getHint () em TextInputLayout, em vez de em EditText.

Então eu definir android:hinte app:hintTextColorsobre TextInputLayout, e não sobre TextInputEditTexte funcionou.


0

Porque você deve adicionar colorControlNormal, colorControlActivated, colorControlHighLightitens para o tema principal da aplicação:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlActivated">@color/yellow_bright</item>
        <item name="colorControlNormal">@color/yellow_black</item>

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