Изменить цвет контура TextInputLayout
Я пытаюсь настроить TextInputLayout со стилем материала. Мне удалось установить сфокусированное состояние на цвета, которые я хочу:
С помощью
<com.google.android.material.textfield.TextInputLayout
style="@style/LoginTextInputLayoutStyle"
android:theme="@style/LoginTextInputLayoutStyle"
android:textColorHint="#fff"
app:boxStrokeColor="#fff"
.....>
<EditText ...
где стиль:
<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="colorAccent">#fff</item>
</style>
Но когда текстовый ввод не сфокусирован, я получаю такой вид:
Как я могу изменить цвет черной линии, чтобы быть белым тоже. Спасибо
19 ответов
Используйте этот стиль, чтобы применить цвет границы и ширину границы следующим образом:
<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#fff</item>
<item name="boxStrokeWidth">2dp</item>
</style>
Получить дополнительную информацию о стайлинге по этой ссылке
Добавьте ниже строку в вашем colors.xml файл, который переопределяет цвет по умолчанию для TextInputLayout
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>
Начиная с версии 1.1.0-alpha02 Материальных компонентов для Android, он работает просто для создания 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="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">@color/text_input_box_stroke</item>
</style>
Наконец, укажите свой стиль для актуального TextInputLayout:
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/my_layout_id"
style="@style/LoginTextInputLayoutStyle"
...
Что касается компонентов материала Alpha 7, вы просто создаете файл селектора цвета следующим образом: colors/text_input_outline_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:color="@color/buttonDark"/>
<item android:state_hovered="true" android:color="@color/buttonDark"/>
<item android:state_focused="true" android:color="@color/buttonDark"/>
<item android:color="@color/buttonDark"/>
</selector>
Для получения дополнительной информации о том, как это устанавливается. Вот соответствующий исходный код:
ColorStateList boxStrokeColorStateList =
MaterialResources.getColorStateList(context, a, R.styleable.TextInputLayout_boxStrokeColor);
if (boxStrokeColorStateList != null && boxStrokeColorStateList.isStateful()) {
defaultStrokeColor = boxStrokeColorStateList.getDefaultColor();
disabledColor =
boxStrokeColorStateList.getColorForState(new int[] {-android.R.attr.state_enabled}, -1);
hoveredStrokeColor =
boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_hovered}, -1);
focusedStrokeColor =
boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_focused}, -1);
} else {
// If attribute boxStrokeColor is not a color state list but only a single value, its value
// will be applied to the box's focus state.
focusedStrokeColor =
a.getColor(R.styleable.TextInputLayout_boxStrokeColor, Color.TRANSPARENT);
defaultStrokeColor =
ContextCompat.getColor(context, R.color.mtrl_textinput_default_box_stroke_color);
disabledColor = ContextCompat.getColor(context, R.color.mtrl_textinput_disabled_color);
hoveredStrokeColor =
ContextCompat.getColor(context, R.color.mtrl_textinput_hovered_box_stroke_color);
}
Из этого списка видно, что вы хотите убедиться, что используете селектор цвета со всеми определенными состояниями, иначе он по умолчанию вернется к другому цвету.
Сначала удалите из TextInputLayout
<item name="boxStrokeColor">@color/YourColor</item>
Во-вторых, добавьте новый атрибут цвета
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true" >YourColor</color>
Необходимо написать то же имя mtrl_textinput_default_box_stroke_color не менять
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:color="#FFFFFF"/>
<item android:state_focused="false" android:color="#FFFFFF"/></selector>
создайте каталог цветов и внутри него создайте файл ресурсов, вставьте приведенный выше код в XML-файл каталога цветов и в стиле макета ввода текста вставьте нижнюю строку
<item name="boxStrokeColor">@color/focus_tint_list</item>
Текст правки материала
Шаг 1. Добавьте библиотеку в раздел зависимостей модуля build.gradle(приложение модуля)
реализация 'com.android.support:design:28.0.0-alpha1'
Шаг 2: XML-код
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxStrokeColor="#0000FF"
app:boxStrokeWidth="2dp"
android:layout_gravity="center"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/txtusername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/lable" />
</com.google.android.material.textfield.TextInputLayout>
Я создаю свой экран динамически. я используюTextInputLayout и создайте мой динамический текст редактирования в TextInputLayout. Если ты хочешь датьTextInputLayout к границе выполните следующие действия по порядку.
1- включить Build.gradle;
implementation 'com.google.android.material:material:1.0.0'
2- в коде Котлина;
val textInputLayout = TextInputLayout(this)
textInputLayout.apply {
boxStrokeColor = Color.parseColor("#E68A06")
setBoxBackgroundMode(TextInputLayout.BOX_BACKGROUND_OUTLINE)
setHintTextAppearance(R.style.ValidatableInputLayoutStyle_OutlineBox_HintInputLayoutStyle)
setBoxCornerRadii(16f, 16f, 16f, 16f)
setPadding(4, 0, 0, 0)
}
3- style.xml
<style name="ValidatableInputLayoutStyle.OutlineBox.HintInputLayoutStyle" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="android:textColor">@color/colorPrimary</item>
<item name="android:textSize">14sp</item>
Я создал конфигурацию по умолчанию.
<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>
Резюме
Шаги, чтобы следовать
1. Создать для
2. Создать для
3. Установите атрибуты представления. Это можно сделать тремя способами.
I. Использование набора атрибутов
II. Использование явного стиля
Определить собственный стиль
<style name="CustomTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">@color/box_stroke_color</item>
<item name="hintTextColor">?attr/colorSurface</item>
<item name="android:textColorHint">@color/text_color_hint</item>
</style>
Установить стиль
III. Использование атрибута стиля по умолчанию — установите глобальный стиль для
Объяснение
Существуют различные способы изменить цвет обводки блока и цвет текста подсказки.
Ответственным атрибутом за цвет контура блока является
boxStrokeColor. Сначала создадим в формате xml. Создать Android
colorкаталог ресурсов и создайте новый файл ресурсов с именем
box_stroke_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorSurface" android:state_focused="true" />
<item android:alpha="0.87" android:color="?attr/colorSurface" android:state_hovered="true" />
<item android:alpha="0.12" android:color="?attr/colorSurface" android:state_enabled="false" />
<item android:alpha="0.38" android:color="?attr/colorSurface" />
</selector>
Я сослался на ресурсы библиотеки дизайна материалов. Посмотрите, как это делается в библиотеке дизайна материалов https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_outlined_stroke_color . .xml
Чтобы изменить цвет текста подсказки, мы должны установить два атрибута:
- (Цвет метки, когда она свернута и текстовое поле активно)
- (Цвет метки во всех других состояниях текстового поля, например, в состоянии покоя и отключен)
Как узнать, какие атрибуты необходимо изменить? Я проверил атрибуты, определенные в теме
Widget.MaterialComponents.TextInputLayout.OutlinedBox. Посмотрите на родительскую тему, если она не определена в дочерней теме. https://github.com/material-components/material-components-android/blob/788866e4483621e2222f649e617ee95f7aa9caa6/lib/java/com/google/android/material/textfield/res/values/styles.xml#L88 (это может варьироваться в зависимости от основная ветка)
app:hintTextColor="?attr/colorSurface"
Обратите внимание, что
hintTextColorне имеет состояния. Но с состоянием.
Давайте создадим пользовательский
ColorStateListза
android:textColorHint. Сослался на это https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.38" android:color="?attr/colorSurface" android:state_enabled="false" />
<item android:alpha="0.6" android:color="?attr/colorSurface" />
</selector>
Обратите внимание, что я использовал
?attr/colorSurface, потому что обычно это значение белого цвета в светлой теме и черного в темной теме. Вы могли бы использовать
@android:color/whiteнапрямую, если вам не нужны динамические настройки цвета.
Существует несколько способов установки значения атрибута цвета обводки блока. Значения атрибутов разрешаются с помощью
context.theme.obtainStyledAttributes(). Если значение определено в нескольких местах, следующий порядок определяет, какое значение атрибута будет применено в конечном итоге.
- AttributeSet — значение, определенное в XML-файле макета.
- Стиль — значение, определенное в явном стиле.(Получить через
theme.getExplicitStyle(AttributeSet)) - defStyleAttr — атрибут стиля по умолчанию, который является третьим аргументом конструктора класса представления.
- defStyleRes — ресурс стиля по умолчанию, который является четвертым аргументом конструктора класса представления.
- Тема — если не определено во всем вышеперечисленном, разрешается значение атрибута темы.
Давайте посмотрим их один за другим
- Использование набора атрибутов
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:textColorHint="@color/text_color_hint"
app:boxStrokeColor="@color/box_stroke_color"
app:hintTextColor="?attr/colorSurface">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
- Использование явного стиля
Определить пользовательский стиль в styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">@color/box_stroke_color</item>
<item name="hintTextColor">?attr/colorSurface</item>
<item name="android:textColorHint">@color/text_color_hint</item>
</style>
</resources>
Определить явный стиль для виджета
<com.google.android.material.textfield.TextInputLayout
style="@style/CustomTextInputStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
- Использование атрибута стиля по умолчанию — используется для определения глобального стиля представления. Как узнать, какой атрибут требуется установить? Просто проверьте значение по умолчанию третьего аргумента любого конструктора представления. Для материала
TextInputLayoutэто значениеcom.google.android.material.R.attr.textInputStyle.
<!-- Base application theme. -->
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
...
<!-- Status bar color. -->
...
<!-- Customize your theme here. -->
<item name="textInputStyle">@style/CustomTextInputStyle</item>
</style>
Использование ресурса стиля по умолчанию. Это применимо только при программном создании виджетов. Если вы проверите четвертый аргумент конструктора любого представления, кроме представлений материального дизайна, вы увидите параметр. Если
theme.obtainStyledAttributes()не может разрешить вышеуказанными способами, тогда он ищет атрибут в ресурсе стиля по умолчанию. Это неприменимо к виджетам библиотеки дизайна материалов, потому что это значение жестко запрограммировано в этих виджетах и не подвергается программному изменению.(применяется внутрь черезtheme.applyStyle())Использование темы приложения. Это невозможно в виджетах дизайна материалов, потому что
defStyleResжестко закодирован в виджетах дизайна материалов и имеет приоритет над атрибутами темы приложения.
<!-- Customize your theme here. -->
<item name="boxStrokeColor">@color/box_stroke_color</item>
<item name="hintTextColor">?attr/colorSurface</item>
<item name="android:textColorHint">@color/text_color_hint</item>
Вышеприведенное применимо только к виджетам, предоставляемым Android Sdk.
- Создайте тему и переопределите атрибут "colorOnSurface".
<style name="AppTheme.LoginScreenTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorOnSurface">#FFF</item>
</style>
- Примените тему к своей активности входа.
<activity
android:name=".login.ui.login.LoginActivity"
android:label="@string/title_activity_login"
android:launchMode="singleInstance"
android:screenOrientation="portrait"
android:theme="@style/AppTheme.LoginScreenTheme"
android:windowSoftInputMode="adjustResize|stateHidden"/>
Несмотря на опоздание, я надеюсь, что это решение вам все равно поможет.
Создайте файл ресурсов цвета (я назвал его « col_str » ) в папке res>color. Не забудьте создать папку с именем «Цвет» в папке res, если она не существует.
столбец_стр:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/darker_gray" android:state_focused="false"/>
<item android:color="@android:color/black" android:state_focused="true"/>
</selector>
В вашем XML-файле:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Your Hint"
app:boxStrokeColor="@color/col_str">
<com.google.android.material.textfield.TextInputEditText
style="@style/Widget.Material3.TextInputEditText.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@android:color/black"
android:textSize="14sp" />
</com.google.android.material.textfield.TextInputLayout>
Шаг 1. Использовать1.2.0-alpha05 или позже
implementation 'com.google.android.material:material:1.2.0-alpha05'
Шаг 2 - Важно!. Убедитесь, что тема вашего приложения является потомкомTheme.MaterialComponents. Смотрите здесь
После этого все настройки атрибутов работают должным образом.
Шаг 3. Используйте настройку атрибута из спецификации
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/filledTextField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_text"
app:helperTextEnabled="true"
app:helperText="@string/helper_text"
app:counterEnabled="true"
app:counterMaxLength="20"
app:startIconContentDescription="@string/leading_icon_content_desc"
app:startIconDrawable="@drawable/baseline_favorite_24">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
app:boxStrokeColor="#fff"
android:textColorHint="#fff"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
***app:boxStrokeColor="#fff"***
android:inputType="textPassword"
android:textColor="#fff"
/>
</com.google.android.material.textfield.TextInputLayout>
Шаг 1. добавьте эту строку в свой файл colors.xml.
<color name="mtrl_textinput_default_box_stroke_color">#4169E1</color>
Шаг 2. добавьте это свойство в TextInputLayout
app:boxStrokeColor="@color/mtrl_textinput_default_box_stroke_color"
<style name="VerifyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">@color/colorWhite</item>
<item name="boxStrokeWidth">2dp</item>
<item name="colorOnSurface">@color/colorPrimary</item>
<item name="colorPrimary">@color/colorWhite</item>
</style>
---> Сначала настройте стиль
<style name="Widget.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="boxStrokeColor">?attr/colorSecondary</item>
<item name="hintTextColor">?attr/colorSecondary</item>
</style>
Во-вторых, если вы хотите использовать этот стиль для всего TextinputLayout во всем приложении.
поэтому добавьте этот стиль в свою родительскую тему
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorSecondary">@color/colorSecondary</item>
<item name="colorSecondaryVariant">@color/colorSecondaryVariant</item>
<item name="android:textColorPrimary">@color/textColorPrimary</item>
<item name="textInputStyle">@style/Widget.TextInputLayout.FilledBox</item>
</style>
Если вы просто хотите добавить только для этого конкретного поля ввода
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.TextInputLayout.FilledBox"
.....>
Для тех, кто хочет установить цвет контурного блока в несфокусированном режиме вместо цвета по умолчанию, вам необходимо добавить эту строку в файл Colors.xml, который переопределит цвет по умолчанию для контурного блока.
<color name="mtrl_textinput_default_box_stroke_color">#fff</color>
Чтобы узнать подробности, нажмите здесь
Для цвета границы:
app:boxStrokeColor="@color/gray" //for border color
Для цвета подсказки:
app:hintTextColor="@color/puce" //for hint color
Это сработало для меня:
<com.google.android.material.textfield.TextInputLayout
android:textAppearance="?attr/textAppearanceBody2"
style="@style/LoginTextInputLayoutStyle"
android:theme="@style/LoginTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/txtUserName"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
android:textColorHighlight="#FFFFFF"
android:shadowColor="#FFFFFF"
android:outlineAmbientShadowColor="#FFFFFF"
android:outlineSpotShadowColor="#FFFFFF"
android:hint="Email"
android:textSize="@dimen/textxhdpi"/>
</com.google.android.material.textfield.TextInputLayout>
В стилях:
<resources
xmlns:app="http://schemas.android.com/apk/res-auto">
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="textAppearanceBody2">@style/TextAppearance.neurosales.Body2</item>
</style>
<style name="TextAppearance.neurosales.Body2" parent="TextAppearance.MaterialComponents.Body2">
<item name="colorAccent">@color/white</item>
<item name="android:textColorHint">@color/white</item>
<item name="colorControlNormal">@color/white</item>
<item name="colorControlActivated">@color/white</item>
<item name="colorControlHighlight">@color/white</item>
<item name="android:textColor">@color/white</item>
</style>
<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#fff</item>
<item name="android:textColorHint">#fff</item>
<item name="app:hintTextColor">#fff</item>
</style>
В цвете:
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>