Wijzig de “aan”-kleur van een schakelaar

Ik gebruik een standaard Switch-bediening met het holo.light-thema in een ICS-app.

Ik wil de gemarkeerde of ingeschakelde kleur van de schakelknop wijzigen van standaard lichtblauw naar groen.

Dit zou makkelijk moeten zijn, maar ik weet niet hoe ik het moet doen.


Antwoord 1, autoriteit 100%

Laat om te feesten, maar zo deed ik het

Stijl

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

Kleuren

Indeling

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

Resultaat

Zie verandering van kleuren voor in- en uitgeschakelde schakelaar


Antwoord 2, autoriteit 39%

Vanaf nu is het beter om SwitchCompat uit de AppCompat.v7-bibliotheek te gebruiken. U kunt dan een eenvoudige stijl gebruiken om de kleur van uw componenten te wijzigen.

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

BEWERKEN:

De manier waarop het correct moet worden toegepast, is via android:theme="@style/Theme.MyTheme"
en dit kan ook worden toegepast op bovenliggende stijlen zoals EditTexts, RadioButtons, Switches, CheckBoxes en ProgressBars:

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

Antwoord 3, autoriteit 17%

Dit werkt voor mij (vereist 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);

Houd er rekening mee dat de “standaard”-status als laatste moet worden toegevoegd, zoals hier wordt weergegeven.

Het enige probleem dat ik zie, is dat de “duim” van de schakelaar nu groter lijkt dan de achtergrond of het “spoor” van de schakelaar. Ik denk dat dat komt omdat ik nog steeds de standaard trackafbeelding gebruik, die wat lege ruimte eromheen heeft. Toen ik echter probeerde de trackafbeelding met deze techniek aan te passen, leek mijn schakelaar een hoogte van 1 pixel te hebben met slechts een stukje van de aan/uit-tekst. Daar moet een oplossing voor zijn, maar die heb ik nog niet gevonden…

Update voor Android 5

In Android 5 zorgt de bovenstaande code ervoor dat de schakelaar volledig verdwijnt. We zouden de nieuwe moeten kunnen gebruiken setButtonTintListmethode, maar dit lijkt te worden genegeerd voor schakelaars. Maar dit werkt:

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

Update voor Android 6-7

Zoals Cheruby in de opmerkingen heeft aangegeven, kunnen we de nieuwe setThumbTintListgebruiken en dat werkte zoals verwacht voor mij. We kunnen ook setTrackTintListgebruiken, maar dan wordt de kleur als een overvloeiing toegepast, met een resultaat dat donkerder is dan verwacht in donkere kleurthema’s en lichter dan verwacht in lichte kleurthema’s, soms zelfs onzichtbaar. In Android 7 kon ik die verandering minimaliseren door de track tint te negeren modus, maar daar kreeg ik in Android 6 geen fatsoenlijke resultaten mee. Mogelijk moet u extra kleuren definiëren die de overvloeiing compenseren. (Heb je wel eens het gevoel dat Google niet wil dat we het uiterlijk van onze apps aanpassen?)

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

Antwoord 4, autoriteit 15%

Als u de Switch-stijl wilt wijzigen zonder style.xml of Java-code te gebruiken, kunt u de switch aanpassen naar de lay-out-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" />

Het zijn attributen android:thumbTinten android:trackTintwaarmee je de kleur kon aanpassen

Dit is het visuele resultaat voor deze XML:


Antwoord 5, autoriteit 13%

Als aanvulling op bestaande antwoorden: je kunt duim en track aanpassen met behulp van selectors in de map res/color, bijvoorbeeld:

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>

Gebruik deze selectors om track- en duimtinten aan te passen:

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

Houd er rekening mee dat als u de standaardnaamruimte Switchen androidvoor deze kenmerken gebruikt, deze alleen werkt voor API 23 en hoger, dus gebruik SwitchCompatmet appnaamruimte xmlns:app="http://schemas.android.com/apk/res-auto"als universele oplossing.

Resultaat:


Antwoord 6, autoriteit 12%

Maak een aangepaste schakelaar en overschrijf set Aangevinkt om van kleur te veranderen:

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

Antwoord 7, autoriteit 11%

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

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

Antwoord 8, autoriteit 10%

maak tekenbare “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>

en maak tekenbaar “newtrack.xml”

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

en voeg het toe in schakelaar:

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

Ook is het perfect OK om slechts één stopbaar bestand (“switchcolors.xml”) te maken en die voor zowel Tracktint als Dumptint te gebruiken.


Antwoord 9, Autoriteit 10%

Hoewel het antwoord door Subchord correct is, beantwoordt het niet echt de vraag hoe u de “Aan” -kleur instelt zonder ook andere widgets te beïnvloeden. Gebruik hiervoor een ThemeOverlayin Styles.xml:

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

en verwijs het in uw switch:

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

Daarbij heeft het alleen invloed op de kleur van de weergaven waarvoor u deze wilt toepassen.


Antwoord 10, Autoriteit 6%

Ik heb het opgelost door het kleurfilter bij te werken wanneer de schakelaar is gewijzigd …

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

Antwoord 11, Autoriteit 4%

Kan het een beetje laat zijn, maar voor schakelaarknoppen is de knop Togeen niet het antwoord, u moet het opwerp in de XML-parameter van de schakelaar wijzigen:

android:thumb="your drawable here"

Antwoord 12, Autoriteit 3%

In Android Lollipop en hoger, definieer het in uw themasestijl:

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

Antwoord 13, Autoriteit 2%

Maak uw eigen 9-patch-afbeelding en stel deze in als de achtergrond van de schakelknop.

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


Antwoord 14, Autoriteit 2%

De oplossing voorgesteld aan Arlomedia werkte voor mij.
Over zijn uitgifte van Extraspace Ik heb alle paddaren naar de schakelaar opgelost.

bewerken

Zoals gevraagd, hier wat ik heb.

In het lay-outbestand staat mijn schakelaar in een lineaire lay-out en na een tekstview.

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

Sinds ik met Xamarin / Monodroid (min. Android 4.1) werk, is mijn code:

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 is eerder als volgt gedefinieerd (Xamarin):

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

Ik stel helemaal geen opvulling in en ik roep .setPadding(0, 0, 0, 0) niet aan.


Antwoord 15, autoriteit 2%

De eenvoudigste manier is de tracktint te definiëren en de tintmodus in te stellen op src_over om 30% transparantie te verwijderen.

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>

Antwoord 16

u kunt een aangepaste stijl maken voor de schakelaarwidget
die kleuraccenten als standaard gebruiken wanneer ze een aangepaste stijl gebruiken

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

Antwoord 17

Dit werkte voor mij -:

1.code in values/styles.xml-:

<style name="SwitchTheme" parent="Theme.AppCompat.Light">
    <item name="android:colorControlActivated">#148E13</item>
</style>

2.voeg de volgende regel code toe in uw schakelaarin uw lay-out-bestand -:

android:theme="@style/SwitchTheme"

Antwoord 18

Je kunt deze lib proberen, gemakkelijk te veranderen van kleur voor de schakelknop.
https://github.com/kyleduo/SwitchButton


Antwoord 19

Probeer hier het juiste antwoord te vinden: Selector op achtergrondkleur van TextView.
In twee woorden: u moet Shape in XML met kleur maken en deze vervolgens toewijzen aan de status “aangevinkt” in uw selector.


Antwoord 20

Ik weet niet hoe ik het vanuit java moet doen, maar als je een stijl hebt gedefinieerd voor je app, kun je deze regel in je stijl toevoegen en je hebt de gewenste kleur voor mij die ik heb gebruikt #3F51B5

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

Antwoord 21

In xml kunt u de kleur wijzigen als:

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

Dynamisch kun je veranderen als:

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

Antwoord 22

Op basis van een combinatie van enkele van de antwoorden hier is dit wat voor mij werkte.

<Switch
    android:trackTintMode="src_over"
    android:thumbTint="@color/white"
    android:trackTint="@color/shadow"
    android:checked="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Antwoord 23

Verander de tintkleur voor track en duim die kunnen worden getekend.

switch.getThumbDrawable().setTint(ContextCompat.getColor(this,R.color.colorAccent));
switch.getTrackDrawable().setTint(ContextCompat.getColor(this,R.color.colorAccent));

Antwoord 24

Oplossing voor Android Studio 3.6:

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

Wijzigt de tekstkleur van een in het kleuren XML-bestand gedefinieerde waarde (yourColor).

Other episodes