Passa ai contenuti principali

Android Studio - Aggiungere il Drawer Layout con libreria android

In questo articolo vedremo i vari passaggi per aggiungere il Drawer layout ad un progetto esistente che ne è sprovvisto con l'utilizzo delle librerie Android AppCompact con API precedenti a 28 compreso

La procedura per aggiungere il Drawer layout al proprio progetto utilizzando la libreria AndroidX è spiegato in questo articolo.

Ecco il Drawer Layout

I passaggi da fare sono tanti ma non difficili, ecco un riepilogo di cosa di deve fare:
  1. Creare/modificare il file dimens.xml
  2. Modificare il file styles.xml
  3. Modificare il file strings.xml
  4. Modificare il file AndroidManifest.xml
  5. Modificare il file build.gradle (Module:app)
  6. Creare il file menu_drawer.xml all'interno della cartella menu
  7. Creare alcuni file all'interno della cartella layout
  8. Modificare il file activity_main.xml
  9. Modificare il codice all'interno del file MainActivity.kt
Seguendo l'ordine di questi passaggi si riuscirà ad avere il Drawer Layout nella propria app.

FILE dimens.xml
Se questo file non è presente nel proprio progetto seguire questa guida su come crearlo.
Una volta aperto il file aggiungere queste righe di codice:
Torna all'inizio

FILE styles.xml
Questo file è presente in tutti i progetti che si creano con Android Studio
Una volta aperto il file aggiungere queste righe di codice: Se si vuole aggiungere uno stile in base alla versione di Android occorre aggiungere il un file styles.xml per versione API come spiegato in questo articolo
Questo è il contenuto del file styles.xml(v21) Ecco la differenza senza il file styles.xml(v21) a sinistra e con il file styles.xml(v21) a destra

Nelle immagini qui sopra, l'app è installata su Android 8.0

Quello che cambia è la barra di stato in alto, che con il file styles.xml(v21) assume la trasparenza che è stata aggiunta proprio da API 21 in poi. Se non si aggiunge questo file, l'aspetto sarà come quello mostrato nell'immagine a sinistra su tutte le versioni di Android.

Torna all'inizio
FILE strings.xml
Questo file è presente in tutti i progetti che si creano con Android Studio
Una volta aperto il file aggiungere queste righe di codice:
Torna all'inizio
FILE AndroidManifest.xml
Questo file è presente in tutti i progetti il quale contiene le informazioni per poter eseguire l'app come il nome dell'applicazione, l'icona, il tema, le Activity presenti nell'app e molto altro.
Una volta aperto il file aggiungere queste righe di codice all'interno del tag <activity>: Ecco come si presenta il file AndroidManifest.xml completo Come si può vedere le righe di codice sono state inserite alla riga 13

Torna all'inizio
FILE build.gradle (Module:app)
Il file build.gradle contiene informazioni importanti come la versione dell'app su quale versione minima di Android può essere eseguita l'applicazione, con quale vesrione di API è stata compilata la propria applicazione e molte altre informazioni.

Una volta aperto il file aggiungere questa riga di codice all'interno di dependencies: Ecco come si presenta il file build.gradle (Module:app) completo per API fino a 28 Come si può vedere la riga di codice è stata inserita alla riga 29 ma comunque deve essere all'interno di dependencies
Una volta inserita la riga di codice occorre sincronizzare il progetto cliccando su Sync now in alto a destra

ATTENZIONE!: La libreria di Android a partire da API 29 non è più supportata e quindi è necessario utilizzare la libreria AndroidX considerare di convertire i vecchi progetti ad AndroidX dopo aver letto questa guida (in Inglese)
Questo articolo è disponibile anche con l'utilizzo delle librerie AndroidX

Torna all'inizio
FILE menu_drawer.xml
Questo file contiene le voci di menù del Drawer Layout
Questo file deve essere creato all'interno della cartella menu, vedere questo articolo su come creare questa cartella e i file al suo interno.
Una volta aperto il file aggiungere queste righe di codice: E' possibile personalizzare il menù a proprio piacimento aggiungendo icone a fianco del nome, ecc.

Torna all'inizio
LAYOUT
All'interno della cartella layout bisogna creare tre file per il Drawer Layout:
  1. nav_header_main.xml
  2. app_bar_main.xml
  3. content_main.xml

nav_header_main.xml
Questo file contiene il layout dell’intestazione del menù laterale: solitamente contiene uno sfondo, un logo, ed alcune scritte.
Per creare questo file seguire questi passaggi:
  1. Selezionare la cartella layout
  1. Cliccare con il tasto destro sulla cartella layout
  2. Selezionare New
  3. Selezionare Layout resource file
Nella finestra che appare
inserire nel campo File name: il nome del layout: nav_header_main
inserire nel campo Root element: il nome della View principale: LinearLayout
Premere il pulsante OK per confermare, verrà creato un file dove al suo interno occorre creare il layout dell'intestazione del Drawer Layout, occorre modificare la View LinearLayout sostituendo l'attributo con questo attributo In questo modo viene specificata l'altezza dell'intestazione facendo riferimento al file dimens.xml poi, al LinearLayout vanno aggiunti questi attributi in modo da personalizzarlo ulteriormente Ecco come si presenta il file nav_header_main.xml


app_bar_main.xml
Questo file raggruppa la toolbar con il contenuto principale dell’app che sarà all'interno del file content_main.xml che vedremo successivamente.
Per creare questo file seguire questi passaggi:
  1. Selezionare la cartella layout
  1. Cliccare con il tasto destro sulla cartella layout
  2. Selezionare New
  3. Selezionare Layout resource file
Nella finestra che appare
inserire nel campo File name: il nome del layout: app_bar_main
inserire nel campo Root element: il nome della View principale: CoordinatorLayout

Premere il pulsante OK per confermare, verrà creato un file dove all'interno del tag CoordinatorLayout vanno aggiunti questi attributi Poi dopo il tag CoordinatorLayout aggiungere queste righe di codice: Ecco come si presenta il file app_bar_main.xml Verrà segnalato un errore in corrispondenza della riga 23 in quanto il layout content_main non è stato ancora creato.


content_main.xml
Questo file è l'ultimo da creare in quanto conterrà il layout principale della nostra app; quindi sarà necessario spostare tutto il contenuto del file activity_main.xml all'interno di questo.
Per creare questo file seguire questi passaggi:
  1. Selezionare la cartella layout
  1. Cliccare con il tasto destro sulla cartella layout
  2. Selezionare New
  3. Selezionare Layout resource file
Nella finestra che appare
inserire nel campo File name: il nome del layout: content_main
inserire nel campo Root element: il nome della View principale: qualsiasi cosa va bene in quanto poi verrà sostituito dal contenuto di activity_main.xml

Premere il pulsante OK per confermare quindi
  1. aprire il file activity_main.xml in visualizzazione codice
  2. Selezionare tutto il contenuto del file
  3. Copiarlo
  4. Aprire nuovamente il file content_main.xml in visualizzazione codice
  5. Cancellare il contenuto
  6. Incollare il codice copiato dal file activity_main.xml
Apportare alcune modifica al codice all'interno del tag ConstraintLayout aggiungendo questi attributi Ecco come si presenta il file content_main.xml
Torna all'inizio del paragrafo
Torna all'inizio
activity_main.xml
Il file activity_main.xml è quello che viene caricato quando si apre l'app ed è importante che contenga queste righe di codice: Ora se provassimo ad eseguire l'app sull'emulatore vedremmo un risultato di questo tipo

Come si può vedere l'app viene eseguita correttamente ma non è presente il titolo nell'ActionBar e nemmeno il classico tasto con 3 linee orizzontali per aprire il menù laterale, ma trascinando con il dito dal lato sinistro dello schermo verso destra vediamo comparire il menù laterale.
Quindi a questo punto è necessario passare alla scrittura del codice all'interno del file MainActivity.kt

Torna all'inizio del paragrafo
Torna all'inizio
MainActivity.kt
All'interno del file MainActivity.kt è necessario modificare la classe MainActivity e aggiungere alcune righe di codice all'interno della funzione onCreate per inizializzare l'ActionBar e il Drawer Layout, dopo bisogna aggiungere alcune funzioni che permettono di aprire e chiudere il menù laterale e gestire il click sui vari elementi che compongono il menù laterale.
La classe MainActivity che si ha in un progetto che non è provvisto del menù laterale ha la seguente sintassi: quindi va modificata in questo modo: modificando la classe MainActivity in questo modo verrà segnalato un errore perché è necessario importare la Classe NavigationView in questo modo: Dopo aver implementato la classe NavigationView verrà segnalato un errore sulla classe MainActivity perchè manca l'implementazione della funzione onNavigationItemSelected() quindi bisogna aggiungere questa funzione al di fuori della funzione onCreate() Quindi al suo interno vanno inserite le righe di codice per poter eseguire determinate funzioni quando si clicca sull'elemento più altre righe di codice per gestire la chiusura del menù laterale in questo modo: aggiungere anche la riga di codice che permette di importare la Classe GravityCompat e la Classe DrawerLayout in questo modo: All'interno della funzione onCreate() è necessario aggiungere queste righe di codice: aggiungere anche la riga di codice che permette di importare la Classe Toolbar All'interno della funzione onCreate() è necessario aggiungere queste righe di codice: aggiungere anche la riga di codice che permette di importare la Classe ActionBarDrawerToggle Ora è necessario aggiungere o modificare la funzione onBackPressed() Questo permette di chiudere il menù laterale se è aperto oppure chiudere l'app se il menù laterale è chiuso.

Ecco come si presenta il file MainActivity.kt Ecco un video dimostrativo


Download Project
Download file APK


Commenti

Post popolari in questo blog

Arduino - Lampeggio Led (delay vs. millis)

Cosa sono delay() e millis()? Delay() è una funzione che mette in pausa il programma per un determinato tempo espresso in millisecondi, così facendo viene interrotta l'esecuzione del programma e se abbiamo un dispositivo in ingresso che durante il tempo di pausa cambia di stato il programma non se ne accorge fino a quando non ricomincia l'esecuzione dall'inizio. La struttura di delay è: delay(1000);   da inserire nel punto dello sketch in qui si vuole interrompere il programma in questo modo il programma viene messo in pausa per 1000 millisecondi = 1 secondo. Per saperne di più Millis() è una funzione che permette di sapere da quanto tempo è in funzione il microprocessore di Arduino UNO. In questo modo il programma non andrà mai in pausa ed è sempre in esecuzione, perché millis memorizza il tempo trascorso dall'avvio e poi per eseguire una determinata funzione si fa un controllo del tempo iniziale e il tempo trascorso. Per saperne di più Vediamo un esempi

Arduino - Utilizzo potenziometro e display LCD

Leggere il valore di un poteziometro (parte 1) Il potenziometro è un componente molto utilizzato in elettronica in quanto il suo uso permette di regolare una tensione variabile (in questo caso 0 - 5 Volt) in ingresso al microcontrollore. Il potenziometro va collegato secondo lo schema qui sotto al pin analogico A0 di Arduino.

Arduino - Lettura tensione potenziometro e display LCD

Leggere il valore di un poteziometro (parte 2) Oggi vedremo come leggere il valore in tensione di un potenziometro collegato al pin Analogico A0 di Arduino.