[Android] SwitchCompat 切り替えスイッチの基本設定

切り替えボタンとしてはSwitchというのもありますが、SwitchCompatの方が使いまわしがよさそうです
つまみとかトラックのカスタマイズをしてみたかったのですが、androidx以降の解説があまりないようなので確認してみました

Android Studio
2021.2.1

SwitchCompat

Switchと見た目は同じなのですが、Switchを直接継承しているわけではありません
ただ、Switchと同様にwidget.CompoundButtonを継承しています

java.lang.Object
↳	android.view.View
	↳	android.widget.TextView
		↳	android.widget.Button
			↳	android.widget.CompoundButton
				↳	androidx.appcompat.widget.SwitchCompat

また、「Design」のPaletteを見てもSwitchはありますがSwitchCompatはありません
　

目次
1. SwitchCompatの基本設定
2. thumbとtrackの色を変更する
3. サンプルコード

SwitchCompatの基本設定

レイアウトとしては、Switchと同様ですが
androidx.appcompat.widget.SwitchCompat
で定義します

<androidx.appcompat.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/sw0"
    ...
/>

<androidx.appcompat.widget.SwitchCompat

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/sw0"

...

ユーザーによるタップやフリップを受け取るために
setOnCheckedChangeListener()
onCheckedChanged()
を使います(Lambda式で簡略化できますが)

SwitchCompat sw0 = findViewById(R.id.switch0);
sw0.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (isChecked) {
            sw0.setText(R.string.on);
        } else {
            sw0.setText(R.string.off);
        }
    }
});

SwitchCompat sw0 = findViewById(R.id.switch0);

sw0.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if (isChecked) {

sw0.setText(R.string.on);

} else {

sw0.setText(R.string.off);

}

});

また、Switchではwarningが出ていました
@SuppressLint(“UseSwitchCompatOrMaterialCode”)
tools:ignore=”UseSwitchCompatOrMaterialXml”
が無くなります

thumb と track の色を変更する

　thumb

は親指と英語では訳されますが「つまみ」と言ったほうが日本人には分かりやすい
つまみはknobかhandleと訳されますが、key wordとしてthumbを使います
また、thumbの背後の部分はtrackと呼びます
SwitchCompatのウィジェットとしての背景は別にあるので、そこは注意です

thumbTint と trackTint はそれぞれ色を定義しています

thumb: thumbTint
track: trackTint

この色を変えてみます

style の設定：
theme.xmlに新しくWidget.MaterialComponents.CompoundButton.Switchを引き継いだstyleを作ります
res\values\themes\themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style 
         ...
    </style>
    <!-- custom style -->
    <style name="SwitchCompatStyle"
            parent="Widget.MaterialComponents.CompoundButton.Switch">
        <item name="useMaterialThemeColors">false</item>
        <item name="thumbTint">@drawable/thumb_selector</item>
        <item name="trackTint">@drawable/track_selector</item>
    </style>
</resources>

<style

...

</style>

parent="Widget.MaterialComponents.CompoundButton.Switch">

<item name="useMaterialThemeColors">false</item>

<item name="thumbTint">@drawable/thumb_selector</item>

<item name="trackTint">@drawable/track_selector</item>

</style>

</resources>

thumb と track のselectorを作ります
res\drawable\thumb_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#00f"/>
    <item android:state_checked="true" android:color="#f00" />
    <item android:color="#00f" />
</selector>

<?xml version="1.0" encoding="utf-8"?>

</selector>

res\drawable\track_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#88f"/>
    <item android:state_checked="true" android:color="#faa" />
    <item android:color="#88f" />
</selector>

<?xml version="1.0" encoding="utf-8"?>

</selector>

このstyleをactivity_main.xml に設定します

<androidx.appcompat.widget.SwitchCompat
        style="@style/SwitchCompatStyle"
         ...
   />

<androidx.appcompat.widget.SwitchCompat

style="@style/SwitchCompatStyle"

...

サンプルコード

MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.SwitchCompat;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SwitchCompat sw0 = findViewById(R.id.switch0);
        sw0.setOnCheckedChangeListener((buttonView, isChecked) -> {
            if (isChecked) {
                sw0.setText(R.string.on);
            } else {
                sw0.setText(R.string.off);
            }
        });

    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import androidx.appcompat.widget.SwitchCompat;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SwitchCompat sw0 = findViewById(R.id.switch0);

sw0.setOnCheckedChangeListener((buttonView, isChecked) -> {

if (isChecked) {

sw0.setText(R.string.on);

} else {

sw0.setText(R.string.off);

}

});

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <androidx.appcompat.widget.SwitchCompat
        android:text="@string/sw0"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.45" />

    <androidx.appcompat.widget.SwitchCompat
        style="@style/SwitchCompatStyle"
        android:id="@+id/switch0"
        android:text="@string/off"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.55" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity" >

<androidx.appcompat.widget.SwitchCompat

android:text="@string/sw0"

android:layout_width="200dp"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.45" />

<androidx.appcompat.widget.SwitchCompat

style="@style/SwitchCompatStyle"

android:id="@+id/switch0"

android:text="@string/off"

android:layout_width="200dp"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.55" />

</androidx.constraintlayout.widget.ConstraintLayout>

strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="sw0">SwitchCompat</string>
    <string name="on">SwitchCompat: ON</string>
    <string name="off">SwitchCompat: OFF</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="sw0">SwitchCompat</string>

<string name="on">SwitchCompat: ON</string>

<string name="off">SwitchCompat: OFF</string>

</resources>

その他のファイル

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style 
         ...
    </style>
    <!-- custom style -->
    <style name="SwitchCompatStyle"
            parent="Widget.MaterialComponents.CompoundButton.Switch">
        <item name="useMaterialThemeColors">false</item>
        <item name="thumbTint">@drawable/thumb_selector</item>
        <item name="trackTint">@drawable/track_selector</item>
    </style>
</resources>

<style

...

</style>

parent="Widget.MaterialComponents.CompoundButton.Switch">

<item name="useMaterialThemeColors">false</item>

<item name="thumbTint">@drawable/thumb_selector</item>

<item name="trackTint">@drawable/track_selector</item>

</style>

</resources>

thumb_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#00f"/>
    <item android:state_checked="true" android:color="#f00" />
    <item android:color="#00f" />
</selector>

<?xml version="1.0" encoding="utf-8"?>

</selector>

track_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#88f"/>
    <item android:state_checked="true" android:color="#faa" />
    <item android:color="#88f" />
</selector>

<?xml version="1.0" encoding="utf-8"?>

</selector>

これで実行させてみましょう

References:
切り替えボタン | Android デベロッパー
 SwitchCompat – Android Developers