Cambia il colore "on" di uno Switch

Sto usando un controllo Switch standard con il tema holo.light in un'app ICS.

Voglio cambiare il colore di stato evidenziato o acceso del pulsante Attiva / Disattiva da blu chiaro standard a verde.

Dovrebbe essere facile, ma non riesco a capire come farlo.

A partire da ora è meglio usare SwitchCompat dalla libreria AppCompat.v7. È quindi possibile utilizzare uno stile semplice per modificare il colore dei componenti.

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 degli sviluppatori Android

MODIFICA :

Il modo in cui dovrebbe essere applicato correttamente è attraverso android:theme="@style/Theme.MyTheme" e anche questo può essere applicato a stili principali come EditTexts, RadioButtons, Switches, CheckBoxes e ProgressBars:

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

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

In ritardo alla festa, ma è così che ho fatto

Stile

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

Colori

disposizione

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

Risultato

Vedi cambio di colore per abilitazione e disabilitazione interruttore

Questo funziona per me (richiede 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);

Si noti che lo stato "predefinito" deve essere aggiunto per ultimo, come mostrato qui.

L'unico problema che vedo è che il "pollice" dell'interruttore ora appare più grande dello sfondo o della "traccia" dell'interruttore. Penso che sia perché sto ancora usando l'immagine di traccia predefinita, che ha uno spazio vuoto attorno ad essa. Tuttavia, quando ho tentato di personalizzare l'immagine della traccia usando questa tecnica, il mio interruttore sembrava avere un'altezza di 1 pixel con solo un frammento del testo on / off. Deve esserci una soluzione per questo, ma non l'ho ancora trovata ...

Aggiornamento per Android 5

In Android 5, il codice sopra fa scomparire completamente l'interruttore. Dovremmo essere in grado di utilizzare il nuovo metodo setButtonTintList , ma questo sembra essere ignorato per gli switch. Ma questo funziona:

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

Aggiornamento per Android 6-7

Come Cheruby ha affermato nei commenti, possiamo usare il nuovo setThumbTintListe ha funzionato come previsto per me. Possiamo anche usare setTrackTintList, ma questo applica il colore come una fusione, con un risultato più scuro del previsto nei temi di colore scuro e più chiaro del previsto nei temi di colore chiaro, a volte al punto di essere invisibile. In Android 7, sono stato in grado di ridurre al minimo tale modifica sovrascrivendo la modalità Tinta traccia , ma non sono riuscito a ottenere risultati decenti da quello in Android 6. Potrebbe essere necessario definire colori extra che compensano la fusione. (Hai mai la sensazione che Google non voglia che personalizziamo l'aspetto delle nostre app?)

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

Per modificare lo stile di Switch senza utilizzare style.xml o il codice Java, è possibile personalizzare lo switch nel layout 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" />

È l'attributo android: thumbTint e android: trackTint che ti ha permesso di personalizzare il colore

Questo è il risultato visivo di questo XML:

Crea uno Switch personalizzato e sostituisci set Controllato per cambiare colore:

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

Mentre la risposta di SubChord è corretta, in realtà non risponde alla domanda su come impostare il colore "on" senza influire anche su altri widget. Per fare ciò, usa a ThemeOverlayin styles.xml:

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

E fai riferimento nel tuo interruttore:

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

In tal modo influirà SOLO sul colore delle viste a cui si desidera applicarlo.

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

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

L'ho risolto aggiornando il filtro colore quando lo stato Switch era stato cambiato ...

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

Potrebbe essere un po 'tardi, ma per i pulsanti switch, il pulsante toogle non è la risposta, è necessario modificare il disegno nel parametro xml dello switch:

 android:thumb="your drawable here"

rendere disegnabile "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>

e crea "newtrack.xml" disegnabile

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

e aggiungilo in Switch:

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

In Android Lollipop e versioni successive, definiscilo nel tuo stile del tema:

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

Crea la tua immagine da 9 patch e impostala come sfondo del pulsante di attivazione / disattivazione.

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

La soluzione suggerita da Arlomedia ha funzionato per me. A proposito del suo problema con extraspace ho risolto la rimozione di tutte le imbottiture sullo switch.

MODIFICARE

Come richiesto, ecco quello che ho.

Nel file di layout, il mio switch si trova all'interno di un layout lineare e dopo un 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>

Dal momento che sto lavorando con Xamarin / Monodroid (min. Android 4.1) il mio codice è:

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 è stato precedentemente definito come questo (Xamarin):

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

Non imposto affatto i padding e non chiamo .setPadding (0, 0, 0, 0).

puoi creare uno stile personalizzato per il widget switch che utilizza l'accento di colore come predefinito quando esegui uno stile personalizzato

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

Puoi provare questa lib, facile cambiare il colore per il pulsante di commutazione.
https://github.com/kyleduo/SwitchButton

Prova a trovare la risposta giusta qui: Selettore sul colore di sfondo di TextView . In due parole è necessario creare Shape in XML con colore e quindi assegnarlo allo stato "selezionato" nel selettore.

Non so come farlo da Java, ma se hai uno stile definito per la tua app puoi aggiungere questa linea nel tuo stile e avrai il colore desiderato per me che ho usato # 3F51B5

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

Il modo più semplice è definire la tinta della traccia e impostare la modalità tinta su src_over per rimuovere il 30% di trasparenza.

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>

In aggiunta alle risposte esistenti: puoi personalizzare il pollice e la traccia utilizzando i selettori nella res/colorcartella, ad esempio:

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>

Utilizzare questi selettori per personalizzare le tinte di traccia e pollice:

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

Tieni presente che se usi standart Switche androidnamespace per questi attributi, funzionerà solo per API 23 e successive, quindi usa SwitchCompatcon appnamespacexmlns:app="http://schemas.android.com/apk/res-auto" come soluzione universale.

Risultato:

In XML, puoi cambiare il colore come:

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

Dinamicamente puoi cambiare come:

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

Soluzione per Android Studio 3.6:

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

Modifica il colore del testo di un valore definito nel file XML a colori (yourColor).