Как изменить цвет надписи TextinputLayout и редактировать текст подчеркивания Android

Question

Как изменить цвет надписи TextinputLayout и редактировать текст подчеркивания Android

Я использую Android Design Library's TextinputLayout, Но не удалось настроить цвет подсказки, цвет метки и цвет подчеркивания EditText внутри TextinputLayout, Пожалуйста помоги.

144

android android-textinputlayout android-design-library

Источник

user3758972 30 июл '15 в 11:02

16 ответов

Решение

С помощью библиотеки компонентов материала вы можете использовать com.google.android.material.textfield.TextInputLayout.

Вы можете применить собственный стиль, чтобы изменить цвета.

Чтобы изменить цвет подсказки, вы должны использовать следующие атрибуты:
hintTextColor а также android:textColorHint.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/selector_hint_text_color</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>

Для изменения цвета нижней строки необходимо использовать атрибут:boxStrokeColor.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    ....
    <item name="boxStrokeColor">@color/selector_stroke_color</item>
</style>

Также в этом случае следует использовать селектор. Что-то типа:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

Вы также можете применить эти атрибуты в своем макете:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/selector_stroke_color"
    app:hintTextColor="?attr/colorPrimary"
    android:textColorHint="@color/selector_hint_text_color"
    ...>

45

Источник

user2016562 18 сен '19 в 08:59

Основываясь на ответах Федора Казакова и других, я создал конфигурацию по умолчанию.

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Widget.Design.TextInputLayout" parent="AppTheme">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
        <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
        <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
        <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
        <!-- Floating label appearance here -->
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
        <!-- Error message appearance here -->
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">20sp</item>
    </style>

</resources>

activity_layout.xml

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

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text hint here"
        android:text="5,2" />

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

Основное внимание:

Без фокуса:

Сообщение об ошибке:

36

Источник

user2826279 29 июн '16 в 18:07

Добавьте этот атрибут в тэг Edittext и наслаждайтесь:

 android:backgroundTint="@color/colorWhite"

28

Источник

user6797655 30 апр '17 в 05:42

Этот блог описывает различные аспекты стиля EditText а также AutoCompleteTextView завернутый TextInputLayout,

За EditText и AppCompat lib 22.1.0+ вы можете установить атрибут темы с некоторыми настройками, связанными с темой:

<style name="StyledTilEditTextTheme">
   <item name="android:imeOptions">actionNext</item>
   <item name="android:singleLine">true</item>
   <item name="colorControlNormal">@color/greyLight</item>
   <item name="colorControlActivated">@color/blue</item>
   <item name="android:textColorPrimary">@color/blue</item>
   <item name="android:textSize">@dimen/styledtil_edit_text_size</item>
</style>

<style name="StyledTilEditText">
    <item name="android:theme">@style/StyledTilEditTextTheme</item>
    <item name="android:paddingTop">4dp</item>
</style>

и применять их на EditText:

<EditText
    android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

За AutoCompleteTextView все сложнее, потому что завернуть его в TextInputLayout и применение этой темы нарушает поведение плавающей метки. Вам нужно исправить это в коде:

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

И в Activity.onCreate:

setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
    if(hasFocus) {
        setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
    } else {
        if(autoCompleteTextView.getText().length() == 0) {  
              setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
        }
    }
});

19

Источник

user3669920 25 ноя '15 в 06:28

Если вы хотите изменить цвет линии / строки и цвет текста подсказки TextInputLayout (какой обычно цвет акцента), просто создайте этот стиль:

<style name="MyStyle">
    <item name="colorAccent">@color/your_color</item>
</style>

Затем примените его к вашему TextInputLayout как тема:

<android.support.design.widget.TextInputLayout
    ...
    app:theme="@style/MyStyle" />

Это в основном устанавливает тему (не стиль) для одного представления (в отличие от всей деятельности).

10

Источник

user4230345 20 апр '17 в 21:24

TextinputLayout это не вид, а Layout, как очень хорошо описал Димитриос Цигурис в своем блоге здесь. Поэтому вам не нужно Style для чего Views только, но используйте Theme, После публикации в блоге я получил следующее решение:

Начните с вашего styles.xml с

<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="android:textColor">@color/your_colour_here</item>
        <item name="android:textColorHint">@color/your_colour_here</item>
        <item name="colorControlNormal">@color/your_colour_here</item>
        <item name="colorControlActivated">@color/your_colour_here</item>
        <item name="colorControlHighlight">@color/your_colour_here</item>
</style>

И в свой макет добавить

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

10

Источник

user1254514 27 май '19 в 13:49

<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@color/actionBar_background</item>
    <item name="colorControlActivated">@color/actionBar_background</item>
    <item name="colorControlHighlight">@color/actionBar_background</item>
    <item name="colorAccent">@color/actionBar_background</item>
    <item name="android:textColorHint">@color/actionBar_background</item>
</style>

применить этот стиль к TextInputLayout

7

Источник

user3278345 05 дек '15 в 06:35

<style name="Widget.Design.TextInputLayout" parent="android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
</style>

Вы можете переопределить этот стиль для макета

А также вы можете изменить внутренний стиль элемента EditText.

7

Источник

user395778 30 июл '15 в 11:16

Работает для меня. Если вы пытаетесь EditText с Label и пытаетесь изменить цвет подчеркивания, используйте это. Измените на TextInputEditText вместо EditText.

                 <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/editTextTextPersonName3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/_16sdp"
                android:layout_marginLeft="@dimen/_16sdp"
                android:layout_marginTop="@dimen/_16sdp"
                android:layout_marginEnd="@dimen/_8sdp"
                android:layout_marginRight="@dimen/_8sdp"
                android:textColorHint="@color/white"
                app:layout_constraintEnd_toStartOf="@+id/guideline3"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:backgroundTint="@color/white"
                    android:hint="Lastname"
                    android:textSize="@dimen/_14sdp"
                    android:inputType="textPersonName"
                    android:textColor="@color/white"
                    android:textColorHint="@color/white" />
            </com.google.android.material.textfield.TextInputLayout>

4

Источник

10 фев '21 в 18:39

Я использовал все вышеперечисленные ответы, и ни один из них не работал. Этот ответ работает для API 21+. Используйте атрибут app:hintTextColor, когда текстовое поле сфокусировано, и атрибут app:textColorHint, когда в других состояниях. Чтобы изменить цвет нижней линии, используйте этот атрибут app:boxStrokeColor, как показано ниже:

      <com.google.android.material.textfield.TextInputLayout
            app:boxStrokeColor="@color/colorAccent"
            app:hintTextColor="@color/colorAccent"
            android:textColorHint="@android:color/darker_gray"
    
       <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

Он также работает с AutoCompleteTextView . Надеюсь, это сработает для вас :)

4

Источник

user4992081 02 фев '21 в 23:52

Изменить цвет строки TextInputLayout + TextInputEditText

colors.xml

      <color name="mtrl_textinput_default_box_stroke_color" tools:override="true">@color/lineColor</color>

styles.xml

      <style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
    <item name="boxStrokeColor">@color/lineColor</item>
    <item name="android:textColorHint">@color/hintColor</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="boxBackgroundColor">@color/backgroundColor</item>
</style>

<style name="TextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
    <item name="android:textColor">@color/black</item>
</style>

layout.xml

      <com.google.android.material.textfield.TextInputLayout
            style="@style/TextInputLayout"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">

            <com.google.android.material.textfield.TextInputEditText
                style="@style/TextInputEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>

4

Источник

user1064316 19 май '21 в 17:07

Вы можете изменить цвет метки с помощью app:hintTextAppearance атрибут в TextInputLayout.

      <android.support.design.widget.TextInputLayout
    android:id="@+id/inputlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout">

    <EditText
        android:id="@+id/mail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="@string/email"
        android:inputType="textEmailAddress"
        android:maxLines="1"
        android:paddingStart="5dp"
        android:singleLine="true"/>

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

Стиль :

       <style name="TextAppearance.App.TextInputLayout" 
 parent="@android:style/TextAppearance">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textSize">20sp</item>
    </style>

Изменить edittext цвет подчеркивания, вы можете использовать android:backgroundTint

      <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Underline color change"
        android:backgroundTint="@android:color/holo_red_light" />

2

Источник

user12596713 19 май '21 в 17:28

Создайте стиль, как указано ниже

      <style name="text_input_layout_style">
        <item name="colorControlNormal">@color/primary</item>
        <item name="colorControlActivated">@color/primary</item>
        <item name="colorControlHighlight">@color/primary</item>
</style>

и примените его к своему TextInputLayoutв качестве android:theme="@style/text_input_layout_style"

И определенно будет работать для всех вас.

1

Источник

user1553540 10 мар '22 в 07:36

Мне нужно было изменить цвет нижней строки TextInputEditText внутри TextInputLayout, а затем другие ответы не сработали. Я, наконец, решил это, установив colorOnSurface для темы TextInputLayouts. Я оставлю свой код здесь на случай, если он поможет кому-то еще.

XML:

      <com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme=""@style/TextInputLayoutStyle"">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</com.google.android.material.te`tfield.TextInputLayout>

Стиль:

      <style name="TextInputLayoutStyle">
    <item name="colorOnSurface">#0ff</item>
</style>

0

Источник

user4515072 24 фев '22 в 09:33

XML

      <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/activity_profile_textInputLayout_mobile"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:hint="Mobile Number"
        app:theme="@style/EditBoxColor">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/activity_profile_textInputEditText_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionNext"
            android:inputType="number"
            android:maxLength="10"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

Стиль

      <style name="EditBoxColor" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="colorPrimary">@color/colorPurple</item>
    <item name="colorPrimaryDark">@color/colorPurple3</item>
</style>

0

Источник

user3340529 24 авг '22 в 06:55

Другие вопросы по тегам android android-textinputlayout android-design-library

user1868262 30 июл '15 в 11:54 2015-07-30 11:54 · Accepted Answer · 2015-07-30 11:54

Чтобы изменить цвет нижней строки, вы можете использовать это в теме вашего приложения:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

Для получения дополнительной информации, проверьте эту резьбу.

Чтобы изменить плавающий цвет метки

<style name="TextAppearance.App.TextInputLayout" parent="@android:style/TextAppearance">
<item name="android:textColor">@color/main_color</item>

и используйте это как:

 <android.support.design.widget.TextInputLayout
  ...
   app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout" >

Обновить:
И используйте его, как показано ниже, если вы хотите изменить цвет подсказки, когда это не плавающая метка:

<android.support.design.widget.TextInputLayout
  ...
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout"
    android:textColorHint="#c1c2c4">

Благодаря @AlbAtNf