Como alterar a cor da linha no EditText


203

Estou criando um EditText no meu arquivo xml de layout

Mas quero alterar a linha de cores no EditText de Holo para (por exemplo) vermelho. Como isso pode ser feito?

insira a descrição da imagem aqui

Respostas:


310

Esta é a melhor ferramenta que você pode usar para todas as visualizações e é muito GRATUITA graças ao @ Jérôme Van Der Linden .

O Android Holo Colors Generator permite que você crie facilmente componentes do Android, como o EditTextspinner, com suas próprias cores para o seu aplicativo Android. Ele gerará todos os nove ativos de patch necessários, além de estilos e desenhos XML associados, que você poderá copiar diretamente no seu projeto.

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

ATUALIZAÇÃO 1

Este domínio parece expirado, mas o projeto é um código aberto que você pode encontrar aqui

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

tente

esta imagem colocada no fundo de EditText

android:background="@drawable/textfield_activated"

insira a descrição da imagem aqui


ATUALIZAÇÃO 2

Para a API 21 ou superior, você pode 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" />

Atualização 3 agora temos suporte traseiroAppCompatEditText

Nota: Precisamos usar app: backgroundTint em vez 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" />

Link parece morto? O software ainda está disponível?
Codificando John

1
@CodingJohn este projeto é de código aberto, você pode encontrar aqui github.com/jeromevdl/android-holo-colors
MilapTank

e quem disse que temos que usar "app: backgroundTint em vez de android: backgroundTint" ??
precisa saber é o seguinte

se você quiser compatibilidade com versões anteriores , então você pode usar app: *** OW android: ***
MilapTank

202

Não gosto de respostas anteriores. A melhor solução é usar:

<android.support.v7.widget.AppCompatEditText

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

android:backgroundTintpara EditTextfunciona apenas no API21 + . Por causa disso, temos que usar a biblioteca de suporte e AppCompatEditText.

Nota: temos que usar em app:backgroundTintvez deandroid:backgroundTint

Versão AndroidX

<androidx.appcompat.widget.AppCompatEditText

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

3
Essa é a melhor solução! Simples e funciona em todos os níveis da API. Obrigado!
Ivo Stoyanov

7
não é necessário, se você usar a biblioteca appcompat, os EdtiTexts serão automaticamente transformados em AppCompatEditText e a tonalidade de fundo será aplicada.
stephane k.

Eu acho que isso deve ser exatamente solução
Thuy Nguyen

Muito obrigado. Funcionou para a API 16+. Melhor solução.
André Luiz Reis

2
possível definir app: backgroundTint programaticamente? Eu poderia encontrar um método 'setBackgroundTint'
Sarath Nagesh

75

Você também pode alterar rapidamente a cor do sublinhado do EditText pintando o fundo do EditText da seguinte maneira:

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

18
Funciona apenas na API 21 ou superior. Alguma maneira de fazer isso funcionar em um nível menor de API?
Vucko

Verifique a solução reVerse stackoverflow.com/questions/26574328/…
powder366

@ mladj0ni Cool, + 1d
Vucko 24/03

3
Para níveis de API menores, use apenas "backgroundTint" em vez de "android: backgroundTint" Créditos stackoverflow.com/a/29400711/1590911
Hasaan Ali

isso muda a cor de fundo inteira, não a cor da linha
Code Wiget

29

para API abaixo de 21, você pode usar o atributo theme em EditText colocar código abaixo no arquivo de estilo

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

use esse 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" />

você sabe como adicionar alfa / opacidade ao arquivo de estilo? Como ele deve tomar a cor normal com uma opacidade e uma vez que começar a digitar, ele deve tomar a cor activada ou realçado
ASN

1
@ANS para que você precisa para adicionar um ouvinte texto observador e defina a opacidade em "OnTextChanged" método dinamicamente
Rahul

ah Portanto, ele não pode ser adicionado ao arquivo de estilo ou seletor e deve ser feito dinamicamente?
ASN

Opacidade @ASN é adicionado na cor hex i os dois primeiros caracteres 00-FF assim, por exemplo: # A1FAFAFA
aimiliano

21

Programaticamente, você pode tentar:

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

2
Melhor resposta para Xamarin.Forms effect
mister_giga 15/11/17

11

Eu acho que a melhor maneira é 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"/>

2
isso não funciona para mim com marca de estilo, mas com android: tag tema
aimiliano

9

Para alterar a cor do sublinhado do Edittext:

Se você deseja que o aplicativo inteiro compartilhe esse estilo, faça o seguinte.

(1) vá para o arquivo styles.xml. Seu AppTheme que herda o pai de Theme.AppCompat.Light.DarkActionBar (no meu caso) será o pai base de todos os arquivos de estilo em seu aplicativo. Mude o nome dele para “AppBaseTheme '. Crie outro estilo logo abaixo dele, que tenha o nome de AppTheme e herda do AppBaseTheme que você acabou de editar. Será parecido com o seguinte:

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

Em seguida, altere o "colorAccent" para a cor que você deseja que a cor da linha EditText seja.

(2) Se você tiver outras pastas de valores com style.xml, esta etapa é muito importante. Porque esse arquivo será herdado do arquivo xml pai anterior. Por exemplo, eu tenho valores-19 / styles.xml. Isto é especificamente para Kitkat e acima. Altere seu pai para AppBaseTheme e certifique-se de se livrar de "colorAccent" para que ele não substitua a cor do pai. Além disso, você precisa manter os itens específicos da versão 19. Em seguida, ela ficará assim.

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

9

É bem simples (obrigatório: API mínima 21) ...

  1. Vá para o seu xml e selecione o campo EditText
  2. No lado direito, você pode ver a janela 'Atributos'. Selecione "Visualizar todos os atributos"
  3. Basta procurar por 'tonalidade'
  4. E adicione / altere o 'backgroundTint' para um hexadecimal de cor desejado (digamos # FF0000)

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Mantenha a codificação ........ :)


2
API mínima 21.
Maihan Nijat 28/10/19

Alterar a tonalidade de fundo altera o FUNDO. Esta resposta está incorreta
Code Wiget 28/03

6

A cor da linha é definida pela EditTextpropriedade de plano de fundo da. Para alterá-lo, você deve alterar o android:backgroundarquivo de layout.

Devo observar que esse estilo é alcançado usando um drawable de 9 patches. Se você olhar no SDK, poderá ver que o fundo da EditTextimagem é esta:

textfield_activated_holo_light.9.png

Para alterá-lo, você pode abri-lo em um programa de manipulação de imagens e colorir na cor desejada. Salve-o como bg_edit_text.9.pnge, em seguida, coloque-o na sua pasta de desenho. Agora você pode aplicá-lo como pano de fundo para o seguinte EditText:

android:background="@drawable/bg_edit_text"


4

O plano de fundo dos widgets depende do nível da API .

ALTERNATIVA 1

Você pode fornecer uma imagem personalizada para o seu EditTextplano de fundo

android:background="@drawable/custom_editText"

Sua imagem deve ficar assim. Isso lhe dará o efeito desejado.

insira a descrição da imagem aqui

ALTERNATIVA 2

Defina esse xml como seu EditTextatributo de plano de fundo.

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

Isso terá a mesma aparência EditTextem todas as APIs.


Estou interessado na versão 4.0 e superior. Ou seja, eu só quero mudar a cor da linha quando EditText ativa
Alex

4

Você pode alterar a cor pintando o fundo <EditText android:backgroundTint="@color/red"/>


1
isso funciona somente para api> 21 você deve seguir resposta @Rahul para todas as APIs ou adicionar diferentes layouts para api> 21 no layout-21 pasta
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>

Defina como EditText

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

3

Use este método .. e modifique-o de acordo com seus nomes de exibição. Esse código funciona muito bem.

 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

Se você deseja uma linha plana, pode fazer isso facilmente com o xml. Aqui está o exemplo 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>

Substitua a forma por um seletor se desejar fornecer largura e cor diferentes para o edittext focado.


1
com design material que cria retângulo, com a linha de fundo mais amplo
Filip Zymek

2

A melhor abordagem é usar um atributo AppCompatEditTextwith backgroundTintdo appespaço para nome. ie

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

quando o usamos android:backgroundTint, funciona apenas na API21 ou mais, mas app:backgroundTintfunciona em todos os níveis da API que seu aplicativo faz.


1

Use a propriedade android: background para esse edittext. Passe a imagem da pasta que você pode desenhar. Por exemplo,

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

** é uma das coisas com vista **


1

Tente da seguinte maneira: ele converterá a cor da linha inferior do EditText, quando usada como uma propriedade de plano de fundo.

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

Isso pode ser feito simplesmente incluindo-o android:theme="@style/AppTheme.AppBarOverlaycomo atributo no seu editText e adicione-o <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />aos seus estilos

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.