Como crear un Spinner en Android

Android Spinner Example

Hola compañero seguimos aprendiendo día a día! Ahora en este siguiente nivel aprenderemos a utilizar el Widget Spinner al cual les mostrare un ejemplo del uso que le podemos dar para poder tener una idea clara de su uso en el desarrollo de nuestras aplicaciones Android, muy pronto combinaremos cada control en una aplicación completa para desarrollar nuestra primera aplicación que contenga complejidad.

Crear Proyecto Android

Ahora comenzaremos iniciando un proyecto en nuestro Android Studio. Para resumir estos pasos pueden seguir el siguiente enlace aquí.

Teniendo listo nuestro proyecto podremos proceder a crear nuestra aplicación, como siguiente paso sera ubicar el Spinner en nuestra barra de herramientas. Que es un Widget que representa un contenedor desplegable, para mostrar diferentes opciones que se pueden seleccionar al presionar clic sobre el mismo.

Colocaremos dos Spinner en nuestra actividad de la siguiente forma y junto a un Button para visualizar un mensaje al seleccionar en cualquiera de los dos Spinner.

Spinner Layout Design

El diseño de nuestro Spinner quedara de la siguiente forma.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
 android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

 <TextView android:text="Hello World!" android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/textView" />

 <Spinner
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/spinner"
 android:layout_below="@+id/textView"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="65dp" />

 <Spinner
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/spinner2"
 android:layout_below="@+id/spinner"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="136dp" />

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="New Button"
 android:id="@+id/button"
 android:layout_alignParentBottom="true"
 android:layout_centerHorizontal="true"
 android:layout_marginBottom="42dp" />
</RelativeLayout>

Teniendo listos nuestros controles comenzaremos a programar nuestra aplicación.
Ahora vamos a crear los datos que queremos mostrar en los Spinner al momento de ejecutar nuestra aplicación. Con el siguiente paso vamos abrir el archivo strings.xml que se ubica en Res -> Values -> strings.xml.

Lo abriremos y escribiremos el siguiente código que serán los datos que mostraran nuestros Spinner.

<!-- Spinner numero 1-->
<string-array name="planetas_array">
<item>Mercurio</item>
<item>Venus</item>
<item>Tierra</item>
<item>Marte</item>
<item>Jupiter</item>
<item>Saturno</item>
<item>Urano</item>
<item>Neptuno</item>
</string-array>
<!-- Spinner numero 2-->
<string-array name="numeros_array">
<item>Uno</item>
<item>Dos</item>
<item>Tres</item>
<item>Cuatro</item>
<item>Cinco</item>
<item>Seis</item>
<item>Siente</item>
<item>Ocho</item>
<item>Nueve</item>
</string-array>

Vamos a abrir la sección donde se encuentran las clases .Java para escribir nuestro código.
En la sección de Java.

Ahora abriremos el MainActivity y podremos comenzar.
El siguiente código es el que vamos a utilizar para nuestro ejemplo esta detallado con lo que hace cada parte.

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

public class MainActivity extends AppCompatActivity {
//--Declaramos las variables de tipo de control
Spinner spinner, spinner2;
private Button btnMsg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//--Asignamos las propiedades del contorl a las variables
btnMsg = (Button) findViewById(R.id.button);
spinner = (Spinner) findViewById(R.id.spinner);
spinner2 = (Spinner) findViewById(R.id.spinner2);
//--Adaptador para agregar los elementos string en el spinner
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.planetas_array, android.R.layout.simple_spinner_item);
//--Llena el spinner con los datos
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
//--Asigna la lista de datos al spinner
spinner.setAdapter(adapter);
//--Adaptador para agregar los elementos string en el spinner
ArrayAdapter<CharSequence> adapters = ArrayAdapter.createFromResource(this,
R.array.numeros_array, android.R.layout.simple_spinner_item);
//--Llena el spinner con los datos
adapters.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
//--Asigna la lista de datos al spinner
spinner2.setAdapter(adapters);

//-Evento que espera que el boton sea presionado
btnMsg.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//--Mostrar un mensaje con los datos seleccionados en los spinner
Toast.makeText(MainActivity.this,
"Mensaje: " +
"\nSpinner 1 : " + String.valueOf(spinner.getSelectedItem()) +
"\nSpinner 2 : " + String.valueOf(spinner2.getSelectedItem()),
//--Muestra el mensaje tostada
Toast.LENGTH_SHORT).show();
}
});
}
}

Crear Emulador AVD

Este sera el código de nuestro proyecto al tenerlo liste nuestro siguiente paso sera ejecutarlo para mostrar el resultado. Para ejecutarlo debemos iniciar nuestro emulador si no sabes como hacerlo puedes revisar el siguiente enlace aquí.

Este seria el resultado de nuestro proyecto. Si deseas descargar el proyecto completo puedes descargarlo desde.

Espero que el contenido haya sido de tu agrado cualquier duda, puedes dejarme un comentario y con gusto te responderé. Comparte mi blog para promover el conocimiento. Gracias por tu tiempo.

Android Studio - Curso Español