wake-up-neo.com

Wie benutzerdefinierte schaltknopf?

Ich freue mich auf Custom The Switch Button, um wie folgt zu werden: 

enter image description here

Wie kann ich das erreichen?

androidandroid-buttonandroid-stylesandroid-switch
33
Chulo

sie können den folgenden Code verwenden, um color und text zu ändern:

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

Erstellen Sie im Ordner res/values ​​eine XML-Datei namens colors.xml:

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

Erstellen Sie im Zeichnungsordner eine XML-Datei 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>

und im XML-Abschnitt, der die Umschaltfläche definiert, fügen Sie Folgendes hinzu:

Android:background="@drawable/my_btn_toggle

um die Farbe von textOn und textOffuse zu ändern 

Android:switchTextAppearance="@style/Switch"
22
said

Dies ist jedoch möglicherweise nicht der beste Weg, aber ich habe einen anderen Weg eingeschlagen, um mein gesamtes Switch-Problem zu lösen .. Hier ist mein Code -

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

Und hier ist die Ausgabe -  enter image description here

111
Sanjeet A
<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"/>

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

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

Die nächsten Bilder sind 9. Pfade, die gezeichnet werden können, und sie müssen unterschiedliche Dichte haben (mdpi, hdpi, xhdpi, xxhdpi). Als Beispiel gebe ich xxhdpi (Sie können die Größe ändern, wenn Sie gebraucht werden):

drawable/custom_switch_thumb_disabled_holo_light

custom_switch_thumb_disabled_holo_light

drawable/custom_switch_thumb_pressed_holo_light

custom_switch_thumb_pressed_holo_light

drawable/custom_switch_thumb_activated_holo_light

custom_switch_thumb_activated_holo_light

drawable/custom_switch_thumb_holo_light

custom_switch_thumb_holo_light

drawable/custom_switch_bg_focused_holo_light

custom_switch_bg_focused_holo_light

drawable/custom_switch_bg_holo_light

enter image description here

19
SiavA

Ich habe es geschafft 

 enter image description here

indem Sie tun:

1) benutzerdefinierte Auswahl:

<?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) Verwenden von 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"/>
6
YTerle

Ich verwende diesen Ansatz, um einen benutzerdefinierten Schalter mit RadioGroup und RadioButton zu erstellen.

Vorschau

 enter image description here

Farbressource

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

Drawables

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>

Layout

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

Sie können das normale Switch-Widget verwenden und einfach setTextOn() und setTextOff() aufrufen oder die Attribute Android:textOn und Android:textOff verwenden.

5
Karakuri

Es gibt zwei Möglichkeiten, benutzerdefinierte ToggleButton zu erstellen

1) Durch Definieren des benutzerdefinierten Hintergrunds 2) Durch Erstellen einer benutzerdefinierten Schaltfläche

Überprüfen Sie http://www.zoftino.com/Android-toggle-button für benutzerdefinierte Stile

Umschaltfläche mit benutzerdefiniertem Hintergrund

Definieren Sie drawable als XML-Ressource wie unten und legen Sie sie als Hintergrund für die Umschaltfläche fest. Im folgenden Beispiel ist drawable toggle_color eine Farbauswahl, die Sie auch definieren müssen.

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

Toggle-Schaltfläche mit benutzerdefinierter Schaltfläche

Erstellen Sie Ihre eigenen Bilder für zwei Statusschaltflächen (stellen Sie sicher, dass Bilder für alle Bildschirmgrößen vorhanden sind) und legen Sie sie in einen Zeichnungsordner. 

   <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>
1
Arnav Rao
 <Switch
        Android:thumb="@drawable/thumb"
        Android:track="@drawable/track"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent" />

enter image description here

enter image description here

0
Athira

Weitere Informationen zu diesem Link: http://www.mokasocial.com/2011/07/sexily-styled-toggle-taste-for-Android/

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

und das Zeichen kann so aussehen:

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