Switch

SwitchCompat

Switch - ещё один вид переключателей, который появился в Android 4.0 (API 14). Находится в разделах Commons и Buttons. Фактически, это замена немного устаревшего ToggleButton. В новых проектах лучше использовать Switch.

Компонент используется в том случае, когда нужно переключиться на противоположное состояние - да/нет, вкл./выкл., открыть/закрыть. В реальной жизни это выглядит следующим образом.

При добавлении компонента в макет студия рекомендует использовать использовать SwitchCompat или SwitchMaterial. Общий принцип работы у них одинаковый, отличия касаются дизайна.

Компонент представляет собой полоску с двумя состояниями и сопровождающим текстом. Переключиться можно сдвиганием ползунка или касанием экрана в области компонента (не только на самом ползунке, но и на сопровождающем тексте).

По умолчанию компонент находится в выключенном состоянии. Чтобы установить его в включённом состоянии на этапе разработки, используйте атрибут android:checked="true".

Сопровождающий текст задаётся в атрибуте android:text. А текст на самом переключателе задаётся при помощи атрибутов android:textOn (методы getTextOn() и setTextOn()) и android:textOff (методы getTextOff() и setTextOff()). Обратите внимание, что сопровождающий текст может быть очень большим и положение самого переключателя относительно этого текста можно регулировать при помощи атрибута android:gravity (смотри пример ниже). Если сопровождающий текст вам не нужен, то не используйте атрибут android:text.

Момент переключения можно отслеживать при помощи слушателя CompoundButton.OnCheckedChangeListener.

// Kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val standardSwitch:Switch = findViewById(R.id.switchStandard)

        standardSwitch.setOnCheckedChangeListener { buttonView, isChecked ->
            if(isChecked){
                println("Standard Switch is on")
            }else{
                println("Standard Switch is off")
            }
        }
    }
}

// Java
public class MainActivity extends Activity implements CompoundButton.OnCheckedChangeListener {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Switch switch = findViewById(R.id.switch);
        if (switch != null) {
            switch.setOnCheckedChangeListener(this);
        }
    }
    
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
       Toast.makeText(this, "Отслеживание переключения: " + (isChecked ? "on" : "off"),
               Toast.LENGTH_SHORT).show();
    }
}

SwitchCompat

implementation 'androidx.appcompat:appcompat:1.6.0'

Студия рекомендует использовать SwitchCompat. Явных отличий у него нет.

<androidx.appcompat.widget.SwitchCompat
    android:id="@+id/switch_compat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_marginLeft="50dp"
    android:checked="false"
    android:text="SwitchCompat"
    android:textOff="OFF"
    android:textOn="ON"
    app:showText="true"/>

Для показа текста на кнопке переключателя установите в true значение атрибута app:showText.

Не забывайте, что данный компонент можно использовать только в активностях типа AppCompatActivity.

Вы можете задать свой стиль для SwitchCompat, добавив строки в styles.xml

<style name="MySwitch" parent="Theme.AppCompat.Light">
    <!-- активное состояние (30% прозрачности для фона) -->
    <item name="colorControlActivated">@android:color/holo_green_light</item>

    <!-- неактивное состояние ползунка -->
    <item name="colorSwitchThumbNormal">@android:color/holo_orange_dark</item>

    <!-- цвет дорожки для неактивного состояния (30% прозрачности) -->
    <item name="android:colorForeground">@android:color/darker_gray</item>
</style>

Применим стиль.

<androidx.appcompat.widget.SwitchCompat
    ...
    android:theme="@style/MySwitch" />

Цвет дорожки, вдоль которой двигается ползунок, можно поменять также через стиль:

<item name="trackTint">@android:color/holo_purple</item>

Поместим картинку в ползунок. Создадим в папке drawable файл switch_thumb.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/holo_orange_dark" />
        </shape>
    </item>
    <item android:bottom="2dp" android:left="1dp"
          android:right="1dp" android:top="1dp">
        <shape android:shape="oval">
            <solid android:color="@android:color/holo_blue_light" />
        </shape>
    </item>
    <item>
        <bitmap android:src="@android:drawable/ic_btn_speak_now"
                android:tint="@android:color/holo_red_light" />
    </item>
</layer-list>

Добавим новый атрибут компоненту.

<androidx.appcompat.widget.SwitchCompat
    android:id="@+id/switch_compat"

    android:thumb="@drawable/switch_thumb"
    android:theme="@style/MySwitch" />

Дополнительные материалы

GwonHyeok/StickySwitch: beautiful switch widget with sticky animation️

RiccardoMoro/RMSwitch: A simple and customizable two or three states Switch View

zagum/Android-SwitchIcon: Google launcher-style implementation of switch (enable/disable) icon

Реклама