Google Launcher-Style Implementation of Switch Icon in Android

Google Launcher Styles (GLS) is a set of styles applied to the display elements of some applications from Google. Styles are provided for switch views or buttons as well. But the usage of these styles is limited to the engineers who work at Google. Through this article, we want to share with you an open-source library, that would help us to implement the GLS switch icons. Below are the examples of GLS Switch icons. Note that we are going to implement this project using the Kotlin language. 

Approach

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Changes made to the build.gradle (Project: )

XML

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" } // Add this
    }
}

Step 3: Add dependency to the build.gradle (Module: app) file

When the setup is ready, go to the root and app build.gradle and add the following code and dependency. Sync the project now.

implementation ‘com.github.zagum:Android-SwitchIcon:1.4.0’

Step 4: Add the required drawable file 

Go to app > res > drawable file > right-click > New > Drawable Resource File and named the file as ic_cloud and add the following code to this file. 

XML

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#01579B"
        android:pathData="M19.35,10.04C18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,
        10.91 0,14c0,3.31 2.69,6 6,6h13c2.76,0 5,-2.24 5,-5 0,-2.64 -2.05,-4.78 -4.65,-4.96zM19,
        18H6c-2.21,0 -4,-1.79 -4,-4s1.79,-4 4,-4h0.71C7.37,7.69 9.48,6 12,6c3.04,0 5.5,2.46 5.5,
        5.5v0.5H19c1.66,0 3,1.34 3,3s-1.34,3 -3,3z" />

</vector>

Step 5: Working with the activity_main.xml file

Next, go to the activity_main.xml file, which represents the UI of the project. Add the Script for SwitchIconView as shown. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--Layout when clicked changes the state-->
    <LinearLayout
        android:id="@+id/button"
        android:orientation="vertical"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="24dp"
        android:background="?selectableItemBackgroundBorderless"
        android:gravity="center"
        android:layout_centerInParent="true">

        <!--SwitchIconView element
            si_tint_color = desired color when enable-->
        <com.github.zagum.switchicon.SwitchIconView
            android:id="@+id/switchIconView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="8dp"
            android:scaleType="fitXY"
            app:si_tint_color="#7956f9"
            app:srcCompat="@drawable/ic_cloud"
            tools:ignore="VectorDrawableCompat"

            app:si_no_dash="true"/><!--No striking animation -->
        />

        <!--To show the textual purpose of the button-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sync"/>

    </LinearLayout>

</RelativeLayout>

Step 6: Working with the MainActivity.kt file

Finally, go to the MainActivity.kt file, and refer to the following code. We have just added an onClickListener to the icon. Below is the code for the MainActivity.kt file.

Kotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Switch state on Click
        button.setOnClickListener { switchIconView2.switchState() }
    }
}

Output: Run on Emulator

Implementing a Striking style

Keep the above codes the same. Changes are only made in the layout file, inside the SwitchIconView.

Changes made to activity_main.xml file:

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--Layout when clicked changes the state-->
    <LinearLayout
        android:id="@+id/button"
        android:orientation="vertical"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="24dp"
        android:background="?selectableItemBackgroundBorderless"
        android:gravity="center"
        android:layout_centerInParent="true">

        <!--SwitchIconView element
            si_tint_color = desired color when enable-->
        <com.github.zagum.switchicon.SwitchIconView
            android:id="@+id/switchIconView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="8dp"
            android:scaleType="fitXY"
            app:si_tint_color="#7956f9"
            app:srcCompat="@drawable/ic_cloud"
            tools:ignore="VectorDrawableCompat"

            app:si_no_dash="false"/><!--To animate a dash on
                                        the icon when disabled-->

        <!--To show the textual purpose of the button-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sync"/>

    </LinearLayout>

</RelativeLayout>

Output: Run on Emulator