Ubah "on" warna Switch

Saya menggunakan kontrol Switch standar dengan tema holo.light di aplikasi ICS.

Saya ingin mengubah warna yang disorot atau pada status Toggle Button dari standar biru muda ke hijau.

Ini seharusnya mudah, tetapi sepertinya saya tidak tahu bagaimana melakukannya.

Sampai sekarang lebih baik menggunakan SwitchCompat dari perpustakaan AppCompat.v7. Anda kemudian dapat menggunakan gaya sederhana untuk mengubah warna komponen Anda.

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">@color/my_awesome_color</item>

    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">@color/my_awesome_darker_color</item>

    <!-- colorAccent is used as the default value for colorControlActivated,
         which is used to tint widgets -->
    <item name="colorAccent">@color/accent</item>

    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight, and colorSwitchThumbNormal. -->

</style>

ref: Android Developers Blog

EDIT :

Cara penerapannya dengan benar dilakukan melalui android:theme="@style/Theme.MyTheme" dan ini juga dapat diterapkan pada gaya induk seperti EditTexts, RadioButtons, Switches, CheckBoxes, dan ProgressBars:

<style name="My.Widget.ProgressBar" parent="Widget.AppCompat.ProgressBar">

<style name="My.Widget.Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">

Terlambat ke pesta tapi ini yang kulakukan

Gaya

 <style name="SCBSwitch" parent="Theme.AppCompat.Light">
        <!-- active thumb & track color (30% transparency) -->
        <item name="colorControlActivated">#46bdbf</item>

        <!-- inactive thumb color -->
        <item name="colorSwitchThumbNormal">#f1f1f1
        </item>

        <!-- inactive track color (30% transparency) -->
        <item name="android:colorForeground">#42221f1f
        </item>
    </style>

Warna

Tata letak

<android.support.v7.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:checked="false"
    android:theme="@style/SCBSwitch" />

Hasil

Lihat perubahan warna untuk sakelar aktif dan nonaktif

Ini berfungsi untuk saya (membutuhkan Android 4.1):

Switch switchInput = new Switch(this);
int colorOn = 0xFF323E46;
int colorOff = 0xFF666666;
int colorDisabled = 0xFF333333;
StateListDrawable thumbStates = new StateListDrawable();
thumbStates.addState(new int[]{android.R.attr.state_checked}, new ColorDrawable(colorOn));
thumbStates.addState(new int[]{-android.R.attr.state_enabled}, new ColorDrawable(colorDisabled));
thumbStates.addState(new int[]{}, new ColorDrawable(colorOff)); // this one has to come last
switchInput.setThumbDrawable(thumbStates);

Perhatikan bahwa status "default" perlu ditambahkan terakhir seperti yang ditunjukkan di sini.

Satu-satunya masalah yang saya lihat adalah "ibu jari" dari switch sekarang tampak lebih besar dari latar belakang atau "track" dari switch. Saya pikir itu karena saya masih menggunakan gambar trek default, yang memiliki beberapa ruang kosong di sekitarnya. Namun, ketika saya mencoba untuk menyesuaikan gambar trek menggunakan teknik ini, saklar saya tampaknya memiliki ketinggian 1 piksel dengan hanya sepotong teks yang hidup / mati muncul. Pasti ada solusi untuk itu, tapi saya belum menemukannya ...

Pembaruan untuk Android 5

Di Android 5, kode di atas membuat peralihan menghilang sepenuhnya. Kita harus dapat menggunakan metode setButtonTintList baru , tetapi ini tampaknya diabaikan untuk switch. Tapi ini berhasil:

ColorStateList buttonStates = new ColorStateList(
        new int[][]{
                new int[]{-android.R.attr.state_enabled},
                new int[]{android.R.attr.state_checked},
                new int[]{}
        },
        new int[]{
                Color.BLUE,
                Color.RED,
                Color.GREEN
        }
);
switchInput.getThumbDrawable().setTintList(buttonStates);
switchInput.getTrackDrawable().setTintList(buttonStates);

Pembaruan untuk Android 6-7

Seperti yang dinyatakan Cheruby dalam komentar, kita bisa menggunakan yang baru setThumbTintListdan itu berfungsi seperti yang diharapkan untuk saya. Kita juga bisa menggunakan setTrackTintList, tetapi itu menerapkan warna sebagai campuran, dengan hasil yang lebih gelap dari yang diharapkan dalam tema warna gelap dan lebih terang dari yang diharapkan dalam tema warna terang, kadang-kadang sampai tidak terlihat. Di Android 7, saya bisa meminimalkan perubahan itu dengan mengganti mode track tint , tapi saya tidak bisa mendapatkan hasil yang layak dari itu di Android 6. Anda mungkin perlu menentukan warna tambahan yang mengimbangi blending. (Apakah Anda pernah merasa bahwa Google tidak ingin kami menyesuaikan tampilan aplikasi kami?)

ColorStateList thumbStates = new ColorStateList(
        new int[][]{
                new int[]{-android.R.attr.state_enabled},
                new int[]{android.R.attr.state_checked},
                new int[]{}
        },
        new int[]{
                Color.BLUE,
                Color.RED,
                Color.GREEN
        }
);
switchInput.setThumbTintList(thumbStates);
if (Build.VERSION.SDK_INT >= 24) {
    ColorStateList trackStates = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_enabled},
                    new int[]{}
            },
            new int[]{
                    Color.GRAY,
                    Color.LTGRAY
            }
    );
    switchInput.setTrackTintList(trackStates);
    switchInput.setTrackTintMode(PorterDuff.Mode.OVERLAY);
}

Untuk mengubah Beralih gaya tanpa menggunakan style.xml atau kode Java, Anda dapat menyesuaikan beralih ke tata letak XML:

<Switch
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:thumbTint="@color/blue"
        android:trackTint="@color/white"
        android:checked="true"
        android:layout_height="wrap_content" />

Itu atribut android: thumbTint dan android: trackTint yang memungkinkan Anda untuk menyesuaikan warna

Ini adalah hasil visual untuk XML ini:

Buat Switch kustom dan ganti setChecked untuk mengubah warna:

  public class SwitchPlus extends Switch {

    public SwitchPlus(Context context) {
        super(context);
    }

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

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

    @Override
    public void setChecked(boolean checked) {
        super.setChecked(checked);
        changeColor(checked);
    }

    private void changeColor(boolean isChecked) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            int thumbColor;
            int trackColor;

            if(isChecked) {
                thumbColor = Color.argb(255, 253, 153, 0);
                trackColor = thumbColor;
            } else {
                thumbColor = Color.argb(255, 236, 236, 236);
                trackColor = Color.argb(255, 0, 0, 0);
            }

            try {
                getThumbDrawable().setColorFilter(thumbColor, PorterDuff.Mode.MULTIPLY);
                getTrackDrawable().setColorFilter(trackColor, PorterDuff.Mode.MULTIPLY);
            }
            catch (NullPointerException e) {
                e.printStackTrace();
            }
        }
    }
}

Sementara jawaban oleh SubChord benar, apakah tidak benar-benar menjawab pertanyaan tentang cara mengatur warna "on" tanpa juga mempengaruhi widget lainnya. Untuk melakukan ini, gunakan a ThemeOverlaydi styles.xml:

<style name="ToggleSwitchTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/green_bright</item>
</style>

Dan referensi di saklar Anda:

<android.support.v7.widget.SwitchCompat
  android:theme="@style/ToggleSwitchTheme" ... />

Dengan melakukan hal itu HANYA akan memengaruhi warna tampilan yang ingin Anda terapkan.

<androidx.appcompat.widget.SwitchCompat
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:thumbTint="@color/white"
                app:trackTint="@drawable/checker_track"/>

Dan di dalam checker_track.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/lightish_blue" android:state_checked="true"/>
    <item android:color="@color/hint" android:state_checked="false"/>
</selector>

Saya menyelesaikannya dengan memperbarui Filter Warna ketika status Switch diubah ...

public void bind(DetailItem item) {
    switchColor(item.toggle);
    listSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                switchColor(b);
        }
    });
}

private void switchColor(boolean checked) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        listSwitch.getThumbDrawable().setColorFilter(checked ? Color.BLACK : Color.WHITE, PorterDuff.Mode.MULTIPLY);
        listSwitch.getTrackDrawable().setColorFilter(!checked ? Color.BLACK : Color.WHITE, PorterDuff.Mode.MULTIPLY);
    }
}

Mungkin agak terlambat, tetapi untuk tombol sakelar, tombol toogle bukan jawabannya, Anda harus mengubah yang dapat ditarik di parameter xml sakelar:

 android:thumb="your drawable here"

buat drawable "newthumb.xml"

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/Green" android:state_checked="true"/>
    <item android:color="@color/Red" android:state_checked="false"/>
</selector>

dan buat "newtrack.xml" yang dapat digambar

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/black" android:state_checked="true"/>
        <item android:color="@color/white" android:state_checked="false"/>
    </selector>

dan tambahkan di Switch:

<Switch
        android:trackTint="@drawable/newtrack"
        android:thumbTint="@drawable/newthumb"
         />

Di Android Lollipop dan di atasnya, tentukan dengan gaya tema Anda:

<style name="BaseAppTheme" parent="Material.Theme">
    ...
    <item name="android:colorControlActivated">@color/color_switch</item>
</style>

Buat gambar 9-patch Anda sendiri dan atur sebagai latar belakang tombol sakelar.

http://radleymarx.com/2011/simple-guide-to-9-patch/

Solusi yang disarankan dari arlomedia bekerja untuk saya. Tentang masalah ekstraspace-nya, saya memutuskan untuk menghapus semua bantalan pada sakelar.

EDIT

Seperti yang diminta, di sini apa yang saya miliki.

Dalam file tata letak, sakelar saya berada di dalam tata letak linier dan setelah TextView.

<LinearLayout
        android:id="@+id/myLinearLayout"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal|center"
        android:gravity="right"
        android:padding="10dp"
        android:layout_marginTop="0dp"
        android:background="@drawable/bkg_myLinearLayout"
        android:layout_marginBottom="0dp">
        <TextView
            android:id="@+id/myTextForTheSwitch"
            android:layout_height="wrap_content"
            android:text="@string/TextForTheSwitch"
            android:textSize="18sp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal|center"
            android:gravity="right"
            android:layout_width="wrap_content"
            android:paddingRight="20dp"
            android:textColor="@color/text_white" />
        <Switch
            android:id="@+id/mySwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textOn="@string/On"
            android:textOff="@string/Off"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_toRightOf="@id/myTextForTheSwitch"
            android:layout_alignBaseline="@id/myTextForTheSwitch"
            android:gravity="right" />
    </LinearLayout>

Karena saya bekerja dengan Xamarin / Monodroid (min. Android 4.1) kode saya adalah:

Android.Graphics.Color colorOn = Android.Graphics.Color.Green;
Android.Graphics.Color colorOff = Android.Graphics.Color.Gray;
Android.Graphics.Color colorDisabled = Android.Graphics.Color.Green;

StateListDrawable drawable = new StateListDrawable();
drawable.AddState(new int[] { Android.Resource.Attribute.StateChecked }, new ColorDrawable(colorOn));
drawable.AddState(new int[] { -Android.Resource.Attribute.StateEnabled }, new ColorDrawable(colorDisabled));
drawable.AddState(new int[] { }, new ColorDrawable(colorOff));

swtch_EnableEdit.ThumbDrawable = drawable;

swtch_EnableEdit sebelumnya didefinisikan seperti ini (Xamarin):

Switch swtch_EnableEdit = view.FindViewById<Switch>(Resource.Id.mySwitch);

Saya tidak mengatur semua paddings dan saya tidak memanggil .setPadding (0, 0, 0, 0).

Anda dapat membuat style khusus untuk widget switch yang menggunakan aksen warna sebagai default ketika melakukan style khusus untuk itu

<style name="switchStyle" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorPrimary</item>    <!-- set your color -->
</style>    

Anda dapat mencoba lib ini, mudah untuk mengubah warna untuk tombol sakelar.
https://github.com/kyleduo/SwitchButton

Cobalah untuk menemukan jawaban yang benar di sini: Selektor pada warna latar belakang TextView . Dalam dua kata Anda harus membuat Bentuk dalam XML dengan warna dan kemudian menetapkannya untuk menyatakan "dicentang" di pemilih Anda.

Saya tidak tahu cara melakukannya dari java, tetapi jika Anda memiliki gaya yang ditentukan untuk aplikasi Anda, Anda dapat menambahkan baris ini dalam gaya Anda dan Anda akan memiliki warna yang diinginkan untuk saya, saya telah menggunakan # 3F51B5

<color name="ascentColor">#3F51B5</color>

Cara termudah adalah menentukan rona trek, dan mengatur mode rona ke src_over untuk menghapus transparansi 30%.

android:trackTint="@drawable/toggle_style"
android:trackTintMode="src_over"

toggle_style.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/informationDefault"
        android:state_checked="true"
        />
    <item android:color="@color/textDisabled" android:state_checked="false"/>
</selector>

Sebagai tambahan untuk jawaban yang ada: Anda dapat menyesuaikan ibu jari dan melacak menggunakan penyeleksi dalam res/colorfolder, misalnya:

switch_track_selector

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/lightBlue"
        android:state_checked="true" />
    <item android:color="@color/grey"/>
</selector>

switch_thumb_selector

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/darkBlue"
        android:state_checked="true" />
    <item android:color="@color/white"/>
</selector>

Gunakan penyeleksi ini untuk mengubahsuaikan warna trek dan ibu jari:

<androidx.appcompat.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:trackTint="@color/switch_track_selector"
    app:thumbTint="@color/switch_thumb_selector"/>

Perlu diingat bahwa jika Anda menggunakan standar Switchdan androidnamespace untuk atribut ini, itu hanya akan berfungsi untuk API 23 dan yang lebih baru, jadi gunakan SwitchCompatdengan appnamespace xmlns:app="http://schemas.android.com/apk/res-auto"sebagai solusi universal.

Hasil:

Dalam xml, Anda dapat mengubah warna sebagai:

 <androidx.appcompat.widget.SwitchCompat
    android:id="@+id/notificationSwitch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:checked="true"
    app:thumbTint="@color/darkBlue"
    app:trackTint="@color/colorGrey"/>

Secara dinamis Anda dapat berubah sebagai:

Switch.thumbDrawable.setColorFilter(ContextCompat.getColor(requireActivity(), R.color.darkBlue), PorterDuff.Mode.MULTIPLY)

Solusi untuk Android Studio 3.6:

yourSwitch.setTextColor(getResources().getColor(R.color.yourColor));

Mengubah warna teks dalam nilai XML file yang ditentukan warna (warna Anda).