Spinner en Android Studio.

En este tutorial se explica que es un spinner en Android Studio, como usarlo en XML y Java, como hacer acción al dar clic y como agregar una lista de elementos.

Un spinner es un elemento de la Interfaz de usuario, el cual es como una lista expandible. Se pueden colocar varios elementos para que el usuario elija uno.

El spinner solo mostrará una de las opciones, pero al momento en que el usuario de clic en el spinner, éste mostrará todas las opciones y el usuario podrá elegir la que desee.

Spinner en XML.

Android Studio tiene este componente, solo es cuestión de arrastrarlo al diseño si se trabaja visualmente. O bien escribir el código:

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

Y como cualquier otro elemento de la UI, se puede acomodar como se desee.

Ejemplo de un spinner en Android Studio.

Para hacer funcionar un spinner en Android Studio seguimos los pasos:

1. Primero vamos a configurar el spinner en XML dándole una ID.
2. Luego enlazamos XML y JAVA, mediante la ID.
3. A la clase le agregamos implements onItemClickListener, para poder dar clic a cada ítem del spinner.
4. Después agregamos la lista que contendrá el spinner, con un adaptador.
5. Y por último agregaremos acciones cuando el usuario haga clic en un elemento del spinner.

Ejemplo de spinner XML.

En este tutorial vamos a usar la opción de diseño sin texto. Para agregar un spinner se hace lo siguiente:

Primero buscamos spinner en la sección de arriba a la izquierda. Una vez que aparezca lo arrastramos al diseño de la app.

Luego vamos a darle una ID, como se ve a continuación. Como se ve en la imagen de abajo, estamos trabajando en Constraint layout y el spinner está centrado en toda la pantalla.

Código en Java.

Una vez listo el XML, lo siguiente es pasar a JAVA. Lo primero que se tiene que hacer es declarar una variable tipo spinner:

private Spinner spTest;

Luego se relaciona el código XML con la variable en JAVA, con el comando findViewById(. . . ). Como se ve a continuación:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    inicioXML();
}

private void inicioXML()
{
    spTest = findViewById(R.id.id_spinner);
}

El código está dentro de un método llamado inicioXML. Ese método se llama desde el método onCreate. Esto lo hacemos para dar más orden al código, pero se puede usar findViewById(. . . ) en el método onCreate.

Con esto ya se tiene la variable en java relacionada con el spinner en XML.

Agregando contenido al spinner.

Agregando la lista de componentes al spinner en Android Studio.

1. Primero se crea un ArrayList, el cual contiene la lista que mostrará el spinner.
2. Luego se crea un adaptador, el cual se encarga de pasar el ArrayList al spinner.
3. Por último se agrega el adaptador al spinner. Como se muestra a continuación.

La lista a agregar en este ejemplo es:

“Perro, gato, ratón, ardilla”.

Esta lista la vamos a agregar al spinner con el siguiente código:

private ArrayList<String> lista = new ArrayList<String>();

private void agregandoValores()
{
    lista.add("Perro");
    lista.add("Gato");
    lista.add("Ratón");
    lista.add("Ardilla");
}

Puedes crear el Array ya sea desde tu base de datos o desde los recursos, lo importante es tener un ArrayList con los elementos que va a tener el spinner.

Click al Spinner.

Para que el spinner reaccione a los clic en cada ítem, es necesario implementar en la clase de la Activity OnItemSelectedListener. Como se ve a continuación:

Aquí nos va a marcar un error y nos sugiere implementar los métodos por default, le damos en aceptar o bien los implementamos manualmente, viendo de manera general nuestro código quedaría así:

Pasar lista al spinner

A este punto ya tenemos la lista, y ya tenemos lo necesario para que se haga clic al spinner.

Lo siguiente es pasar la lista al spinner, para esto vamos a crear otro método que llamaremos darClic, aquí agregamos todo el código que se refiera a dar clic por parte del usuario. Usando el siguiente código:

private void darClic()
{
    spTest.setOnItemSelectedListener(this);
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, lista);
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    spTest.setAdapter(adapter);
}

Lo que hicimos fue decirle al spinner que este alerta cuando el usuario le de clic. Le agregamos la lista a un adaptador y con ese adaptador pasamos la lista al spinner.

Agregar acción al hacer clic.

Por último se agrega una acción a cada ítem seleccionado. Eso se hace en el método llamado onItemSelected().

Se usa un Switch, para elegir que spinner se seleccionó (en caso de ser más de un spinner), y la acción dependiendo del ítem seleccionado se configura en base al contenido del ítem seleccionado.

Para ver cómo funciona un Switch te sugerimos ver el tutorial de este link.

El código quedaría de la siguiente manera:

@Override
public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
    switch (adapterView.getId())
    {
        case R.id.id_spinner:
            Toast.makeText(cont,adapterView.getSelectedItem().toString(),Toast.LENGTH_SHORT).show();
            break;

        default:
            break;
    }
}

La ID en el switch es la id del spinner, en caso de tener más de un spinner, solo se abrirían más case en el switch y listo. Puedes ver el tutorial de múltiples spinners en la misma activity.
Cuando se selecciona Perro aparecerá un Toast que dice Perro, y lo mismo para los demás componentes de la lista.

Para obtener el nombre del ítem seleccionado se usa:

adapterView.getSelectedItem()

Para obtener la posición del ítem seleccionado se usa:

adapterView.getSelectedItemPosition()

Código final.

El código en JAVA queda así:

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {

    private Context cont=this;    
    private Spinner spTest;
    private ArrayList<String> lista = new ArrayList<String>();

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

    private void inicioXML()
    {
        spTest = findViewById(R.id.id_spinner);
    }

    private void agregandoValores()
    {
        lista.add("Perro");
        lista.add("Gato");
        lista.add("Ratón");
        lista.add("Ardilla");
    }

    private void darClic()
    {
        spTest.setOnItemSelectedListener(this);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, lista);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spTest.setAdapter(adapter);
    }

    @Override
    public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
        adapterView.getSelectedItem()
        switch (adapterView.getId())
        {

            case R.id.id_spinner:
                //Hacer algo aquí
                Toast.makeText(cont,adapterView.getSelectedItem().toString(),Toast.LENGTH_SHORT).show();
                break;

            default:
                break;
        }

    }

    @Override
    public void onNothingSelected(AdapterView<?> adapterView) {

    }
}

Para mas tutoriales de Android Studio ve a este link.

Puedes visitar la documentación de Android Studio, para aun mas información de un spinner.