¿Cómo crear una barra deslizante de desbloqueo en Android?

Un SeekBar es una extensión de ProgressBar que agrega un pulgar que se puede arrastrar. El usuario puede tocar el pulgar y arrastrar hacia la izquierda o hacia la derecha para establecer el nivel de progreso actual o usar las teclas de flecha. SeekBar es un elemento de interfaz de usuario útil en Android que permite la selección de valores enteros mediante una interfaz de usuario natural. Un ejemplo de SeekBar es el control de brillo y volumen de su dispositivo. Pero, ¿sabía que una barra de búsqueda podría implementarse como una barra deslizante de desbloqueo? A través de este artículo, queremos compartir con usted cómo se puede implementar una barra deslizante de desbloqueo usando un SeekBar.

Diferencia entre una barra de búsqueda y una barra de progreso

SeekBar tiene los mismos atributos que ProgressBar. Pero la única diferencia es que el usuario determina el progreso moviendo un control deslizante (pulgar) en SeekBar. Para agregar una SeekBar a un archivo de diseño (XML), puede usar el elemento <SeekBar>. A continuación se muestra un ejemplo de la barra deslizante de desbloqueo.

¿Dónde se puede utilizar?

• Para desbloquear una pantalla, desbloquear una actividad, ir a una actividad (lo que discutimos en este artículo).
• Usando un concepto similar para construir Juegos.
• Confirmación de un pago en Pasarelas de Pago.
• Para apagar las alarmas.

kotlin

Acercarse

Por favor, consulte los siguientes puntos que definen el módulo para la aplicación que implementamos:

• La aplicación tiene 2 actividades, MainActivity y MainActivity2, ambas tienen sus respectivos archivos de diseño actividad_principal y actividad_principal2.
• La SeekBar está presente en la Primera Actividad, es decir, declarada en el archivo activity_main.
• Hemos programado SeekBar de tal manera que cuando el usuario la desliza hasta el final, el usuario es llevado a una nueva actividad, es decir, MainActivity2. De lo contrario, SeekBar establece su progreso en 0 y muestra un mensaje Toast .
• Se proporciona una vista de texto en la primera actividad para mostrar el progreso de SeekBar en tiempo real.

Para crear una Slide-Bar en Android, seguimos los siguientes pasos:

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: trabajar con el archivo activity_main.xml

Ahora vaya al archivo activity_main.xml que representa la interfaz de usuario de la aplicación. Cree una barra de búsqueda y una vista de texto como se muestra. actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--Seek Bar, set max to 100 to view the progress with respect to 100-->
    <!--progressDrawable is the color you want for your progress track-->
    <!--thumb is the icon that user will slide over the track-->
    <SeekBar
        android:id="@+id/sbb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:max="100"
        android:progressDrawable="@color/colorPrimaryDark"
        android:thumb="@mipmap/ic_launcher"
        tools:ignore="MissingConstraints" />
  
    <!--This textView will display the progress of SeekBar-->
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
  
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. MainActivity.kt

import android.content.Intent
import android.os.Bundle
import android.widget.SeekBar
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // declare the textView from the layout file
        val tv = findViewById<TextView>(R.id.tv)
  
        // declare the SeekBar from the layout file
        val sb = findViewById<SeekBar>(R.id.sbb)
  
        // Action when SeekBar is used
        sb.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
  
  
            // Member Implementation (Required)
            // Keeps the track if touch was lifted off the SeekBar
            override fun onStopTrackingTouch(seekBar: SeekBar) {
  
                // If touch was lifted before the SeekBar progress was 100
                // Make a Toast message "Try Again" and set the progress to 0
                if (seekBar.progress < 100) {
                    Toast.makeText(applicationContext, "Try Again", Toast.LENGTH_SHORT).show()
                    seekBar.progress = 0
                }
            }
  
            // Member Implementation (Required)
            override fun onStartTrackingTouch(seekBar: SeekBar) {
  
                // Do anything or Nothing
  
            }
  
            // Member Implementation (Required)
            // Keeps the track of progress of the seekbar
            override fun onProgressChanged(
                seekBar: SeekBar, progress: Int,
                fromUser: Boolean
            ) {
                // Show the progress when progress was less than 100
                if (progress < 100) {
                    tv.text = "Progress : $progress"
                }
  
                // If the progress is 100, take the user to another activity
                // Via Intent
                if (progress == 100) {
                    startActivity(
                        Intent(
                            applicationContext,
                            MainActivity2::class.java
                        )
                    )
                }
            }
        })
    }
}

Paso 4: Crea otra actividad

Cree otra actividad con un archivo de diseño haciendo clic con el botón derecho en la carpeta de la aplicación > Nuevo > Actividad > Actividad vacía . Y consulte el siguiente código. Los únicos cambios realizados en el archivo activity_main2.xml , no se realizaron cambios en el archivo MainActivity2.kt . A continuación se muestra el núcleo de los archivos activity_main2.xml y MainActivity2.kt .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">
  
    <!--activity_main2.xml file that shows
        "New Activity" message in a textView-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="New Activity"
        android:textSize="50sp" />
  
</RelativeLayout>

// No Changes in this file
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
class MainActivity2 : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main2)
    }
}

Salida: ejecutar en el emulador