CODEWITHSUNDEEP
android
Suraj Pohwani
Suraj Pohwani

Reputation: 138

Create Custom Switch button as shown in image

Is it possible to create the custom switch as shown in image below (Specifically switch button and not the toggle button). I have referred this link and it creates toggle button http://www.mokasocial.com/2011/07/sexily-styled-toggle-buttons-for-android/

enter image description here

Upvotes: 3

Views: 9318

Answers (4)

Manisha Saini
Manisha Saini

Reputation: 61

This is my switch button:

enter image description here

Below is the code for its custmization:

 <androidx.appcompat.widget.SwitchCompat
            android:id="@+id/swButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/_15sdp"
            android:layout_marginEnd="@dimen/_10sdp"
            android:thumb="@drawable/thumb_selector"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/toolbar"
            app:track="@drawable/track_selector_one" />

Thumb selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
    <shape android:shape="oval">
        <solid android:color="@color/white" />
        <size android:width="@dimen/_20sdp" android:height="@dimen/_20sdp" />
        <stroke android:width="3dp" android:color="@color/color_4A4A4A" />
    </shape>
</item>

<item android:state_checked="true">
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />
        <size android:width="@dimen/_20sdp" android:height="@dimen/_20sdp" />
        <stroke android:width="3dp" android:color="@color/colorPrimaryDark" />
    </shape>
</item>

Track selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
    <layer-list>
        <item android:drawable="@drawable/ic_toggle_select"
            android:width="@dimen/_40sdp"
            android:height="@dimen/_22sdp"/>
    </layer-list>
</item>

<item android:state_checked="false">
    <layer-list>
        <item android:drawable="@drawable/ic_toggle_not_select"
            android:width="@dimen/_40sdp"
            android:height="@dimen/_22sdp"/>
    </layer-list>
</item>

Upvotes: 1

Sanam Yavarpor
Sanam Yavarpor

Reputation: 354

a switch button with 2 drawable xml files :

                    <Switch
                        android:id="@+id/btn_accessible"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:layout_margin="10dp"
                        android:layout_weight="1"
                        android:visibility="visible"
                        android:paddingLeft="25sp"
                        android:paddingRight="25sp"
                        android:layout_centerHorizontal="true"
                        android:layout_centerVertical="true"
                        android:text=""
                        android:textColor="@color/white"
                        android:textSize="12sp"
                        android:thumb="@drawable/switch_button_shape"
                        android:track="@drawable/switch_track"

                />

switch_button_shape xml :

     <layer-list tools:ignore="StateListReachable"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android">
     <item
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp">
     <shape android:shape="oval">
        <solid android:color="@color/white"/>
        <size
                android:width="20dp"
                android:height="20dp"/>
    </shape>
</item>

<item android:state_checked="true"
      android:drawable="@drawable/button_accessible"
      android:bottom="20dp"
      android:left="20dp"
      android:right="20dp"
      android:top="20dp"
>
    <shape
            android:dither="true"
            android:shape="oval"
            android:useLevel="false"
            android:visible="true">
        <corners
                android:radius="20dp"/>
        <size
                android:width="20dp"
                android:height="20dp"/>
        <stroke
                android:width="4dp"
                android:color="#0000ffff"/>
    </shape>
</item>

and switch_track xml file is :

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true">
     <shape android:dither="true"
           android:shape="rectangle"
           android:useLevel="false"
           android:visible="true">
        <size
                android:width="3dp"
                android:height="1dp"/>
        <gradient

                android:endColor="@color/lufthansa"
                android:startColor="@color/lufthansa"/>
        <corners
                android:radius="10dp"/>


    </shape>

</item>

<item android:state_checked="false">
    <shape android:dither="true"
           android:shape="rectangle"
           android:useLevel="false"
           android:visible="true">
        <gradient
                android:angle="270"
                android:endColor="@color/light_gray"
                android:startColor="@color/light_gray"/>
        <corners
                android:radius="20dp"/>
        <size
                android:width="3dp"
                android:height="1dp"/>
    </shape>

</item>

Upvotes: 1

&#214;zer &#214;zcan
&#214;zer &#214;zcan

Reputation: 1293

Firstly, you must create two drawables for thumb and track property of Switch.

Thumb is back and forth of Switch, Track is slide of Switch.

<Switch
        android:id="@+id/sWidgetSwitchBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:thumb="@drawable/custom_switch_thumb"
        android:track="@drawable/custom_switch_track"/>

Thumb :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape
            android:dither="true"
            android:shape="rectangle"
            android:useLevel="false"
            android:visible="true">
            <gradient
                android:angle="270"
                android:endColor="@color/switch_thumb_on"
                android:startColor="@color/switch_thumb_on"/>
            <corners
                android:radius="5dp"/>
            <size
                android:width="47dp"
                android:height="47dp"/>
            <stroke
                android:width="4dp"
                android:color="#0000ffff"/>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape
            android:dither="true"
            android:shape="rectangle"
            android:useLevel="false"
            android:visible="true">
            <gradient
                android:angle="270"
                android:endColor="@color/actionbutton_bg_darkblue"
                android:startColor="@color/actionbutton_bg_darkblue"/>
            <corners
                android:radius="5dp"/>
            <size
                android:width="47dp"
                android:height="47dp"/>
            <stroke
                android:width="4dp"
                android:color="#0000ffff"/>
        </shape>
    </item>

Track:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:dither="true"
               android:shape="rectangle"
               android:useLevel="false"
               android:visible="true">
            <gradient
                android:angle="270"
                android:endColor="@color/switch_track_bg"
                android:startColor="@color/switch_track_bg"/>
            <corners
                android:radius="5dp"/>
            <size
                android:width="100dp"
                android:height="50dp"/>
        </shape>

    </item>

    <item android:state_checked="false">
        <shape android:dither="true"
               android:shape="rectangle"
               android:useLevel="false"
               android:visible="true">
            <gradient
                android:angle="270"
                android:endColor="@color/black"
                android:startColor="@color/black"/>
            <corners
                android:radius="5dp"/>
            <size
                android:width="100dp"
                android:height="50dp"/>
        </shape>

    </item>
</selector>

Upvotes: 0

7heaven
7heaven

Reputation: 807

You can just use the official Switch widget, it does provide what you want, it's been added since API 14.

See:
https://developer.android.com/reference/android/widget/Switch.html

Upvotes: 0

Related Questions