Open In App

Google Launcher-Style Implementation of Switch Icon in Android

Last Updated : 15 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

Examples of GLS Switch icons.

Note that we are going to implement this project using the both Java and Kotlin language. 

Step by Step Implementation

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.

Select Java/Kotlin as the programming language.

Step 2: Changes made to the settings.gradle.kts (Project-name)

dependencyResolutionManagement {
    repositories {
        // add the following code
        maven { url = uri("https://jitpack.io/") }
    }
}

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

When the setup is ready, go to app > Gradle Scripts >build.gradle.kts (Module: app) and add the following code and dependency. Sync the project now.

implementation ("com.github.zagum:Android-SwitchIcon:1.4.2")

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. 

ic_cloud.xml:

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>

Drawable Item:

Layout_2


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.

activity_main.xml:

XML 
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    android:background="@color/white"
    tools:context=".MainActivity">

    <!--SwitchIconView element
            si_tint_color = desired color when enable-->
    <com.github.zagum.switchicon.SwitchIconView
        android:id="@+id/switchIconView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="8dp"
        android:scaleType="fitXY"
        app:si_no_dash="true"
        app:si_tint_color="#7956f9"
        app:srcCompat="@drawable/ic_cloud"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!--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"
        app:layout_constraintEnd_toEndOf="@+id/switchIconView"
        app:layout_constraintStart_toStartOf="@+id/switchIconView"
        app:layout_constraintTop_toBottomOf="@+id/switchIconView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Design UI:

Layout_1


Step 6: Working with the MainActivity file

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

MainActivity File:

Java 
package org.geeksforgeeks.demo;

import android.os.Bundle;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;
import com.github.zagum.switchicon.SwitchIconView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SwitchIconView switchIconView = findViewById(R.id.switchIconView);

        // Switch state on Click
        switchIconView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switchIconView.switchState();
            }
        });
    }
}
Kotlin 
package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.LinearLayout
import androidx.appcompat.app.AppCompatActivity
import com.github.zagum.switchicon.SwitchIconView

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

        val switchIconView: SwitchIconView = findViewById(R.id.switchIconView)

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

Output:


Implementing a Striking style

Keep the above codes the same. Changes are only made in the layout file, inside the SwitchIconView. Check with new data for activity_main.xml file.

activity_main.xml:

XML 
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    android:background="@color/white"
    tools:context=".MainActivity">

    <!--set the below to "false" to enable striking animation
        app:si_no_dash="false"-->
    <com.github.zagum.switchicon.SwitchIconView
        android:id="@+id/switchIconView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="8dp"
        android:scaleType="fitXY"
        app:si_no_dash="false"
        app:si_tint_color="#7956f9"
        app:srcCompat="@drawable/ic_cloud"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sync"
        app:layout_constraintEnd_toEndOf="@+id/switchIconView"
        app:layout_constraintStart_toStartOf="@+id/switchIconView"
        app:layout_constraintTop_toBottomOf="@+id/switchIconView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output:


Next Article
Introduction to Android Development

A
aashaypawar
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox