EditText souligné sous la propriété de texte


108

Je voudrais changer la couleur bleue sous le texte d'édition, je ne sais pas de quelle propriété il s'agit.

J'ai essayé d'utiliser une couleur de fond différente pour cela, mais cela n'a pas fonctionné.

J'ai joint une image ci-dessous:

entrez la description de l'image ici


Ceci est un arrière-plan pour le EditText qui est disponible sur certains niveaux d'API / téléphone. En d'autres termes, si votre application s'exécute sur un téléphone différent, vous pouvez voir un arrière-plan différent.
Sherif elKhatib

créer votre arrière
Vijju

1
Duplication possible du fil précédent. Veuillez vérifier ceci sur stackoverflow.com/a/4585750/1129468
gokhanakkurt

Utilisez le morceau de code ci-dessous et faites-moi savoir s'il fonctionne ou non.
InnocentKiller

Réponses:


90

Il est en fait assez facile de définir la couleur de soulignement d'un EditText par programmation (juste une ligne de code).

Pour définir la couleur:

editText.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_IN);

Pour supprimer la couleur:

editText.getBackground().clearColorFilter();

Remarque: lorsque le EditText a le focus , la couleur que vous définissez ne prendra pas effet, à la place, il a une couleur de focus.

Référence API:

Drawable # setColorFilter

Drawable # clearColorFilter


4
Fonctionne également sur Xamarin pour Android, dans votre moteur de rendu personnalisé OnElementChanged, vous pouvez le faireControl.Background.SetColorFilter(Android.Graphics.Color.White, PorterDuff.Mode.SrcIn);
David Conlisk

@DavidConlisk que Rendererremplacez-vous? J'essaie de comprendre comment faire fonctionner cela pour une barre de recherche.
Nick

@NickN. J'utilisais ceci pour un sélecteur, donc j'ai remplacé le PickerRenderer. Cela devrait fonctionner avec le moteur de rendu qui vous convient le mieux (en théorie!)
David Conlisk

1
Je suppose que cela devrait, mais le problème est peut-être que le SearchBarRenderern'est pas de type EditText. Je ne peux pas le faire fonctionner.
Nick

85

Utilisez android:backgroundTint=""dans votre EditTextmise en page XML.

Pour api <21, vous pouvez utiliser à AppCompatEditTextpartir de la bibliothèque de support puisapp:backgroundTint=""


14
Cela ne fonctionne actuellement que dans l'api 21 et au-dessus. pas de support arrière.
John Shelley

2
C'est de loin la solution la plus simple et la plus concise.
IgorGanapolsky

@JohnShelley voir ma réponse ci - dessous , cela fonctionne pour pré-Lollipop et plus.
Sufian

3
android:background="@null"pour les appareils avec api <21.
Hammad Nasir

4
Pour que cet attribut fonctionne dans les API inférieures à 21, vous devez utiliser l' espace de noms app (xmlns: app = " schemas.android.com/apk/res-auto" ) au lieu d'Android.
Andrei K.

38

Vous devez utiliser une image d'arrière-plan différente, et non une couleur, pour chaque état du EditText(focus, activé, activé).

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

Dans le site ci-dessus, vous pouvez obtenir des images à partir de nombreux composants du thème Holo. Sélectionnez simplement "EditText" et la couleur souhaitée. Vous pouvez voir un aperçu au bas de la page.

Téléchargez le fichier .zip et copiez-collez les ressources dans votre projet (images et XML).

si votre XML est nommé: apptheme_edit_text_holo_light.xml (ou quelque chose de similaire):

  1. Accédez à votre XML "styles.xml" et ajoutez le EditTextstyle personnalisé :

    <style name="EditTextCustomHolo" parent="android:Widget.EditText">
       <item name="android:background">@drawable/apptheme_edit_text_holo_light</item>
       <item name="android:textColor">#ffffff</item>
    </style>
  2. Faites cela dans votre EditText:

    <EditText
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       style="@style/EditTextCustomHolo"/>

Et c'est tout, j'espère que cela vous aidera.


24

Cela fonctionne bien pour l'ancienne et la nouvelle version d'Android (fonctionne bien même sur l'API 10!).

Définissez ce style dans votre styles.xml:

<style name="EditText.Login" parent="Widget.AppCompat.EditText">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textColorHint">@android:color/darker_gray</item>
    <item name="colorAccent">@color/blue</item>
    <item name="colorControlNormal">@color/blue</item>
    <item name="colorControlActivated">@color/blue</item>
</style>

Et maintenant, dans votre XML, définissez ceci comme thème et style ( style à définir textColoret thème pour définir toutes les autres choses):

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="text"
    style="@style/EditText.Login"
    android:theme="@style/EditText.Login"/>

Éditer

Cette solution provoque un petit problème d'interface utilisateur sur les nouvelles versions d'Android (à partir de Lollipop ou Marshmallow) que les poignées de sélection sont soulignées.

Ce problème est abordé dans ce fil . (Je n'ai pas essayé cette solution personnellement)


Excellente réponse merci. L'utilisation de parent = "Widget.AppCompat.EditText", au lieu de parent = "android: Widget.EditText" a résolu mon problème majeur.
cfl

1
Je pense que vous voulez dire que cela fonctionne Lollipop (21) et plus parce que je reçois des avertissements que ce n'est pas inférieur à 21
Mark O'Sullivan

@ MarkO'Sullivan non, cela fonctionne pour pré-Lollipop et tout le chemin. Je l'ai testé sur l'API 10 et cela fonctionne très bien. Veuillez coller l'erreur complète et l'endroit où elle apparaît.
Sufian

Le texte d'édition ciblé avait toujours une couleur primaire pour moi, j'ai donc dû utiliser cette approche: stackoverflow.com/a/36543554/2413303
EpicPandaForce

18

vous pouvez changer la couleur de soulignement de la couleur EditText en la spécifiant dans styles.xml . Dans votre thème d'application styles.xml, ajoutez ce qui suit.

<item name="android:textColorSecondary">@color/primary_text_color</item> 

Comme indiqué par ana dans la section des commentaires

  <item name="android:colorControlActivated">@color/black</item>

définir ceci dans le style de thème fonctionne bien pour changer la couleur d'un soulignement edittext.


3
Notez qu'il android:textColorSecondaryest également utilisé pour déterminer la couleur de la flèche de retour et de l' DrawerLayouticône de hamburger dans l'ActionBar.
Bianca Daniciuc

7
J'ai fini par utiliser à la <item name="colorControlNormal">@color/edittext_underline_color</item>place de textColorSecondary en raison du problème de coloration de la barre de navigation.
Bianca Daniciuc

14

Vous devez donc créer un nouveau fichier .xml dans votre dossier dessinable.

Dans ce fichier, collez ce code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item
    android:bottom="8dp"
    android:left="-3dp"
    android:right="-3dp"
    android:top="-3dp">
    <shape android:shape="rectangle">
     <stroke
       android:width="1dp"
       android:color="@color/white"/>
     </shape>
   </item>
</layer-list>

Et dans votre EditText, définissez

android:background="@drawable/your_drawable"

Vous pouvez jouer avec votre xml dessinable, définir des coins, des rembourrages, etc.


1
c'est probablement la meilleure solution étant donné qu'elle permet une personnalisation complète du EditText, sans impact sur les autres composants dans un style ou une mise en page
mutable2112

à partir de ce que je comprends, vous pouvez simplement définir l'arrière-plan de l'edittext en blanc
rmanalo

J'ai parcouru toutes les solutions que j'ai pu trouver, c'était la seule qui fonctionnait pour moi en utilisant des composants Android Material.
barney.balazs

9

Dans le style de votre application, définissez la propriété colorAccent . Ici vous trouvez un exemple

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/action_bar</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/action_bar</item>
</style>

5

Vous pouvez changer la couleur de EditText par programme en utilisant simplement cette ligne de code:

edittext.setBackgroundTintList(ColorStateList.valueOf(yourcolor));


1
Fonctionne comme un charme: D
Taslim Oseni

1

Utilisez le code ci-dessous pour changer la couleur d'arrière-plan de la bordure de edit-text.

Créez un nouveau fichier XML sous drawable.

abc.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#00000000" />
    <stroke android:width="1dip" android:color="#ffffff" />
</shape>

et ajoutez-le comme arrière-plan de votre texte d'édition

android:background="@drawable/abc"

J'ai mentionné que j'avais essayé de définir une couleur d'arrière-plan ci-dessus. ça n'a pas marché.
AndroidEnthusiast

1

Pour changer la couleur de la ligne du bas, vous pouvez l'utiliser dans le thème de votre application:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="colorControlNormal">#c5c5c5</item>
    <item name="colorControlActivated">#ffe100</item>
    <item name="colorControlHighlight">#ffe100</item>
</style>

Pour changer la couleur de l'étiquette flottante, écrivez le thème suivant:

<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
<item name="android:textColor">#4ffd04[![enter image description here][1]][1]</item>
</style>

et utilisez ce thème dans votre mise en page:

 <android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout">

    <EditText
        android:id="@+id/edtTxtFirstName_CompleteProfileOneActivity"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:capitalize="characters"
        android:hint="User Name"
        android:imeOptions="actionNext"
        android:inputType="text"
        android:singleLine="true"
        android:textColor="@android:color/white" />

</android.support.design.widget.TextInputLayout>

entrez la description de l'image ici


Le texte d'édition ciblé avait toujours une couleur primaire pour moi, j'ai donc dû utiliser cette approche: stackoverflow.com/a/36543554/2413303
EpicPandaForce

1

Vous pouvez le faire avec AppCompatEditText et le sélecteur de couleur:

            <androidx.appcompat.widget.AppCompatEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:backgroundTint="@color/selector_edittext_underline" />

selector_edittext_underline.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/focused_color" 
          android:state_focused="true" />
    <item android:color="@color/hint_color" />
</selector>

0

Si vous n'avez pas à prendre en charge les appareils avec API <21, utilisez backgroundHint en xml, par exemple:

 <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="Task Name"
            android:ems="10"
            android:id="@+id/task_name"
            android:layout_marginBottom="15dp"
            android:textAlignment="center"
            android:textColor="@android:color/white"

            android:textColorLink="@color/blue"
            android:textColorHint="@color/blue"
            android:backgroundTint="@color/lighter_blue" />

Pour un meilleur support et des solutions de secours, utilisez la solution @Akariuz. backgroundHint est la solution la plus indolore, mais pas rétrocompatible, en fonction de vos besoins, passez un appel.


0

changez la colorAccentcouleur dont vous avez besoin pour cette couleur colorAccentet exécutez vous obtenez la sortie


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.