Pasos para desarrollar un menú en una app Android

Jul 2,2019 ¿Dudas? Por Gibrán García C.

En éste artículo realizaremos los pasos para desarrollar un menú en una aplicación Android. Además practicaremos lo siguiente: creación 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ón.

El resultado deseado es el siguiente:

Veremos los pasos para desarrollar un menú en Android

Si deseas ver un video donde se desarrollan éstos pasos, puedes consultar el siguiente: https://youtu.be/f5rfvAEYeHM

Una vez que hayas creado una nueva aplicación, realizaremos lo siguiente:

Pasos para desarrollar un menú en Android Studio

Paso 1. Agrega las dependencias que necesitaremos

Abre tu archivo build.gradle (Module: app)

En la sección dependencies, agrega éstas dos líneas

implementation 'com.android.support:support-v4:27.1.1'
implementation ‘com.android.support:design:27.1.1'

Reemplaza el 27.1.1 por la versión que tú estés usando.

Paso 2. Crea el layout con el menu

Abre tu archivo activity_main.xml

Reemplaza su contenido por el siguiente código:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:id="@+id/content_frame"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar"/>

    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navview"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header_navigation_drawer"
        app:menu="@menu/nav_options"
        android:layout_gravity="start">

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

Explicación:

Estamos creando un DrawerLayout. Nuestro elemento DrawerLayout tiene un id drawer_layout. Usaremos éste id para acceder a nuestro menu.

El DrawerLayout tiene dos componentes: Un LinearLayout que tiene un id content_frame y una referencia a un archivo llamado toolbar (que más adelante se creará). Dentro del LinearLayout se cargarán los contenidos que deseemos mostrar.

El segundo componente es un NavigationView que hace referencia a un archivo llamado header_navigation_drawer (que más adelante crearemos) y que contendrá el encabezado del menú. También hace referencia a un archivo llamado nav_options que contendrá las opciones del menú.

Paso 3. Quitar el ActionBar actual

Como utilizaremos nuestro propio ActionBar, debemos desactivar el que está actualmente.

Abre el archivo styles.xml que se encuentra en el directorio values (dentro de res).

Reemplaza lo que tengas después de Light por NoActionBar. La línea se vería así:

Paso 4. Crear el archivo toolbar.xml

Crearemos nuestro propio toolbar.

Da clic derecho en el directorio layout y selecciona New -> Layout resource file.

En el cuadro que se abre, escribiremos el nombre de nuestro nuevo archivo: toolbar.xml

El código de ese archivo será el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Paso 5. Crear el archivo header_navigation_drawer

Da clic derecho en el directorio layout y selecciona New -> Layout resource file.

En el cuadro que se abre, escribiremos el nombre de nuestro nuevo archivo: header_navigation_drawer.xml

El código de ese archivo será:

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/blur"
        android:scaleType="centerCrop"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gibrán García"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="bold"
        android:textColor="#FFF"
        android:layout_gravity="bottom"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="10dp"/>

</FrameLayout>

Estamos especificando una imagen de fondo para el encabezado llamada blur. Puedes utilizar cualquier imagen que desees. Pega el archivo en drawable (clic derecho sobre drawable y luego paste).

Paso 6. Crear las opciones del menu

Vamos a crear el archivo nav_options.xml.

Crearemos un nuevo directorio de recursos en res.

Da clic derecho en el directorio res, luego en New -> Android resource directory

Escribe el nombre del nuevo directorio que será menu

Da clic derecho en el directorio menu y selecciona New -> Menu resource file.

En el cuadro que se abre, escribiremos el nombre de nuestro nuevo archivo: nav_options.xml

El código de este archivo será:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/menu_calculadoras"
            android:title="Calculadoras"
            android:icon="@drawable/ic_calculadoras"
            />
        <item
            android:id="@+id/menu_records"
            android:title="Mis records"
            android:icon="@android:drawable/ic_input_get"
            />
        <item
            android:title="Recetas"
            android:id="@+id/menu_recetas"
            android:icon="@drawable/ic_recetas"
            />
        <item
            android:title="Motivación"
            android:id="@+id/menu_motivacion"
            android:icon="@drawable/ic_motivacion"
            />
        <item
            android:title="Información"
            android:id="@+id/menu_informacion"
            android:icon="@android:drawable/ic_dialog_info"
            />

    </group>

    <item android:title="Otras opciones">
        <menu>
            <item
                android:title="Configuración"
                android:id="@+id/menu_configuracion"
                android:icon="@drawable/ic_configuracion"
                />


        </menu>
    </item>


</menu>

En las opciones de menu podemos utilizar iconos utilizando el atributo :icon. 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ágina: https://material.io/tools/icons/?style=baseline y seleccionar los que necesites.

Una vez descargado el archivo png, pégalo en la carpeta drawable (clic derecho sobre drawable y luego en paste), con el nombre que desees (por ejemplo, usé ic_calculadoras.png).

Paso 7. Crear los packages

Vamos a crear 3 packages para organizar nuestros archivos. Da clic derecho sobre el nombre de tu proyecto (por ejemplo: com.example.project) y elige New -> Package

Como nombre de package elige Activities. Haz lo mismo para los packages Adapters y Fragments.

Mueve el archivo MainActivity hacia dentro del package Activities.

Paso 8. Escribir el código de MainActivity

Vamos a enlazar nuestros componentes y permitir que el usuario abra o cierre el menú utilizando un botón hamburguesa.

Agrega el siguiente código:

Variables a utilizar:

private DrawerLayout drawerLayout;
private NavigationView navigationView;

Modificar el método onCreate:

setToolBar();
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView)findViewById(R.id.navview);

Crear el método setToolBar:

private void setToolBar(){
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_home);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

Crear el método onOptionsItemSelected:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case android.R.id.home:
            drawerLayout.openDrawer(GravityCompat.START);
            return true;
    }

    return super.onOptionsItemSelected(item);
}

Aquí necesitaremos crear una nueva Image Asset para el icono del toolbar.

Da clic derecho sobre drawable y luego en New -> Image Asset

Selecciona el tipo Action Bar y en nombre escribe ic_home. Elige en el boton Clip Art el icono que desees.

Espero que éstos pasos para desarrollar un menú para una app Android te hayan resultado entendibles.

¿Te resulta más fácil verlo en video?

¿Qué te pareció este artículo?

Poco informativo ()
No era lo que buscaba ()
Regular ()
Interesante ()
Excelente ()

(Visto 5.276 veces)

Te puede interesar:

Tu comentario

opiniones