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

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

задание colorControlNormal,colorControlActivated,colorControlHighLight в стилях не поможет.

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

17 171
android android-design-library android-edittext

17 ответов:

Попробуйте Ниже Код, Он Работает В Нормальном Состоянии

 <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 или ниже

решение

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

нашел ответ, используйте 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>
66

вам не нужно использовать 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>

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

11

Итак, я нашел этот ответ очень полезным и спасибо всем людям, которые внесли свой вклад. Просто чтобы что-то добавить. Принятый ответ действительно правильный answer...BUT...in мой случай, я искал, чтобы реализовать сообщение об ошибке ниже 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 белый.

4

Я предлагаю вам сделать тему стиля для 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">
3

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

2

Вместо ответа Брахмана Ямани я предпочитаю использовать виджет.Дизайн.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>
2

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

1

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

<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>
0

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

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

для изменения цвета текстовой метки при фокусировке на ней. т. е. набрав в нем. вы должны добавить строку

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

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

0

его работа для меня ..... добавить цвет подсказки в TextInputLayout

    <android.support.design.widget.TextInputLayout
        android:textColorHint="#ffffff"
        android:id="@+id/input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/edtTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:singleLine="true"
            />
    </android.support.design.widget.TextInputLayout>
0

для изменения цвета подсказки и редактирования текста Цвет подчеркивания: colorControlActivated

чтобы изменить цвет счетчика символов: 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>
0

Я пробовал использовать android: textColorHint в android.поддержка.дизайн.штучка.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>
0
  <style name="AppTheme2" parent="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlActivated">#fff</item></style>

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

0

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

0