Изменить цвет подсказки EditText при использовании TextInputLayout

146

Я использую новый TextInputLayoutиз библиотеки дизайна. Я могу заставить его показать и изменить цвет плавающей метки. К сожалению фактическийEditText намек теперь всегда белый.

Я попытался изменить hintColor в XML, стилях и программно, а также попытался использовать, android.support.v7.widget.AppCompatEditText но EditTextподсказка всегда показывает белый цвет.

Вот мой XML для моего TextInputLayoutиEditText

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

И вот стиль, который я использую для TextInputLayout(я пытался сделать hintTextColorатрибут черным, но ничего не сделал для меня):

<style name="GreenTextInputLayout" parent="@style/TextAppearance.AppCompat">
    <item name="android:textColor">@color/homestory_green</item>
</style>
SamIAmHarris
источник
Я сталкиваюсь с той же ошибкой. Подсказка всегда изначально имеет «БЕЛЫЙ» цвет после касания любого editText, она принимает цвет, определенный вами. Все еще ищу исправление.
ch3tanz
Вы пробовали ответ @Ali Kabiri. Похоже, это лучшее решение, чем мое. Мой был очень специфичен для моего проекта.
SamIAmHarris
У меня есть пользовательская тема, и все цвета определены в style.xml
ch3tanz

Ответы:

164

Определите android:textColorHintв своей теме приложения:

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

Источник

mbelsky
источник
@TheHungryAndroider Вы установили тему в качестве темы acitvity, где вы используете текст редактирования?
mbelsky
1
Это работает для меня, но цвет подсказки не устанавливается при создании фрагмента и представления, я должен щелкнуть по моей кнопке, EditTextчтобы установить цвет подсказки для всех входов в представлении ... еще не нашел никакого исправления для этого ( requestFocus()и performClick()не делай трюк к сожалению).
flawyte
1
работает, когда используется как атрибут: <EditText android: inputType = "textMultiLine" android: lines = "4" android: gravity = "top | right" android: layout_width = "fill_parent" android: layout_height = "match_parent" android: hint = " подсказка к тексту "android: textColorHint =" # 919389 "/>
Масуд Чераджи
75

Создать собственный стиль в 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>

Затем в свой файл макета XML добавьте атрибут темы, как показано ниже

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

надеюсь, что это работает

Дикшит Р Муля
источник
4
Показано «Ошибка надувания класса EditText». Пожалуйста помоги !
Мохит Хайтан,
@ Кодер некоторые из атрибутов, которые он добавил, для 21+
Mr.O
49

Добавьте свойство textColorHint к вашему тексту редактирования

android:textColorHint="#F6F6F6"

или какой цвет вы хотите

Вишневый админ
источник
41

получил ту же проблему. Решено, поместив эти строки в родительскую тему.

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

Если вы положите эти

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

в отдельном стиле и применить его к TextInputLayout или Edittext, он не появится. Вы ДОЛЖНЫ поместить его в родительской теме приложения.

SajithK
источник
3
Это очень печально, что я не могу иметь несколько стилей ввода в приложении, используя этот виджет, но, насколько я могу судить, вы правы. : /
Турникет
4
Ну, это не обязательно иметь во всем приложении. Вы можете применить эту тему только к одному действию в вашем файле манифеста. И создайте другую тему для остальной части вашей деятельности.
RexSplode
23

Я не уверен, что является причиной вашей проблемы, но этот код отлично работает для меня. Я думаю, что это как-то связано с использованием правильного пространства имен xml ( xmlns). Я не уверен, что поддерживается использование android.support.design без атрибута пространства имен xml. Или это как-то связано с textColorHintатрибутом, который вы используете в самом EditText.

Планировка:

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

Стиль:

<style name="GreenTextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>
Рольф ツ
источник
2
Это все еще работает как то, что у меня есть. Проблема, с которой я столкнулся, заключается в том, что до того, как пользователь коснется EditText, цвет EditText будет белым. Когда пользователь касается EditText, метка TextInputLayout становится зеленой и работает нормально.
SamIAmHarris
та же проблема здесь @ user3520299, удача найти исправление?
AhmedW
У меня был уникальный случай, потому что родительское представление имело набор тем, который вызывал проблему. Но код, который я выложил, теперь работает нормально после того, как я удалил эту одну тему
SamIAmHarris
1
Это работает для плавающей подсказки, но не для подсказки внутри пустого элемента управления EditText. Для этого обновите тему приложения в соответствии с ответом @ mbelsky
Ричард Ле Мезурье,
Кстати, стиль приложения по умолчанию: hintTextAppearance есть @style/TextAppearance.Design.Hint, так что вы можете использовать его в качестве своего, parentа не @android:style/TextAppearanceили@style/TextAppearance.AppCompat
rockgecko
19

Обратитесь к приведенному ниже коду, это сработало для меня. Но это повлияет на все ваши элементы управления цветом.

 <!-- 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>
Раджив Маниваннан
источник
Это должно быть принято - оно показывает, какие свойства используются для каждого важного элемента.
Ричард Ле Мезурье
15

В TextInputLayout, который содержит EditText, добавьте:

android:textColorHint="someColor"
Брент Рэй
источник
14

Много ответов, но для этого нужна только строка:

андроид: textColorHint = "# 000000"

    <EditText
        android:id="@+id/edtEmail"
        android:textColorHint="#000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
Диего Венансио
источник
10

android: textColorHint = "# FFFFFF" иногда работает, а иногда нет. Для меня ниже решение работает отлично

Попробуйте приведенный ниже код, он работает В вашем XML-файле и тема TextLabel определена в 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>

В папке стилей 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>

Если вы просто хотите изменить цвет метки в ложном состоянии, то colorAccent, colorControlNormal и colorControlActivation не требуются

Summved Jain
источник
10

Вы можете использовать android:textColorHint="@color/color_black"внутри TextInputlayoutЭто сработало для меня.

<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

Согласно этому: https://code.google.com/p/android/issues/detail?id=176559

Попробуй это:

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

Работает в 23.1.1

Да ДУАН
источник
6

С помощью библиотеки компонентов материалов вы можете настроить TextInputLayoutцвет текста подсказки, используя:

  • В макете:

    • app:hintTextColor атрибут: цвет метки, когда она свернута и текстовое поле активно
    • android:textColorHint атрибут: цвет метки во всех других состояниях текстового поля (например, в состоянии покоя и отключен)

Что-то вроде:

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

введите описание изображения здесьвведите описание изображения здесь

Габриэле Мариотти
источник
5

Похоже, что родительское представление имело стиль для сторонней библиотеки, которая заставляла EditText быть белым.

android:theme="@style/com_mixpanel_android_SurveyActivityTheme"

Как только я удалил это все работало нормально.

SamIAmHarris
источник
5

попробуйте это может помочь

      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();;

        }
    });
Джит Пармар
источник
почему вы положили его в прослушиватель onTextChanged?
user25
5

поздно, но это может помочь кому-то, что я сделал так

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

измените ваш colorAccent на нужный вам цвет внутри вашей темы, это изменит вашу строку EditText, курсор и подсказку

или вы можете также включить этот стиль в ваш 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>

тогда внутри вашего TextInputLayout вы можете поместить это так

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

Используйте textColorHint, чтобы установить нужный цвет в качестве цвета подсказки для EditText. Дело в том, что подсказка в EditText исчезает не тогда, когда вы что-то печатаете, а сразу же, когда EditText получает фокус (с классной анимацией). Вы это четко заметите, когда переключите фокусировку на EditText.

Генри
источник
3

Из документации:

Подсказка должна быть установлена ​​на TextInputLayout, а не на EditText. Если для дочернего EditText в XML указана подсказка, TextInputLayout все равно может работать правильно; TextInputLayout будет использовать подсказку EditText в качестве плавающей метки. Однако будущие вызовы для изменения подсказки не обновят подсказку TextInputLayout. Чтобы избежать непреднамеренного поведения, вызовите setHint (CharSequence) и getHint () для TextInputLayout, а не для EditText.

Попробуйте установить android:hintи app:hintTextColorвключить TextInputLayoutвместо TextInputEditText.

Карл Джаморалин
источник
1

Вы должны установить цвет подсказки для TextInputLayout.

Биро Чаба
источник
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

Попробуйте код ниже:

Высокий светлый цвет белый:

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

Стиль: 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>
Chhornkimchheng
источник
0

Вот мой опыт с этой похожей проблемой и требуемое решение.

Требование:

  • Необходимо создать настройку TextInputEditText(можно сказать, что некоторые должны быть прозрачными, а некоторые не должны, но использовать пользовательские цвета для различных событий)

Проблема столкнулась:

  • android:textColorHint не работает как требуется.

Решения, которые не удалось:

  • Используется android:textColorHintв стиле и применяется к TextInputEditText. Нет результатов или разницы.
  • Установить android:textColorHintв приложении тему применено. Это помогло, но теперь оно было установлено для всего приложения. (Не соответствует требованиям)

После большого количества RnD лучшее решение было найдено в статье, в которой говорилось, что нам нужно применять тему к TextInputLayoutили к ее родительскому представлению, а не только применять стиль к TextInputEditTextили к его родительскому представлению.

Пожалуйста, проверьте правильность темы TextInputLayout, в которой говорится, что мы на неправильном пути.

Harpreet
источник
0

Когда я попытался установить атрибут темы в TextInputLayout, тема также применялась к его тексту редактирования дочернего представления, который я не хотел.

Таким образом, решение, которое работало для меня, состояло в том, чтобы добавить собственный стиль к свойству "app: hintTextAppearance" TextInputLayout.

В styles.xml добавьте следующий стиль:

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

И примените этот стиль к свойству "app: hintTextAppearance" TextInputLayout, как показано ниже:

<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

Если вы используете новую библиотеку дизайна материалов androidx, com.google.android.material то вы можете использовать colorstatelist для управления цветом текста подсказки в сфокусированном, зависшем и состоянии по умолчанию следующим образом. (вдохновленный этим )

В res/color/text_input_box_stroke.xmlположить что-то вроде следующего:

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

Тогда по вашему styles.xmlвы положите:

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

Наконец, укажите ваш стиль в фактическом. TextInputLayout По какой-то причине вам также нужно установить android:textColorHintдля текста по умолчанию цвет подсказки:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/my_layout_id"
    style="@style/LoginTextInputLayoutStyle"
    android:textColorHint="#ccf"
    ...
Саске Учиха
источник
0

если вы используете библиотеку дизайна материалов. В настоящее время я использую версию

реализация 'com.google.android.material: material: 1.3.0-alpha01'

1 - установить цвет, когда TextInputLayout отдыхает.

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

2 - Установите цвет, когда TextInputLayout является плавающим / сфокусированным / постукивающим.

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

3 - Установить цвет линии в TextInputLayout.

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

4 - установить цвет ошибки в TextInputLayout.

<item name="boxStrokeErrorColor">@color/colorPrimary</item>
Мухаммед Максуд
источник
0

Я хотел изменить цвет этикетки только тогда, когда она будет поднята вверх. Но настройка textColorHintменяет цвет в каждом штате. Итак, это сработало для меня:

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

Это изменит цвет, когда ввод сфокусирован.

дебютантка
источник