Mengubah warna garis EditText dengan appcompat v7

Saya menggunakan appcompat v7 untuk mendapatkan tampilan yang konsisten pada Android 5 dan kurang. Ini bekerja dengan baik. Namun saya tidak tahu bagaimana cara mengubah warna garis bawah dan warna aksen untuk EditTexts. Apa itu mungkin?

Saya telah mencoba untuk mendefinisikan suatu kustom android:editTextStyle(lih. Di bawah) tetapi saya hanya berhasil mengubah warna latar belakang penuh atau warna teks tetapi bukan garis bawah atau warna aksen. Apakah ada nilai properti tertentu untuk digunakan? saya harus menggunakan gambar yang dapat ditarik kustom melaluiandroid:background properti? apakah tidak mungkin untuk menentukan warna dalam heksa?

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

Menurut sumber Android 21 API, EditText dengan desain material tampaknya menggunakan colorControlActivateddan colorControlNormal. Oleh karena itu, saya telah mencoba menimpa properti ini dalam definisi style sebelumnya tetapi tidak berpengaruh. Mungkin appcompat tidak menggunakannya. Sayangnya, saya tidak dapat menemukan sumber untuk appcompat versi terakhir dengan desain material.

Akhirnya, saya menemukan solusinya. Ini hanya terdiri dari mengesampingkan nilai untuk colorControlActivated, colorControlHighlightdan colorControlNormaldalam definisi tema aplikasi Anda dan bukan gaya edittext Anda. Kemudian, pikirkan untuk menggunakan tema ini untuk aktivitas apa pun yang Anda inginkan. Di bawah ini adalah contohnya:

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

Saya merasa seperti ini membutuhkan jawaban jika seseorang ingin mengubah hanya satu edittext. Saya melakukannya seperti ini:

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

Sementara solusi Laurents benar, ia datang dengan beberapa kelemahan seperti yang dijelaskan dalam komentar karena tidak hanya garis bawah yang EditTextakan diwarnai tetapi Tombol Kembali Toolbar,CheckBoxes dll juga.

Untungnya v22.1dari appcompat-v7memperkenalkan beberapa kemungkinan baru. Sekarang mungkin untuk menetapkan tema tertentu hanya untuk satu tampilan. Langsung dari Changelog :

Penggunaan aplikasi yang sudah tidak digunakan: tema untuk menata Toolbar. Anda sekarang dapat menggunakan android: theme untuk toolbar pada semua perangkat API level 7 dan lebih tinggi dan android: dukungan tema untuk semua widget di API level 11 dan perangkat yang lebih tinggi.

Jadi alih-alih mengatur warna yang diinginkan dalam tema global, kami membuat yang baru dan menetapkannya hanya untuk EditText .

Contoh:

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

Ini dapat diubah dalam XML dengan menggunakan:

Untuk Referensi API> = 21 penggunaan kompatibilitas:

android:backgroundTint="@color/blue"

Untuk API mundur <21 penggunaan kompatibilitas:

app:backgroundTint="@color/blue"

Berikut ini solusi untuk API <21 ke atas

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
}

Semoga ini bisa membantu

Jawaban yang diterima sedikit lebih per hal dasar gaya, tetapi hal yang paling efisien untuk dilakukan adalah menambahkan atribut colorAccent dalam gaya AppTheme Anda seperti ini:

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

Atribut colorAccent digunakan untuk pewarnaan widget di seluruh aplikasi dan karenanya harus digunakan untuk konsistensi

Jika Anda menggunakan, appcompat-v7:22.1.0+Anda dapat menggunakan DrawableCompat untuk mewarnai widget Anda

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

Menggunakan:

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

Ini akan mendukung perangkat pra-Lollipop tidak hanya +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>

Salah satu solusi cepat untuk masalah Anda adalah dengan melihat di appappackage / build / intermediates / exploded-aar / com.android.support / appcompat-v7 / res / drawable / untuk abc_edit_text_material.xml dan salin file xml tersebut di folder yang dapat digambar. Kemudian Anda dapat mengubah warna 9 file tambalan dari dalam pemilih ini, agar sesuai dengan preferensi Anda.

Sangat mudah, cukup tambahkan android:backgroundTintatribut di blog Anda 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"/>

Berikut ini adalah bagian dari kode sumber TextInputLayoutdi perpustakaan desain dukungan ( DIPERBARUI untuk versi 23.2.0 ), yang mengubah EditTextwarna garis bawah dengan cara yang lebih sederhana:

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

Tampaknya semua kode di atas menjadi tidak berguna saat ini di 23.2.0 jika Anda ingin mengubah warna secara programatis.

Dan jika Anda ingin mendukung semua platform, berikut adalah metode saya:

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

Saya juga terjebak pada masalah ini terlalu lama.

Saya membutuhkan solusi yang berfungsi untuk versi di atas dan di bawah v21.

Saya akhirnya menemukan solusi yang sangat sederhana, mungkin tidak ideal, tetapi efektif: Cukup atur warna latar belakang ke transparentdalam properti EditText.

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

Saya harap ini menghemat waktu seseorang.

Bagi saya, saya memodifikasi AppTheme dan nilai colors.xml Baik colorControlNormal dan colorAccent membantu saya mengubah warna perbatasan EditText. Serta kursor, dan "|" ketika di dalam 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>

Berikut adalah colors.xml

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

Saya mengeluarkan atribut android: textCursorDrawable ke @null yang saya tempatkan di dalam gaya editText. Ketika saya mencoba menggunakan ini, warnanya tidak akan berubah.

Anda dapat mengatur latar belakang edittext ke persegi panjang dengan bantalan minus di sebelah kiri, kanan dan atas untuk mencapai ini. Berikut ini adalah contoh 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>

Ganti bentuk dengan pemilih jika Anda ingin memberikan lebar dan warna yang berbeda untuk edittext fokus.

Di Activit.XML tambahkan kode

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

Di mana BackgroundTint=coloruntuk warna yang Anda inginkan

Saya menggunakan metode ini untuk mengubah warna garis dengan PorterDuff, tanpa dapat digambar lainnya.

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

Jika Anda ingin mengubah garis bawah tanpa menggunakan warna aplikasi, gunakan baris ini dalam tema Anda:

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

Saya tidak tahu solusi lain.

Saya mencari solusi untuk masalah ini setelah 2 hari perjuangan, solusi di bawah ini sangat cocok untuk mereka yang ingin mengubah beberapa teks saja, mengubah / mengganti warna melalui kode java, dan ingin mengatasi masalah perilaku yang berbeda pada versi OS karena menggunakan metode 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();
    }
  }
}

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

Tambahkan garis dalam gaya

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

kode java untuk beralih warna

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

Saya benar-benar bingung dengan masalah ini. Saya telah mencoba segala yang ada di utas ini, dan di yang lain, tetapi apa pun yang saya lakukan, saya tidak dapat mengubah warna garis bawah menjadi apa pun selain biru default.

Saya akhirnya menemukan apa yang sedang terjadi. Saya (salah) menggunakan android.widget.EditTextketika membuat contoh baru (tetapi komponen saya yang lain berasal dari pustaka appcompat). Seharusnya saya gunakan android.support.v7.widget.AppCompatEditText. Saya diganti new EditText(this)dengan new AppCompatEditText(this) dan masalah langsung diselesaikan. Ternyata, jika Anda benar-benar menggunakan AppCompatEditText, itu hanya akan menghormati accentColordari tema Anda (sebagaimana disebutkan dalam beberapa komentar di atas) dan tidak ada konfigurasi tambahan yang diperlukan.

Ini adalah yang termudah dan paling efisien / dapat digunakan kembali / berfungsi di semua API.
Buat kelas EditText kustom seperti:

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

Kemudian gunakan seperti ini:

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

Untuk mengubah latar belakang EditText secara dinamis, Anda dapat menggunakan 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);

Penghargaan: Jawaban SO tentang ColorStateList ini luar biasa .

Tambahkan app:backgroundTintuntuk api level 21 di bawah ini. Jika tidak gunakanandroid:backgroundTint .

Untuk api di bawah level 21.

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

Untuk yang lebih tinggi dari level api 21.

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

Silakan modifikasi metode ini sesuai dengan kebutuhan Anda. Ini berhasil untuk saya!

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