Skip to content
Related Articles

Related Articles

Google Launcher-Style Implementation of Switch Icon in Android
  • Last Updated : 15 Oct, 2020

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. 

Examples of GLS Switch icons.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

    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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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>

chevron_right


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 onClickListner to the icon. Below is the code for the MainActivity.kt file.

Kotlin

filter_none

edit
close

play_arrow

link
brightness_4
code

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() }
    }
}

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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>

chevron_right


Output: Run on Emulator

My Personal Notes arrow_drop_up
Recommended Articles
Page :