A gaveta de navegação é o recurso mais comum oferecido pelo Android e a gaveta de navegação é um painel de IU que mostra o menu de navegação principal do seu aplicativo. É também um dos elementos importantes da IU, que fornece ações preferíveis para os usuários, como por exemplo alterar o perfil do usuário, alterar as configurações do aplicativo, etc. Neste artigo, foi discutido passo a passo para implementar a gaveta de navegação no Android. 

A gaveta de navegação desliza da esquerda para a direita e contém os destinos de navegação para o aplicativo.

O usuário pode visualizar a gaveta de navegação quando desliza um dedo a partir da borda esquerda da atividade. Eles também podem encontrá-lo na atividade doméstica tocando no ícone do aplicativo na barra de ação. O ícone da gaveta é exibido em todos os destinos de nível superior que usam um DrawerLayout. Dê uma olhada na imagem a seguir para ter uma ideia sobre a gaveta de navegação.

Etapas para implementar a gaveta de navegação no Android

Etapa 1: Criar um projeto Android Studio

• Crie um projeto de estúdio android de atividade vazio.
• Consulte o Android | Como criar / iniciar um novo projeto no Android Studio? sobre como criar um projeto de estúdio android de atividade vazia. Observe que vamos implementar este projeto usando a   linguagem Java . 

Etapa 2: adicionar uma dependência ao projeto

• Nesta discussão, usaremos a gaveta de navegação do Material design.
• Portanto, adicione a seguinte dependência de material design ao arquivo Gradle no nível do aplicativo.

implementação 'com.google.android.material: material: 1.3.0-alpha03'

• Consulte a imagem a seguir se não for possível localizar o arquivo Gradle no nível do aplicativo que invoca a dependência (na visualização da hierarquia do projeto).
• Depois de invocar a dependência, clique no botão “ Sincronizar agora ” . Certifique-se de que o sistema esteja conectado à rede para que o Android Studio baixe os arquivos necessários.

Etapa 3: Criação de um menu na pasta de menus

• Crie a pasta de menu na pasta res. Para implementar o menu.
• Consulte o vídeo a seguir para criar o layout para implementar o menu.

• Invoque o seguinte código no 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>

 
Etapa 4: Trabalhando com o arquivo activity_main.xml

• Invoque o seguinte código em activity_main.xml para configurar os itens básicos necessários para a gaveta de navegação. 

<?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>

 
IU de saída: 

• Uma coisa a ser notada é que o ícone da gaveta do menu ainda não apareceu na barra de ações. Precisamos definir o ícone e sua funcionalidade abrir-fechar programaticamente. 

Etapa 5: inclua as sequências de abertura e fechamento no string.xml 

• Chame o seguinte código no arquivo styles.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>

Etapa 6: Trabalhando com o arquivo MainActivity.java

• Invoque o seguinte código no arquivo MainActivity.java para mostrar o ícone do menu na barra de ação e implementar a funcionalidade abrir-fechar da gaveta de navegação.
• Os comentários são adicionados dentro do código para melhor compreensão.

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);
    }
}

Saída : Executar no emulador