Google Launcher-Style Implementation of Switch Icon in Android
Last Updated :
16 Dec, 2022
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()
}
}
|
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
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
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< 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" >
< 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" />
/>
< 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)
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
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< 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" >
< 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" />
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Sync" />
</ LinearLayout >
</ RelativeLayout >
|
Output: Run on Emulator
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...