Zmiana koloru dolnej linii EditText za pomocą appcompat v7

Używam appcompat v7, aby uzyskać spójny wygląd na Androidzie 5 i mniejszych. Działa raczej dobrze. Jednak nie mogę wymyślić, jak zmienić kolor dolnej linii i kolor akcentu dla EditTexts. Czy to możliwe?

Próbowałem zdefiniować niestandardowy android:editTextStyle(patrz poniżej), ale udało mi się jedynie zmienić pełny kolor tła lub kolor tekstu, ale nie dolną linię ani kolor akcentu. Czy można zastosować określoną wartość właściwości? czy muszę używać niestandardowego obrazu do rysowania za pośrednictwem android:backgroundwłaściwości? czy nie jest możliwe określenie koloru w heksie?

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

Według źródeł Android API 21 wydaje się, że EditText z materiałowym designem używa colorControlActivatedi colorControlNormal. Dlatego próbowałem zastąpić te właściwości w poprzedniej definicji stylu, ale nie ma to żadnego efektu. Prawdopodobnie appcompat go nie używa. Niestety nie mogę znaleźć źródeł dla ostatniej wersji appcompat z materiałowym designem.

Wreszcie znalazłem rozwiązanie. To po prostu składa się z nadrzędnych wartości dla colorControlActivated, colorControlHighlightoraz colorControlNormalw definicji app motywu i nie swoim stylu EditText. Następnie pomyśl, aby użyć tego motywu do dowolnej aktywności. Poniżej znajduje się przykład:

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

Czułem, że potrzebuję odpowiedzi na wypadek, gdyby ktoś chciał zmienić tylko jeden tekst edycji. Robię to tak:

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

Choć rozwiązanie Laurents jest poprawna, to przychodzi z pewnymi niedogodnościami, jak opisane w komentarzach, ponieważ nie tylko w dolnym wierszu EditTextzostanie przyciemnione ale z tyłu guzik Toolbar, CheckBoxesitd., Jak również.

Na szczęście v22.1od appcompat-v7wprowadzono kilka nowych możliwości. Teraz możliwe jest przypisanie określonego motywu tylko do jednego widoku. Prosto z listy zmian :

Przestarzałe korzystanie z aplikacji: motyw do stylizacji paska narzędzi. Teraz możesz używać systemu Android: motyw do pasków narzędzi na wszystkich urządzeniach interfejsu API poziomu 7 i wyższych oraz systemu Android: obsługa motywów dla wszystkich widgetów na poziomie interfejsu API 11 i wyższych urządzeń.

Zamiast ustawiać pożądany kolor w motywie globalnym, tworzymy nowy i przypisujemy go tylko do EditText.

Przykład:

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

Można to zmienić w XML, używając:

W przypadku referencyjnego interfejsu API> = 21 użyj:

android:backgroundTint="@color/blue"

W przypadku kompatybilności wstecznej API <21 użyj:

app:backgroundTint="@color/blue"

Oto rozwiązanie dla API <21 i nowszych

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
}

Mam nadzieję, że to pomoże

Akceptowana odpowiedź jest nieco bardziej zależna od stylu, ale najbardziej wydajne jest dodanie atrybutu colorAccent w stylu AppTheme w następujący sposób:

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

Atrybut colorAccent służy do barwienia widgetów w aplikacji i dlatego powinien być stosowany dla zachowania spójności

Jeśli używasz appcompat-v7:22.1.0+, możesz użyć DrawableCompat, aby zabarwić widżety

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

Posługiwać się:

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

Będzie to obsługiwać urządzenia sprzed wersji Lollipop nie tylko +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>

Jednym z szybkich rozwiązań Twojego problemu jest zajrzenie do twojego pakietu aplikacji / build / intermediates / exploded-aar / com.android.support / appcompat-v7 / res / drawable / for abc_edit_text_material.xml i skopiuj ten plik xml do folderu, który można wyciągnąć. Następnie możesz zmienić kolor 9 plików łatek z tego selektora, aby dopasować go do swoich preferencji.

To bardzo proste, po prostu dodaj android:backgroundTintatrybut do swojego 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"/>

Oto część kodu źródłowego TextInputLayoutbiblioteki obsługi projektu ( ZAKTUALIZOWANA dla wersji 23.2.0 ), która zmienia EditTextkolor dolnej linii w prostszy sposób:

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

Wygląda na to, że cały powyższy kod staje się bezużyteczny w 23.2.0, jeśli chcesz zmienić kolor programowo.

A jeśli chcesz obsługiwać wszystkie platformy, oto moja metoda:

/**
 * 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);
}

Ja też zbyt długo tkwiłem w tym problemie.

Potrzebowałem rozwiązania, które działało dla wersji zarówno powyżej, jak i poniżej v21.

W końcu odkryłem bardzo proste, być może nie idealne, ale skuteczne rozwiązanie: po prostu ustaw kolor tła transparentwe właściwościach EditText.

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

Mam nadzieję, że to pozwoli komuś zaoszczędzić trochę czasu.

Dla mnie zmodyfikowałem zarówno AppTheme, jak i wartość colors.xml Zarówno colorControlNormal, jak i colorAccent pomogły mi zmienić kolor obramowania EditText. Oprócz kursora i „|” gdy znajduje się w 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>

Oto colors.xml

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

Wyjąłem atrybut android: textCursorDrawable do @null, który umieściłem w stylu editText. Gdy spróbowałem tego użyć, kolory nie zmieniły się.

Aby to zrobić, możesz ustawić tło tekstu edycyjnego na prostokąt z dopełnieniem minus po lewej, prawej i górze. Oto przykład 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>

Zastąp kształt selektorem, jeśli chcesz ustawić inną szerokość i kolor dla zogniskowanego tekstu edycyjnego.

W Activit.XML dodaj kod

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

Gdzie BackgroundTint=colordla pożądanego koloru

Używam tej metody, aby zmienić kolor linii za pomocą PorterDuff, bez innych rysunków.

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

Jeśli chcesz zmienić dolną linię bez używania kolorów aplikacji, użyj tych linii w swoim motywie:

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

Nie znam innego rozwiązania.

Opracowałem działające rozwiązanie tego problemu po 2 dniach zmagań, poniższe rozwiązanie jest idealne dla tych, którzy chcą zmienić tylko kilka edycji tekstu, zmienić / przełączyć kolor za pomocą kodu Java i chcą rozwiązać problemy z różnymi zachowaniami w wersjach systemu operacyjnego ze względu na użycie metody 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();
    }
  }
}

Używa w 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"/>

Dodaj stylowo linie

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

kod Java, aby przełączyć kolor

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

Byłem całkowicie zaskoczony tym problemem. Próbowałem wszystkiego w tym wątku i innych, ale bez względu na to, co zrobiłem, nie mogłem zmienić koloru podkreślenia na nic innego niż domyślny niebieski.

W końcu zorientowałem się, co się dzieje. android.widget.EditTextUżywałem (niepoprawnie) podczas tworzenia nowej instancji (ale reszta moich komponentów pochodziła z biblioteki appcompat). Powinienem był użyć android.support.v7.widget.AppCompatEditText. Wymieniłem new EditText(this)z new AppCompatEditText(this) i problem został rozwiązany natychmiast. Okazuje się, że jeśli faktycznie używasz AppCompatEditText, będzie po prostu szanował accentColortwój motyw (jak wspomniano w kilku komentarzach powyżej) i nie jest wymagana dodatkowa konfiguracja.

Jest to najłatwiejszy i najbardziej wydajny / wielokrotnego użytku / działa na wszystkich interfejsach API
Utwórz niestandardową klasę EditText w następujący sposób:

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

Następnie użyj tego w następujący sposób:

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

Aby dynamicznie zmienić tło EditText , możesz użyć 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);

Kredyty: Ta SO odpowiedź na temat ColorStateList jest niesamowita .

Dodaj app:backgroundTintponiżej poziomu interfejsu API 21. W przeciwnym razie użyj android:backgroundTint.

Dla poziomu poniżej interfejsu API 21.

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

Dla poziomu wyższego niż api 21.

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

Zmodyfikuj tę metodę zgodnie z potrzebami. To zadziałało dla mnie!

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