Android Kotlin Fundamentals 01.4: Learn to help yourself

Questo codelab fa parte del corso Android Kotlin Fundamentals. Per ottenere il massimo valore da questo corso, ti consigliamo di seguire le codelab in sequenza. Tutti i codelab del corso sono elencati nella pagina di destinazione dei codelab Android Kotlin Fundamentals.

Introduzione

In questo codelab, scoprirai le risorse utili agli sviluppatori Android Kotlin, tra cui modelli, documentazione, video e app di esempio.

Cosa devi già sapere

  • Il flusso di lavoro di base di Android Studio.
  • Come utilizzare l'editor del layout in Android Studio.

Obiettivi didattici

  • Dove trovare informazioni e risorse per gli sviluppatori Kotlin e Android.
  • Come modificare l'icona in Avvio applicazioni di un'app.
  • Come cercare aiuto quando crei app per Android utilizzando Kotlin.

In questo lab proverai a:

  • Esplora alcune delle risorse disponibili per gli sviluppatori Android Kotlin di tutti i livelli.
  • Scarica ed esplora un'app di esempio Kotlin per Android.
  • Modificare l'icona in Avvio applicazioni di un'app.

In questo codelab, scoprirai modelli, esempi, documentazione e altre risorse disponibili per gli sviluppatori Android Kotlin.

Per prima cosa, crea un'app semplice da un modello di Android Studio e modificala. Poi scarica ed esplora l'app di esempio Android Sunflower. Sostituisci l'icona di avvio dell'app di esempio (un girasole) con un asset immagine clip art disponibile in Android Studio (una faccina).

Android Studio fornisce modelli per design di app e attività comuni e consigliati. I modelli integrati ti fanno risparmiare tempo e ti aiutano a seguire le best practice di progettazione.

Ogni modello incorpora un'attività e un'interfaccia utente scheletriche. Hai già utilizzato il modello Attività vuota in questo corso. Il modello Attività di base ha più funzionalità e incorpora le funzionalità dell'app consigliate, come il menu delle opzioni visualizzato nella barra delle app sui dispositivi Android.

Passaggio 1: esplora l'architettura di Basic Activity

  1. In Android Studio, crea un progetto.
  2. Nella finestra di dialogo Scegli il progetto, seleziona il modello Attività di base e fai clic su Avanti.
  3. Nella finestra di dialogo Configura il progetto, assegna all'app il nome che preferisci. Seleziona Kotlin per la lingua e seleziona la casella di controllo Utilizza artefatti AndroidX. Fai clic su Fine.
  4. Crea l'app ed eseguila su un emulatore o un dispositivo Android.
  5. Identifica le parti etichettate nella figura e nella tabella riportate di seguito. Trova le loro equivalenti sullo schermo del dispositivo o dell'emulatore. Ispeziona il codice Kotlin e i file XML corrispondenti descritti nella tabella.

La familiarità con il codice sorgente Kotlin e i file XML ti aiuterà a estendere e personalizzare il modello di attività di base in base alle tue esigenze.

Architettura del modello Attività di base

#

Descrizione della UI

Riferimento al codice

1

Barra di stato, fornita e controllata dal sistema Android.

Non visibile nel codice del modello, ma puoi accedere alla barra di stato dalla tua attività. Ad esempio, puoi aggiungere codice in MainActivity.kt per nascondere la barra di stato, se necessario.

2

La barra dell'app, chiamata anche barra delle azioni, fornisce struttura visiva, elementi visivi standardizzati e navigazione.

In activity_main.xml, cerca Barra degli strumenti.

all'interno dell'elemento AppBarLayout. Per la compatibilità con le versioni precedenti, AppBarLayout nel modello incorpora un Toolbar che ha la stessa funzionalità di un ActionBar.

Per modificare l'aspetto della barra delle app, modifica gli attributi della barra degli strumenti. Per i tutorial sulla barra delle app, vedi Aggiungere la barra delle app.

3

Il nome dell'app deriva inizialmente dal nome del pacchetto, ma puoi modificarlo a tuo piacimento.

In AndroidManifest.xml, cerca

android:label="@string/app_name".

Specifica la stringa app_name in strings.xml.

4

Il pulsante del menu extra contiene le voci di menu per l'attività. Il pulsante del menu extra contiene anche le opzioni del menu globale, come Cerca e Impostazioni per l'app. Le voci di menu dell'app vengono inserite in questo menu.

Nel MainActivity.kt, il

Il metodo onOptionsItemSelected() implementa ciò che accade quando l'utente seleziona una voce di menu.

Per visualizzare le voci del menu opzioni, apri res/menu/menu_main.xml

nello stesso file YAML. In questo modello è specificata solo la voce di menu Impostazioni.

5

CoordinatorLayout ViewGroup è un layout che fornisce meccanismi per l'interazione degli elementi UI. La UI della tua app si trova all'interno del file content_main.xml, che è incluso in questo ViewGroup.

In activity_main.xml, cerca l'istruzione include layout. In questo layout non sono specificate visualizzazioni. Al contrario, il layout include il layout content_main, in cui sono specificate le visualizzazioni dell'app. Le visualizzazioni di sistema vengono mantenute separate dalle visualizzazioni uniche della tua app.

6

Il modello utilizza un TextView per visualizzare "Hello World". Sostituisci TextView con gli elementi dell'interfaccia utente della tua app.

La visualizzazione del testo "Hello World" si trova nel file content_main.xml. Tutti gli elementi dell'interfaccia utente della tua app devono essere definiti in questo file.

7

Pulsante di azione mobile (FAB)

In activity_main.xml, cerca l'elemento FloatingActionButton. Il FAB è definito come un elemento UI che utilizza un'icona clip art. MainActivity.kt include uno stub in onCreate() che imposta un listener onClick() per il pulsante di azione rapida.

Passaggio 2: personalizza l'app generata dal modello

Modifica l'aspetto dell'app prodotta dal modello Attività di base. Ad esempio, puoi modificare il colore della barra delle app in modo che corrisponda a quello della barra di stato. Su alcuni dispositivi, la barra di stato è di una tonalità più scura dello stesso colore principale utilizzato dalla barra delle app.

  1. Modifica il nome dell'app visualizzata nella barra delle app. Per farlo, modifica la risorsa stringa app_name nel file res > values > strings.xml come segue:
<string name="app_name">New Application</string>
  1. Modifica il colore della barra delle app (Toolbar) in res > layout > activity_main.xml modificando l'attributo android:background in "?attr/colorPrimaryDark". Questo valore imposta il colore della barra delle app su un colore principale più scuro che corrisponde alla barra di stato:
android:background="?attr/colorPrimaryDark"
  1. Esegui l'app. Il nuovo nome dell'app viene visualizzato nella barra di stato e il colore di sfondo della barra dell'app è più scuro e corrisponde al colore della barra di stato. Quando fai clic sul FAB, viene visualizzata una snackbar, mostrata come 1 nello screenshot di seguito.
  2. Modifica il testo della snackbar. Per farlo, apri MainActivity e cerca il codice stub in onCreate() che imposta un listener onClick() per il pulsante. Modifica "Replace with your own action" con qualcos'altro. Ad esempio:
fab.setOnClickListener { view ->
   Snackbar.make(view, "This FAB needs an action!", Snackbar.LENGTH_LONG)
       .setAction("Action", null).show()
}
  1. Il pulsante di azione rapida utilizza il colore intenso dell'app, quindi un modo per modificare il colore del pulsante di azione rapida è cambiare il colore intenso. Per modificare il colore accento, apri il file res > values > colors.xml e modifica l'attributo colorAccent, come mostrato di seguito. Per assistenza nella scelta dei colori, consulta il sistema di colori di Material Design.
<color name="colorAccent">#1DE9B6</color>
  1. Esegui l'app. Il pulsante di azione rapida utilizza il nuovo colore e il testo della snackbar è cambiato.

Passaggio 3: scopri come aggiungere attività utilizzando i modelli

Per i codelab di questo corso finora, hai utilizzato i modelli Empty Activity e Basic Activity per avviare nuovi progetti. Puoi anche utilizzare i modelli di attività quando crei attività dopo la creazione del progetto.

  1. Crea un progetto app o scegli un progetto esistente.
  2. Nel riquadro Project > Android, fai clic con il tasto destro del mouse sulla cartella java.
  3. Seleziona Nuovo > Attività > Galleria.
  4. Aggiungi un'attività all'app selezionando uno dei modelli Activity. Ad esempio, seleziona Attività riquadro di navigazione per aggiungere un Activity con un riquadro di navigazione.
  5. Per visualizzare l'attività nell'editor di layout, fai doppio clic sul file di layout dell'attività (ad esempio activity_main2.xml). Utilizza la scheda Struttura e la scheda Testo per passare dall'anteprima del layout dell'attività al codice del layout.

I repository Google Samples su GitHub forniscono esempi di codice Kotlin Android che puoi studiare, copiare e incorporare nei tuoi progetti.

Passaggio 1: scarica ed esegui un esempio di codice Kotlin Android

  1. In un browser, vai alla pagina github.com/googlesamples.
  2. Per Linguaggio, seleziona Kotlin.
  3. Seleziona un'app di esempio Kotlin per Android modificata di recente e scarica il codice del progetto dell'app. Per questo esempio, scarica il file zip dell'app android-sunflower, che mostra alcuni dei componenti di Android Jetpack.
  4. In Android Studio, apri il progetto android-sunflower-master.
  5. Accetta gli aggiornamenti consigliati da Android Studio, quindi esegui l'app su un emulatore o un dispositivo Android.

Passaggio 2: esplora un esempio di codice Kotlin per Android

Ora che hai aperto l'app di esempio Android Sunflower in Android Studio, scopri di più sull'app ed esplora i suoi file di progetto.

  1. Per informazioni su cosa dimostra un'app di esempio, consulta il file README dell'app su GitHub. Per questo esempio, consulta il file README di Android Sunflower.
  2. In Android Studio, apri uno dei file di attività Kotlin nell'app, ad esempio GardenActivity.kt.
  3. In GardenActivity.kt, trova una classe, un tipo o una procedura che non conosci e cercala nella documentazione per sviluppatori Android. Ad esempio, per saperne di più sul metodo setContentView(), cerca su developer.android.com per trovare setContentView().

Passaggio 3: modifica l'icona del launcher

In questo passaggio, modifichi l'icona di avvio dell'app di esempio Android Sunflower. Aggiungi un'immagine clip art e la utilizzi per sostituire l'icona di avvio di Android Sunflower corrente.

Icone di Avvio app

Ogni app che crei con Android Studio inizia con un'icona in Avvio applicazioni predefinita che rappresenta l'app. Le icone in Avvio applicazioni vengono talvolta chiamate icone delle app o icone prodotto.

Se pubblichi un'app su Google Play, l'icona di avvio dell'app viene visualizzata nella scheda dell'app e nei risultati di ricerca del Google Play Store.

Dopo l'installazione di un'app su un dispositivo Android, l'icona di Avvio applicazioni dell'app viene visualizzata nella schermata Home del dispositivo e in altre posizioni. Ad esempio, l'icona di avvio dell'app Android Sunflower viene visualizzata nella finestra Cerca app del dispositivo, mostrata come 1 nello screenshot seguente. L'icona di avvio predefinita, mostrata come 2 di seguito, viene utilizzata inizialmente per tutti i progetti di app che crei in Android Studio.

Modificare l'icona di Avvio app

La procedura di modifica dell'icona di avvio ti introduce alle funzionalità degli asset immagine di Android Studio.

In Android Studio, ecco come modificare l'icona di avvio dell'app Android Sunflower:

  1. Nel riquadro Progetto > Android, fai clic con il tasto destro del mouse (o Control+clic) sulla cartella res. Seleziona Nuovo > Asset immagine. Viene visualizzata la finestra di dialogo Configura asset immagine.

Fai clic sulla scheda Livello in primo piano per l&#39;icona di Avvio app.

  1. Nel campo Tipo di icona, seleziona Icone di avvio app (adattive e legacy) se non è già selezionato. Fai clic sulla scheda Livello in primo piano.
  2. Per Tipo di asset, seleziona Clip art, mostrato come 1 nello screenshot di seguito.

  3. Fai clic sull'icona del robot nel campo Clip art, mostrata come 2 nello screenshot precedente. Viene visualizzata la finestra di dialogo Seleziona icona, che mostra il set di icone Material Design.
  4. Sfoglia la finestra di dialogo Seleziona icona o cerca un'icona per nome. Seleziona un'icona, ad esempio l'icona umore per suggerire un buon umore. Fai clic su Ok.

  1. Nella finestra di dialogo Configura asset immagine, fai clic sulla scheda Livello sfondo. Per Tipo di asset, seleziona Colore. Fai clic sul chip di colore e seleziona un colore da utilizzare come livello di sfondo per l'icona.
  2. Fai clic sulla scheda Legacy e rivedi le impostazioni predefinite. Conferma di voler generare icone legacy, rotonde e per il Google Play Store. Fai clic su Avanti.
  3. Viene visualizzata la finestra di dialogo Conferma percorso icona, che mostra dove vengono aggiunti e sovrascritti i file delle icone. Fai clic su Fine.
  4. Esegui l'app su un emulatore AVD o su un dispositivo Android.

Android Studio aggiunge automaticamente le immagini di avvio alle directory mipmap per le diverse densità dello schermo. L'app Android Sunflower ora utilizza la nuova icona clip art come icona di avvio.

  1. Esegui di nuovo l'app. Assicurati che la nuova icona di Avvio app venga visualizzata nella schermata Cerca app.

Passaggio 1: esplora la documentazione ufficiale di Android

Esplora alcuni dei siti di documentazione Android più utili e scopri cosa è disponibile:

  1. Visita la pagina developer.android.com. Questa documentazione ufficiale per gli sviluppatori Android è aggiornata da Google.
  2. Vai alla pagina developer.android.com/design/. Questo sito offre linee guida per progettare l'aspetto e la funzionalità di app per Android di alta qualità.
  3. Visita material.io, un sito su Material Design. Material Design è una filosofia di progettazione concettuale che delinea l'aspetto e il funzionamento di tutte le app, non solo quelle per Android, sui dispositivi mobili. Segui i link per scoprire di più su Material Design. Ad esempio, per scoprire di più sull'uso del colore, fai clic sulla scheda Design, quindi seleziona Colore.
  4. Visita la pagina developer.android.com/docs/ per trovare informazioni sull'API, documentazione di riferimento, tutorial, guide agli strumenti ed esempi di codice.
  5. Visita la pagina developer.android.com/distribute/ per trovare informazioni sulla pubblicazione di un'app su Google Play. Google Play è il sistema di distribuzione digitale di Google per le app sviluppate con l'SDK Android. Utilizza Google Play Console per aumentare la tua base utenti e iniziare a guadagnare.
  1. Esplora il canale YouTube di Android Developers, un'ottima fonte di tutorial e suggerimenti.
  2. Visita il blog ufficiale di Android, dove il team di Android pubblica notizie e suggerimenti.
  3. Inserisci una domanda nella Ricerca Google e il motore di ricerca di Google raccoglie risultati pertinenti da varie risorse. Ad esempio, utilizza la Ricerca Google per porre la domanda "Qual è la versione del sistema operativo Android più popolare in India?". Puoi anche inserire messaggi di errore nella Ricerca Google.

Passaggio 3: cerca su Stack Overflow

Stack Overflow è una community di programmatori che si aiutano a vicenda. Se riscontri un problema, è molto probabile che qualcuno abbia già pubblicato una risposta.

  1. Vai a Stack Overflow.
  2. Nella casella di ricerca, inserisci una domanda come "Come faccio a configurare e utilizzare ADB tramite Wi-Fi?" Puoi effettuare ricerche su Stack Overflow senza registrarti, ma se vuoi pubblicare una nuova domanda o rispondere a una domanda, devi registrarti.
  3. Nella casella di ricerca, inserisci [android]. Le parentesi [] indicano che vuoi cercare post che sono stati taggati come relativi ad Android.
  4. Puoi combinare tag e termini di ricerca per rendere la ricerca più specifica. Prova queste ricerche:
  • [android] and [layout]
  • [android] "hello world"

Passaggio 4: utilizza SDK Manager per installare la documentazione offline

Quando installi Android Studio, vengono installati anche i componenti essenziali dell'SDK Android. Per installare altre librerie e documentazione disponibili, utilizza SDK Manager.

Per esplorare SDK Manager e scaricare la documentazione dell'SDK:

  1. In Android Studio, seleziona Strumenti > SDK Manager. Si apre SDK Manager.
  2. Nella colonna a sinistra di SDK Manager, seleziona Android SDK (1 nello screenshot riportato di seguito).
  3. Prendi nota del percorso nel campo Android SDK Location (2 nello screenshot di seguito). Utilizzerai questo percorso in un secondo momento per trovare ciò che installi.
  4. In SDK Manager, fai clic sulla scheda SDK Platforms (Piattaforme SDK). Da qui puoi installare altre versioni del sistema Android.
  5. Fai clic sulla scheda SDK Tools (Strumenti SDK). Da qui puoi installare gli strumenti per sviluppatori SDK che non sono installati per impostazione predefinita. Puoi anche installare una versione offline della documentazione per sviluppatori Android.
  6. Fai clic sulla scheda Siti di aggiornamento SDK. Android Studio controlla regolarmente la presenza di aggiornamenti nei siti elencati e selezionati.
  7. Torna alla scheda SDK Tools e seleziona la casella di controllo Documentazione per Android SDK, se non è già selezionata. Fai clic su Applica.

    Si apre una finestra di dialogo di conferma che mostra la quantità di spazio su disco necessaria per il download. Fai clic su Ok.
  8. Al termine dell'installazione, fai clic su Fine.

Per trovare la documentazione che hai installato:

  1. Sul computer, vai alla directory Android/sdk/. Per trovare il percorso della directory, vedi il campo Percorso SDK Android, mostrato come 2 nello screenshot precedente.
  2. Apri la directory docs/.
  3. Trova il file index.html e aprilo in un browser.
  • La documentazione ufficiale per gli sviluppatori Android è disponibile all'indirizzo developer.android.com.
  • Material Design è una filosofia di progettazione concettuale che delinea l'aspetto e il funzionamento delle app sui dispositivi mobili. Material Design non è solo per le app per Android. Le linee guida di Material Design sono disponibili all'indirizzo material.io.
  • Android Studio fornisce modelli per design di app e attività comuni e consigliati. Questi modelli offrono codice funzionante per i casi d'uso più comuni.
  • Quando crei un progetto, puoi scegliere un modello per la prima attività.
  • Durante lo sviluppo dell'app, puoi creare attività e altri componenti dell'app da modelli integrati.
  • Google Samples contiene esempi di codice che puoi studiare, copiare e incorporare nei tuoi progetti.

Corso Udacity:

Documentazione di Android Studio:

Documentazione per sviluppatori Android:

Esempi di codice:

Video:

Altre risorse:

Inizia la lezione successiva: 2.1: Layout lineare utilizzando l'editor di layout

Per i link ad altri codelab di questo corso, consulta la pagina di destinazione dei codelab di Android Kotlin Fundamentals.