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.