Cambie el color de la pista EditText cuando use TextInputLayout


146

Estoy usando lo nuevo TextInputLayoutde la biblioteca de diseño. Puedo hacer que se muestre y cambiar el color de la etiqueta flotante. Desafortunadamente, la EditTextpista real ahora es siempre blanca.

Intenté cambiar el hintColor en XML, estilos y mediante programación y también intenté usar el android.support.v7.widget.AppCompatEditText pero el EditTextconsejo siempre muestra blanco.

Aquí está mi XML para mi TextInputLayoutyEditText

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

Y aquí está el estilo que estoy usando para TextInputLayout(intenté hacer que el hintTextColoratributo fuera negro pero no hice nada por mí):

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

Estoy enfrentando el mismo error. La sugerencia siempre es el color "BLANCO" inicialmente después de tocar cualquier texto de edición, toma el color definido por usted. Todavía estoy buscando la solución.
ch3tanz

¿Has probado la respuesta de @Ali Kabiri? Parece que es una solución mejor que la mía. La mía fue muy específica para mi proyecto.
SamIAmHarris

Tengo mi tema personalizado y todos los colores están definidos en style.xml
ch3tanz

Respuestas:


164

Defina android:textColorHinten el tema de su aplicación:

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

Fuente


@TheHungryAndroider ¿estableció el tema como tema de acitvity donde usa el texto de edición?
mbelsky

1
Funciona para mí, pero el color de la pista no está configurado en la creación de fragmentos y vistas, tengo que hacer clic en mi EditTextpara que el color de la pista se configure en todas las entradas dentro de la vista ... todavía no he encontrado ninguna solución ( requestFocus()y performClick()no hagas el truco desafortunadamente).
flawyte

1
funcionaba cuando se usaba 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 = " sugerencia text "android: textColorHint =" # 919389 "/>
masoud Cheragee

75

Crear estilo personalizado en 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>

Luego, en su archivo xml de diseño, agregue el atributo de tema como se muestra a continuación

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


44
Mostrando "Error al inflar la clase EditText". Por favor ayuda !
Mohit Khaitan

@Coder algunos de los atributos que agregó son para
mayores


41

Tengo el mismo problema. Se resolvió poniendo estas líneas en el tema principal .

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

Si pones estos

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

en un estilo separado y aplicarlo a TextInputLayout o Edittext no aparecerá. Usted TIENE que colocarlo en el tema de los padres de aplicación.


3
Es realmente frustrante no poder tener múltiples estilos de entrada en la aplicación usando este widget, pero por lo que puedo decir, tienes razón. : /
Turnsole

44
Bueno, no es necesario tenerlo en toda la aplicación. Puede aplicar este tema solo a una actividad en su archivo de manifiesto. Y cree otro tema para el resto de sus actividades.
RexSplode

23

No estoy seguro de qué causa su problema, este código funciona perfectamente para mí. Creo que tiene algo que ver con el uso del espacio de nombres xml correcto ( xmlns). No estoy seguro si se admite el uso de android.support.design sin el atributo de espacio de nombres xml. O tiene algo que ver con el textColorHintatributo que está utilizando en el propio EditText.

Diseño:

<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
Esto todavía funciona como lo que tengo. El problema que tengo es que antes de que el usuario toque EditText, el color EditText es blanco. Cuando el usuario toca EditText, la etiqueta TextInputLayout es verde y funciona bien.
SamIAmHarris

mismo problema aquí @ user3520299, ¿tuvo suerte de encontrar una solución?
AhmedW 01 de

El mío fue un caso único porque la vista principal tenía un conjunto de temas que causaba el problema. Pero el código que puse funciona bien ahora después de que
eliminé

1
Esto funciona para la sugerencia flotante, pero no para la sugerencia dentro del control EditText vacío. Para eso, actualice el tema de la aplicación según la respuesta de @ mbelsky
Richard Le Mesurier,

Por cierto, la aplicación por defecto: el estilo es hintTextAppearance @style/TextAppearance.Design.Hint, lo que podría querer usar eso como su parentlugar de @android:style/TextAppearanceo@style/TextAppearance.AppCompat
rockgecko

19

Consulte el siguiente código que funcionó para mí, pero afectará el color de todos sus 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>

Esto debe aceptarse: muestra qué propiedades se utilizan para cada uno de los elementos que son importantes.
Richard Le Mesurier

15

En el TextInputLayout que contiene EditText, agregue:

android:textColorHint="someColor"

14

Muchas respuestas pero solo necesitan una línea para esto:

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" a veces funciona y a veces no. Para mí, la solución a continuación funciona perfectamente

Pruebe el siguiente código: funciona en su archivo XML y el tema TextLabel se define en 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>

En la carpeta de estilos TextLabel Code

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

Si solo desea cambiar el color de la etiqueta en estado falso, no se requieren colorAccent, colorControlNormal y colorControlActivated


10

Puedes usarlo android:textColorHint="@color/color_black"adentro TextInputlayoutFuncionó para mí.

<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 acuerdo con esto: https://code.google.com/p/android/issues/detail?id=176559

Prueba esto:

<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 en 23.1.1.


6

Con la biblioteca de Componentes de material puede personalizar el TextInputLayoutcolor del texto de la sugerencia usando:

  • En el diseño:

    • app:hintTextColor atributo: el color de la etiqueta cuando se contrae y el campo de texto está activo
    • android:textColorHint atributo: el color de la etiqueta en todos los demás estados de campo de texto (como en reposo y deshabilitado)

Algo como:

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

ingrese la descripción de la imagen aquíingrese la descripción de la imagen aquí


5

Parece que la vista principal tenía un estilo para una biblioteca de terceros que causaba que EditText fuera blanco.

android:theme="@style/com_mixpanel_android_SurveyActivityTheme"

Una vez que eliminé esto, todo funcionó bien.


5

intente esto puede esto ayudar

      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 qué lo pusiste en OnTextChanged oyente?
usuario25

5

tarde pero puede ayudar a alguien que he hecho así

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

cambia tu colorAccent a tu color deseado dentro de tu tema, esto cambiará tu línea EditText, cursor y tu pista

o también puede incluir este estilo dentro de su 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>

entonces dentro de su TextInputLayout puede ponerlo así

<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 establecer el color que desea como color de Sugerencia para EditText. La cuestión es que la Sugerencia en EditText desaparece no cuando escribe algo, sino inmediatamente cuando EditText se enfoca (con una animación genial). Notarás esto claramente cuando cambies el foco y pases al EditText.


3

De la documentación:

La sugerencia debe establecerse en TextInputLayout, en lugar de EditText. Si se especifica una pista en el EditText secundario en XML, TextInputLayout aún podría funcionar correctamente; TextInputLayout utilizará la sugerencia de EditText como etiqueta flotante. Sin embargo, las futuras llamadas para modificar la sugerencia no actualizarán la sugerencia de TextInputLayout. Para evitar comportamientos no deseados, llame a setHint (CharSequence) y getHint () en TextInputLayout, en lugar de en EditText.

Intente configurar android:hinty activar app:hintTextColoren TextInputLayoutlugar de activar 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

Prueba el siguiente código:

El color de la luz alta es blanco:

 <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

Aquí está mi experiencia con este problema similar y la solución requerida.

Requisito:

  • Necesita crear personalización TextInputEditText(puede decir que algunos deberían ser transparentes y otros no, pero usar colores personalizados para varios eventos)

Problema enfrentado:

  • android:textColorHint No funciona como se requiere.

Soluciones probadas, que fallaron:

  • Usado android:textColorHinten estilo y aplicado a TextInputEditText. Sin resultados ni diferencia.
  • Establecer android:textColorHinten el tema de la aplicación aplicada. Ayudó, pero ahora estaba configurado para toda la aplicación. (No cumple con los requisitos)

Después de una gran cantidad de RnD, la mejor solución era encontrado en un artículo que describía que tenemos que aplicar el tema a TextInputLayouto a ella de vista padre en lugar de solamente aplicar estilo aTextInputEditText o a ella de vista padre.

Por favor, compruebe el tema apropiado de TextInputLayout, que nos dice cómo estamos en el camino equivocado.


0

Cuando intenté establecer el atributo del tema en TextInputLayout, el tema también se estaba aplicando a su vista de edición de texto secundario, lo que no quería.

Entonces, la solución que funcionó para mí fue agregar un estilo personalizado a la propiedad "app: hintTextAppearance" de TextInputLayout.

En styles.xml agregue el siguiente 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>

Y aplique este estilo a la propiedad "app: hintTextAppearance" de TextInputLayout como se muestra a continuación:

<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

Si está utilizando la nueva biblioteca de diseño de materiales androidx com.google.android.material , puede usar colorstatelist para controlar el color del texto de la sugerencia en el estado enfocado, suspendido y predeterminado de la siguiente manera. (inspirado por esto )

En res/color/text_input_box_stroke.xmlponer algo como lo siguiente:

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

Entonces en tu styles.xmlpondrías:

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

Finalmente, indique su estilo en el real. TextInputLayout Por alguna razón, también debe establecer el android:textColorHintcolor de texto predeterminado de la pista:

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

0

si está utilizando la biblioteca de diseño de materiales. Actualmente estoy usando la versión

implementación 'com.google.android.material: material: 1.3.0-alpha01'

1 - Establecer color cuando TextInputLayout está en reposo.

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

2 - Establecer color cuando TextInputLayout es flotante / enfocado / girado.

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

3 - Establecer el color de la línea en TextInputLayout.

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

4 - Establecer el color del error en TextInputLayout.

<item name="boxStrokeErrorColor">@color/colorPrimary</item>

0

Solo quería cambiar el color de la etiqueta cuando se levanta hacia arriba. Pero la configuración textColorHintcambia el color en todos los estados. Entonces, esto funcionó para mí:

   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       ...
        <item name="colorControlActivated">@color/colorPrimary</item>
       ...
    </style>

Esto cambiará el color cuando la entrada esté enfocada.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.