Cajón de navegación en Android

El cajón de navegación es la característica más común que ofrece Android y el cajón de navegación es un panel de interfaz de usuario que muestra el menú de navegación principal de su aplicación. También es uno de los elementos importantes de la interfaz de usuario, que proporciona acciones preferibles para los usuarios, como cambiar el perfil de usuario, cambiar la configuración de la aplicación, etc. En este artículo, se ha discutido paso a paso para implementar el cajón de navegación en Android. 

El cajón de navegación se desliza desde la izquierda y contiene los destinos de navegación para la aplicación.

El usuario puede ver el cajón de navegación cuando desliza un dedo desde el borde izquierdo de la actividad. También pueden encontrarlo desde la actividad del hogar tocando el ícono de la aplicación en la barra de acción. El icono del cajón se muestra en todos los destinos de nivel superior que utilizan un DrawerLayout. Echa un vistazo a la siguiente imagen para hacerte una idea sobre el cajón de navegación.

Pasos para implementar el cajón de navegación en Android

Paso 1: crea un proyecto de Android Studio

• Cree un proyecto de estudio de Android de actividad vacío.
• Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? sobre cómo crear un proyecto de estudio de Android de actividad vacía.

Paso 2: agregar una dependencia al proyecto

• En esta discusión, vamos a utilizar el cajón de navegación de diseño de materiales.
• Por lo tanto, agregue la siguiente dependencia de Material Design al archivo Gradle de nivel de aplicación.

implementación ‘com.google.android.material:material:1.3.0-alpha03’

• Consulte la siguiente imagen si no puede ubicar el archivo Gradle de nivel de aplicación que invoca la dependencia (en la vista de jerarquía del proyecto).
• Después de invocar la dependencia, haga clic en el botón « Sincronizar ahora « . Asegúrese de que el sistema esté conectado a la red para que Android Studio descargue los archivos necesarios.

Paso 3: Creación de un menú en la carpeta de menú

• Cree la carpeta del menú debajo de la carpeta res. Para implementar el menú.
• Consulte el siguiente video para crear el diseño para implementar el menú.

• Invoque el siguiente código en el archivo navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="HardcodedText">
 
    <item
        android:id="@+id/nav_account"
        android:title="My Account" />
 
    <item
        android:id="@+id/nav_settings"
        android:title="Settings" />
 
    <item
        android:id="@+id/nav_logout"
        android:title="Logout" />
 
</menu>

 
Paso 4: trabajar con el archivo activity_main.xml

• Invoque el siguiente código en el archivo activity_main.xml para configurar las cosas básicas requeridas para el cajón de navegación. 

<?xml version="1.0" encoding="utf-8"?>
 
<!--the root view must be the DrawerLayout-->
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/my_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="128dp"
            android:gravity="center"
            android:text="GeeksforGeeks"
            android:textSize="18sp" />
 
    </LinearLayout>
 
    <!--this the navigation view which draws
        and shows the navigation drawer-->
    <!--include the menu created in the menu folder-->
    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/navigation_menu" />
 
</androidx.drawerlayout.widget.DrawerLayout>

 
Interfaz de usuario de salida: 

• Una cosa a tener en cuenta es que el ícono del cajón del menú aún no aparece en la barra de acción. Necesitamos configurar el ícono y su funcionalidad de abrir y cerrar mediante programación. 

Paso 5: Incluya las strings Open Close en el archivo string.xml 

• Invoque el siguiente código en el archivo app/res/values/strings.xml. 

<resources>
    <string name="app_name">Navigation Drawer</string>
 
    <!--to toggle the open close button
        of the navigation drawer-->
    <string name="nav_open">Open</string>
    <string name="nav_close">Close</string>
</resources>

Paso 6: trabajar con el archivo MainActivity.java

• Invoque el siguiente código en el archivo MainActivity.java para mostrar el ícono de menú en la barra de acción e implementar la funcionalidad de abrir y cerrar del cajón de navegación.
• Los comentarios se agregan dentro del código para una mejor comprensión.

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;
import android.os.Bundle;
import android.view.MenuItem;
 
public class MainActivity extends AppCompatActivity {
 
    public DrawerLayout drawerLayout;
    public ActionBarDrawerToggle actionBarDrawerToggle;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // drawer layout instance to toggle the menu icon to open
        // drawer and back button to close drawer
        drawerLayout = findViewById(R.id.my_drawer_layout);
        actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close);
 
        // pass the Open and Close toggle for the drawer layout listener
        // to toggle the button
        drawerLayout.addDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();
 
        // to make the Navigation drawer icon always appear on the action bar
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
 
    // override the onOptionsItemSelected()
      // function to implement
    // the item click listener callback
    // to open and close the navigation
      // drawer when the icon is clicked
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
 
        if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Salida : ejecutar en el emulador