¿Cómo personalizar los controles deslizantes MDC en Android?

Posted on by Rudeus Greyrat

En el artículo de Controles deslizantes de componentes de diseño de materiales en Android , se discutió cómo implementar los controles deslizantes de componentes de diseño de materiales en Android y también manejó el detector de clics para todos los tipos de controles deslizantes. En este artículo, se ha discutido cómo personalizar los controles deslizantes del componente Material Design en Android. Mire la siguiente imagen para obtener una descripción general de la discusión. Antes de continuar, es importante conocer la anatomía del control deslizante, que se analiza en el artículo anterior.

Customise MDC Sliders in Android

crear un proyecto

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

Agregar la 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.

Paso 1: trabajar con el archivo activity_main.xml

El diseño principal de la aplicación contiene dos controles deslizantes, uno es un control deslizante continuo y otro es un control deslizante discreto y un TextView para mostrar el resultado del control deslizante. con fines demostrativos. Para implementar el mismo diseño, invoque el siguiente código dentro del archivo activity_main.xml.

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/slider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintTop_toBottomOf="@+id/slider1"
        tools:layout_editor_absoluteX="64dp" />
  
    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:text="Result Appears Here!"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/slider2" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida

Configuración del formato de etiqueta para los controles deslizantes

En el archivo MainActivity.kt , tenemos que anular el toolTipText predeterminado del control deslizante usando la instancia del control deslizante con setLabelFormat{}. Para implementar lo mismo, invoque el siguiente código dentro del archivo MainActivity.kt.

Kotlin

import android.annotation.SuppressLint
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.slider.Slider
import java.text.NumberFormat
import java.util.*
  
class MainActivity : AppCompatActivity() {
    @SuppressLint("NewApi")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // register all UI elements with their appropriate IDs
        val tvResult: TextView = findViewById(R.id.tvResult)
        val slider1: Slider = findViewById(R.id.slider1)
        val slider2: Slider = findViewById(R.id.slider2)
  
        // create instance of current format of INR
        val formatINR = NumberFormat.getCurrencyInstance()
        formatINR.maximumFractionDigits = 0
        formatINR.currency = Currency.getInstance("INR")
  
        // create instance of current format of USD
        val formatUSD = NumberFormat.getCurrencyInstance()
        formatUSD.maximumFractionDigits = 0
        formatUSD.currency = Currency.getInstance("USD")
  
        // set the custom label for slider1 as INR
        slider1.setLabelFormatter {
            formatINR.format(it.toDouble())
        }
  
        // set the custom label for slider1 as USD
        slider2.setLabelFormatter {
            formatUSD.format(it.toDouble())
        }
  
        // add Change Listener for slider1 to show the result on TextView
        slider1.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = formatINR.format(value.toDouble())
        }
  
        // add Change Listener for slider2 to show the result on TextView
        slider2.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = formatUSD.format(value.toDouble())
        }
    }
}

Producción:

Cambio de altura y color de la pista:

Atributos XML para la altura de la pista:

app:trackHeight=”valueInDp”

Atributos XML para el color de la pista:

aplicación: trackColor = «Valor de color personalizado»

Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml

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/slider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:trackColor="@color/black"
        app:trackHeight="2dp" />
  
    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintTop_toBottomOf="@+id/slider1"
        app:trackColor="@android:color/holo_orange_dark"
        app:trackHeight="10dp"
        tools:layout_editor_absoluteX="64dp" />
  
    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:text="Result Appears Here!"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/slider2" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Algunos otros atributos de la pista son:

Elemento

Atributo
Valor mínimo Android: valor de
valor máximo Android: valor a
Tamaño de paso (discreto) Android: tamaño de paso
Valor seleccionado inicial (deslizador) Android: valor
Valores iniciales seleccionados (RangeSlider) aplicación: valores
Altura aplicación: altura de la pista
Color aplicación: trackColor
Color para la parte activa de la pista  aplicación: trackColorActive
Color para la parte inactiva de la pista app:trackColorInactivo
Separación mínima para pulgares adyacentes aplicación: minSeparación

Cambiar el color y el color del radio del pulgar:

Atributos XML para el color del pulgar:

app:trackHeight=”valueInDp”

Atributos XML para el radio del pulgar:

aplicación: trackColor = «Valor de color personalizado»

Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml

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/slider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:thumbColor="@android:color/holo_purple" />
  
    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintTop_toBottomOf="@+id/slider1"
        app:thumbColor="@android:color/holo_blue_bright"
        tools:layout_editor_absoluteX="64dp" />
  
    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:text="Result Appears Here!"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/slider2" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida

Algunos otros atributos del pulgar son:

Elemento Atributo
Color aplicación: color del pulgar
Radio aplicación:thumbRadius
Elevación aplicación:thumbElevation
color de aureola aplicación:haloColor
Radio de halo aplicación: radio halo
Color del trazo aplicación:thumbStrokeColor
Anchura del trazo aplicación:thumbStrokeWidth

Cambiar el color de las marcas de verificación y hacerlas visibles e invisibles:

Estos cambios solo se ven en los controles deslizantes discretos, ya que los controles deslizantes continuos no tendrán marcas en la pista.

Atributo para la visibilidad de la marca de verificación:

aplicación: tickVisible = «valor booleano»

Atributo para el color de la marca de verificación:

aplicación:tickColor=”@android:color/negro”

Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml

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/slider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tickVisible="false" />
  
    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintTop_toBottomOf="@+id/slider1"
        app:tickColor="@android:color/black"
        tools:layout_editor_absoluteX="64dp" />
  
    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:text="Result Appears Here!"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/slider2" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

Algunos otros atributos de la marca de verificación son:

Elemento

Atributo
Color aplicación: marca de color
Color para la parte activa de la pista app:tickColorActive
Color para la parte inactiva de la pista app:tickColorInactivo
garrapata visible app:tickVisible

Publicación traducida automáticamente

Artículo escrito por adityamshidlyali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *