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:
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í:
<style name=”AppTheme” parent=“Theme.AppCompat.Light.NoActionBar”>
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?
Tu comentario
opiniones