{"id":1838,"date":"2019-07-02T14:49:27","date_gmt":"2019-07-02T19:49:27","guid":{"rendered":"https:\/\/naps.com.mx\/blog\/?p=1838"},"modified":"2020-03-30T12:15:22","modified_gmt":"2020-03-30T18:15:22","slug":"pasos-para-desarrollar-un-menu-en-una-app-android","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/pasos-para-desarrollar-un-menu-en-una-app-android\/","title":{"rendered":"Pasos para desarrollar un men\u00fa en una app Android"},"content":{"rendered":"

En \u00e9ste art\u00edculo realizaremos los pasos para desarrollar un men\u00fa en una aplicaci\u00f3n Android. Adem\u00e1s practicaremos lo siguiente: creaci\u00f3n de packages, incluir iconos de Material Design, crear un Image Asset para el Action Bar, crear un toolbar usando un archivo XML separado, y desde luego crearemos un menu lateral para realizar un aplicaci\u00f3n.<\/p>\n

<\/p>\n

El resultado deseado es el siguiente:<\/p>\n

\"Pasos<\/a>

Veremos los pasos para desarrollar un men\u00fa en Android<\/p><\/div>\n

Si deseas ver un video donde se desarrollan \u00e9stos pasos, puedes consultar el siguiente:\u00a0https:\/\/youtu.be\/f5rfvAEYeHM<\/a><\/p>\n

Una vez que hayas creado una nueva aplicaci\u00f3n, realizaremos lo siguiente:<\/p>\n

Pasos para desarrollar un men\u00fa en Android Studio<\/h2>\n

Paso 1. Agrega las dependencias que necesitaremos<\/strong><\/h3>\n

Abre tu archivo build.gradle (Module: app)<\/em><\/p>\n

En la secci\u00f3n dependencies, agrega \u00e9stas dos l\u00edneas<\/p>\n

implementation 'com.android.support:support-v4:27.1.1'\r\nimplementation \u2018com.android.support:design:27.1.1'<\/pre>\n
Reemplaza el 27.1.1 por la versi\u00f3n que t\u00fa est\u00e9s usando.<\/p>\n
Paso 2. Crea el layout con el menu<\/strong><\/h3>\n
Abre tu archivo activity_main.xml<\/em><\/p>\n
Reemplaza su contenido por el siguiente c\u00f3digo:<\/p>\n
<android.support.v4.widget.DrawerLayout\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/drawer_layout\"\r\n    android:fitsSystemWindows=\"true\">\r\n\r\n    <LinearLayout\r\n        android:id=\"@+id\/content_frame\"\r\n        android:orientation=\"vertical\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\">\r\n\r\n        <include\r\n            android:id=\"@+id\/toolbar\"\r\n            layout=\"@layout\/toolbar\"\/>\r\n\r\n    <\/LinearLayout>\r\n\r\n    <android.support.design.widget.NavigationView\r\n        android:id=\"@+id\/navview\"\r\n        android:layout_height=\"match_parent\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:fitsSystemWindows=\"true\"\r\n        app:headerLayout=\"@layout\/header_navigation_drawer\"\r\n        app:menu=\"@menu\/nav_options\"\r\n        android:layout_gravity=\"start\">\r\n\r\n    <\/android.support.design.widget.NavigationView>\r\n\r\n<\/android.support.v4.widget.DrawerLayout><\/pre>\n
Explicaci\u00f3n<\/strong>:<\/p>\n
Estamos creando un DrawerLayout<\/strong>. Nuestro elemento DrawerLayout tiene un id drawer_layout<\/em>. Usaremos \u00e9ste id para acceder a nuestro menu.\u00a0<\/span><\/p>\n
El DrawerLayout tiene dos componentes: Un LinearLayout<\/em> que tiene un id content_frame<\/em> y una referencia a un archivo llamado toolbar<\/em> (que m\u00e1s adelante se crear\u00e1). Dentro del LinearLayout se cargar\u00e1n los contenidos que deseemos mostrar.<\/p>\n
El segundo componente es un NavigationView<\/strong> que hace referencia a un archivo llamado header_navigation_drawer<\/em> (que m\u00e1s adelante crearemos) y que contendr\u00e1 el encabezado del men\u00fa. Tambi\u00e9n hace referencia a un archivo llamado nav_options<\/em> que contendr\u00e1 las opciones del men\u00fa.\u00a0<\/span><\/p>\n
Paso 3. Quitar el ActionBar actual<\/h3>\n
Como utilizaremos nuestro propio ActionBar<\/strong>, debemos desactivar el que est\u00e1 actualmente.\u00a0<\/span><\/p>\n
Abre el archivo styles.xml<\/em> que se encuentra en el directorio values<\/em> (dentro de res<\/em>).\u00a0<\/span><\/p>\n
Reemplaza lo que tengas despu\u00e9s de Light por NoActionBar. La l\u00ednea se ver\u00eda as\u00ed:<\/p>\n
<style name=\u00bbAppTheme\u00bb parent=\u201cTheme.AppCompat.Light.NoActionBar\u00bb><\/p>\n
Paso 4. Crear el archivo toolbar.xml<\/h3>\n
Crearemos nuestro propio toolbar<\/strong>.<\/p>\n
Da clic derecho en el directorio layout<\/em> y selecciona New -> Layout resource file.<\/p>\n
En el cuadro que se abre, escribiremos el nombre de nuestro nuevo archivo: toolbar.xml<\/p>\n
\"\"<\/a><\/p>\n
El c\u00f3digo de ese archivo ser\u00e1 el siguiente:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.v7.widget.Toolbar\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/toolbar\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"?attr\/actionBarSize\"\r\n    android:background=\"?attr\/colorPrimary\"\r\n    android:elevation=\"4dp\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark.ActionBar\"\r\n    app:popupTheme=\"@style\/ThemeOverlay.AppCompat.Light\"\/><\/pre>\n
Paso 5. Crear el archivo header_navigation_drawer<\/h3>\n
Da clic derecho en el directorio layout<\/em> y selecciona New -> Layout resource file.<\/p>\n
En el cuadro que se abre, escribiremos el nombre de nuestro nuevo archivo: header_navigation_drawer.xml<\/p>\n
\"\"<\/a><\/p>\n
El c\u00f3digo de ese archivo ser\u00e1:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n\r\n    <ImageView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"200dp\"\r\n        android:src=\"@drawable\/blur\"\r\n        android:scaleType=\"centerCrop\"\/>\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Gibr\u00e1n Garc\u00eda\"\r\n        android:textAppearance=\"@style\/TextAppearance.AppCompat.Large\"\r\n        android:textStyle=\"bold\"\r\n        android:textColor=\"#FFF\"\r\n        android:layout_gravity=\"bottom\"\r\n        android:layout_marginLeft=\"10dp\"\r\n        android:layout_marginBottom=\"10dp\"\/>\r\n\r\n<\/FrameLayout><\/pre>\n
Estamos especificando una imagen de fondo para el encabezado llamada blur<\/em>. Puedes utilizar cualquier imagen que desees. Pega el archivo en drawable<\/em> (clic derecho sobre drawable y luego paste<\/em>).<\/p>\n
Paso 6. Crear las opciones del menu<\/h3>\n
Vamos a crear el archivo nav_options.xml.\u00a0<\/span><\/p>\n
Crearemos un nuevo directorio de recursos en res<\/em>.\u00a0<\/span><\/p>\n
Da clic derecho en el directorio res<\/em>, luego en New -> Android resource directory<\/p>\n
Escribe el nombre del nuevo directorio que ser\u00e1 menu<\/em><\/p>\n
\"\"<\/a><\/p>\n
Da clic derecho en el directorio menu y selecciona New -> Menu resource file.<\/p>\n
En el cuadro que se abre, escribiremos el nombre de nuestro nuevo archivo: nav_options.xml<\/p>\n
\"\"<\/a><\/p>\n
El c\u00f3digo de este archivo ser\u00e1:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n    <group android:checkableBehavior=\"single\">\r\n        <item\r\n            android:id=\"@+id\/menu_calculadoras\"\r\n            android:title=\"Calculadoras\"\r\n            android:icon=\"@drawable\/ic_calculadoras\"\r\n            \/>\r\n        <item\r\n            android:id=\"@+id\/menu_records\"\r\n            android:title=\"Mis records\"\r\n            android:icon=\"@android:drawable\/ic_input_get\"\r\n            \/>\r\n        <item\r\n            android:title=\"Recetas\"\r\n            android:id=\"@+id\/menu_recetas\"\r\n            android:icon=\"@drawable\/ic_recetas\"\r\n            \/>\r\n        <item\r\n            android:title=\"Motivaci\u00f3n\"\r\n            android:id=\"@+id\/menu_motivacion\"\r\n            android:icon=\"@drawable\/ic_motivacion\"\r\n            \/>\r\n        <item\r\n            android:title=\"Informaci\u00f3n\"\r\n            android:id=\"@+id\/menu_informacion\"\r\n            android:icon=\"@android:drawable\/ic_dialog_info\"\r\n            \/>\r\n\r\n    <\/group>\r\n\r\n    <item android:title=\"Otras opciones\">\r\n        <menu>\r\n            <item\r\n                android:title=\"Configuraci\u00f3n\"\r\n                android:id=\"@+id\/menu_configuracion\"\r\n                android:icon=\"@drawable\/ic_configuracion\"\r\n                \/>\r\n\r\n\r\n        <\/menu>\r\n    <\/item>\r\n\r\n\r\n<\/menu><\/pre>\n
En las opciones de menu podemos utilizar iconos utilizando el atributo :icon<\/em>. En el ejemplo usamos dos tipos de iconos: propios y del package de android. Siempre se recomienda utilizar los de Material Design. Puedes ir a la siguiente p\u00e1gina: https:\/\/material.io\/tools\/icons\/?style=baseline<\/a> y seleccionar los que necesites.<\/p>\n
\"\"<\/a><\/p>\n
Una vez descargado el archivo png, p\u00e9galo en la carpeta drawable (clic derecho sobre drawable y luego en paste), con el nombre que desees (por ejemplo, us\u00e9 ic_calculadoras.png).<\/p>\n
Paso 7. Crear los packages<\/h3>\n
Vamos a crear 3 packages<\/em> para organizar nuestros archivos. Da clic derecho sobre el nombre de tu proyecto (por ejemplo: com.example.project) y elige New -> Package<\/p>\n
Como nombre de package elige Activities<\/em>. Haz lo mismo para los packages Adapters y Fragments.<\/p>\n
Mueve el archivo MainActivity hacia dentro del package Activities.<\/p>\n
Paso 8. Escribir el c\u00f3digo de MainActivity<\/h3>\n
Vamos a enlazar nuestros componentes y permitir que el usuario abra o cierre el men\u00fa utilizando un bot\u00f3n hamburguesa.<\/p>\n
Agrega el siguiente c\u00f3digo:<\/p>\n
Variables a utilizar:<\/p>\n
private DrawerLayout drawerLayout;\r\nprivate NavigationView navigationView;<\/pre>\n
Modificar el m\u00e9todo onCreate:<\/p>\n
setToolBar();\r\ndrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);\r\nnavigationView = (NavigationView)findViewById(R.id.navview);<\/pre>\n
Crear el m\u00e9todo setToolBar:<\/p>\n
private void setToolBar(){\r\n    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);\r\n    setSupportActionBar(toolbar);\r\n    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_home);\r\n    getSupportActionBar().setDisplayHomeAsUpEnabled(true);\r\n}<\/pre>\n
Crear el m\u00e9todo onOptionsItemSelected:<\/p>\n
@Override\r\npublic boolean onOptionsItemSelected(MenuItem item) {\r\n    switch (item.getItemId()){\r\n        case android.R.id.home:\r\n            drawerLayout.openDrawer(GravityCompat.START);\r\n            return true;\r\n    }\r\n\r\n    return super.onOptionsItemSelected(item);\r\n}<\/pre>\n
Aqu\u00ed necesitaremos crear una nueva Image Asset para el icono del toolbar.<\/p>\n
Da clic derecho sobre drawable<\/em> y luego en New -> Image Asset<\/p>\n
Selecciona el tipo Action Bar y en nombre escribe ic_home. Elige en el boton Clip Art el icono que desees.\u00a0<\/span><\/p>\n
\"\"<\/a><\/p>\n
Espero que \u00e9stos pasos para desarrollar un men\u00fa para una app Android te hayan resultado entendibles.<\/p>\n
\u00bfTe resulta m\u00e1s f\u00e1cil verlo en video?<\/p>\n