Cómo utilizar el Spinner

Dentro de los diferentes tipos de componentes gráficos que podemos encontrar para crear nuestro diseño encontramos el ‘Spinner’. Un elemento desplegable que muestra uno o mas valores de selección. En este artículo veremos cómo utilizar el spinner en nuestra interfaz y como podemos modificar su apariencia para adecuarla a nuestra línea de diseño.

 

 

Qué es un Spinner?

Este componente de interfaz es utilizado para dar al usuario la opción de escoger un valor de entre otros. Los diferentes valores aparecen en una lista tipo desplegable, que al seleccionar uno de ellos este quedará fijado dentro del spinner (ya cerrado) para su visualización. Es el típico control que se nos presenta en un formulario de registro cuando se nos pide indicar nuestro sexo.

 

 

 

1. Añadiendo el Spinner al layout

Para empezar a utilizar un Spinner habrá que añadirlo al archivo xml que utilizará nuestra Activity. Su uso es muy sencillo, le damos las dimensiones y asignamos un id para trabajar con el posteriormente desde el código.

Una vez tenemos el Spinner añadido pasamos a explicar como podemos cargar los valores que mostrará, ya que podemos hacerlo de varias maneras dependiendo de donde vengan los datos.

 

 

2. Cargando valores en el Spinner

2.1 Valores locales
  • Caso 1 : Suponiendo que los valores que quieres mostrar sean recursos locales, se pueden crear por ejemplo en un string-array en el archivo ‘array.xml’ en la carpeta ‘res’. De manera que queda algo así:

 

Una vez estén los valores definidos en el archivo array.xml, puedes cargarlos desde el propio elemento Spinner en el xml añadiendo el recurso ‘android:entries’. Tal que:

 

2.2 Valores dinámicos
  • Caso 2 : En el caso que quieras cargar valores obtenidos desde internet u otra vía vas a tener que utilizar un ArrayAdapter pasando una array String[] con los valores que quieras. Para este ejemplo crea una variable tipo String[] en la cual se cargan los recursos locales, esto no tiene sentido ya que podrías cargalos con el método anterior, básicamente es para que veas el funcionamiento. Los comentarios del código te ayudarán a entender la preparación.

 

 

Bien, hasta aquí deberías tener un Spinner funcionando mostrando los 3 colores en la lista, al pulsar sobre cualquiera de ellos salta un Toast con el valor y posición del elemento.

 

 

3. Modificando la apariencia del Spinner

En algunas ocasiones quizás te pueda interesar cambiar el aspecto de los elementos, el cómo cambiar el color del texto del Spinner, el tamaño o incluso la fuente. Esto lo logramos creando un Layout al cual le añadimos un elemento TextView que más adelante pasaremos al Adapter del Spinner.

Veamos un ejemplo del layout en cuestión:

Una vez tenemos el diseño de los elementos listo, tenemos que hacer una pequeña modificación en una de las líneas del código. Concretamente vamos a cambiar la línea:

modificando el segundo parámetro ->

Obteniendo como resultado:

 

 

Otro punto a tener en cuenta es el recuadro del propio Spinner, este diseño varia en función de la versión de Android que está ejecutando el dispositivo. Es por ello que si quieres conseguir un mismo diseño en todas las versiones de Android tendrás que modificar la apariencia del Spinner. Para este ejemplo he utilizado 2 imágenes a modo de fondo, que se mostrarán en función si el botón esta pulsado o no. Lo primero de todo será que descargues las imágenes y las copies al directorio ‘drawable’ de tu proyecto.

 

back_spinner.png
back_spinner_pressed.png

 

Una vez las tengas copiadas vamos a crear un nuevo archivo en el directorio ‘drawable’ que funcionará a modo de selector para distinguir entre los estados de ‘pulsado’ y ‘no pulsado’.

 

Luego solo nos queda modificar el elemento <Spinner> en el layout del MainActivity para que utilice el nuevo fondo que hemos creado:

 

 

 

 

Como puedes ver, las posibilidades de modificación son muy amplias, con unas pocas líneas se consigue un diseño bonito y agradable para el usuario.

 

 

Mario Camí Author

Desarrollador de aplicaciones Android. Amante de todo lo Open Source, de los videojuegos y nuevas tecnologías. En mi tiempo libre comparto todo lo aprendido y lo que aprendo en el desarrollo de Android a modo de artículo en el blog. La información nos hará libres!