Android Toggle Button View and Vector

Shubham Agarwal

14 December 2016

A toggle button allows the user to change a setting between two states.

Displays checked/unchecked states as a button with a “light” indicator and by default accompanied with the text “ON” or “OFF”.

In this Blog, we are creating a custom Toggle Button get the custom view/background using drawable.

  <ToggleButton
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_centerInParent="true"
        android:background="@drawable/toggle_selector"
        android:padding="6dp"
        android:textOff=""
        android:textOn="" />

<ToggleButton

android:layout_width="24dp"

android:layout_height="24dp"

android:layout_centerInParent="true"

android:background="@drawable/toggle_selector"

android:padding="6dp"

android:textOff=""

android:textOn="" />

Here is the toggle_selector drawable used to represent the different state of the toggle button.

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

<?xml version="1.0" encoding="utf-8"?>

</selector>

We have provided the ready baked code for two Vector Drawable used to represent the different state of the Toggle Button.

ic_favorite_black_24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:autoMirrored="true"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="@color/colorAccent"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />
</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"

android:width="24dp"

android:height="24dp"

android:autoMirrored="true"

android:viewportHeight="24.0"

android:viewportWidth="24.0">

<path

android:fillColor="@color/colorAccent"

android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />

</vector>

ic_favorite_border_black_24dp (image with the border)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:autoMirrored="true"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="@color/colorAccent"
        android:pathData="M16.5,3c-1.74,0 -3.41,0.81 -4.5,2.09C10.91,3.81 9.24,3 7.5,3 4.42,3 2,5.42 2,8.5c0,3.78 3.4,6.86 8.55,11.54L12,21.35l1.45,-1.32C18.6,15.36 22,12.28 22,8.5 22,5.42 19.58,3 16.5,3zM12.1,18.55l-0.1,0.1 -0.1,-0.1C7.14,14.24 4,11.39 4,8.5 4,6.5 5.5,5 7.5,5c1.54,0 3.04,0.99 3.57,2.36h1.87C13.46,5.99 14.96,5 16.5,5c2,0 3.5,1.5 3.5,3.5 0,2.89 -3.14,5.74 -7.9,10.05z" />
</vector>