Cómo cambiar el color de línea en EditText

203

Estoy creando un EditText en mi archivo xml de diseño

Pero quiero cambiar la línea de color en EditText de Holo a (por ejemplo) rojo. ¿Cómo se puede hacer eso?

ingrese la descripción de la imagen aquí

Alex
fuente

Respuestas:

310

Esta es la mejor herramienta que puede utilizar para todas las vistas y es GRATUITA muchas gracias a @ Jérôme Van Der Linden .

Android Holo Colors Generator le permite crear fácilmente componentes de Android, como EditTextspinner, con sus propios colores para su aplicación de Android. Generará todos los nueve activos de parches necesarios, además de los estilos y el dibujo XML asociado que puede copiar directamente en su proyecto.

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

ACTUALIZACIÓN 1

Este dominio parece expirado pero el proyecto es de código abierto que puedes encontrar aquí

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

intentalo

esta imagen puesta en el fondo de EditText

android:background="@drawable/textfield_activated"

ingrese la descripción de la imagen aquí


ACTUALIZACIÓN 2

Para API 21 o superior, puede usar 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" />

Actualización 3 Ahora tenemos con respaldoAppCompatEditText

Nota: Necesitamos usar app: backgroundTint en lugar de 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" />
MilapTank
fuente
Enlace parece muerto? ¿El software todavía está disponible?
Codificación John
1
@CodingJohn este proyecto es de código abierto, puedes encontrarlo aquí github.com/jeromevdl/android-holo-colors
MilapTank
¿Y quién dice que tenemos que usar "app: backgroundTint en lugar de android: backgroundTint"?
usuario924
si desea compatibilidad con versiones anteriores , puede usar la aplicación: *** OW android: ***
MilapTank
203

No me gustan las respuestas anteriores. La mejor solución es usar:

<android.support.v7.widget.AppCompatEditText

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

android:backgroundTintpara EditTexttrabajos solo en API21 + . Por eso, tenemos que usar la biblioteca de soporte y AppCompatEditText.

Nota: tenemos que usar en app:backgroundTintlugar deandroid:backgroundTint

Versión de AndroidX

<androidx.appcompat.widget.AppCompatEditText

      app:backgroundTint="@color/blue_gray_light" />
Mladen Rakonjac
fuente
3
¡Esta es la mejor solución! Simple y funciona en todos los niveles de API. ¡Gracias!
Ivo Stoyanov
77
no necesita eso, si usa la biblioteca appcompat, EdtiTexts se transforma automáticamente en AppCompatEditText y se aplica el tinte de fondo.
stephane k.
Creo que esto debería ser exactamente la solución
Thuy Nguyen
Muchas gracias. Funcionó para API 16+. Mejor solución.
André Luiz Reis
2
posible configurar la aplicación: backgroundTint programáticamente? Podría encontrar un método 'setBackgroundTint'
Sarath Nagesh
75

También puede cambiar rápidamente el color de subrayado del EditText al teñir el fondo del EditText de la siguiente manera:

<EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Something or Other"
            android:backgroundTint="@android:color/holo_green_light" />
Damian Esteves
fuente
18
Solo funciona en API 21 o superior. ¿Alguna forma de hacer que esto funcione para un nivel de API menor?
Vucko
Compruebe la solución reVerse stackoverflow.com/questions/26574328/…
powder366 el
@ mladj0ni Genial, + 1d
Vucko
3
Para niveles de API menores, use solo "backgroundTint" en lugar de "android: backgroundTint" Créditos stackoverflow.com/a/29400711/1590911
Hasaan Ali
esto cambia todo el color de fondo, no el color de la línea
Code Wiget
29

para API por debajo de 21, puede usar el atributo de tema en el EditText código debajo del archivo de estilo

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

usa este estilo EditTextcomo

<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" />
Rahul
fuente
¿Sabes cómo agregar alfa / opacidad al archivo de estilo? Al igual que debería tomar el color normal con una opacidad y una vez que comienzan a escribir, debe tomar el color activado o resaltado
ASN
1
@ANS para eso necesita agregar un escucha de observador de texto y establecer la opacidad en el método "onTextChanged" dinámicamente
Rahul
Oh. Entonces, ¿no se puede agregar al archivo de estilo o selector y se debe hacer dinámicamente?
ASN
La opacidad @ASN se agrega en color hexadecimal en los dos primeros caracteres 00-FF, por ejemplo: # A1FAFAFA
aimiliano
21

Programáticamente, puedes probar:

editText.getBackground().mutate().setColorFilter(getResources().getColor(android.R.color.holo_red_light), PorterDuff.Mode.SRC_ATOP);
doctorram
fuente
2
La mejor respuesta para Xamarin.Forms effect
mister_giga
11

Creo que la mejor manera es por tema:

<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"/>
j2emanue
fuente
2
esto no funciona para mí con la etiqueta de estilo sino con Android: etiqueta de tema
aimiliano
9

Para cambiar el color de subrayado de Edittext:

Si desea que toda la aplicación comparta este estilo, puede hacer lo siguiente.

(1) vaya al archivo styles.xml. Su AppTheme que hereda el padre de Theme.AppCompat.Light.DarkActionBar (en mi caso) será el padre base de todos los archivos de estilo en su aplicación. Cambie el nombre a "AppBaseTheme". Haga otro estilo justo debajo que tenga el nombre de AppTheme y herede de AppBaseTheme que acaba de editar. Se verá así:

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

Luego cambie el "colorAccent" a cualquier color que desee que sea el color de la línea EditText.

(2) Si tiene otras carpetas de valores con style.xml, este paso es muy importante. Porque ese archivo heredará de su archivo xml primario anterior. Por ejemplo, tengo valores-19 / styles.xml. Esto es específicamente para Kitkat y superior. Cambie su padre a AppBaseTheme y asegúrese de deshacerse de "colorAccent" para que no anule el color del padre. También debe mantener los elementos que son específicos de la versión 19. Entonces se verá así.

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

Es bastante simple (Requerido: API 21 mínimo) ...

  1. Vaya a su xml y seleccione el campo Editar texto
  2. En el lado derecho, puede ver la ventana 'Atributos'. Seleccione 'Ver todos los atributos'
  3. Solo busca 'tinte'
  4. Y agregue / cambie el 'backgroundTint' a un color hexadecimal deseado (diga # FF0000)

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Keep Coding ........ :)

Krishna Raj Salim
fuente
2
API mínimo 21.
Maihan Nijat
Cambiar el tono de fondo cambia el FONDO. Esta respuesta es incorrecta
Código Wiget
6

El color de la línea está definido por EditTextla propiedad de fondo de. Para cambiarlo debes cambiar elandroid:background archivo de diseño.

Debo señalar que este estilo se logra mediante el uso de un dibujo de 9 parches. Si mira en el SDK, puede ver que el fondo de la EditTextimagen es esta:

textfield_activated_holo_light.9.png

Para cambiarlo, puede abrirlo en un programa de manipulación de imágenes y colorearlo con el color deseado. Guárdelo como bg_edit_text.9.pngy luego póngalo en su carpeta dibujable. Ahora puede aplicarlo como fondo para su EditTextgusto, así:

android:background="@drawable/bg_edit_text"
Egor Neliuba
fuente
5

Puede cambiar el color de EditText mediante programación simplemente usando esta línea de código:edittext.setBackgroundTintList(ColorStateList.valueOf(yourcolor));

Matin Ashtiani
fuente
Eso es lo que estoy buscando ! Thx
Jiratchaya Intaragumhaeng
4

El fondo de los widgets depende del nivel de API .

ALTERNATIVA 1

Puede proporcionar una imagen personalizada a su EditTextfondo por

android:background="@drawable/custom_editText"

Tu imagen debería verse así. Te dará el efecto deseado.

ingrese la descripción de la imagen aquí

ALTERNATIVA 2

Establezca este xml en su EditTextatributo de fondo.

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

Esto tendrá el mismo aspecto de EditTextcada API.

CodeWarrior
fuente
Estoy interesado en la versión 4.0 y superior. Es decir, solo quiero cambiar el color de la línea cuando esté activo EditText
Alex
4

Puedes cambiar el color al teñir el fondo <EditText android:backgroundTint="@color/red"/>


fuente
1
esto funciona solo para api> 21, debe seguir la respuesta @Rahul para todas las apis o agregar diferentes diseños para api> 21 en la carpeta layout-21
aimiliano
4

drawable / 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>

Establecer en EditText

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

Use este método ... y modifíquelo de acuerdo con sus nombres de vista. Este código funciona muy bien.

 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());
            }
Shahid Sarwar
fuente
2

Si desea una línea plana, puede hacerlo fácilmente con xml. Aquí está el ejemplo 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>

Reemplace la forma con un selector si desea proporcionar un ancho y un color diferentes para el texto de edición enfocado.

Sfseyhan
fuente
1
con diseño de material crea un rectángulo, con un resultado más amplio
Filip Zymek
2

El mejor enfoque es usar un atributo AppCompatEditTextcon backgroundTintdel appespacio de nombres. es decir

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

cuando lo usamos android:backgroundTintsolo funcionará en API21 o más, pero app:backgroundTintfunciona en todos los niveles de API que su aplicación lo hace.

Ankush
fuente
1

Use android: propiedad de fondo para ese texto de edición. Pase su imagen de carpeta dibujable. Por ejemplo,

android:background="@drawable/abc.png"
VVB
fuente
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" />

** es uno de hacer con vista **

Singupurapu prudhvi raj
fuente
1

Pruebe de la siguiente manera, convertirá el color de la línea de fondo de EditText, cuando se use como propiedad de fondo.

<?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>
ashishdhiman2007
fuente
0

Esto puede hacerse simplemente incluyendo esto android:theme="@style/AppTheme.AppBarOverlaycomo atributo en su editText y agregue esto <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />a sus estilos

nivla360
fuente