web-dev-qa-db-fra.com

Comment changer la couleur de piste d'un SwitchCompat

J'ai essayé d'utiliser le lien suivant pour changer la couleur d'un SwitchCompat:

Comment changer la couleur d'un SwitchCompat

Remarquez le faible contraste dans mon commutateur:

The SwitchCompat

Cependant, après avoir modifié toutes les valeurs de couleur pertinentes, la piste (le gris plus clair) du SwitchCompat reste la même. Je ne veux pas changer l'apparence sauf la couleur. Le pouce est en rose et je veux que la piste ait un peu de contraste. Ai-je manqué de définir une valeur dans mon styles.xml?

J'ai essayé ces valeurs (couleurs aléatoires non blanches):

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/first</item>
    <item name="colorPrimaryDark">@color/second</item>
    <item name="colorAccent">@color/third</item>
   ...
    <item name="colorControlActivated">@color/first</item>
    <item name="colorControlHighlight">@color/first</item>
    <item name="colorControlNormal">@color/second</item>
    <item name="colorSwitchThumbNormal">@color/second</item>
    <item name="colorButtonNormal">@color/second</item>
...>
androidcolorsswitchcompat
42
Close Call

J'ai eu le même problème et l'ai résolu.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   ...
   <!-- Active thumb color & Active track color(30% transparency) -->
   <item name="colorControlActivated">@color/theme</item>
   <!-- Inactive thumb color -->
   <item name="colorSwitchThumbNormal">@color/grey300</item>
   <!-- Inactive track color(30% transparency) -->
   <item name="Android:colorForeground">@color/grey600</item>
   ...
</style>

Je lis le code de l'application et le comprends. 

Android.support.v7.internal.widget.TintManager.Java

private ColorStateList getSwitchTrackColorStateList() {
    if (mSwitchTrackStateList == null) {
        final int[][] states = new int[3][];
        final int[] colors = new int[3];
        int i = 0;

        // Disabled state
        states[i] = new int[] { -Android.R.attr.state_enabled };
        colors[i] = getThemeAttrColor(Android.R.attr.colorForeground, 0.1f);
        i++;

        states[i] = new int[] { Android.R.attr.state_checked };
        colors[i] = getThemeAttrColor(R.attr.colorControlActivated, 0.3f);
        i++;

        // Default enabled state
        states[i] = new int[0];
        colors[i] = getThemeAttrColor(Android.R.attr.colorForeground, 0.3f);
        i++;

        mSwitchTrackStateList = new ColorStateList(states, colors);
    }
    return mSwitchTrackStateList;
}
137
Konifar

Vous trouverez ci-dessous la manière AppCompat de changer à la fois la couleur de la piste et celle du pouce par programmation , pour un SwitchCompat spécifique. Pour cet exemple, j’ai codé en dur la thumbColor en rouge. Idéalement, vous définiriez la couleur via un deuxième paramètre de méthode.

Veuillez noter que lorsque le commutateur est coché, une ondulation est affichée. La couleur de l'ondulation ne sera pas modifiée par le code ci-dessous.

public static void setSwitchColor(SwitchCompat v) {
    // thumb color of your choice
    int thumbColor = Color.RED;

    // trackColor is the thumbColor with 30% transparency (77)
    int trackColor = Color.argb(77, Color.red(thumbColor), Color.green(thumbColor), Color.blue(thumbColor));

    // setting the thumb color
    DrawableCompat.setTintList(v.getThumbDrawable(), new ColorStateList(
            new int[][]{
                    new int[]{Android.R.attr.state_checked},
                    new int[]{}
            },
            new int[]{
                    thumbColor,
                    Color.WHITE
            }));

    // setting the track color
    DrawableCompat.setTintList(v.getTrackDrawable(), new ColorStateList(
            new int[][]{
                    new int[]{Android.R.attr.state_checked},
                    new int[]{}
            },
            new int[]{
                    trackColor,
                    Color.parseColor("#4D000000") // full black with 30% transparency (4D)
            }));
}
8
Ovidiu
 Here is Switch Layout
 -Adding theme to your switch to change the color of track.Check the style given below:-.

**Switch Compact**
  <Android.support.v7.widget.SwitchCompat
                Android:id="@+id/goOnlineBtn"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                app:theme="@style/Switch_style/>


**Switch_style**
   <style name="Switch_style" parent="Theme.AppCompat.Light">
        <!-- active thumb & track color (30% transparency) -->
        <item name="colorControlNormal">@Android:color/white</item>
        <item name="colorControlActivated">@Android:color/blue</item>
        <item name="colorSwitchThumbNormal">@Android:color/white</item>
        <item name="trackTint">@color/white</item>
   </style>

Où trackTint changera la couleur de votre piste

2
Raj

si vous voulez personnaliser la couleur de la piste, vous pouvez utiliser cette solution.

piste selector.xml

 <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/checked_color" Android:state_checked="true" />
    <item Android:color="@color/checked_color" Android:state_selected="true" />
    <item Android:color="@color/unchecked_color" Android:state_checked="false" />
    <item Android:color="@color/unchecked_color" Android:state_selected="false" />

où checked_color et unchecked_color sont la couleur de votre choix.

styles.xml

<style name="mySwitchStyle" parent="@style/Widget.AppCompat.CompoundButton.Switch">
       <!-- do here for additional costumization on thumb, track background,text appearance -->


    </style>


<style name="mySwitchTheme" parent="ThemeOverlay.AppCompat.Light">
        <item name="switchStyle">@style/mySwitchStyle</item>
        <item name="colorControlActivated">@color/red</item>
        <item name="colorControlNormal">@color/colorAccent</item>
        <item name="trackTint">@color/track_selector</item>
    </style>

fichier de mise en page

<Android.support.v7.widget.SwitchCompat
        Android:theme="@style/mySwitchTheme"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        />
1
onzool

SwitchCompat est un widget de conception de matériau. lorsque mon activité s’étend AppCompatActivity et Android: theme = "@ style/mySwitch" est utilisé.

0
XiaoJian

Si vous souhaitez plus de commutateurs de plusieurs couleurs dans une activité, vous pouvez utiliser cette solution (basée sur le thème de @Konifar):

<style name="CustomSwitchTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <!-- Active thumb color & Active track color(30% transparency) -->
    <item name="colorControlActivated">@color/custom</item>
    <!-- Inactive thumb color -->
    <item name="colorSwitchThumbNormal">#E0E0E0</item>
    <!-- Inactive track color(30% transparency) -->
    <item name="Android:colorForeground">#757575</item>
</style>

où @color/custom est la couleur du pouce lorsque le commutateur est activé.

Puis appliquez ce thème à votre SwitchCompat de cette façon:

<Android.support.v7.widget.SwitchCompat
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:theme="@style/CustomSwitchTheme" />
0
Lukas Novak

utilisez simplement colorControlActivated pour définir la couleur de la piste et du pouce de SwitchCompat.

Si elle n'est pas définie, la couleur par défaut colorControlActivated utilisera colorAccent . (D'après l'expérience, ne trouve toujours pas où dans le code source).

Le code source a changé et ne ressemble toujours pas à @Ovidiu, a déclaré . Mais le remercie quand même de m'avoir laissé savoir la réponse à partir du code source.

mThumbDrawable = a.getDrawable(R.styleable.SwitchCompat_Android_thumb);

appellera éventuellement la méthode suivante.

/frameworks/support/v7/appcompat/src/Android/support/v7/widget/AppCompatDrawableManager.Java

private ColorStateList createSwitchTrackColorStateList(Context context) {
    final int[][] states = new int[3][];
    final int[] colors = new int[3];
    int i = 0;

    // Disabled state
    states[i] = ThemeUtils.DISABLED_STATE_SET;
    colors[i] = getThemeAttrColor(context, Android.R.attr.colorForeground, 0.1f);
    i++;

    states[i] = ThemeUtils.CHECKED_STATE_SET;
    colors[i] = getThemeAttrColor(context, R.attr.colorControlActivated, 0.3f);
    i++;

    // Default enabled state
    states[i] = ThemeUtils.EMPTY_STATE_SET;
    colors[i] = getThemeAttrColor(context, Android.R.attr.colorForeground, 0.3f);
    i++;

    return new ColorStateList(states, colors);
}

private ColorStateList createSwitchThumbColorStateList(Context context) {
    final int[][] states = new int[3][];
    final int[] colors = new int[3];
    int i = 0;

    final ColorStateList thumbColor = getThemeAttrColorStateList(context,
            R.attr.colorSwitchThumbNormal);

    if (thumbColor != null && thumbColor.isStateful()) {
        // If colorSwitchThumbNormal is a valid ColorStateList, extract the default and
        // disabled colors from it

        // Disabled state
        states[i] = ThemeUtils.DISABLED_STATE_SET;
        colors[i] = thumbColor.getColorForState(states[i], 0);
        i++;

        states[i] = ThemeUtils.CHECKED_STATE_SET;
        colors[i] = getThemeAttrColor(context, R.attr.colorControlActivated);
        i++;

        // Default enabled state
        states[i] = ThemeUtils.EMPTY_STATE_SET;
        colors[i] = thumbColor.getDefaultColor();
        i++;
    } else {
        // Else we'll use an approximation using the default disabled alpha

        // Disabled state
        states[i] = ThemeUtils.DISABLED_STATE_SET;
        colors[i] = getDisabledThemeAttrColor(context, R.attr.colorSwitchThumbNormal);
        i++;

        states[i] = ThemeUtils.CHECKED_STATE_SET;
        colors[i] = getThemeAttrColor(context, R.attr.colorControlActivated);
        i++;

        // Default enabled state
        states[i] = ThemeUtils.EMPTY_STATE_SET;
        colors[i] = getThemeAttrColor(context, R.attr.colorSwitchThumbNormal);
        i++;
    }

    return new ColorStateList(states, colors);
}
0
Francis Bacon

J'avais le même problème. Finalement résolu le programme avec ce code Kotlin

fun tintSwitchButton(sw: SwitchCompat, resolvedColor: Int) {
    val states = arrayOf(
            intArrayOf(-Android.R.attr.state_pressed),
            intArrayOf(Android.R.attr.state_pressed)
    )

    DrawableCompat.setTintList(sw?.trackDrawable, ColorStateList(
            states,
            intArrayOf(resolvedColor, resolvedColor)
    ))

    DrawableCompat.setTintList(sw?.thumbDrawable, ColorStateList(
            states,
            intArrayOf(Color.WHITE, Color.WHITE)
    ))
}

Et l'appel de fonction est 

tintSwitchButton(switchCompat, Color.rgb(214, 0, 0))

Vous pouvez également créer une fonction d'extension:

fun SwitchCompat.tint(resolvedColor: Int) {
    val states = arrayOf(
        intArrayOf(-Android.R.attr.state_pressed),
        intArrayOf(Android.R.attr.state_pressed)
    )

    DrawableCompat.setTintList(trackDrawable, ColorStateList(
        states,
        intArrayOf(resolvedColor, resolvedColor)
    ))

    DrawableCompat.setTintList(thumbDrawable, ColorStateList(
        states,
        intArrayOf(Color.WHITE, Color.WHITE)
    ))
}

Donc, l'appel serait plus facile

switchCompat.tint(Color.rgb(214,0,0))
0
voghDev