Drawer — cos'è, DrawerLayout e menu laterale nelle applicazioni

Cos'è un Drawer?

Drawer (Navigation Drawer) è un elemento di navigazione a forma di pannello che scorre dal bordo sinistro dello schermo tramite un gesto di swipe o tocco sull'icona hamburger (tre linee orizzontali). Il Drawer contiene link di navigazione, un'intestazione ed elementi opzionali: avatar utente, badge di notifica, divisori. Il pannello può sovrapporre il contenuto (Modal) o spostarlo (Standard).

Material Design 3 (2026) definisce Navigation Drawer come un componente per app con 6+ elementi di navigazione. A differenza di Bottom Navigation, il Drawer non occupa spazio permanente sullo schermo e viene mostrato solo su richiesta dell'utente. Questo libera spazio per il contenuto ma richiede un'azione aggiuntiva per aprirlo. Google raccomanda il Drawer per app con gerarchia di sezioni profonda.

Una ricerca di UX Planet (2025) ha mostrato: il Drawer è adatto per app con 5–15 sezioni, ma il tempo di navigazione è del 40% superiore rispetto a Bottom Navigation. Gli utenti perdono gli elementi del menu situati sotto la piega dello schermo (scroll). Pertanto, le sezioni importanti dovrebbero essere nella parte superiore del Drawer, e quelle meno importanti (Informazioni, Impostazioni) in basso, separate da un divisore.

Tipi di Drawer: Modal e Standard

Modal Drawer scorre sopra il contenuto, oscurando lo sfondo. Utilizzato su dispositivi mobili dove la larghezza dello schermo è limitata. Dopo aver selezionato un elemento, il Drawer si chiude automaticamente. Standard Drawer (Permanent) è un pannello fisso sempre visibile che sposta il contenuto. Utilizzato su tablet e desktop con larghezza dello schermo da 900 dp. Material 3 definisce anche Rail Drawer — una versione compatta per tablet che mostra solo icone.

DrawerLayout in Android

DrawerLayout è il ViewGroup standard in Android che implementa un menu laterale scorrevole. DrawerLayout contiene due elementi figli: il primo — contenuto principale (FrameLayout con NavHostFragment), il secondo — NavigationView con il menu. DrawerLayout gestisce i gesti di swipe e l'apertura/chiusura programmatica tramite ActionBarDrawerToggle.

// Attività con DrawerLayout e NavigationView
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var drawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        drawerLayout = binding.drawerLayout
        val navView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // Collegamento di Drawer con Navigation Component
        NavigationUI.setupActionBarWithNavController(
            this, navController, drawerLayout
        )
        NavigationUI.setupWithNavController(navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(
            findNavController(R.id.nav_host_fragment),
            drawerLayout
        )
    }
}

// XML: activity_main.xml
// <androidx.drawerlayout.widget.DrawerLayout
//   android:id="@+id/drawerLayout"
//   ...>
//   <!-- Contenuto principale -->
//   <FrameLayout android:id="@+id/nav_host_fragment"
//     android:layout_width="match_parent"
//     android:layout_height="match_parent" />
//   <!-- Navigation Drawer -->
//   <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/nav_menu" />
// </androidx.drawerlayout.widget.DrawerLayout>

NavigationView è un componente Material Design per il contenuto del Drawer. Supporta intestazione (headerLayout), voci di menu (menu), sottotitoli, caselle di controllo e interruttori. L'attributo app:menu punta a un menu XML con elementi di navigazione. NavigationUI evidenzia automaticamente l'elemento attivo e sincronizza lo stato con NavController.

Menu Laterale in iOS

iOS non ha un componente "Drawer" integrato — Apple non raccomanda un menu laterale per iPhone (HIG, 2026). Tuttavia, per iPad, viene utilizzato UISplitViewController con pannelli primario e secondario. Per iPhone, il menu laterale viene implementato tramite librerie di terze parti (SideMenu, SwiftUI-side-menu) o soluzioni personalizzate con offset del contenuto. In SwiftUI, un menu laterale viene creato tramite ZStack con animazione di offset.

import SwiftUI

struct DrawerView<Content: View, Menu: View>: View {
    let menuWidth: CGFloat = 280

    @Binding var isOpen: Bool
    @ViewBuilder let content: Content
    @ViewBuilder let menu: Menu

    var body: some View {
        ZStack(alignment: .leading) {
            content
                .offset(x: isOpen ? menuWidth : 0)
                .animation(.easeInOut, value: isOpen)

            if isOpen {
                menu
                    .frame(width: menuWidth)
                    .transition(.move(edge: .leading))

                Color.black.opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture { isOpen = false }
            }
        }
    }
}

// Utilizzo
struct ContentView: View {
    @State private var showDrawer = false

    var body: some View {
        DrawerView(isOpen: $showDrawer) {
            NavigationStack {
                HomeView()
                    .toolbar {
                        ToolbarItem(placement: .navigationBarLeading) {
                            Button(action: { showDrawer.toggle() }) {
                                Image(systemName: "line.horizontal.3")
                            }
                        }
                    }
            }
        } menu: {
            DrawerMenuView()
        }
    }
}

Per progetti iOS di produzione, viene spesso utilizzata la libreria SideMenu (GitHub, 8k+ stelle). Fornisce un UIViewController pronto con supporto gesti, sfocatura dello sfondo, larghezza personalizzata e animazioni. SideMenu supporta menu sinistro e destro, livelli multipli e integrazione UIKit tramite UINavigationController. Un'alternativa è UISplitViewController su iPad (sistema, senza animazioni personalizzate).

Personalizzazione del Drawer: intestazione, icone, sezioni

Drawer consente un'ampia personalizzazione. In Android, NavigationView supporta headerLayout — un layout personalizzato posizionato sopra le voci di menu. Può contenere avatar, nome utente, email e immagine di copertina. Le voci di menu vengono raggruppate tramite <menu> con sottotitoli, divisori e interruttori. Su iOS, la personalizzazione di SideMenu include l'impostazione del colore di sfondo, sfocatura, larghezza e raggio degli angoli.

// Intestazione personalizzata per NavigationView
val headerView = binding.navView.inflateHeaderView(R.layout.nav_header)
headerView.findViewById<ImageView>(R.id.iv_avatar)
    .setImageResource(R.drawable.avatar)
headerView.findViewById<TextView>(R.id.tv_name)
    .text = "John Doe"

// Configurazione delle voci di menu
val menuItem = binding.navView.menu.findItem(R.id.nav_notifications)
menuItem.isChecked = true

// Aggiungere un badge
val badge = binding.navView.getOrCreateBadge(R.id.nav_notifications)
badge.number = 15
badge.isVisible = true

Material Design raccomanda la seguente struttura Drawer: intestazione (nome, avatar), elementi di navigazione principali (5–8), divisore, elementi secondari (Impostazioni, Aiuto), piè di pagina (Informazioni, versione). In Material 3, NavigationView supporta anche l'evidenziazione personalizzata dell'elemento attivo tramite itemShape e itemBackground.

Quando usare il Drawer: raccomandazioni UX

Drawer è efficace per app con 6+ sezioni, impostazioni e pagine di aiuto. Non è adatto per app dove l'accesso rapido alle sezioni è critico — in questi casi è meglio Bottom Navigation. Material Design raccomanda di combinare Drawer con Bottom Navigation: navigazione principale — Bottom (3–5 schede), aggiuntiva — Drawer (impostazioni, aiuto, informazioni).

Errori comuni nell'implementazione di Drawer: menu sovraccarico (15+ elementi senza raggruppamento), nascondere sezioni importanti sotto la piega, mancanza di icone (il testo senza icone viene scansionato il 30% più lentamente), animazione con ritardi (dovrebbe essere ≤ 200 ms). Migliori pratiche: intestazione con nome utente, icone per ogni elemento, divisori tra gruppi, evidenziazione della sezione attiva, supporto del gesto di swipe per l'apertura.

• 6+ sezioni — Drawer è giustificato, meno — usa Bottom Navigation
• Icone — obbligatorie per ogni elemento, accelerano la ricerca visiva
• Raggruppamento — divisori tra elementi principali e secondari
• Intestazione — avatar, nome ed email per la personalizzazione (app social)
• Gesto di swipe — obbligatorio per aprire, duplicato dal pulsante hamburger