як змінити колір етикетки TextinputLayout та підкреслити текст підкреслити андроїд


121

Я використовую бібліотеку дизайнів для Android TextinputLayout. Але не вдалося налаштувати колір підказки, колір етикетки та підкреслений колір EditTextвсередині TextinputLayout. Будь ласка, допоможіть.


1
Він повинен мати колір акцентів згідно з інструкціями щодо дизайну, правда?
Рагунандан

так, але у мене буде багато editTexts з кольорами, відмінними від кольору акценту теми.
Нітеш Верма


Будь ласка, перевірте мою відповідь тут, щоб змінити колір етикетки
Summved Jain

Я міг би змінити підкреслення надійно як цілеспрямоване і сфокусовано стан за допомогою призначеного для користувача фону малює , зазначені в stackoverflow.com/a/36543554/2413303
EpicPandaForce

Відповіді:


257

Зміна кольору нижнього рядка:

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

Для отримання додаткової інформації перевірте цю тему .

Змініть колір підказки, коли він плаває

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

і використовувати його так:

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

Змініть колір підказки, коли це не плаваюча мітка:

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

Завдяки @AlbAtNf


Я не в змозі змінити колір підказки (коли це не етикетка). Чи можете ви допомогти?
Нітеш Верма

Я дуже стурбований своїм розміром програми, враховуючи це, будь-яка ідея про те, який розмір додавання очікується розмістити в моєму додатку?
Нітеш Верма

Вибачте, не отримали запитання, поясніть, будь ласка, детальніше, розмір у якому контексті, розмір графіки, вага вашої програми (як, наприклад, apk вище 20 Мб або щось таке), і раніше ви приймаєте мою відповідь і знову видаляєте прийняття, чи можу я запитати , y так?
Панкай Арора

becoz, я не міг змінити колір підказки після вашої відповіді. Деяка частина роботи працювала на мене, але це не повне рішення того, про що я запитав. Зважаючи на розмір програми, не додається зовнішня бібліотека, як Material EdiTText, збільшує розмір програми?
Нітеш Верма

4
@NiteshVerma знайшов рішення для настройки Hint кольору, коли вона не є плаваючою Lable: просто встановити android:textColorHintна TextInputLayoutв XML.
AlbAtNf

30

На основі відповідей Федора Казакова та інших, я створив конфігурацію за замовчуванням.

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>

Зосереджено:

Зосереджено

Без фокусу:

Без фокусу

Повідомлення про помилку:

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


9
Що мені робити, щоб отримати також рожевий колір для прикладу "Без фокусу"?
Джон Сміт

як використовувати цей стиль?
Hanzala

24

З бібліотекою матеріальних компонентів ви можете використовувати 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"
    ...>

1
Як змінити підкреслений колір EditText всередині TextinputLayout? Я маю на увазі несфокусований стан. Це сірувато
Євгеній Воробей

@EvgeniiVorobei Це описано у відповіді. Він визначається boxStrokeColor. У прикладі selector_stroke_colorзокрема останній рядок:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
Габріеле

Велике спасибі! Я не міг сам це зрозуміти.
Євгеній Воробей

моя проблема полягає в тому, що я хочу, щоб колір підказки був сірим, і як тільки редакційний текст заповнений, я хочу, щоб він був помаранчевим, незалежно від того, орієнтований він чи ні. я вмію це робити, коли його зосереджено. але не в змозі це зробити, коли його немає. Тож чан, ти допоможеш мені з цим @GabrieleMariotti
Anmol317

19

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

 android:backgroundTint="@color/colorWhite"

5
ефект: змінює колір лінії на пристроях з рівнем API 21 і вище
Хтось десь

17

У цьому дописі в блозі описані різні аспекти стилізації 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));
        }
    }
});

8

Якщо ви хочете змінити бар / колір лінії і колір тексту натяку з TextInputLayout(що колір акценту зазвичай є), то просто створити цей стиль:

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

Потім застосуйте це до своєї темиTextInputLayout як теми :

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

Це в основному задає тему (а не стиль) для одного перегляду (на відміну від усієї діяльності).


Вашому Міну SDK має бути 21
Азіжон Холматов

5
<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-елемента.


як використовувати цей стиль? чи є можливість замінити весь стиль програми в одному місці?
Hanzala

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


2
лише швидка примітка щодо застосування стилю до TextInputLayout:android:theme="@style/EditScreenTextInputLayoutStyle"
jackycflau

5

A TextinputLayout- це не погляд, а такий Layout, як дуже гарно описав Димитріос Цигуріс у своєму блозі . Тому вам не потрібно a Style, яке призначене Viewsлише, але використовувати a 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"
...

1
Використовуйте Widget.MaterialComponents.TextInputLayout.OutlinedBox у батьків
Судіп Садхухан
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.