web-dev-qa-db-ja.com

スイッチの「オン」色を変更する

ICSアプリのholo.lightテーマで標準のスイッチコントロールを使用しています。

トグルボタンの強調表示またはオン状態の色を標準の水色から緑に変更したい。

これは簡単なはずですが、どうすればよいのかわかりません。

androidtogglebutton
117
JamesSugrue

現時点では、AppCompat.v7ライブラリのSwitchCompatを使用することをお勧めします。その後、シンプルなスタイル設定を使用して、コンポーネントの色を変更できます。

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

編集：

正しく適用する方法はAndroid:theme="@style/Theme.MyTheme"を使用する方法であり、これはEditTexts、RadioButtons、Switches、CheckBoxes、ProgressBarsなどの親スタイルにも適用できます。

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

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

パーティーに遅れましたが、これは私がやった方法です

スタイル

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

色

enter image description here

レイアウト

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

結果

スイッチの有効化と無効化の色の変更を参照してください

enter image description here

215
Hitesh Sahu

これは私のために働いています（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);

ここに示すように、「デフォルト」状態を最後に追加する必要があることに注意してください。

唯一の問題は、スイッチの「サム」がスイッチの背景または「トラック」よりも大きく表示されることです。これは、デフォルトのトラックイメージをまだ使用しているためだと思います。ただし、この手法を使用してトラックイメージをカスタマイズしようとすると、スイッチの高さが1ピクセルになり、オン/オフテキストのスライバーが表示されるだけでした。そのための解決策があるはずですが、私はまだそれを見つけていません...

Android 5の更新

Android 5では、上記のコードによりスイッチが完全に消えます。新しい setButtonTintList メソッドを使用できるはずですが、これはスイッチでは無視されるようです。しかし、これは機能します：

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

Android 6-7の更新

コメントでCherubyが述べたように、新しいsetThumbTintListを使用できますが、それは期待どおりに機能しました。 setTrackTintListを使用することもできますが、それは色をブレンドとして適用し、暗い色のテーマでは予想よりも暗く、明るい色のテーマでは予想よりも明るい結果になります。 Android 7では、トラックをオーバーライドすることでその変更を最小限に抑えることができました tint mode 、しかしAndroidでそれから適切な結果を得ることができませんでした6.ブレンドを補正する追加の色を定義する必要がある場合があります。 （Googleがアプリの外観をカスタマイズすることを望んでいないと感じたことはありますか？）

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

カスタムスイッチを作成し、setCheckedをオーバーライドして色を変更します。

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

Style.xmlまたはJavaコードを使用せずにスイッチスタイルを変更するには、スイッチをレイアウト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" />

カスタマイズできる属性は、属性Android：thumbTintおよびAndroid：trackTint色

これは、このXMLの視覚的な結果です。

enter image description here

28
Kevin ABRIOUX

SubChordによる答えは正しいですが、他のウィジェットにも影響を与えずに「オン」色を設定する方法の質問には実際には答えていません。これを行うには、styles.xmlでThemeOverlayを使用します。

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

スイッチでそれを参照します。

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

そうすることで、適用したいビューの色にのみ影響します。

20
Greg Ennis

スイッチの状態が変更されたときにカラーフィルターを更新することで解決しました...

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

少し遅れるかもしれませんが、スイッチボタンの場合、トグルボタンは答えではありません。スイッチのxmlパラメーターのドロウアブルを変更する必要があります。

 Android:thumb="your drawable here"
12
Golgorz

独自の9パッチイメージを作成し、トグルボタンの背景として設定します。

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

7
you786

Arlomediaから提案された解決策は私のために働いた。彼のエクストラスペースの問題について、スイッチのすべてのパディングを削除して解決しました。

編集

要求どおり、ここに私が持っているものがあります。

レイアウトファイルでは、スイッチは線形レイアウト内で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>

私はXamarin/Monodroid（min。Android 4.1）で作業しているので、私のコードは次のとおりです。

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は以前に次のように定義されています（Xamarin）：

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

すべてのパディングを設定せず、.setPadding（0、0、0、0）を呼び出しません。

5
Daniele D.

Android Lollipop以上で、テーマスタイルで定義します。

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

カスタムスタイルを行うときにデフォルトとして色のアクセントを使用するスイッチウィジェットのカスタムスタイルを作成できます。

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

スイッチボタンの色を簡単に変更できるこのライブラリを試すことができます。
https://github.com/kyleduo/SwitchButtonenter image description here

2
Yang

Javaからそれを行う方法がわかりませんが、アプリにスタイルが定義されている場合は、この行をスタイルに追加できます。私は＃3F51B5

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

ここで正しい答えを見つけてください： TextViewの背景色のセレクター 。つまり、色付きのXMLでShapeを作成し、セレクターで「チェック済み」状態に割り当てる必要があります。

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

そして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>
0
wingear