Как настроить кнопку переключателя?

Я ищу пользовательскую кнопку Switch для следующего:

Как это сделать?

Ответ 1

вы можете использовать следующий код, чтобы изменить цвет и текст:

<org.jraf.android.backport.switchwidget.Switch
                        android:id="@+id/th"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:thumb="@drawable/apptheme_switch_inner_holo_light"
                        app:track="@drawable/apptheme_switch_track_holo_light"
                        app:textOn="@string/switch_yes"
                        app:textOff="@string/switch_no"
                        android:textColor="#000000"
                        />

Создайте xml с именем colors.xml в папке res/values:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

В выпадающей папке создайте xml файл my_btn_toggle.xml:

  <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="false" android:drawable="@color/red"  />
        <item android:state_checked="true" android:drawable="@color/green"  />
    </selector>

и в разделе xml, определяющем вашу кнопку переключения, добавьте:

android:background="@drawable/my_btn_toggle

для изменения цвета textOn и textOff используйте

android:switchTextAppearance="@style/Switch"

Ответ 2

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

<RadioGroup
        android:checkedButton="@+id/offer"
        android:id="@+id/toggle"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginBottom="@dimen/margin_medium"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="@dimen/margin_medium"
        android:background="@drawable/pink_out_line"
        android:orientation="horizontal">

        <RadioButton
            android:layout_marginTop="1dp"
            android:layout_marginBottom="1dp"
            android:layout_marginLeft="1dp"
            android:id="@+id/search"
            android:background="@drawable/toggle_widget_background"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="Search"
            android:textColor="@color/white" />

        <RadioButton
            android:layout_marginRight="1dp"
            android:layout_marginTop="1dp"
            android:layout_marginBottom="1dp"
            android:id="@+id/offer"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/toggle_widget_background"
            android:button="@null"
            android:gravity="center"
            android:text="Offers"
            android:textColor="@color/white" />
    </RadioGroup>

pink_out_line.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="#80000000" />
    <stroke
        android:width="1dp"
        android:color="@color/pink" />
</shape>

toggle_widget_background.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/pink" android:state_checked="true" />
    <item android:drawable="@color/dark_pink" android:state_pressed="true" />
    <item android:drawable="@color/transparent" />
</selector>

И вот вывод -

Ответ 3

<Switch android:layout_width="wrap_content" 
                    android:layout_height="wrap_content"
                    android:thumb="@drawable/custom_switch_inner_holo_light"
                    android:track="@drawable/custom_switch_track_holo_light"
                    android:textOn="@string/yes"
                    android:textOff="@string/no"/>

вытяжка/custom_switch_inner_holo_light.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/custom_switch_thumb_disabled_holo_light" />
    <item android:state_pressed="true"  android:drawable="@drawable/custom_switch_thumb_pressed_holo_light" />
    <item android:state_checked="true"  android:drawable="@drawable/custom_switch_thumb_activated_holo_light" />
    <item                               android:drawable="@drawable/custom_switch_thumb_holo_light" />
</selector>

вытяжка/custom_switch_track_holo_light.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"  android:drawable="@drawable/custom_switch_bg_focused_holo_light" />
    <item                               android:drawable="@drawable/custom_switch_bg_holo_light" />
</selector>

Следующие образы - это образы 9.paths, и они должны иметь разную плотность (mdpi, hdpi, xhdpi, xxhdpi). В качестве примера я даю xxhdpi (вы можете изменить размер, если вам нужно):

вытяжка/custom_switch_thumb_disabled_holo_light

вытяжка/custom_switch_thumb_pressed_holo_light

вытяжка/custom_switch_thumb_activated_holo_light

вытяжка/custom_switch_thumb_holo_light

вытяжка/custom_switch_bg_focused_holo_light

вытяжка/custom_switch_bg_holo_light

Ответ 4

Я достиг этого

при выполнении:

1) пользовательский селектор:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_switch_off"
          android:state_checked="false"/>
    <item android:drawable="@drawable/ic_switch_on"
          android:state_checked="true"/>
</selector>

2) с помощью v7 SwitchCompat

<android.support.v7.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:button="@drawable/checkbox_yura"
    android:thumb="@null"
    app:track="@null"/>

Ответ 5

Я использую этот подход для создания собственного переключателя с использованием RadioGroup и RadioButton;

предварительный просмотр

Цветовой ресурс

<color name="blue">#FF005a9c</color>
<color name="lightBlue">#ff6691c4</color>
<color name="lighterBlue">#ffcdd8ec</color>

вводимый коэффициент

control_switch_background_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <solid android:color="@android:color/transparent" />
    <stroke
        android:width="3dp"
        android:color="@color/blue" />
</shape>

control_switch_background_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape>
            <solid android:color="@color/blue"></solid>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/lighterBlue"></solid>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@android:color/transparent"></solid>
        </shape>
    </item>
</selector>

control_switch_background_selector_middle.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape>
            <solid android:color="@color/blue"></solid>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/lighterBlue"></solid>
        </shape>
    </item>
    <item>
        <layer-list>
            <item android:top="-1dp" android:bottom="-1dp" android:left="-1dp">
                <shape>
                    <solid android:color="@android:color/transparent"></solid>
                    <stroke android:width="1dp" android:color="@color/blue"></stroke>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

раскладка

<RadioGroup
        android:checkedButton="@+id/calm"
        android:id="@+id/toggle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginBottom="24dp"
        android:layout_marginTop="24dp"
        android:background="@drawable/control_switch_background_border"
        android:orientation="horizontal">
        <RadioButton
            android:layout_marginTop="3dp"
            android:layout_marginBottom="3dp"
            android:layout_marginLeft="3dp"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:id="@+id/calm"
            android:background="@drawable/control_switch_background_selector_middle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="Calm"
            android:fontFamily="sans-serif-medium"
            android:textColor="@color/control_switch_color_selector"/>
        <RadioButton
            android:layout_marginTop="3dp"
            android:layout_marginBottom="3dp"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:id="@+id/rumor"
            android:background="@drawable/control_switch_background_selector_middle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="Rumor"
            android:fontFamily="sans-serif-medium"
            android:textColor="@color/control_switch_color_selector"/>
        <RadioButton
            android:layout_marginTop="3dp"
            android:layout_marginBottom="3dp"
            android:layout_marginRight="3dp"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:id="@+id/outbreak"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/control_switch_background_selector"
            android:button="@null"
            android:gravity="center"
            android:text="Outbreak"
            android:fontFamily="sans-serif-medium"
            android:textColor="@color/control_switch_color_selector" />
</RadioGroup>

Ответ 6

Вы можете использовать обычный виджет коммутатора и просто вызвать setTextOn() и setTextOff() или использовать атрибуты android:textOn и android:textOff.

Ответ 7

Существует два способа создания пользовательского ToggleButton

1) Определяя собственный фон 2) Создав пользовательскую кнопку

Отметьте http://www.zoftino.com/android-toggle-button для пользовательских стилей

Кнопка переключения с пользовательским фоном

Определите выделение как ресурс xml, как показано ниже, и установите его как фон кнопки переключения. В приведенном ниже примере drawable toggle_color является селектором цвета, вам также нужно определить это.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="4dp"
    android:insetRight="4dp"
    android:insetBottom="4dp">
    <layer-list android:paddingMode="stack">
        <item>
            <ripple android:color="?attr/android:colorControlHighlight">
                <item>
                    <shape android:shape="rectangle"
                        android:tint="?attr/android:colorButtonNormal">
                        <corners android:radius="8dp"/>
                        <solid android:color="@android:color/white" />
                        <padding android:left="8dp"
                            android:top="6dp"
                            android:right="8dp"
                            android:bottom="6dp" />
                    </shape>
                </item>
            </ripple>
        </item>
        <item android:gravity="left|fill_vertical">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <size android:width="8dp" />
                <solid android:color="@color/toggle_color" />
            </shape>
        </item>
        <item android:gravity="right|fill_vertical">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <size android:width="8dp" />
                <solid android:color="@color/toggle_color" />
            </shape>
        </item>
    </layer-list>
</inset>

Кнопка переключения с пользовательской кнопкой

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

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/toggle_on" />
    <item android:drawable="@drawable/toggle_off" />
</selector>

Ответ 8

Дополнительная информация по этой ссылке: http://www.mokasocial.com/2011/07/sexily-styled-toggle-buttons-for-android/

<ToggleButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/toggle_me"/>

а drawable будет выглядеть примерно так:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:drawable="@drawable/toggle_me_on" /> <!-- checked -->
    <item android:drawable="@drawable/toggle_me_off" /> <!-- default/unchecked -->
</selector>

Ответ 9

 <Switch
        android:thumb="@drawable/thumb"
        android:track="@drawable/track"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />