Alterar a cor da dica EditText ao usar TextInputLayout


146

Estou usando o novo TextInputLayoutda biblioteca de design. Eu consigo mostrar e alterar a cor da etiqueta flutuante. Infelizmente, a EditTextdica real agora é sempre branca.

Tentei alterar o hintColor em XML, estilos e programaticamente e também tentei usar o android.support.v7.widget.AppCompatEditText mas a EditTextdica sempre mostra branco.

Aqui está o meu XML para o meu TextInputLayouteEditText

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


    <EditText

    android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/city"
        android:textColorHint="@color/black"
        android:hint="@string/city" />

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

E aqui está o estilo que estou usando para TextInputLayout(tentei tornar o hintTextColoratributo preto, mas não fiz nada por mim):

<style name="GreenTextInputLayout" parent="@style/TextAppearance.AppCompat">
    <item name="android:textColor">@color/homestory_green</item>
</style>

Estou enfrentando o mesmo erro. A dica é sempre a cor "BRANCA" inicialmente depois de tocar em qualquer texto de edição; ela assume a cor definida por você. Ainda procurando a correção.
ch3tanz

Você já tentou a resposta de @Ali Kabiri. Parece que é uma solução melhor que a minha. O meu era muito específico para o meu projeto.
SamIAmHarris

Eu tenho o meu tema personalizado e todas as cores são definidas na style.xml
ch3tanz

Respostas:


164

Defina android:textColorHintno seu tema do aplicativo:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>

    <item name="android:textColorHint">@color/secondary_text</item>
</style>

Fonte


@TheHungryAndroider você definiu o tema como tema da acitvity onde usa o texto de edição?
mbelsky

1
Funciona para mim, mas a cor da dica não está definida na criação de fragmentos e visualizações, preciso clicar no meu EditTextpara que a cor da dica seja definida em todas as entradas da visualização ... ainda não encontrei nenhuma correção para isso ( requestFocus()e performClick()infelizmente não faça o truque).
flawyte

1
funcionou quando usado como atributo: <EditText android: inputType = "textMultiLine" android: lines = "4" android: gravity = "top | right" android: layout_width = "fill_parent" android: layout_height = "match_parent" android: hint = " dica texto "android: textColorHint =" # 919389 "/>
masoud Cheragee 13/06

75

Crie um estilo personalizado em style.xml

<style name="EditTextHint" parent="TextAppearance.AppCompat">
    <item name="colorAccent">@android:color/white</item>
    <item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
    <item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
    <item name="colorControlActivated">@color/your color</item>
    <item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>
</style>

Em seguida, no seu arquivo xml de layout, adicione o atributo theme como abaixo

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

      <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

espero que isso funcione


4
Mostrando "Erro ao inflar a classe EditText". Por favor ajude !
Mohit Khaitan

@Coder alguns dos atributos que ele adicionados são para 21+
Mr.O

49

Adicione a propriedade textColorHint ao seu texto de edição

android:textColorHint="#F6F6F6"

ou a cor que você quiser


41

tenho o mesmo problema. Resolvido colocando essas linhas no tema pai .

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/ColorPrimaryDark</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    <item name="colorAccent">@color/AccentColor</item>
    <item name="android:windowTranslucentStatus">true</item>

    <item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
    <item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
    <item name="colorControlActivated">#ff0000</item>
    <item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>
    <!-- Customize your theme here. -->
</style>

Se você colocar estes

<item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
<item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
<item name="colorControlActivated">#ff0000</item>
<item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>

em um estilo separado e aplicá-lo a TextInputLayout ou Edittext, ele não aparecerá. Você TER para colocá-lo no tema pai do aplicativo.


3
É realmente frustrante não poder ter vários estilos de entrada no aplicativo usando esse widget, mas, pelo que sei, você está certo. : /
Turnsole 19/10/2015

4
Bem, não é necessário tê-lo em toda a aplicação. Você pode aplicar esse tema apenas a uma atividade no seu arquivo de manifesto. E crie outro tema para o restante de suas atividades.
RexSplode

23

Não sei ao certo o que causa o problema, coloque este código perfeitamente para mim. Eu acho que tem algo a ver com o uso correto do namespace xml ( xmlns). Não sei se é possível usar o android.support.design sem o atributo de espaço para nome xml. Ou tem algo a ver com o textColorHintatributo que você está usando no próprio EditText.

Layout:

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

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="test"
        android:inputType="text" />
</android.support.design.widget.TextInputLayout>

Estilo:

<style name="GreenTextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

2
Isso ainda funciona como o que eu tenho. O problema que estou tendo é que, antes que o usuário toque no EditText, a cor do EditText é branca. Quando o usuário toca no EditText, o rótulo TextInputLayout fica verde e funciona bem.
SamIAmHarris

mesmo problema aqui @ user3520299, alguma sorte em encontrar uma correção?
AhmedW

O meu foi um caso único, porque a visualização principal tinha um conjunto de temas que estava causando o problema. Mas o código eu coloquei funciona bem agora, depois eu removi que um tema
SamIAmHarris

1
Isso funciona para a dica flutuante, mas não a dica dentro do controle EditText vazio. Para isso, atualizar o tema aplicação de acordo de @ mbelsky resposta
Richard Le Mesurier

By the way, o aplicativo padrão: estilo hintTextAppearance é @style/TextAppearance.Design.Hint, então você pode querer usar isso como a sua parentvez de @android:style/TextAppearanceou@style/TextAppearance.AppCompat
rockgecko

19

Consulte o código abaixo que funcionou para mim. Mas isso afetará todas as cores de seus controles.

 <!-- In your style.xml file -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
            <!--EditText hint color-->
            <item name="android:textColorHint">@color/default_app_white</item>
           <!-- TextInputLayout text color-->
            <item name="colorControlActivated">@color/default_app_green</item>
            <!-- EditText line color when EditText on-focus-->
            <item name="colorControlHighlight">@color/default_app_green</item>
            <!-- EditText line color when EditText  in un-focus-->
            <item name="colorControlNormal">@color/default_app_white</item>
        </style>

Isso deve ser aceito - mostra quais propriedades são usadas para cada um dos elementos importantes.
Richard Le Mesurier

15

No TextInputLayout que contém o EditText, adicione:

android:textColorHint="someColor"

14

Muitas respostas, mas precisam apenas de uma linha para isso:

android: textColorHint = "# 000000"

    <EditText
        android:id="@+id/edtEmail"
        android:textColorHint="#000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

10

android: textColorHint = "# FFFFFF" algumas vezes funciona e outras não. Para mim, a solução abaixo funciona perfeitamente

Experimente o código abaixo Funciona No seu arquivo XML e o tema TextLabel é definido em style.xml

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

     <EditText
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:hint="Floating Label"
         android:id="@+id/edtText"/>

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

Na pasta Estilos, código TextLabel

 <style name="MyTextLabel" parent="TextAppearance.AppCompat">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
<!--The size of the text appear on label in false state -->
    <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>

Se você apenas deseja alterar a cor do rótulo em estado falso, colorAccent, colorControlNormal e colorControlActivated não são necessários


10

Você pode usar por android:textColorHint="@color/color_black"dentro TextInputlayoutFuncionou para mim.

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_10"
                android:textColorHint="@color/color_black"
                app:hintTextAppearance="@style/TextLabel">

                <EditText
                    android:id="@+id/et_state"
                    style="@style/profile_editTextStyle"

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

8

De acordo com isso: https://code.google.com/p/android/issues/detail?id=176559

Tente o seguinte:

<android.support.design.widget.TextInputLayout
    android:textColorHint="#A7B7C2"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <EditText
        android:id="@+id/et_confirm_password"
        android:textColor="@android:color/black"
        android:hint="Confirm password"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 </android.support.design.widget.TextInputLayout>

Funciona em 23.1.1


6

Com a biblioteca Material Components, você pode personalizar a TextInputLayoutcor do texto da dica usando:

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

Algo como:

<com.google.android.material.textfield.TextInputLayout
     app:hintTextColor="@color/mycolor"
     android:textColorHint="@color/text_input_hint_selector"
     .../>

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


5

Parece que a exibição pai tinha um estilo para uma biblioteca de terceiros que estava causando o EditText em branco.

android:theme="@style/com_mixpanel_android_SurveyActivityTheme"

Depois que eu removi isso tudo funcionou bem.


5

tente isso pode ajudar

      edittext.addTextChangedListener(new  TextWatcher() {

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            // TODO Auto-generated method stub
            Toast.makeText(getApplicationContext(), "onTextChanged", 2000).show();;
            //newuser.setTextColor(Color.RED);
            edittext.setHintTextColor(Color.RED);

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable s) {
            // TODO Auto-generated method stub
            Toast.makeText(getApplicationContext(), "afterTextChanged", 2000).show();;

        }
    });

por que você o colocou no ouvinte onTextChanged?
USER25

5

tarde, mas pode ajudar alguém que fiz assim

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="30dp"
        android:layout_marginStart="30dp"
        android:textColorHint="#8cffffff">

        <android.support.v7.widget.AppCompatEditText
            android:id="@+id/email_edit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/security_email"
            android:inputType="textEmailAddress"
            android:textColor="@color/white"
            app:backgroundTint="#8cffffff" />
    </android.support.design.widget.TextInputLayout>

4
<item name="colorAccent">@android:color/black</item>

mude sua colorAccent para a cor desejada dentro do seu Tema, isso mudará sua linha EditText, Cursor e sua dica

ou você também pode incluir esse estilo em seu style.xml

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

então dentro do TextInputLayout você pode colocar assim

<android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TextLabel">
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/password"
                android:drawableStart="@drawable/password"
                android:maxLines="1"
                android:hint="password"
                android:inputType="textWebPassword" />

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

3
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name"
                android:textColor="@color/black"
                android:textColorHint="@color/grey"/>
        </android.support.design.widget.TextInputLayout>

Use textColorHint para definir a cor que você deseja como a cor Dica para o EditText. O problema é que a dica no EditText desaparece não quando você digita alguma coisa, mas imediatamente quando o EditText fica em foco (com uma animação interessante). Você notará isso claramente quando mudar o foco para o EditText.


3

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.

Tente configurar android:hinte ativar app:hintTextColorem TextInputLayoutvez de ativar TextInputEditText.



1
 <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_passdword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="#d3d3d3">
        <EditText
            android:id="@+id/etaddrfess_ciwty"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="50dp"
            android:fontFamily="@font/frutiger"
            android:gravity="start"
            android:hint="@string/address_city"
            android:padding="10dp"
            android:textColor="#000000"
            android:textColorHint="#000000"
            android:textSize="14sp"
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />
    </android.support.design.widget.TextInputLayout>``

0

Experimente o código abaixo:

A cor clara é branca:

 <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_mobile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/TextStyle"
        >

        <EditText
            android:id="@+id/input_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:drawablePadding="14dp"
            android:drawableLeft="8dp"
            android:textColor="@color/white"
            android:hint="Mobile" />
    </android.support.design.widget.TextInputLayout>

estilo: TextStyle

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

0

Aqui está minha experiência com esse problema semelhante e a solução necessária.

Requerimento:

  • Precisa criar personalização TextInputEditText(pode-se dizer que algumas devem ser transparentes e outras não, mas use cores personalizadas para vários eventos)

Problema enfrentado:

  • android:textColorHint não está funcionando conforme necessário.

Soluções tentadas, que falharam:

  • Usado android:textColorHintcom estilo e aplicado TextInputEditText. Nenhum resultado ou diferença.
  • Defina android:textColorHinto tema do aplicativo aplicado. Ajudou, mas agora estava definido para todo o aplicativo. (Não cumpre os requisitos)

Depois de muito RnD, a melhor SOLUÇÃO encontrada foi em um artigo que descreveu que precisamos aplicar o tema à TextInputLayoutvista principal ou à vista principal, em vez de aplicar estilo à TextInputEditTextvista principal ou à vista principal.

Por favor, verifique o TextInputLayout adequado Theming, que disse que estamos no caminho errado.


0

Quando tentei definir o atributo do tema para TextInputLayout, o tema também estava sendo aplicado ao seu edittext filho, que eu não queria.

Portanto, a solução que funcionou para mim foi adicionar um estilo personalizado à propriedade "app: hintTextAppearance" do TextInputLayout.

No styles.xml, adicione o seguinte estilo:

<style name="TextInputLayoutTextAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/text_color</item>
    <item name="android:textSize">@dimen/text_size_12</item>
</style>

E aplique esse estilo à propriedade "app: hintTextAppearance" do TextInputLayout como abaixo:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/mobile_num_til"
        android:layout_width="0dp"
        android:layout_height="@dimen/dim_56"
        app:layout_constraintStart_toStartOf="@id/title_tv"
        app:layout_constraintEnd_toEndOf="@id/title_tv"
        app:layout_constraintTop_toBottomOf="@id/sub_title_tv"
        android:layout_marginTop="@dimen/dim_30"
        android:padding="@dimen/dim_8"
        app:hintTextAppearance="@style/TextInputLayoutTextAppearance"
        android:background="@drawable/rect_round_corner_grey_outline">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/mobile_num_et"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="@string/mobile_number"
            android:gravity="center_vertical"
            android:background="@android:color/transparent"/>

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

0

Se você estiver usando a nova biblioteca de design de materiais androidx com.google.android.material , poderá usar o colorstatelist para controlar a cor do texto da dica nos estados focalizado, suspenso e padrão da seguinte maneira. (inspirado por isso )

Em res/color/text_input_box_stroke.xmlcolocar algo como o seguinte:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#fcc" android:state_focused="true"/>
    <item android:color="#cfc" android:state_hovered="true"/>
    <item android:color="#ccf"/>
</selector>

Então no seu styles.xmlvocê colocaria:

<style name="MtTILStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
    <item name="hintTextColor">@color/text_input_box_stroke</item>
</style>

Por fim, indique seu estilo no real. TextInputLayout Por algum motivo, você também precisa definir android:textColorHinta cor do texto padrão da dica:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/my_layout_id"
    style="@style/LoginTextInputLayoutStyle"
    android:textColorHint="#ccf"
    ...

0

se você estiver usando a biblioteca de design de materiais. Atualmente, estou usando a versão

implementação 'com.google.android.material: material: 1.3.0-alpha01'

1 - Defina a cor quando o TextInputLayout estiver em repouso.

<item name="android:textColorHint">@color/your_color_hint</item>

2 - Defina a cor quando o TextInputLayout estiver flutuando / focado / tocado.

<item name="hintTextColor">@color/your_color_floating_hint</item>

3 - Defina a cor da linha em TextInputLayout.

<item name="boxStrokeColor">@color/TextViewColor_line</item>

4 - Defina a cor do erro em TextInputLayout.

<item name="boxStrokeErrorColor">@color/colorPrimary</item>
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.