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 > |
Contact Us