Cómo utilizar el Spinner

Dentro de los diferentes tipos de componentes gráficos que podemos encontrar para crear nuestro diseño en Android, 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.

<Spinner
        android:id="@+id/spinner_colores"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

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í:

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

    <string-array name="colores">
        <item>@string/rojo</item>
        <item>@string/verde</item>
        <item>@string/amarillo</item>
    </string-array>
    
    <string name="rojo">Rojo</string>
    <string name="verde">Verde</string>
    <string name="amarillo">Amarillo</string>


</resources>

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:

<Spinner
        android:id="@+id/spinner_colores"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:entries="@array/colores"/>

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.

package es.mscdroidlabs.spinner;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {

    Spinner spinner_colores;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Instancia a nuestro elemento en el Layout
        spinner_colores = (Spinner)findViewById(R.id.spinner_colores);

        //Cargamos los recursos locales en un String[]
        final String[] ar = getResources().getStringArray(R.array.colores);
        
        // Creamos el ArrayAdapter que necesitará el spinner, dándole como parámetros, (Contexto, referencia al layout de elemento, valores (opciones)
        ArrayAdapter<String> adapter = new ArrayAdapter<>(getApplicationContext(), android.R.layout.simple_spinner_item, ar);
        
        // Indicamos al spinner que utilice el adapter recien creado
        spinner_colores.setAdapter(adapter);

        //Funciones ejecutadas al seleccionar un elemento del desplegable
        spinner_colores.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                //Elemento seleccionado ->
                //Mostramos un Toast con la posición en la lista del elemento pulsado y el texto.
                TextView t = (TextView) view;
                Toast.makeText(getApplicationContext(), t.getText().toString() + "\nPosición " + i+1, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {
                //No se ha seleccionado nada.
            }
        });

    }
}

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:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:textColor="@android:color/holo_red_light"
          android:textSize="24dp">
</TextView>

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:

        ArrayAdapter<String> adapter = new ArrayAdapter<>(getApplicationContext(), android.R.layout.simple_spinner_item, ar);

modificando el segundo parámetro ->

        ArrayAdapter<String> adapter = new ArrayAdapter<>(getApplicationContext(), R.layout.custom_spinner_item, ar);

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’.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/back_spinner" android:state_enabled="true" />
    <item android:drawable="@drawable/back_spinner_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/back_spinner"/>

</selector>

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

<Spinner
        android:id="@+id/spinner_colores"
        android:layout_width="250dp"
        android:layout_height="40dp"
        android:background="@drawable/back_spinner_selector"/>

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.