Implementación al estilo de Google Launcher del ícono del interruptor en Android

Google Launcher Styles (GLS) es un conjunto de estilos aplicados a los elementos de visualización de algunas aplicaciones de Google. También se proporcionan estilos para cambiar vistas o botones. Pero el uso de estos estilos está limitado a los ingenieros que trabajan en Google. A través de este artículo, queremos compartir con usted una biblioteca de código abierto que nos ayudaría a implementar los íconos de cambio de GLS. A continuación se muestran ejemplos de iconos de interruptor GLS.

Acercarse

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: cambios realizados en build.gradle (Proyecto:)

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

Paso 3: Agregar dependencia al archivo build.gradle (Módulo: aplicación)

Cuando la configuración esté lista, vaya a la raíz y la aplicación build.gradle y agregue el siguiente código y dependencia. Sincroniza el proyecto ahora.

implementación ‘com.github.zagum:Android-SwitchIcon:1.4.0’

Paso 4: agregue el archivo dibujable requerido 

Vaya a aplicación > res > archivo dibujable > haga clic con el botón derecho en > Nuevo > Archivo de recursos dibujable y nombre el archivo como ic_cloud y agregue el siguiente código a este archivo. 

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

Paso 5: trabajar con el archivo activity_main.xml

A continuación, vaya al archivo activity_main.xml , que representa la interfaz de usuario del proyecto. Agregue el script para SwitchIconView como se muestra. actividad_principal.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>

Paso 6: trabajar con el archivo MainActivity.kt

Finalmente, vaya al archivo MainActivity.kt y consulte el siguiente código. Acabamos de agregar un onClickListner al icono. MainActivity.kt

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

Salida: ejecutar en el emulador

Implementando un estilo llamativo

Mantenga los códigos anteriores iguales. Los cambios solo se realizan en el archivo de diseño, dentro de SwitchIconView.

Cambios realizados en el archivo activity_main.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>

Salida: ejecutar en el emulador