Tip Android #13: el widget SeekBar

09/03/2013

Este widget permite al usuario seleccionar un valor dentro de un rango simplemente desplazando una pequeño botón o «thumb» a lo largo de una barra o bien pulsando directamente en cualquier punto de la misma. Los valores seleccionables van desde cero hasta el que definamos mediante el atributo android:max que por defecto es 100. En el siguiente layout de ejemplo centramos una SeekBar sin ninguna configuración adicional (Nota: es imprescindible definir las propiedades paddingRight y paddingLeft para que el thumb no se oculte parcialmente cuando se ubique en un extremo la barra)

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="@android:color/black">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" 
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" 
        android:paddingRight="20dp"
        android:paddingLeft="20dp"/>

</RelativeLayout>

Nota: se puede definir un valor de inicio por defecto con el atributo android:progress

La interacción del usuario con la SeekBar la controlamos implementando el listener OnSeekBarChangeListener. Puesto que la SeekBar no muestra en pantalla el valor seleccionado, vamos a implementar un listener de ejemplo que realice esta acción. Para ello, primero añadimos un TextView que mostrará el valor seleccionado:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="@android:color/black">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" 
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" 
        android:paddingRight="20dp"
        android:paddingLeft="20dp"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/seekBar"
        android:layout_centerHorizontal="true"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Vamos ahora con el onCreate de la Activity y la implementación del listener. Usaremos unos Toast para probar todos los métodos del listener, y también veremos cómo cambiar el valor inicial de la SeekBar, que como se ha comentado empieza en cero, a 20 simplemente sumando 20 al valor seleccionado en todo momento.

package com.danielme.tipsandroid.seekbar;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;

import com.danieme.tipsandroid.seekbar.R;


public class MainActivity extends Activity
{

	private SeekBar seekBar;
	
	private TextView textViewSeekBar;
	
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		seekBar = (SeekBar) findViewById(R.id.seekBar);
		textViewSeekBar = (TextView) findViewById(R.id.textView);
		textViewSeekBar.setText("20");
		

		seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {            
          
            private Toast toastStart = Toast.makeText(MainActivity.this, getText(R.string.start), Toast.LENGTH_SHORT);
			private Toast toastStop = Toast.makeText(MainActivity.this, getText(R.string.stop), Toast.LENGTH_SHORT);

			@Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
            {
                 //la Seekbar siempre empieza en cero, si queremos que el valor mínimo sea otro podemos modificarlo
                 textViewSeekBar.setText(progress + 20 + "");                 
            }

           /**
            * El usuario inicia la interacción con la Seekbar.
            */
			@Override
			public void onStartTrackingTouch(SeekBar arg0)
			{
				toastStop.cancel();
				toastStart.setGravity(Gravity.TOP|Gravity.LEFT, 60, 110);
				toastStart.show();
			}

			/**
	         * El usuario finaliza la interacción con la Seekbar.
	        */
			@Override
			public void onStopTrackingTouch(SeekBar arg0)
			{
				toastStart.cancel();
				toastStop.setGravity(Gravity.TOP|Gravity.RIGHT, 60, 110);
				toastStop.show();				
			}
     });
		
	}
}

El resultado final en Jelly Bean

En el próximo tip se mostrará cómo aplicar estilos a la SeekBar en lugar de dejar su presentación en manos del estilo por defecto de la versión de Android en la que se ejecute la aplicación.

El proyecto completo para Eclipse ADT se encuentra en Github. Para más información sobre cómo utilizar GitHub, consultar este artículo.

<< TIPS ANDROID