Controles deslizantes de componentes de diseño de materiales en Android

Material Design Components (MDC Android) ofrece a los diseñadores y desarrolladores una forma de implementar Material Design en sus aplicaciones de Android. Desarrollados por un equipo central de ingenieros y diseñadores de UX en Google, estos componentes permiten un flujo de trabajo de desarrollo confiable para crear aplicaciones de Android atractivas y funcionales. El diseño de materiales en Android es una de las características clave que atrae y atrae al cliente hacia la aplicación. Este es un tipo especial de diseño, que está guiado por Google. Entonces, en este artículo, se ha demostrado cómo usar los controles deslizantes y los controles deslizantes de rango en Android. Eche un vistazo a la siguiente imagen para obtener una descripción general de la discusión.

Implementación paso a paso

Crear un proyecto de actividad vacío

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Agregar dependencia requerida

Incluya la dependencia de componentes de diseño de materiales de Google en el archivo build.gradle. Después de agregar las dependencias, no olvide hacer clic en el botón «Sincronizar ahora» presente en la esquina superior derecha.

implementación ‘com.google.android.material:material:1.4.0’

Tenga en cuenta que mientras sincroniza su proyecto, debe estar conectado a la red y asegurarse de agregar la dependencia al archivo Gradle de nivel de aplicación como se muestra a continuación.

Comprender los controles deslizantes

¿Dónde se usa?

Los controles deslizantes se utilizan para ver y seleccionar un valor particular del rango a lo largo de la barra. Estos se utilizan idealmente para ajustar el brillo de la pantalla, el volumen o aplicar los filtros de imagen. Los íconos también se pueden usar al principio y al final o se puede mostrar el valor seleccionado, brindando elegancia y, por lo tanto, aumentando la experiencia del usuario.

Tipos de controles deslizantes

Hay principalmente dos tipos de controles deslizantes:

1. Controles deslizantes continuos: estos tipos de controles deslizantes permiten a los usuarios seleccionar un valor dentro del rango especificado.
2. Controles deslizantes discretos: estos tipos de controles deslizantes permiten a los usuarios seleccionar un valor ajustado específico dentro de un rango específico haciendo referencia a su indicador de valor.

Anatomía de los controles deslizantes

El control deslizante contiene los siguientes elementos:

1. Pista: Pista muestra el rango que está disponible para que un usuario seleccione.
2. Pulgar: El Pulgar es un indicador de posición que se puede mover a lo largo de la pista, mostrando el valor seleccionado de su posición.
3. Etiqueta de valor: sin embargo, esto es opcional, muestra el valor numérico que corresponde con la ubicación del pulgar.
4. Marca de verificación: sin embargo, esto es opcional. Las marcas de verificación a lo largo de una pista representan valores predeterminados a los que el usuario puede mover los controles deslizantes.

Adición del control deslizante del componente Material Design (Normal)

Paso 1: trabajar con el archivo activity_main.xml

El diseño principal del proyecto contiene 4 tipos de controles deslizantes. Uno es el control deslizante continuo normal, el segundo es el control deslizante de rango continuo, el tercero es el control deslizante discreto y el cuarto es un control deslizante discreto de rango. Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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">
  
    <com.google.android.material.slider.Slider
        android:id="@+id/normalContinuousSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <com.google.android.material.slider.RangeSlider
        android:id="@+id/continuousRangeSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/normalContinuousSlider"
        app:values="@array/slider_values" />
  
    <com.google.android.material.slider.Slider
        android:id="@+id/discreteSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:stepSize="10.0"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/continuousRangeSlider" />
  
    <com.google.android.material.slider.RangeSlider
        android:id="@+id/discreteRangeSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:stepSize="10.0"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/discreteSlider"
        app:values="@array/slider_values" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Ahora agregue la siguiente array dentro del archivo arrays.xml y proporcione el nombre de la array como slider_values.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="slider_values">
        <item>20.0</item>
        <item>70.0</item>
    </array>
</resources>

Interfaz de usuario de salida: 

Paso 2: trabajar con el archivo MainActivity.kt

Los cambios en los controles deslizantes se observan en el archivo MainActivity.kt y el resultado se muestra al usuario. Para implementar lo mismo, invoque el siguiente código en el archivo MainActivity.kt

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.slider.RangeSlider
import com.google.android.material.slider.Slider
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // sample text view to show the result
        val tvResult: TextView = findViewById(R.id.tvResult)
  
        // observe for first type of slider
        val normalContinuousSlider: Slider = findViewById(R.id.normalContinuousSlider)
        normalContinuousSlider.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = value.toString()
        }
  
        // observe for second type of slider
        val continuousRangeSlider: RangeSlider = findViewById(R.id.continuousRangeSlider)
        continuousRangeSlider.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = "${slider.values[0]} to ${slider.values[1]}"
        }
  
        // observe for third type of slider
        val discreteSlider: Slider = findViewById(R.id.discreteSlider)
        discreteSlider.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = value.toString()
        }
  
        // observe for fourth type of slider
        val discreteRangeSlider: RangeSlider = findViewById(R.id.discreteRangeSlider)
        discreteRangeSlider.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = "${slider.values[0]} to ${slider.values[1]}"
        }
    }
}

Producción: