En este tutorial se explica que es la Seekbar en Android Studio y cómo implementarla. Básicamente es una Línea que tiene varios valores enteros y podemos seleccionar alguno de ellos, algo similar a subir o bajar el volumen, para el usuario solo es cuestión de mover la perilla a la posición deseada.
En Android Studio podemos encontrar 2 tipos de Seekbar.
La Seekbar donde los valores al mover la perilla son continuos.
Y la Seekbar (discreta), donde tenemos solo ciertos valores a elegir, se mueve en “pasos”.
Esta es una Seekbar en Android Studio:
Resumen rápido Android seekbar.
Dejamos un resumen con lo básico para implementar la seekbar, para más detalles puedes continuar leyendo este Tutorial.
¿Cómo agregar Seekbar en Android Studio?
Primero la agregamos a la UI como cualquier otro elemento, y la acomodamos según nuestro proyecto lo requiera, podemos modificar el color y algunos otros atributos.
En java, primero declaramos una variable tipo Seekbar y la relacionamos con la Seekbar de la UI, mediante su ID.
Luego le damos el valor máximo que tendrá, esto se puede hacer en XML o en Java.
Por ultimo agregamos el comando setOnSeekBarChangeListener(), donde podemos elegir cuando realizar la acción. Ya sea cuando el usuario comience a tocar la Seekbar, cuando el usuario termine de mover la Seekbar o bien mientras la esté moviendo.
seek = findViewById(R.id.seekBar);
seek.setMax(10);
seek.setProgress(7);
seek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
txtPrueba.setText(String.valueOf(i));
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});Actualizamos el texto mientras el usuario mueve la Seekbar.
Implementando la Android Seekbar.
En este ejemplo agregaremos una Seek bar a nuestro proyecto en Android Studio. La UI es muy simple, tendremos un TextView que mostrará el valor seleccionado en la Seekbar.
Creando la Interfaz de usuario.
Primero necesitaremos crear la UI, para esto solo necesitamos agregar un TextView y una Seekbar.
Así nos queda la UI, el Seekbar se agrega como cualquier otro elemento. En este caso seleccionamos la Seekbar discreta, pero el código funciona para cualquiera de las dos opciones.
Las ID de cada elemento son las siguientes:
- TextView, tiene como ID: txt_prueba
- Seekbar tiene como ID: seekbar
Este sería el código, usamos un constraint layout para acomodar los elementos.
<?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"
android:scaleY="1"
tools:context=".MainActivity">
<TextView
android:id="@+id/txt_prueba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="256dp"
android:text="7"
android:textColor="#000000"
android:textSize="34sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<SeekBar
android:id="@+id/seekBar"
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:max="10"
android:progress="3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txt_prueba" />
</androidx.constraintlayout.widget.ConstraintLayout>Podemos cambiar el diseño, en la parte derecha en la opción de “Common Atributes” en style seleccionamos el estilo, tenemos algunos para elegir, entre ellos esta la discreta. Pero podemos tener más diseños como el de la siguiente imagen:
Funcionalidad de la Seekbar.
Existe una Seekbar continua y una discreta. La diferencia es que la discreta tiene las posiciones definidas, mientras que la continua es una sola línea que puede tener cualquier valor dentro de su rango.
En este caso usaremos la Seekbar discreta, pero el código es el mismo para ambas, por lo que te funciona para cualquiera de las dos.
Primero vamos a declarar una variable tipo Seekbar y le daremos el nombre de “seekbar”. Luego declaramos una variable TextView, y le daremos el nombre de “mensaje”.
private SeekBar seek; private TextView txtPrueba;
Luego relacionamos las variables que acabamos de crear con los elementos en la Interfaz de Usuario.
txtPrueba = findViewById(R.id.txt_prueba); seek = findViewById(R.id.seekBar);
Ahora si podemos comenzar a trabajar.
Seleccionando el valor máximo.
Para indicar el valor máximo en la Seekbar, podemos elegirlo en Java o bien el XML en la UI.
En java lo hacemos así:
seek.setMax(10);
Mientras que en XML podemos usar:
android: max=”10”
El valor mínimo siempre es cero (0). En caso de querer cambiar ese valor, se recomienda sumarle el valor mínimo que queremos al valor obtenido en la Seekbar.
Valor predeterminado en Seekbar.
Podemos indicar el valor por default que tendrá la Seekbar usando el siguiente código. Puede ser en XML o en el código en java.
En java:
seek.setProgress(7);
En XML:
android: progress=”7”
Agregando Listener al Seekbar.
Ahora solo falta hacer que el textView cambie en base a lo que se ha seleccionado en la Seekbar, para esto es necesario usar el comando setOnSeekBarChangeListener().
Este comando tiene 3 funciones:
- onProgressChanged, el cual realiza cambios mientras el usuario este moviendo la perilla del Seekbar.
- onStartTrackingTouch, este actúa cuando el usuario comienza a mover la Seekbar, mientras se mueva la Seekbar no se actualizará.
- onStopTrackingTouch, se actualiza cuando el usuario deja de mover la Seekbar. Mientras la esté moviendo no se verá ningún cambio, solo cuando la deje de mover.
En nuestro caso cambiaremos el contenido del TextView mientras el usuario mueve la Seekbar, así que usaremos onProgressChanged().
Si corremos la App, podemos ver que tenemos valores desde 0 hasta el 10. Y mientras movemos la perilla de la Seekbar el Texto nos indica el valor en esa posición.
El código es el siguiente:
private TextView txtPrueba;
private SeekBar seek;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
txtPrueba = findViewById(R.id.txt_prueba);
seek = findViewById(R.id.seekBar);
seek.setMax(10);
seek.setProgress(7);
seek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
txtPrueba.setText(String.valueOf(i));
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}Para más tutoriales de Android puedes ir a este enlace.
Dejamos algunos tutoriales que pueden interesarte.
3 formas de agregar evento onClick en Android Studio usando Java.
EditText, mostrar símbolo y mensaje de error usando setError().