Android Tutorial
Software Setup and Configuration
Android Studio
File Structure
Components
Core Topics
Layout
View
Button
Intent and Intent Filters
Toast
RecyclerView
Fragments
Adapters
Other UI Component
Image Loading Libraries
Date and Time
Material Design
Bars
Working with Google Maps
Chart
Animation
Database
Advance Android
Jetpack
Architecture
App Publish
App Monetization
Google Launcher's style, especially as seen in the Pixel devices, is clean and intuitive. If you want to create a switch icon similar to how Google Launcher might switch between, say, a light mode and dark mode icon, you'd follow a sequence like the following.
Here��s a simple example using a FloatingActionButton
to toggle between two icons that could represent light and dark mode:
First, make sure you have the material design dependency added to your build.gradle
:
implementation 'com.google.android.material:material:1.x.x' // Check for the latest version
In your layout, add a FloatingActionButton
:
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fabSwitch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@string/switch_theme" android:src="@drawable/ic_light_mode" // default icon app:fabSize="mini"/>
Here, ic_light_mode
is the default drawable icon that represents light mode.
In your corresponding Activity or Fragment:
val fabSwitch: FloatingActionButton = findViewById(R.id.fabSwitch) var isLightMode = true fabSwitch.setOnClickListener { if (isLightMode) { fabSwitch.setImageResource(R.drawable.ic_dark_mode) // Switch to dark mode icon } else { fabSwitch.setImageResource(R.drawable.ic_light_mode) // Switch to light mode icon } isLightMode = !isLightMode }
In the above code:
ic_dark_mode
is a drawable icon that represents dark mode.isLightMode
each time the FAB is clicked, and we update the icon based on its value.This is a basic implementation and mimics the simplicity of Google's Launcher style. If you have more advanced needs or more states to manage, consider using more structured state management or design patterns. Also, don't forget to handle the actual theme switching logic (if applicable) in the OnClickListener
.
Implementing switch icon animation in Android:
<ImageView android:id="@+id/switchIcon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_switch_off"/>
val switchIcon = findViewById<ImageView>(R.id.switchIcon) switchIcon.setOnClickListener { val switchAnimation = ObjectAnimator.ofFloat( switchIcon, "rotation", if (isSwitchOn) 0f else 180f ) switchAnimation.duration = 300 switchAnimation.start() isSwitchOn = !isSwitchOn }
Google Launcher switch icon example code for Android:
<ImageView android:id="@+id/switchIcon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_google_launcher_switch"/>
Handling click events on switch icon in Android:
val switchIcon = findViewById<ImageView>(R.id.switchIcon) switchIcon.setOnClickListener { // Toggle switch state and trigger animations }