Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Cómo agregar un menú desplegable en Android Studio

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Un menú desplegable o menú "pull-down", también conocido como "spinner", es uno de los elementos más esenciales de la interfaz de usuario para una aplicación. En este tutorial te enseñaré cómo agregar uno a tu aplicación Android usando Java.

Los menús desplegables mantienen la organización de una aplicación y mejoran la experiencia del usuario. Casi todas las aplicaciones tienen un menú desplegable integrado en su interfaz de usuario.

Si bien agregar un menú desplegable en tu aplicación Android es tan sencillo como arrastrarlo y soltarlo, definitivamente puede ser complicado, especialmente si eres nuevo en el uso de Android Studio. Si eres un desarrollador principiante y estás creando tus primeras aplicaciones en Android Studio, este tutorial es para ti.

Configuración del entorno

Una vez que hayas creado un proyecto en Android Studio, abre estos archivos:

  • res/layout/activity_main.xml
  • res/values/strings.xml
  • app/java/nombre.de.tu.proyecto/MainActivity.java

(El archivo MainActivity.java se abre de forma predeterminada cuando creas el proyecto.)

Con todos los archivos abiertos, tu IDE debería verse así:

IDE with code resource and layoutIDE with code resource and layoutIDE with code resource and layout

Agrega el diseño del menú desplegable

Ahora es momento de agregar el diseño del menú desplegable. En Android Studio, los diseños se agregan a los archivos de diseño XML. Para hacer eso, dirígete a activity_main.xml. Estando en el archivo activity_main.xml, abre la pestaña Diseño. La encontrarás en la esquina superior derecha de tu IDE.

Design tab in XMLDesign tab in XMLDesign tab in XML

En Android Studio, los menús "pull-down" de Android se agregan usando Spinners.

Si hay texto predeterminado presente en la pantalla de tu aplicación, regresa a la sección de código y elimina todos los TextViews. Ahora selecciona Contenedores en la paleta de diseño. Ahí encontrarás el Spinner.

Por favor aquí ten en cuenta que estamos usando Android Studio 4.2.2. En las versiones anteriores de Android Studio, el Spinner podría estar localizado dentro de la sección "Widgets". Si no puedes encontrarlo, simplemente puedes hacer clic en el icono de búsqueda y buscar Spinner.
SpinnerSpinnerSpinner

Una vez que hayas localizado el Spinner, arrástralo y suéltalo sobre tu aplicación móvil. Android Studio hará la codificación relevante por ti, y luego puedes echarle un vistazo si regresas a la pantalla de código.

Dependiendo del lugar en el que hayas soltado tu Spinner, el código de diseño debería verse más o menos así:

Sin embargo, Android Studio te permite personalizar tu menú desplegable modificando su altura, su ancho y sus márgenes a través del panel de atributos, sin tener que codificarlo todo desde cero.

Mientras trabajas en esto, asegúrate de que spinnerMode esté configurado en dropdown para crear un menú desplegable. Encontrarás esta configuración en el panel de atributos.

Colocar el menú desplegable en la pantalla de tu aplicación es bastante sencillo. La GUI de Android Studio te proporcionará todas las restricciones para permitirte especificar en dónde se encuentra tu menú desplegable.

Una vez que estés satisfecho con el estilo de tu menú desplegable, ve a la vista de código y edita el id del Spinner. Esto será necesario más adelante, cuando integremos el Spinner en el archivo Java.

El id del Spinner se encuentra en la primera línea de la etiqueta <Spinner>. Asígnale un id que puedas recordar para usarlo en otras partes del código de tu aplicación.

Spinner idSpinner idSpinner id

Finalmente, regresa a la sección de diseño y presiona el botón Inferir restricciones (al que personalmente llamo "botón mágico") en la parte superior para hacernos cargo de todas las restricciones faltantes en nuestro código:

Infer Constraints ButtonInfer Constraints ButtonInfer Constraints Button

Agrega elementos al menú desplegable

Ahora que ya has agregado un menú desplegable a tu pantalla, es hora de rellenarlo con una variedad de opciones de entre las que el usuario pueda elegir.

Para hacer esto, necesitas abrir el archivo strings.xml. Este archivo estará vacío inicialmente, y debería verse más o menos así:

strings.xml filestrings.xml filestrings.xml file

Para agregar elementos a tu menú desplegable Android, necesitas declarar una matriz de cadenas y asignarle un nombre. Declara una string-array debajo de la ya declarada string usando la siguiente sintaxis:

La matriz de cadenas tiene que ser declarada dentro de la etiqueta resources. De lo contrario verás un error de sintaxis. La matriz de cadenas también puede ser declarada dentro del archivo Java principal, pero colocarla en un archivo XML separado aumenta la reutilización del código y mejora la eficiencia de tu aplicación. No hay un límite en la cantidad de elementos que puedes tener en tu menú desplegable.

Llama al Spinner en el archivo Java

Antes de que comencemos a codificar, importa las siguientes clases en tu código:

Es mejor importar estas clases de antemano para evitar errores de sintaxis más adelante. Sin embargo, si aún ves un error de sintaxis, siempre puedes pasar tu ratón sobre él y luego presionar Alt-Intro para importar la clase relevante para tu código.

Para enviar el menú desplegable Android a Java, tienes que definir un objeto Spinner. Usa el nombre de clase Spinner y asígnale al objeto un nombre adecuado. A continuación, crea una instancia del Spinner buscándolo con el mismo id que declaraste en el archivo activity_main.xml:

En el siguiente paso deberás crear un ArrayAdapter. El ArrayAdapter será el responsable de representar en la pantalla cada elemento de la matriz de cadenas de lenguajes al acceder al menú desplegable Java.

createFromResources() es un método integrado para la clase ArrayAdapter y recibe tres parámetros de entrada:

  • el entorno de la aplicación; dentro de una actividad simplemente puedes usar this
  • el nombre de la StringArray que declaraste en el archivo strings.xml
  • el tipo de diseño

Para este ejemplo en particular, estamos usando un diseño  básico para el Spinner.

El adaptador que declaramos anteriormente es inútil a menos que esté enlazado a nuestro menú desplegable (Spinner). Por lo tanto, configura el Spinner para usar ese adaptador.

Con el ArrayAdapter declarado y enlazado exitosamente al spinner, has integrado con éxito tu primer menú "pull-down" de Android en tu aplicación.

Ahora puedes ejecutar tu aplicación en el emulador. Se verá más o menos así:

Dropdown menu view in emulator

Con el menú desplegable Java configurado, ahora puedes jugar un poco con él en el archivo activity_main.xml. Intenta alterar el atributo de altura y ve cómo se mueve el menú desplegable por la pantalla.

Resumen

Puedes agregar un menú desplegable a tu aplicación Android en unos sencillos pasos.

Para empezar, necesitas editar los archivos XML. Integra el menú desplegable en ellos usando la función de arrastrar y soltar de Android Studio. A continuación debes crear una matriz de cadenas para agregar todos los elementos relevantes a tu menú desplegable. Luego necesitas colocar la instancia del Spinner en el archivo Java principal, junto con un ArrayAdapter. Finalmente, debes configurar tu Spinner para que use ese adaptador.

Con los tres archivos de código trabajando simultáneamente, tendrás un menú desplegable Android completamente funcional en tu primera aplicación Android.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.