¿Cómo agregar RangeSeekbar en Android usando Kotlin?

En este artículo, RangeSeekbar se implementa en una aplicación en Android. Android Seekbar es un tipo de barra de progreso. Podemos arrastrar la barra de búsqueda de izquierda a derecha y viceversa y, por lo tanto, cambia el progreso actual. Aquí usamos la biblioteca RangeSeekbar para agregar una barra de búsqueda personalizada en nuestra aplicación. Esta biblioteca nos brinda varias funciones como pasos, modo, thumbDrawable, etc., lo que la hace mucho mejor que la barra de búsqueda proporcionada por Android.

Acercarse

Paso 1: agregue la biblioteca de soporte en su archivo raíz build.gradle (no en su archivo de módulo build.gradle). Esta biblioteca jitpack es un repositorio de paquetes novedosos. Está hecho para JVM para que cualquier biblioteca que esté presente en github y bigbucket se pueda usar directamente en la aplicación.

      
allprojects {         
   repositories {         
      maven { url 'https://jitpack.io' }         
  }
}         

Paso 2: agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias. A través de esto, RangeSeekbar se utilizará directamente en el XML.

       
dependencies {         
         implementation 'com.github.Jay-Goo:RangeSeekBar:v3.0.0'         
}

Paso 3: Cree una array de strings en el archivo strings.xml presente en la carpeta de valores.

    
<string-array name="levelArray">
        <item>Lv1</item>
        <item>Lv2</item>
        <item>Lv3</item>
        <item>Lv4</item>
        <item>Lv5</item>
    </string-array>

Paso 4: agregue el siguiente código en el archivo activity_main.xml . En este archivo, se agrega la barra de búsqueda al diseño y se agregan etiquetas importantes como pasos, thumbDrawable, modo y muchas más de acuerdo con el requisito.

    
<?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">
  
 <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="228dp"
        android:textSize="18sp"
        android:text="Set difficulty for problem:-"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <com.jaygoo.widget.RangeSeekBar
        android:id="@+id/range_seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:rsb_gravity="bottom"
        app:rsb_indicator_background_color="@color/colorProgress"
        app:rsb_indicator_height="30dp"
        app:rsb_indicator_width="50dp"
        app:rsb_mode="single"
        app:rsb_progress_color="@color/colorProgress"
        app:rsb_step_auto_bonding="true"
        app:rsb_step_color="@color/colorProgress"
        app:rsb_step_height="10dp"
        app:rsb_step_width="5dp"
        app:rsb_steps="4"
        app:rsb_thumb_drawable="@drawable/ic_baseline_brightness"
        app:rsb_tick_mark_layout_gravity="bottom"
        app:rsb_tick_mark_mode="other"
        app:rsb_tick_mark_text_array="@array/levelArray"
        app:rsb_tick_mark_text_margin="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 5: agregue el siguiente código en el archivo MainActivity.kt . Aquí setOnRangeChangedListener se agrega con la barra de búsqueda. Se invoca cuando el usuario cambia la barra de búsqueda y muestra el porcentaje de progreso al que se cambia.

package org.geeksforgeeks.rangeseekbar
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.jaygoo.widget.OnRangeChangedListener
import com.jaygoo.widget.RangeSeekBar
import kotlinx.android.synthetic.main.activity_main.*
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        //whenever we change progress of seekbar this function 
        //get invoked automatically.
        range_seekbar?.setOnRangeChangedListener(object : 
            OnRangeChangedListener {
            override fun onRangeChanged(
                     rangeSeekBar: RangeSeekBar, leftValue: Float,
                     rightValue: Float, isFromUser: Boolean) {
                Toast.makeText(this@MainActivity,
                    leftValue.toString(),Toast.LENGTH_LONG).show()
            }
  
            override fun onStartTrackingTouch(view: RangeSeekBar?,
                         isLeft: Boolean) {
            }
  
            override fun onStopTrackingTouch(view: RangeSeekBar?, 
                         isLeft: Boolean) {
            }
        })
    }
}

Producción:

Consulte la documentación oficial para obtener más información.