Как изменить цвет линии в EditText


203

Я создаю EditText в моем файле макета XML

Но я хочу изменить цветовую линию в EditText с Holo на (например) красный. Как это можно сделать?

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

Ответы:


310

Это лучший инструмент, который вы можете использовать для всех видов, и БЕСПЛАТНО благодаря @ Jérôme Van Der Linden .

Генератор цветов Holo для Android позволяет вам легко создавать компоненты Android, такие как EditTextили прядильщик, с вашими собственными цветами для вашего приложения Android. Он сгенерирует все необходимые девять патчей, а также соответствующие XML-элементы и стили, которые вы можете скопировать прямо в ваш проект.

http://android-holo-colors.com/

ОБНОВЛЕНИЕ 1

Срок действия этого домена истек, но проект с открытым исходным кодом вы можете найти здесь

https://github.com/jeromevdl/android-holo-colors

попытайся

это изображение на заднем плане EditText

android:background="@drawable/textfield_activated"

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


ОБНОВЛЕНИЕ 2

Для API 21 или выше, вы можете использовать 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" />

Обновление 3 Теперь у нас с поддержкой спиныAppCompatEditText

Примечание: нам нужно использовать app: backgroundTint вместо android: backgroundTint

<android.support.v7.widget.AppCompatEditText
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Underline color change"
    app:backgroundTint="@color/blue_gray_light" />

Ссылка кажется мертвой? Программное обеспечение еще доступно?
Кодирование Джона

1
@CodingJohn этот проект с открытым исходным кодом, вы можете найти здесь github.com/jeromevdl/android-holo-colors
MilapTank

и кто сказал, что мы должны использовать "app: backgroundTint вместо android: backgroundTint" ??
user924

если вы хотите обратную совместимость, тогда вы можете использовать приложение: *** OW android: ***
MilapTank

203

Мне не нравятся предыдущие ответы. Лучшее решение - использовать:

<android.support.v7.widget.AppCompatEditText

      app:backgroundTint="@color/blue_gray_light" />

android:backgroundTintдля EditTextработ только по API21 + . Из-за этого мы должны использовать библиотеку поддержки и AppCompatEditText.

Примечание: мы должны использовать app:backgroundTintвместоandroid:backgroundTint

Версия для AndroidX

<androidx.appcompat.widget.AppCompatEditText

      app:backgroundTint="@color/blue_gray_light" />

3
Это лучшее решение! Простой и работает на всех уровнях API. Спасибо!
Иво Стоянов

7
вам это не нужно, если вы используете библиотеку appcompat, EdtiTexts автоматически преобразуются в AppCompatEditText и применяется оттенок фона.
Стефан К.

Я думаю, что это должно быть точно решение
Туй Нгуен

Большое спасибо. Это работало для API 16+. Лучшее решение.
Андре Луис Рейс

2
можно установить приложение: backgroundTint программно? Я мог бы найти метод 'setBackgroundTint'
Сарат Нагеш

75

Вы также можете быстро изменить цвет подчеркивания EditText, подкрасив фон EditText следующим образом:

<EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Something or Other"
            android:backgroundTint="@android:color/holo_green_light" />

18
Работает только в API 21 или выше. Любой способ заставить это работать для меньшего уровня API?
Вуко

Проверьте REVERSE решения stackoverflow.com/questions/26574328/...
powder366

@ mladj0ni Круто, + 1д
Vučko

3
Для меньших уровней API, используйте только "backgroundTint" вместо "Android: backgroundTint" Кредиты stackoverflow.com/a/29400711/1590911
Hasaan Ali

это меняет весь цвет фона, а не цвет линии
Code Wiget

29

для API ниже 21, вы можете использовать атрибут темы в EditText приведенном ниже коде в файл стиля

<style name="MyEditTextTheme">
    <item name="colorControlNormal">#FFFFFF</item>
    <item name="colorControlActivated">#FFFFFF</item>
    <item name="colorControlHighlight">#FFFFFF</item>
</style>

использовать этот стиль в EditTextкачестве

<EditText
    android:id="@+id/etPassword"
    android:layout_width="match_parent"
    android:layout_height="@dimen/user_input_field_height"
    android:layout_marginTop="40dp"
    android:hint="@string/password_hint"
    android:theme="@style/MyEditTextTheme"
    android:singleLine="true" />

Вы знаете, как добавить альфа / непрозрачность в файл стиля? Как будто он должен взять обычный цвет с непрозрачностью, и как только они начнут печатать, он должен взять активированный или выделенный цвет
ASN

1
@ANS для этого вам нужно добавить слушателя текстового наблюдателя и динамически установить непрозрачность в методе «onTextChanged»
Rahul

ой. То есть он не может быть добавлен в файл стиля или селектора и должен выполняться динамически?
ASN

Непрозрачность @ASN добавляется шестнадцатеричным цветом в первые два символа 00-FF, например: # A1FAFAFA
aimiliano

21

Программно вы можете попробовать:

editText.getBackground().mutate().setColorFilter(getResources().getColor(android.R.color.holo_red_light), PorterDuff.Mode.SRC_ATOP);

2
Лучший ответ для эффекта Xamarin.Forms
mister_giga

11

я думаю, что лучший способ по теме:

<style name="MyEditTextTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorControlNormal">@color/black</item>
        <item name="colorControlActivated">@color/action_blue</item>
        <item name="colorControlHighlight">@color/action_blue</item>
</style>

<style name="AddressBookStyle" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="android:layout_width">match_parent</item>
     <item name="android:layout_height">wrap_content</item>
     <item name="android:textSize">13sp</item>
     <item name="android:theme">@style/MyEditTextTheme</item>
</style>

<android.support.v7.widget.AppCompatEditText
            style="@style/AddressBookStyle"/>

2
это не работает для меня с тегом стиля, но с Android: тег тега
aimiliano

9

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

Если вы хотите, чтобы все приложение разделяло этот стиль, вы можете сделать это следующим образом.

(1) перейти в файл styles.xml. Ваш AppTheme, который наследует родителя Theme.AppCompat.Light.DarkActionBar (в моем случае), будет базовым родителем всех файлов стилей в вашем приложении. Измените его имя на «AppBaseTheme». Создайте еще один стиль под названием AppTheme, который наследует только что отредактированный AppBaseTheme. Это будет выглядеть следующим образом:

<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="windowActionBar">false</item>
    <!--see http://www.google.com/design/spec/style/color.html#color-color-palette-->
    <item name="colorPrimary">@color/material_brown_500</item>
    <item name="colorPrimaryDark">@color/material_brown_700</item>
    <item name="colorAccent">@color/flamingo</item>

<style name="AppTheme" parent="AppBaseTheme">
    <!-- Customize your theme here. -->
</style>

Затем измените «colorAccent» на тот цвет, который вы хотите, чтобы ваш цвет линии EditText был.

(2) Если у вас есть другие папки значений с style.xml, этот шаг очень важен. Потому что этот файл будет наследоваться от вашего предыдущего родительского XML-файла. Например, у меня есть значения-19 / styles.xml. Это специально для Киткат и выше. Измените его родительский на AppBaseTheme и убедитесь, что избавился от «colorAccent», чтобы он не перекрывал цвет родителя. Также вам нужно сохранить элементы, относящиеся к версии 19. Тогда это будет выглядеть так.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

9

Это довольно просто (обязательно: минимум API 21) ...

  1. Перейдите в свой XML и выберите поле EditText
  2. На правой стороне вы можете увидеть окно «Атрибуты». Выберите «Просмотреть все атрибуты»
  3. Просто найдите «оттенок»
  4. И добавьте / измените 'backgroundTint' на желаемый гекс цвета (скажем, # FF0000)

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

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

Продолжайте кодировать ........ :)


2
Минимальное API 21.
Майхан Ниджат

Изменение оттенка фона изменяет фон. Этот ответ неверен
Код Wiget

6

Цвет линии определяется EditTextсвойством background. Чтобы изменить его, вы должны изменить android:backgroundв файле макета.

Я должен отметить, что этот стиль достигается с помощью 9-патч. Если вы посмотрите в SDK, то увидите, что фон EditTextэтого изображения:

textfield_activated_holo_light.9.png

Чтобы изменить его, вы можете открыть его в программе для работы с изображениями и раскрасить его в нужный цвет. Сохраните это как bg_edit_text.9.pngи затем поместите это в свою папку drawable. Теперь вы можете применить его в качестве фона для вашего EditTextтак:

android:background="@drawable/bg_edit_text"


4

Фон виджетов зависит от уровня API .

АЛЬТЕРНАТИВА 1

Вы можете предоставить собственное изображение для вашего EditTextфона,

android:background="@drawable/custom_editText"

Ваше изображение должно выглядеть примерно так. Это даст вам желаемый эффект.

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

АЛЬТЕРНАТИВА 2

Установите этот xml для вашего EditTextатрибута фона.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" android:padding="10dp">
<solid android:color="#4C000000"/>
    <corners android:bottomRightRadius="5dp"
             android:bottomLeftRadius="5dp"
             android:topLeftRadius="5dp"
             android:topRightRadius="5dp"/>
</shape>

Это будет выглядеть так же, как и вы EditTextна каждом API.


Я заинтересован в версии 4.0 и выше. То есть я просто хочу изменить цвет линии при активном EditText
Alex

4

Вы можете изменить цвет с тонировкой фона <EditText android:backgroundTint="@color/red"/>


1
это работает только для api> 21, вы должны следовать ответу @Rahul для всех apis или добавлять различные макеты для api> 21 в папке layout-21
aimiliano

4

рисуем / bg_edittext.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="@color/colorDivider" />
        </shape>
    </item>
</layer-list>

Установить для EditText

<android.support.v7.widget.AppCompatEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_edittext"/>

3

Используйте этот метод .. и измените его в соответствии с вашими именами. Этот код прекрасно работает.

 private boolean validateMobilenumber() {
            if (mobilenumber.getText().toString().trim().isEmpty() || mobilenumber.getText().toString().length() < 10) {
                input_layout_mobilenumber.setErrorEnabled(true);
                input_layout_mobilenumber.setError(getString(R.string.err_msg_mobilenumber));
               // requestFocus(mobilenumber);
                return false;
            } else {
                input_layout_mobilenumber.setError(null);
                input_layout_mobilenumber.setErrorEnabled(false);
                mobilenumber.setBackground(mobilenumber.getBackground().getConstantState().newDrawable());
            }

2

Если вам нужна плоская линия, вы можете легко это сделать с помощью XML. Вот пример XML:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-1dp"
        android:left="-1dp"
        android:right="-1dp"
        android:bottom="1dp"
        >
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#6A9A3A"/>
        </shape>
    </item>
</layer-list>

Замените фигуру селектором, если вы хотите предоставить другую ширину и цвет для сфокусированного текста редактирования.


1
с материальным дизайном это создает прямоугольник, с более широкой нижней линией
Филипп Zymek

2

Наилучшим подходом является использование атрибута AppCompatEditTextwith пространства имен. т.е.backgroundTintapp

    <android.support.v7.widget.AppCompatEditText
    android:layout_width="match_parent"      
    app:backgroundTint="YOUR COLOR"
    android:layout_height="wrap_content" />

когда мы используем android:backgroundTintего, он будет работать только в API21 или более, но app:backgroundTintработает на всех уровнях API, которые делает ваше приложение.


1

Используйте свойство android: background для этого текста редактирования. Передайте в нее свое нарисованное изображение папки. Например,

android:background="@drawable/abc.png"

1
 <EditText
        android:id="@+id/et_password_tlay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#9e9e9e"
        android:backgroundTint="#000"
        android:singleLine="true"
        android:drawableTint="#FF4081"
        android:paddingTop="25dp"
        android:textColor="#000"
        android:paddingBottom="5dp"
        android:inputType="textPassword"/>

    <View
        android:id="@+id/UnderLine"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/et_password_tlay"
        android:layout_centerHorizontal="true"
        android:background="#03f94e" />

** это одно из дел с видом **


1

Попробуйте следующим образом, он преобразует цвет нижней строки EditText, когда используется в качестве свойства фона.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="@dimen/spacing_neg"
        android:right="@dimen/spacing_neg"
        android:top="@dimen/spacing_neg">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="@dimen/spacing_1"
                android:color="@android:color/black" />
        </shape>
    </item>
</layer-list>

0

Это можно просто сделать, включив это android:theme="@style/AppTheme.AppBarOverlayкак атрибут в ваш editText и добавив это <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />в ваши стили

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.