Modification de la couleur de la ligne de fond EditText avec appcompat v7

J'utilise appcompat v7 pour obtenir une apparence cohérente sur Android 5 et moins. Cela fonctionne plutôt bien. Cependant, je ne peux pas comprendre comment changer la couleur de la ligne de fond et la couleur d'accent pour EditTexts. C'est possible?

J'ai essayé de définir une coutume android:editTextStyle(cf. ci-dessous) mais j'ai seulement réussi à changer la couleur d'arrière-plan complète ou la couleur du texte mais pas la ligne du bas ni la couleur d'accent. Y a-t-il une valeur de propriété spécifique à utiliser? dois-je utiliser une image dessinable personnalisée via la android:backgroundpropriété? n'est-il pas possible de spécifier une couleur en hexa?

 <style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="android:editTextStyle">@style/Widget.App.EditText</item>
 </style>

 <style name="Widget.App.EditText" parent="Widget.AppCompat.EditText">
     ???
 </style>

Selon les sources d'API Android 21, EditTexts avec la conception matérielle semble utiliser colorControlActivatedet colorControlNormal. Par conséquent, j'ai essayé de remplacer ces propriétés dans la définition de style précédente, mais cela n'a aucun effet. Appcompat ne l'utilise probablement pas. Malheureusement, je ne trouve pas les sources de la dernière version de l'application compatible avec la conception matérielle.

Enfin, j'ai trouvé une solution. Il consiste simplement de passer outre la valeur colorControlActivated, colorControlHighlightet colorControlNormaldans la définition de votre thème de l' application et non votre style edittext. Ensuite, pensez à utiliser ce thème pour toute activité que vous désirez. Voici un exemple:

<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">#c5c5c5</item>
    <item name="colorControlActivated">@color/accent</item>
    <item name="colorControlHighlight">@color/accent</item>
</style>

Je sentais que cela avait besoin d'une réponse au cas où quelqu'un voudrait changer un seul edittext. Je le fais comme ça:

editText.getBackground().mutate().setColorFilter(ContextCompat.getColor(context, R.color.your_color), PorterDuff.Mode.SRC_ATOP);

Bien que la solution de Laurents soit correcte, elle présente certains inconvénients, comme décrit dans les commentaires, car non seulement la ligne du bas du EditTextest teintée, mais le bouton Retour du Toolbar, CheckBoxesetc. également.

Heureusement, v22.1de appcompat-v7nouvelles possibilités ont été introduites. Il est désormais possible d'assigner un thème spécifique à une seule vue. Directement depuis le Changelog :

Utilisation obsolète de l'application: thème pour le style de la barre d'outils. Vous pouvez maintenant utiliser Android: thème pour les barres d' outils sur tous les appareils de niveau API 7 et supérieur et Android: thème soutien pour tous les widgets au niveau de l' API 11 et des dispositifs plus élevés.

Ainsi, au lieu de définir la couleur souhaitée dans un thème global, nous en créons une nouvelle et l’affectons uniquement au EditText.

Exemple:

<style name="MyEditTextTheme">
    <!-- Used for the bottom line when not selected / focused -->
    <item name="colorControlNormal">#9e9e9e</item>
    <!-- colorControlActivated & colorControlHighlight use the colorAccent color by default -->
</style>

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/MyEditTextTheme"/>

Cela peut être modifié en XML en utilisant:

Pour l'API de référence> = 21, utilisez la compatibilité:

android:backgroundTint="@color/blue"

Pour une compatibilité API <21 vers l'arrière, utilisez:

app:backgroundTint="@color/blue"

Voici la solution pour les API <21 et supérieures

Drawable drawable = yourEditText.getBackground(); // get current EditText drawable 
drawable.setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP); // change the drawable color

if(Build.VERSION.SDK_INT > 16) {
    yourEditText.setBackground(drawable); // set the new drawable to EditText
}else{
    yourEditText.setBackgroundDrawable(drawable); // use setBackgroundDrawable because setBackground required API 16
}

J'espère que ça aide

La réponse acceptée est un peu plus par élément de style, mais la chose la plus efficace à faire est d'ajouter l' attribut colorAccent dans votre style AppTheme comme ceci:

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:editTextStyle">@style/EditTextStyle</item>
</style>

<style name="EditTextStyle" parent="Widget.AppCompat.EditText"/>

L'attribut colorAccent est utilisé pour la teinture des widgets dans toute l'application et doit donc être utilisé pour la cohérence

Si vous utilisez, appcompat-v7:22.1.0+vous pouvez utiliser le DrawableCompat pour teinter vos widgets

    public static void tintWidget(View view, int color) {
        Drawable wrappedDrawable = DrawableCompat.wrap(view.getBackground());
        DrawableCompat.setTint(wrappedDrawable.mutate(), getResources().getColor(color));
        view.setBackgroundDrawable(wrappedDrawable);
    }

Utilisation:

<EditText
    app:backgroundTint="@color/blue"/>

Cela prendra en charge les appareils pré-Lollipop non seulement +21

<!-- Base application theme. -->
<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">@color/colorAccent</item>
    <item name="colorControlActivated">@color/colorAccent</item>
    <item name="colorControlHighlight">@color/colorAccent</item>

</style>

Une solution rapide à votre problème consiste à rechercher dans votreapplication / build / intermediates / exploded-aar / com.android.support / appcompat-v7 / res / drawable / for abc_edit_text_material.xml et à copier ce fichier xml dans votre dossier drawable. Ensuite, vous pouvez changer la couleur des 9 fichiers de patch depuis l'intérieur de ce sélecteur, afin de correspondre à vos préférences.

Il est très facile d'ajouter simplement un android:backgroundTintattribut dans votre fichier EditText.

android:backgroundTint="@color/blue"
android:backgroundTint="#ffffff"
android:backgroundTint="@color/red"


 <EditText
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:backgroundTint="#ffffff"/>

Voici une partie du code source de la TextInputLayoutbibliothèque de conception de support ( MISE À JOUR pour la version 23.2.0 ), qui change EditTextla couleur de la ligne de fond d'une manière plus simple:

private void updateEditTextBackground() {
    ensureBackgroundDrawableStateWorkaround();

    final Drawable editTextBackground = mEditText.getBackground();
    if (editTextBackground == null) {
        return;
    }

    if (mErrorShown && mErrorView != null) {
        // Set a color filter of the error color
        editTextBackground.setColorFilter(
                AppCompatDrawableManager.getPorterDuffColorFilter(
                        mErrorView.getCurrentTextColor(), PorterDuff.Mode.SRC_IN));
    }
    ...
}

Il semble que tout le code ci-dessus devienne inutile en 23.2.0 si vous voulez changer la couleur par programme.

Et si vous souhaitez prendre en charge toutes les plateformes, voici ma méthode:

/**
 * Set backgroundTint to {@link View} across all targeting platform level.
 * @param view the {@link View} to tint.
 * @param color color used to tint.
 */
public static void tintView(View view, int color) {
    final Drawable d = view.getBackground();
    final Drawable nd = d.getConstantState().newDrawable();
    nd.setColorFilter(AppCompatDrawableManager.getPorterDuffColorFilter(
            color, PorterDuff.Mode.SRC_IN));
    view.setBackground(nd);
}

Moi aussi, je suis resté coincé sur ce problème trop longtemps.

J'avais besoin d'une solution qui fonctionnait pour les versions supérieures et inférieures à la v21.

J'ai finalement découvert une solution très simple, peut-être pas idéale mais efficace: il suffit de définir la couleur d'arrière-plan transparentdans les propriétés EditText.

<EditText
    android:background="@android:color/transparent"/>

J'espère que cela fait gagner du temps à quelqu'un.

Pour moi, j'ai modifié à la fois l'AppTheme et une valeur colours.xml Le colorControlNormal et le colorAccent m'ont aidé à changer la couleur de la bordure EditText. Ainsi que le curseur et le "|" à l'intérieur d'un EditText.

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

Voici le colours.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="yellow">#B7EC2A</color>
</resources>

J'ai retiré l'attribut android: textCursorDrawable à @null que j'ai placé dans le style editText. Lorsque j'ai essayé de l'utiliser, les couleurs ne changeaient pas.

Vous pouvez définir l'arrière-plan de edittext sur un rectangle avec un remplissage moins à gauche, à droite et en haut pour y parvenir. Voici l'exemple 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>

Remplacez la forme par un sélecteur si vous souhaitez fournir une largeur et une couleur différentes pour l'edittext focalisé.

Dans Activit.XML, ajoutez le code

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:ems="10"
        android:id="@+id/editText"
        android:hint="Informe o usuário"
        android:backgroundTint="@android:color/transparent"/>

Où BackgroundTint=colorpour votre couleur désirée

J'utilise cette méthode pour changer la couleur de la ligne avec PorterDuff, sans autre dessinable.

public void changeBottomColorSearchView(int color) {
    int searchPlateId = mSearchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
    View searchPlate = mSearchView.findViewById(searchPlateId);
    searchPlate.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_IN);
}

Si vous souhaitez modifier la ligne de fond sans utiliser les couleurs de l'application, utilisez ces lignes dans votre thème:

<item name="android:editTextStyle">@android:style/Widget.EditText</item>
<item name="editTextStyle">@android:style/Widget.EditText</item>

Je ne connais pas d'autre solution.

J'ai trouvé une solution de travail à ce problème après 2 jours de lutte, la solution ci-dessous est parfaite pour ceux qui veulent changer quelques textes d'édition uniquement, changer / basculer la couleur via le code java et veulent surmonter les problèmes de comportement différent sur les versions du système d'exploitation en raison de l'utilisation de la méthode setColorFilter ().

    import android.content.Context;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.AppCompatDrawableManager;
import android.support.v7.widget.AppCompatEditText;
import android.util.AttributeSet;
import com.newco.cooltv.R;

public class RqubeErrorEditText extends AppCompatEditText {

  private int errorUnderlineColor;
  private boolean isErrorStateEnabled;
  private boolean mHasReconstructedEditTextBackground;

  public RqubeErrorEditText(Context context) {
    super(context);
    initColors();
  }

  public RqubeErrorEditText(Context context, AttributeSet attrs) {
    super(context, attrs);
    initColors();
  }

  public RqubeErrorEditText(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initColors();
  }

  private void initColors() {
    errorUnderlineColor = R.color.et_error_color_rule;

  }

  public void setErrorColor() {
    ensureBackgroundDrawableStateWorkaround();
    getBackground().setColorFilter(AppCompatDrawableManager.getPorterDuffColorFilter(
        ContextCompat.getColor(getContext(), errorUnderlineColor), PorterDuff.Mode.SRC_IN));
  }

  private void ensureBackgroundDrawableStateWorkaround() {
    final Drawable bg = getBackground();
    if (bg == null) {
      return;
    }
    if (!mHasReconstructedEditTextBackground) {
      // This is gross. There is an issue in the platform which affects container Drawables
      // where the first drawable retrieved from resources will propogate any changes
      // (like color filter) to all instances from the cache. We'll try to workaround it...
      final Drawable newBg = bg.getConstantState().newDrawable();
      //if (bg instanceof DrawableContainer) {
      //  // If we have a Drawable container, we can try and set it's constant state via
      //  // reflection from the new Drawable
      //  mHasReconstructedEditTextBackground =
      //      DrawableUtils.setContainerConstantState(
      //          (DrawableContainer) bg, newBg.getConstantState());
      //}
      if (!mHasReconstructedEditTextBackground) {
        // If we reach here then we just need to set a brand new instance of the Drawable
        // as the background. This has the unfortunate side-effect of wiping out any
        // user set padding, but I'd hope that use of custom padding on an EditText
        // is limited.
        setBackgroundDrawable(newBg);
        mHasReconstructedEditTextBackground = true;
      }
    }
  }

  public boolean isErrorStateEnabled() {
    return isErrorStateEnabled;
  }

  public void setErrorState(boolean isErrorStateEnabled) {
    this.isErrorStateEnabled = isErrorStateEnabled;
    if (isErrorStateEnabled) {
      setErrorColor();
      invalidate();
    } else {
      getBackground().mutate().clearColorFilter();
      invalidate();
    }
  }
}

Utilise en xml

<com.rqube.ui.widget.RqubeErrorEditText
            android:id="@+id/f_signup_et_referral_code"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toEndOf="@+id/referral_iv"
            android:layout_toRightOf="@+id/referral_iv"
            android:ems="10"
            android:hint="@string/lbl_referral_code"
            android:imeOptions="actionNext"
            android:inputType="textEmailAddress"
            android:textSize="@dimen/text_size_sp_16"
            android:theme="@style/EditTextStyle"/>

Ajoutez des lignes avec style

<style name="EditTextStyle" parent="android:Widget.EditText">
    <item name="android:textColor">@color/txt_color_change</item>
    <item name="android:textColorHint">@color/et_default_color_text</item>
    <item name="colorControlNormal">@color/et_default_color_rule</item>
    <item name="colorControlActivated">@color/et_engagged_color_rule</item>
  </style>

code java pour changer de couleur

myRqubeEditText.setErrorState(true);
myRqubeEditText.setErrorState(false);

J'ai été absolument déconcerté par ce problème. J'avais tout essayé dans ce fil et dans d'autres, mais peu importe ce que je faisais, je ne pouvais pas changer la couleur du soulignement en autre chose que le bleu par défaut.

J'ai finalement compris ce qui se passait. J'utilisais (à tort) android.widget.EditTextlors de la création d'une nouvelle instance (mais le reste de mes composants provenait de la bibliothèque appcompat). J'aurais dû utiliser android.support.v7.widget.AppCompatEditText. J'ai remplacé new EditText(this)par new AppCompatEditText(this) et le problème a été résolu instantanément. Il s'avère que si vous utilisez réellement AppCompatEditText, il respectera simplement le accentColorthème de votre thème (comme mentionné dans plusieurs commentaires ci-dessus) et aucune configuration supplémentaire n'est nécessaire.

C'est le plus simple et le plus efficace / réutilisable / fonctionne sur toutes les API
Créez une classe EditText personnalisée comme ceci:

public class EditText extends android.widget.EditText {
    public EditText(Context context) {
        super(context);
        init();
    }

    public EditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public EditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        getBackground().mutate().setColorFilter(ContextCompat.getColor(getContext(), R.color.colorAccent), PorterDuff.Mode.SRC_ATOP);
    }
}

Ensuite, utilisez-le comme ceci:

 <company.com.app.EditText
        android:layout_width="200dp"
        android:layout_height="wrap_content"/>

Pour modifier dynamiquement l'arrière-plan EditText, vous pouvez utiliser ColorStateList .

int[][] states = new int[][] {
    new int[] { android.R.attr.state_enabled}, // enabled
    new int[] {-android.R.attr.state_enabled}, // disabled
    new int[] {-android.R.attr.state_checked}, // unchecked
    new int[] { android.R.attr.state_pressed}  // pressed
};

int[] colors = new int[] {
    Color.BLACK,
    Color.RED,
    Color.GREEN,
    Color.BLUE
};

ColorStateList colorStateList = new ColorStateList(states, colors);

Crédits: Cette réponse SO à propos de ColorStateList est géniale .

Ajouter app:backgroundTintpour un niveau d'api inférieur à 21. Sinon, utilisezandroid:backgroundTint .

Pour un niveau d'api inférieur à 21.

<EditText
     android:id="@+id/edt_name"
     android:layout_width="300dp"
     android:layout_height="wrap_content"
     android:textColor="#0012ff"
     app:backgroundTint="#0012ff"/>

Pour un niveau supérieur au niveau 21 de l'API.

<EditText
     android:id="@+id/edt_name"
     android:layout_width="300dp"
     android:layout_height="wrap_content"
     android:textColor="#0012ff"
     android:backgroundTint="#0012ff"/>

Veuillez modifier cette méthode en fonction de vos besoins. Cela a fonctionné pour moi!

  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());
        }