Sliding Toggle Button on Android (1)

The sliding toggle widget is available on GitHub. Feel free to apply it at your convenience. A simple demo might be helpful to implement it in your own project.

1) Add SlidingToggleButton as a library project.

2) Add the res-auto namespace to your Activity’s root layout:

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

3) Add the view to your layout:

<de.nitri.slidingtoggleswitch.SlidingToggleSwitchView
        android:id="@+id/sliding_toggle_switch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ff000000"
        switch:leftButtonText="@string/left_button_text"
        switch:rightButtonText="@string/right_button_text" />

Full example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:switch="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="de.nitri.slidingtoggleswitchdemo.MainActivity$PlaceholderFragment" >
 
    <de.nitri.slidingtoggleswitch.SlidingToggleSwitchView
        android:id="@+id/sliding_toggle_switch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ff000000"
        switch:leftButtonText="@string/left_button_text"
        switch:rightButtonText="@string/right_button_text" />
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge" />
 
</LinearLayout>

For now, you can customize the switch in XML by altering the text color and defining drawable backgrounds for the slider and the button background:

  <de.nitri.slidingtoggleswitch.SlidingToggleSwitchView
    android:id="@+id/sliding_toggle_switch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="#ff000000"
    switch:leftButtonText="@string/left_button_text"
    switch:buttonBackground="@drawable/red_button_background"
    switch:rightButtonText="@string/right_button_text"
    switch:sliderBackground="@drawable/toggle_frame_blue" />

4) Have your Activity implement OnToggleListener:

public class MainActivity extends FragmentActivity implements OnToggleListener {
    //...
}

5) Handle the toggle event. It’s either SlidingToggleSwitchView.LEFT_SELECTED or SlidingToggleSwitchView.RIGHT_SELECTED:

public class MainActivity extends FragmentActivity implements OnToggleListener {
    //...
 
    @Override
    public void onToggle(int result) {
        if (result == SlidingToggleSwitchView.LEFT_SELECTED)
            //...
        else
            //...
    }
 
}

That’s it. Here are the custom backgrounds used above:

res/drawable/red_button_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true">
    <shape>
        <gradient
            android:startColor="#ffcc1a03"
            android:endColor="#fffd280c"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>
 
<item android:state_focused="true" >
    <shape>
        <gradient
            android:endColor="#ffcc1a03"
            android:startColor="#fffd280c"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>
 
<item android:state_enabled="false" >
    <shape>
        <gradient
            android:endColor="#fa515151"
            android:startColor="#fa989898"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>
 
<item>        
    <shape>
        <gradient
            android:endColor="#ffcc1a03"
            android:startColor="#fffd280c"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>
 
</selector>

res/drawable/toggle_frame_blue:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <stroke
        android:width="2dp"
        android:color="@android:color/darker_gray" />
 
    <gradient
        android:angle="90"
        android:endColor="#FF3A9CE3"
        android:startColor="#FF6CBCF4" />
 
    <corners android:radius="10px" />
 
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
 
</shape>

https://github.com/Pygmalion69/SlidingToggleSwitch

https://github.com/Pygmalion69/SlidingToggleSwitchDemo

Pygmalion

Geek stuff

Sliding Toggle Button on Android (1)

2 thoughts on “Sliding Toggle Button on Android (1)”