Zmień kolor „włączony” przełącznika

Używam standardowego elementu sterującego przełącznikiem z motywem holo.light w aplikacji ICS.

Chcę zmienić podświetlony lub włączony kolor przycisku przełącznika ze standardowego jasnoniebieskiego na zielony.

To powinno być łatwe, ale nie mam pojęcia, jak to zrobić.

Od teraz lepiej jest używać SwitchCompat z biblioteki AppCompat.v7. Następnie możesz użyć prostego stylu, aby zmienić kolor komponentów.

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: Blog deweloperów Androida

EDYCJA :

Sposób, w jaki powinien być poprawnie zastosowany, przebiega android:theme="@style/Theme.MyTheme" i można go również zastosować do stylów nadrzędnych, takich jak EditTexts, RadioButtons, Switches, CheckBoxes i ProgressBars:

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

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

Spóźniony na imprezę, ale tak to zrobiłem

Styl

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

Zabarwienie

Układ

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

Wynik

Zobacz zmianę kolorów dla włączników i wyłączników

To działa dla mnie (wymaga Androida 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);

Zauważ, że stan „domyślny” należy dodać jako ostatni, jak pokazano tutaj.

Jedynym problemem, jaki widzę, jest to, że „kciuk” przełącznika wydaje się teraz większy niż tło lub „ścieżka” przełącznika. Myślę, że to dlatego, że nadal używam domyślnego obrazu ścieżki, który ma wokół niego puste miejsce. Jednak gdy próbowałem dostosować obraz ścieżki za pomocą tej techniki, mój przełącznik wydawał się mieć wysokość 1 piksela z pojawianiem się tylko kawałka tekstu włączania / wyłączania. Musi być na to rozwiązanie, ale jeszcze go nie znalazłem ...

Aktualizacja dla Androida 5

W systemie Android 5 powyższy kod powoduje całkowite zniknięcie przełącznika. Powinniśmy móc użyć nowej metody setButtonTintList , ale wydaje się, że jest to ignorowane w przypadku przełączników. Ale to działa:

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

Aktualizacja dla Androida 6-7

Jak stwierdził Cheruby w komentarzach, możemy użyć nowego setThumbTintListi działało zgodnie z oczekiwaniami. Możemy również użyć setTrackTintList, ale to powoduje, że kolor jest mieszanką, w wyniku czego jest ciemniejszy niż oczekiwano w motywach o ciemnych kolorach i jaśniejszy niż oczekiwano w motywach o jasnych kolorach, czasem do tego stopnia, że ​​jest niewidoczny. W systemie Android 7 udało mi się zminimalizować tę zmianę, zastępując tryb odcień ścieżki , ale nie mogłem uzyskać przyzwoitych wyników w Androidzie 6. Być może będziesz musiał zdefiniować dodatkowe kolory, które kompensują mieszanie. (Czy kiedykolwiek miałeś wrażenie, że Google nie chce, abyśmy dostosowywali wygląd naszych aplikacji?)

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

Aby zmienić styl przełączania bez używania style.xml lub kodu Java, możesz dostosować przełącznik do formatu XML układu:

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

Jest to atrybut android: thumbTint i android: trackTint, który umożliwia dostosowanie koloru

Oto wizualny wynik dla tego XML:

Utwórz niestandardowy przełącznik i nadpisz zestaw Zaznaczone, aby zmienić kolor:

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

Chociaż odpowiedź SubChord jest poprawna, tak naprawdę nie odpowiada na pytanie, jak ustawić kolor „włączony” bez wpływu również na inne widżety. Aby to zrobić, użyj a ThemeOverlayw styles.xml:

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

I odwołaj się do tego w swoim przełączniku:

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

W ten sposób wpłynie to TYLKO na kolor widoków, do których chcesz go zastosować.

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

A wewnątrz 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>

Rozwiązałem to, aktualizując filtr kolorów, gdy stan przełącznika został zmieniony ...

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

Może być trochę za późno, ale w przypadku przycisków przełącznika przycisk toogle nie jest odpowiedzią, należy zmienić rysowany w parametrze xml przełącznika:

 android:thumb="your drawable here"

uczyń możliwym do rysowania „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>

i utwórz plik „newtrack.xml” do rysowania

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

i dodaj go w Switch:

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

W systemie Android Lollipop i nowszych wersjach zdefiniuj go w swoim stylu motywu:

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

Stwórz własny obraz z 9 patchami i ustaw go jako tło przycisku przełączania.

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

Rozwiązanie zaproponowane przez arlomedia sprawdziło się u mnie. O jego kwestii ekstraprzestrzeni rozwiązałem usuwając wszystkie wyściółki do przełącznika.

EDYTOWAĆ

Zgodnie z prośbą, oto co mam.

W pliku układu mój przełącznik znajduje się w układzie liniowym i po 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>

Ponieważ pracuję z Xamarin / Monodroid (min. Android 4.1) mój kod to:

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 został wcześniej zdefiniowany w ten sposób (Xamarin):

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

Nie ustawiam wszystkich dopełnień i nie wywołuję .setPadding (0, 0, 0, 0).

możesz utworzyć niestandardowy styl dla widgetu przełącznika, który używa akcentu kolorystycznego jako domyślnego, gdy tworzysz dla niego niestandardowy styl

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

Możesz wypróbować tę bibliotekę, łatwo zmienić kolor przycisku przełącznika.
https://github.com/kyleduo/SwitchButton

Spróbuj znaleźć właściwą odpowiedź tutaj: Selektor koloru tła TextView . W dwóch słowach powinieneś utworzyć Shape w XML z kolorem, a następnie przypisać go do stanu „zaznaczone” w selektorze.

Nie wiem, jak to zrobić z javy, ale jeśli masz zdefiniowany styl dla swojej aplikacji, możesz dodać tę linię w swoim stylu i będziesz miał dla mnie pożądany kolor, użyłem # 3F51B5

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

Najłatwiejszym sposobem jest zdefiniowanie odcienia ścieżki i ustawienie trybu odcienia na src_over, aby usunąć 30% przezroczystości.

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>

Jako dodatek do istniejących odpowiedzi: możesz dostosować kciuk i ścieżkę za pomocą selektorów w res/color folderze, na przykład:

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>

Użyj tych selektorów, aby dostosować odcienie ścieżki i kciuka:

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

Należy pamiętać, że jeśli używasz standart Switchi androidnazw dla tych atrybutów, to będzie działać tylko do API 23 i później, więc użytku SwitchCompatz appnazw xmlns:app="http://schemas.android.com/apk/res-auto"jako uniwersalnego rozwiązania.

Wynik:

W xml możesz zmienić kolor jako:

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

Dynamicznie możesz zmieniać jako:

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

Rozwiązanie dla Android Studio 3.6:

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

Zmienia kolor tekstu a w wartości zdefiniowanej w pliku koloru XML (yourColor).