Navigation Drawer (menú lateral) en Android Studio | Jetpack Compose

Video thumbnail
▶

Índice de contenido

El Navigation Drawer es un panel que se expande y contrae desde el lado izquierdo de la pantalla del dispositivo y muestra un menú de opciones de navegación de la aplicación; es posible mostrar el menú lateral aplicando un toque en el lado izquierdo de la pantalla y arrastrando hacia la derecha o tocando el icono de la aplicación ubicado en la barra de acciones.

Anteriormente vimos otro tipo de Drawer los Bottom Sheets en Android Studio.

Implementación de un Navigation Drawer en Jetpack Compose

Vamos a conocer cómo crear nuestro Drawer (menú lateral). Veremos un ejemplo sencillo basado en los Composables que hemos estudiado. Aunque es un ejemplo mínimo, lo importante es que entiendas su funcionamiento para que luego puedas personalizarlo a tu gusto.

La estructura del Drawer es un poco más compleja que la de un botón simple; al igual que los Bottom Sheets o los Diálogos, requiere una organización más elaborada.

¿Por qué el Scaffold se implementa dentro del Drawer?

En este ejemplo, notarás que el Scaffold no envuelve al Drawer, sino que el Drawer envuelve al Scaffold. La razón es que el ModalNavigationDrawer es ahora el contenedor principal que gestiona el estado de la interfaz.

Para que esto funcione de forma reactiva, debemos declarar los estados fuera del ciclo de vida de la actividad (del onCreate) y mantenerlos dentro de una función Composable. Si intentas declararlos en la actividad, Android te arrojará un error:

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
// Estado para saber qué ítem está seleccionado
var selectedItem by remember { mutableIntStateOf(0) }

️ Gestión de Estados y Corrutinas

Para manejar la visibilidad del menú, necesitamos un par de elementos clave:

  • DrawerState: Una variable especial de tipo remember que maneja si el Drawer está abierto (Open) o cerrado (Closed). Por defecto, lo inicializamos en Closed.
  • CoroutineScope: Al igual que con los Snackbars, mostrar u ocultar el Drawer implica una animación que toma milisegundos. Como estas funciones son suspendidas (asíncronas), no pueden ejecutarse en el hilo principal directamente; necesitamos lanzar una corrutina para accionarlas.
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
// Estado para saber qué ítem está seleccionado
var selectedItem by remember { mutableIntStateOf(0) }

Estructura del ModalNavigationDrawer

El componente principal es el ModalNavigationDrawer. Este recibe el estado que declaramos y define el contenido que aparecerá en el panel lateral.

El contenido del Drawer (ModalDrawerSheet)

Dentro del Drawer, utilizamos ModalDrawerSheet para definir la parte visual. Aquí puedes personalizarlo como desees:

  • Encabezado: Puedes usar un Text con estilos de tipografía grandes y un Spacer para evitar que quede pegado al borde superior.
ModalDrawerSheet {
    Spacer(Modifier.height(12.dp))
    Text("Mi App", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
    HorizontalDivider()
    items.forEachIndexed { index, label ->
        NavigationDrawerItem(
            label = { Text(label) },
            selected = index == selectedItem,
            onClick = {
                selectedItem = index
                // Cerramos el drawer después de clickear
                scope.launch { drawerState.close() }
            },
            modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
        )
    }
}
  • Divisores: Un HorizontalDivider ayuda a separar secciones.
HorizontalDivider()
  • Ítems de navegación: Lo ideal es iterar una lista de opciones. Para cada opción, usamos el componente NavigationDrawerItem.
NavigationDrawerItem(
   label = { Text(text = item) },
   selected = index == selectedItemIndex,
   onClick = {
       selectedItemIndex = index // Actualizamos el índice seleccionado
       scope.launch { drawerState.close() } // Cerramos el menú con una corrutina
   }
)

Quedando como:

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    // Estado para saber qué ítem está seleccionado
    var selectedItem by remember { mutableIntStateOf(0) }
    val items = listOf("Inicio", "Perfil", "Ajustes")
    // 2. El contenedor principal del Drawer
    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            // Contenido visual del menú lateral
            ModalDrawerSheet {
                Spacer(Modifier.height(12.dp))
                Text("Mi App", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                HorizontalDivider()
                items.forEachIndexed { index, label ->
                    NavigationDrawerItem(
                        label = { Text(label) },
                        selected = index == selectedItem,
                        onClick = {
                            selectedItem = index
                            // Cerramos el drawer después de clickear
                            scope.launch { drawerState.close() }
                        },
                        modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                    )
                }
            }
        }
    )

El Scaffold y la TopBar

Una vez definido el panel lateral, colocamos el Scaffold en el cuerpo del Drawer. El Scaffold nos sirve como lienzo para dibujar el resto de la interfaz:

TopAppBar: Aquí colocamos el título de la aplicación (que puede cambiar reactivamente según el ítem seleccionado) y el ícono de hamburguesa.

Evento de apertura: Al hacer clic en el ícono, usamos nuevamente la corrutina para ejecutar drawerState.open().

Contenido principal: Es el área donde se muestra tu información, en este caso, un texto que indica qué opción del menú se pulsó.

 ModalNavigationDrawer(
        ***
    ) {
        // 3. Contenido de la pantalla principal
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Pantalla de ${items[selectedItem]}") },
                    navigationIcon = {
                        IconButton(onClick = {
                            // Abrimos el drawer al pulsar el icono de menú
                            scope.launch { drawerState.open() }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Abrir menú")
                        }
                    }
                )
            }
        ) { padding ->
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(padding),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Contenido de ${items[selectedItem]}")
            }
        }
    }

Conclusión

Existen múltiples formas de implementar esto. Puedes crear menús estáticos (fijos en el código) o dinámicos (obtenidos de una API).

  • Implementación Dinámica: Útil cuando las opciones cambian según el usuario.
  • Implementación Fija: Más rápida para menús de configuración o perfiles conocidos.

Este es otro ejemplo que puedes ver en el ejercicio completo:

package com.example.myproyectandroid
import android.graphics.drawable.Icon
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.outlined.Help
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.NavigationDrawerItemDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myproyectandroid.ui.theme.MyProyectAndroidTheme
import kotlinx.coroutines.launch
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyProyectAndroidTheme {
                EjemploDrawerCompleto()
                        /*DetailedDrawerExample { paddingValues ->
                            // Este es el "content" que pide tu función
                            Column(
                                modifier = Modifier
                                    .fillMaxSize()
                                    .padding(paddingValues) // IMPORTANTE: Usar los paddings que vienen del Scaffold interno
                            ) {
                                Text("¡Hola! Estoy dentro del Drawer")
                                Button (onClick = { /* Acción */ }) {
                                    Text("Botón de prueba")
                                }
                            }
                        }*/
            }
        }
    }
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EjemploDrawerCompleto() {
    // 1. Estado para abrir/cerrar el Drawer
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    // Estado para saber qué ítem está seleccionado
    var selectedItem by remember { mutableIntStateOf(0) }
    val items = listOf("Inicio", "Perfil", "Ajustes")
    // 2. El contenedor principal del Drawer
    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            // Contenido visual del menú lateral
            ModalDrawerSheet {
                Spacer(Modifier.height(12.dp))
                Text("Mi App", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                HorizontalDivider()
                items.forEachIndexed { index, label ->
                    NavigationDrawerItem(
                        label = { Text(label) },
                        selected = index == selectedItem,
                        onClick = {
                            selectedItem = index
                            // Cerramos el drawer después de clickear
                            scope.launch { drawerState.close() }
                        },
                        modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                    )
                }
            }
        }
    ) {
        // 3. Contenido de la pantalla principal
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Pantalla de ${items[selectedItem]}") },
                    navigationIcon = {
                        IconButton(onClick = {
                            // Abrimos el drawer al pulsar el icono de menú
                            scope.launch { drawerState.open() }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Abrir menú")
                        }
                    }
                )
            }
        ) { padding ->
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(padding),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Contenido de ${items[selectedItem]}")
            }
        }
    }
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DetailedDrawerExample(
    content: @Composable (PaddingValues) -> Unit
) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier.padding(horizontal = 16.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Spacer(Modifier.height(12.dp))
                    Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                    HorizontalDivider()
                    Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Item 1") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 2") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )
                    HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))
                    Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Settings") },
                        selected = false,
                        icon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                        badge = { Text("20") }, // Placeholder
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") },
                        selected = false,
                        icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                        onClick = { /* Handle click */ },
                    )
                    Spacer(Modifier.height(12.dp))
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Navigation Drawer Example") },
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch {
                                if (drawerState.isClosed) {
                                    drawerState.open()
                                } else {
                                    drawerState.close()
                                }
                            }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            content(innerPadding)
        }
    }
}

Recuerda que este comportamiento es muy similar a lo que harías en Flutter con remember y state. Lo fundamental es entender que, al ser una conexión persistente entre el estado y la vista, siempre debes usar corrutinas para las transiciones.

Navigation Drawer - XML (Legacy)

El menú lateral o Drawer Layout resulta un elemento más visual y personalizable que el menú tradicional empleado desde las primeras versiones de Android.

menú tradicional en android

Creando un menú lateral

Desde que se creó esta entrada han actualizado varias cosas en lo que se refiere a la construcción de nuestro NavigationView han cambiado; ya no necesitamos un ListView para la creación de nuestro menú lateral si no empleamos otro componente conocido como NavigationView para tal fin:

Menú lateral final

Entonces, este primer bloque de contenido corresponde a indicar cómo podemos desarrollar nuestro Navigation Drawer que viene siendo uno de los componentes fundamentales junto con nuestro Navigation View para crear nuestro menú lateral; de igual manera la antigua entrada seguirá estando vigente y puedes ver el contenido dando clic aquí.

Trataremos el NavigationView como sinónimo de Navigation View al igual que ocurre con NavigationDrawer y Navigation Drawer.

Una vez que tengamos nuestro proyecto creado, nos vamos al layout de nuestra actividad; que en este ejemplo corresponde al activity_main y copiamos el siguiente código. Este ejemplo utiliza la implementación moderna con AndroidX:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true">
    <com.google.android.material.navigation.NavigationView
            android:id="@+id/navView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/menu"
            app:headerLayout="@layout/nav_header"
            android:fitsSystemWindows="true">
    </com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

Como puedes ver, nuestro menú lateral consta de dos partes, el primero de ellos es el DrawerLayout no es más que un contenedor y no solo esto, es el Top de los contenedores, lo que significa que no puede ser contenido por ningún otro elemento sino tiene que estar en lo más alto de nuestra vista; aquí se encuentra lo que es el contenido de nuestra vista como botones, imágenes y por supuesto nuestro menú lateral, que se encuentra definido por elNavigationView.

Entonces en resumen, tenemos un contenedor llamado Drawer Layout y un menú que es contenido dentro del mismo con Navigation View.

Propiedades del menú lateral

Si analizamos el código anterior, verás que hay algunas propiedades importantes; entre ellas está la de android:fitsSystemWindows establecida en true; esta propiedad permite que el deslizamiento del nuestro menú lateral se realice correctamente y no tenga conflicto con ningún otro componente del sistema como la status bar.

También en nuestro Navigation View estamos definiendo un menú, o mejor dicho, una referencia a nuestro menú, que luce de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:title="Opción 1"
          android:icon="@drawable/ic_android"
          android:id="@+id/op1"></item>
    <item android:title="Opción 2"
          android:icon="@drawable/ic_android"
          android:id="@+id/op2"></item>
    <item android:title="Opción 3"
          android:icon="@drawable/ic_attach_file"
          android:id="@+id/op3"></item>
</menu>

Cómo ves, los menús definen una propiedad para indicar el título o el nombre de la opción de nuestro menú android:title y también especifica un icono android:icon.

Definir un header o cabecera

Y también definimos la propiedad app:headerLayout, que es opcional y permite indicar otro layout con el contenido de nuestra cabecera; aquí al ser otro layout podemos diseñar lo que queramos aunque generalmente se estila por algo sencillo, como una imagen del avatar de la persona y un identificador a la misma, su nombre, generalmente; en nuestro caso, vamos a emplear el siguiente XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="200dp"
              android:orientation="vertical"
              android:background="@drawable/nav_drawer_header"
              android:padding="16dp">
    <ImageView
            android:src="@mipmap/ic_launcher"
            android:layout_width="96dp"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="15dp"
            android:layout_height="96dp"/>
    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:textColor="#FFF"
              android:gravity="center"
              android:text="Nombre"/>
    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:textColor="#FFF"
              android:gravity="center"
              android:text="Nombre"/>
</LinearLayout>

Que se visualiza como:

Menú lateral header

El resto de las propiedades son de fácil entendimiento, ya viene siendo lo común en Android; por ejemplo para definir el ancho, el alto, la posición etc.

Con esto ya tenemos un menú lateral como el siguiente:

Menú lateral final segundo ejemplo

Bastante fácil en realidad, pero aún podemos modificar algunas cosas más.

Grupos en los ítems de nuestro menú lateral

Los agrupados son muy útiles cuando queremos tener opciones de un mismo tema o categoría en un mismo renglón; aunque a nivel visual no se logra una gran distinción (apenas una línea de separación), podemos agrupar esta sección y ocultarla o mostrarla bajo demanda programáticamente desde código Java o Kotlin:

    <group android:id="@+id/group1">
        <item android:title="Opción 3_1"
              android:icon="@drawable/ic_attach_file"
              android:id="@+id/op3_1"></item>
        <item android:title="Opción 3_2"
              android:icon="@drawable/ic_attach_file"
              android:id="@+id/op3_2"></item>
    </group>

Con este XML tenemos la siguiente presentación en nuestro NavigationDrawer:

Menú lateral final segundo ejemplo

Definir una opción como clickable + título del grupo

Podemos indicar que solo una opción sea seleccionable en un momento dado con checkableBehavior indicado con el valor single y también podemos indicar un título para nuestra agrupación de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:title="Opción 1"
          android:icon="@drawable/ic_android"
          android:id="@+id/op1"></item>
    <item android:title="Opción 2"
          android:icon="@drawable/ic_android"
          android:id="@+id/op2"></item>
    <item android:title="Opción 3"
          android:icon="@drawable/ic_attach_file"
          android:id="@+id/op3"></item>
    <group android:id="@+id/group1">
        <item android:title="Opción 3_1"
              android:icon="@drawable/ic_attach_file"
              android:id="@+id/op3_1"></item>
        <item android:title="Opción 3_2"
              android:icon="@drawable/ic_attach_file"
              android:id="@+id/op3_2"></item>
    </group>
    <group android:id="@+id/group2"> android:checkableBehavior="single"
        <item
                android:id="@+id/navigation_subheader"
                android:title="Otro Grupo">
            <menu>
                <item
                        android:id="@+id/menu_opcion_1"
                        android:icon="@drawable/ic_attach_file"
                        android:title="Op 4.1"/>
                <item
                        android:id="@+id/menu_opcion_2"
                        android:icon="@drawable/ic_android"
                        android:title="Op 4.2"/>
            </menu>
        </item>
    </group>
</menu>

Con esto, obtenemos:

Menú lateral final segundo ejemplo

Creación del NavigationDrawer con los ListView (Enfoque Legacy)

Esta sección describe la implementación de un menú lateral utilizando ListView, que representa un enfoque más antiguo. Para nuevas aplicaciones, se recomienda encarecidamente usar RecyclerView para una mayor flexibilidad y rendimiento. En esta primera entrada veremos cómo crear un menú lateral básico en Android:

1. Creando el Drawer Layout

Lo primero que debemos hacer es modificar la estructura del layout de la actividad en la cual deseamos que se muestre el menú lateral, añadimos el DrawerLayout como elemento raiz del layout principal de la actividad, además de un ListView para el menú lateral (Navigation Drawer). Si este era el layout con el contenido principal a mostrar:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
	<TextView
	    android:id="@+id/textView1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="Hola Mundo!" />
</RelativeLayout/>

Al agregar el DrawerLayout y el ListView en el layout de la actividad, quedaría de la siguiente manera:

<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" >
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hola Mundo!" />
    </RelativeLayout>
    <ListView
        android:id="@+id/list_view"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#007095"
        android:choiceMode="singleChoice"
        android:divider="#005875"
        android:dividerHeight="2dp" />
</androidx.drawerlayout.widget.DrawerLayout>
</RelativeLayout/>

Hay que colocar el contenido de la actividad dentro (como elemento hijo) del androidx.drawerlayout.widget.DrawerLayout.

Es posible especificar la dirección en donde se desee mostrar el menú empleando la propiedad layout_gravity:

  • layout_gravity="left":
menú lateral en android alineado a la izquierda
  • layout_gravity="right":
menú lateral en android alineado a la derecha

Se estila que la ubicación del menú lateral sea a la derecha.

2. Referenciando el Drawer Layout y el Navigation Drawer

Ya definido el layout de la actividad, el siguiente paso consiste en referenciar a los elementos con los cuales vamos trabajar; el ListView (Navigation Drawer: en donde se renderizará nuestro panel o menú lateral):

ListView listView = (ListView) findViewById(R.id.list_view);

Y el DrawerLayout, que representa el contenedor que permite la creación de vistas interactivas tipo Drawer:

DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

3. Definiendo el Adaptador (Adapter) con la estructura de opciones

Ya referenciados los elementos los elementos a utilizar en la Actividad, ahora es posible crear el menú de opciones a partir de una estructura de opciones como una List o Array y establecerlos en el ListView (Navigation Drawer) a través de un Adapter:

String[] opciones = { "Opción 1", "Opción 2", "Opción 3", "Opción 4" };
listView.setAdapter(new ArrayAdapter<String>(this,
		android.R.layout.simple_list_item_1, android.R.id.text1,
		opciones));

Es posible crear un Adapter personalizado para agregar otros elementos al menú como iconos, esto será explicado en otras entregas.

4. Configurando los eventos abrir y cerrar del menú lateral con el icono de la aplicación

Debemos sobreescribir e implementar los siguientes eventos y funciones si queremos:

  • Personalizar los eventos al pulsar cada opción: 
Mostrar u ocultar el panel o menú lateral: 	// Mostramos el botón en la barra de la aplicación
	//getActionBar().setDisplayHomeAsUpEnabled(true);
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case android.R.id.home:
			if (drawerLayout.isDrawerOpen(listView)) {
				drawerLayout.closeDrawers();
			} else {
				drawerLayout.openDrawer(listView);
			}
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

Siguiente paso, aprende a crear tu sistema de Tabs en Jetpack Compose con HorizontalPager.

El Navigation Drawer es un panel que se expande y contrae desde el lado izquierdo de la pantalla y muestra un menú; en esta primera entrada veremos como crear un menú lateral básico en Android.

Acepto recibir anuncios de interes sobre este Blog.

Andrés Cruz

EN In english
Menú Android Android Studio Kotlin

Su experiencia en este sitio será mejorada con el uso de cookies.