Как изменить цвет плавающей метки TextInputLayout

Question

Со ссылкой на новый TextInputLayout выпущенный Google, как я могу изменить цвет текста плавающей метки?

настройка colorControlNormal, colorControlActivated, colorControlHighLight в стилях не помогает.

Вот что у меня сейчас:

Answer 1

Попробуйте приведенный ниже код, он работает в нормальном состоянии

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

В папке стилей TextLabel Code

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

Установить на основную тему приложения, оно работает только выделить состояние только

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

Обновить:

UnsupportedOperationException: невозможно преобразовать в цвет: type=0x2 в API 16 или ниже

Решение

Answer 2

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

Answer 3

Нашел ответ, пользуйся android.support.design:hintTextAppearance атрибут, чтобы установить собственный внешний вид плавающей метки.

Пример:

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

Answer 4

как изменить цвет текста плавающей метки?

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

• В макете:

• app:hintTextColor атрибут: цвет метки, когда она свернута и текстовое поле активно

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

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

• расширение стиля материала Widget.MaterialComponents.TextInputLayout.*:

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

Селектор по умолчанию для 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>

Answer 5

Вам не нужно использовать android:theme="@style/TextInputLayoutTheme" изменить плавающий цвет метки, так как это повлияет на всю тему для маленького TextView, используемого в качестве метки. Вместо этого вы можете использовать app:hintTextAppearance="@style/TextInputLayout.HintText" где:

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

Дайте мне знать, если решение работает:-)

Answer 6

Итак, я нашел этот ответ очень полезным и спасибо всем людям, которые внесли свой вклад. Просто чтобы добавить что-то, хотя. Принятый ответ действительно правильный ответ... НО... в моем случае я искал сообщение об ошибке ниже EditText виджет с app:errorEnabled="true" и эта единственная линия усложнила мою жизнь. кажется, что это перекрывает тему, которую я выбрал android.support.design.widget.TextInputLayout, который имеет другой цвет текста, определенный android:textColorPrimary,

В конце концов я применил цвет текста непосредственно к EditText виджет. Мой код выглядит примерно так:

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>

И мой виджет:

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

Теперь он отображает черный цвет текста вместо textColorPrimary белый.

Answer 7

Программно вы можете использовать:

/* 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})

Объяснение:

Получить значение цвета int из цветового ресурса (способ представления цветов rgb, используемых в Android). Я написал ColorEnabled, но на самом деле для этого ответа должно быть ColorHintExpanded & ColorViewCollapsed. В любом случае это цвет, который вы увидите, когда подсказка представления "TextInputLayout" находится в состоянии Expanded или Collapsed; вы установите его, используя следующий массив для функции "setDefaultHintTextColor" представления. Ссылка: Ссылка на TextInputLayout - найдите на этой странице метод "setDefaultHintTextColor" для получения дополнительной информации

Глядя на документы выше, вы можете видеть, что функции устанавливают цвета для подсказки Expanded & Collapsed с помощью ColorStateList.

ColorStateList документы

Чтобы создать ColorStateList, я сначала создал матрицу с состояниями, которые мне нужны, в моем случае state_enabled и state_disabled (которые в TextInputLayout равны Hint Expanded и Hint Collapsed [я не помню, в каком порядке lol, в любом случае я нашел это просто делаю тест]). Затем я передаю конструктору ColorStateList массивы со значениями int ресурсов цвета, эти цвета имеют соответствия с матрицей состояний (каждый элемент в массиве цветов соответствует соответствующему массиву в матрице состояний в той же позиции). Таким образом, первый элемент массива цветов будет использоваться как цвет для каждого состояния в первом массиве матрицы состояний (в нашем случае массив имеет только 1 элемент: включено состояние = подсказка расширенное состояние для TextInputLayut). Последние состояния имеют положительные / отрицательные значения, а у вас есть только положительные значения,поэтому состояние "отключено" в атрибутах android - "-android.state.enabled", состояние "не сфокусировано" - "-android.state.focused" и т. д.

Надеюсь, это будет полезно. Пока, приятного кодирования (:

Answer 8

Я предлагаю вам сделать тему стиля для TextInputLayout и изменить только акцентный цвет. Установите родителя для основной темы вашего приложения:

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

Answer 9

Слишком много сложных решений. Вот один лайнер для изменения цвета плавающей метки.

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

---

Помимо изменения других атрибутов:

Чтобы изменить цвет обводки блока:

      <com.google.android.material.textfield.TextInputLayout
    app:boxStrokeColor="@color/green"

---

Чтобы изменить ширину обводки блока:

      <com.google.android.material.textfield.TextInputLayout 
     app:boxStrokeWidth="1.5dp"

---

Чтобы изменить цвет подсказки редактирования:

      <com.google.android.material.textfield.TextInputEditText
     android:textColorHint="@color/white"

---

Чтобы изменить TextInputEditTextцвет:

      <com.google.android.material.textfield.TextInputEditText           
            android:textColor="@color/white" />

Answer 10

В последней версии библиотеки поддержки (23.0.0+), TextInputLayout принимает следующий атрибут в XML для редактирования цвета плавающей метки: android:textColorHint="@color/white"

Answer 11

В моем случае я добавил этоapp:hintTextAppearance="@color/colorPrimaryDark"в моем виджете TextInputLayout.

Answer 12

Вместо ответа Брахмана Ямани я предпочитаю использовать Widget.Design.TextInputLayout в качестве родителя. Это гарантирует, что присутствуют все необходимые элементы, даже если не все элементы перезаписаны. В ответе Yamanis приложение будет аварийно завершать работу с неразрешимым ресурсом, если вызывается setErrorEnabled(true).

Просто измените стиль следующим образом:

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

Answer 13

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

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

Итак, я установил android:hint а также app:hintTextColor на TextInputLayout, не на TextInputEditText и это сработало.

Answer 14

Чтобы изменить цвет подсказки и отредактировать цвет подчеркивания текста: colorControlActivation

Чтобы изменить цвет счетчика символов: textColorSecondary

Чтобы изменить цвет сообщения об ошибке: colorControlNormal

Чтобы изменить оттенок кнопки видимости пароля: colorForeground

Для получения дополнительной информации о TextInputLayout читайте 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>

Answer 15

Это просто, но разработчик запутался из-за того, что несколько представлений имеют одинаковые атрибуты в разных конфигурациях / пространствах имен.

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

Я использовал все вышеперечисленные исправления: но обнаружил, что использую

                app:textColorHint="@color/textcolor_black"

на самом деле я должен использовать

                android:textColorHint="@color/textcolor_black"

Как атрибут TextinputLayout

textcolor_black.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black_txt" android:state_enabled="true" />
    <item android:color="@color/black_txt" android:state_selected="true" />
    <item android:color="@color/txtColorGray" android:state_selected="false" />
    <item android:color="@color/txtColorGray" android:state_enabled="false" />
</selector>

Answer 16

<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/values ​​/styles.xml

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

Answer 17

Теперь, просто используя colorAccent а также colorPrimary будет работать отлично.

Answer 18

Можно использовать app:hintTextColor если вы используете com.google.android.material.textfield.TextInputLayout, попробуй это

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

Answer 19

Потому что вы должны добавить colorControlNormal, colorControlActivated, colorControlHighLight элементы основной темы приложения:

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

Answer 20

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

добавьте это к стилям и установите TextInputLayout Theam в App2, и это будет работать;)

Answer 21

Я решаю проблему. Это макет ：

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

Это стиль:

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

Вы должны использовать свою тему в приложении:

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

Answer 22

Я пытался использовать android:textColorHint в android.support.design.widget.TextInputLayout, он работает нормально.

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

Answer 23

Вы должны изменить свой цвет здесь

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

Answer 24

Это работает для меня..... добавить цвет подсказки в 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>

Answer 25

Попробуйте следующий код, он работает в нормальном состоянии

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

Код текстовой метки в папке стилей

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

Answer 26

Изменить цвет текстовой метки, когда вы сосредоточены на нем. т.е. набрав в нем. Вы должны добавить указать

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

Просто примечание: вы должны добавить все эти реализации в вашу основную тему.