Kotlin Android Fundamentals 10.3: progetta per tutti

Questo codelab fa parte del corso Android Kotlin Fundamentals. Otterrai il massimo valore da questo corso se lavori in sequenza nei codelab. Tutti i codelab del corso sono elencati nella pagina di destinazione di Android Kotlin Fundamentals.

Questo codelab fa parte di una serie che ti insegna i concetti di base della progettazione di app Android e ti guiderà nella creazione di un'app che trova i meetup del Google Developer Group (GDG). L'app mostra le informazioni sui prossimi meetup in modo bello e accessibile.

Ti consigliamo di eseguire i tre codelab di questa serie in ordine, perché passo passo le attività:

• 10.1 Stili e temi
• 10.2 Material Design, dimensioni e colori
• 10.3 Progettazione per tutti

Introduzione

Affinché un'app possa essere utilizzata dalla maggior parte degli utenti, è utile per lo sviluppo di un'app di questo tipo o per scopi aziendali. Per farlo, occorre scegliere tra più dimensioni.

• Lingue RTL di supporto. L'Europa e molte altre lingue leggono da sinistra a destra e le app da cui provengono queste lingue sono generalmente progettate per essere adattate a queste lingue. Molte altre lingue con un numero elevato di persone parlano da destra verso sinistra, ad esempio l'arabo. Fai funzionare la tua app con lingue con direzione da destra verso sinistra per aumentare il potenziale pubblico.
• Cerca l'accessibilità. Indovinare come un'altra persona potrebbe sperimentare la tua app è un'opzione che può aiutarti a sbagliare. L'app Accessibility Scanner elimina le incertezze dal loop e analizza la tua app, identificando dove è possibile migliorarne l'accessibilità.
• Design per TalkBack con descrizioni dei contenuti. Le disabilità visive sono più comuni di quanto si pensi e molti utenti, non solo non vedenti, utilizzano uno screen reader. Le descrizioni dei contenuti sono frasi che uno screen reader dice quando un utente interagisce con un elemento dello schermo.
• Supporta la modalità notturna. Per molti utenti con disabilità visive, la modifica dei colori dello schermo migliora il contrasto e li aiuta a lavorare visivamente con la tua app. Android consente di supportare facilmente la modalità notturna e dovresti sempre supportare la modalità notturna per offrire agli utenti una semplice alternativa ai colori dello schermo predefiniti.

In questo codelab, esplorerai tutte le opzioni e aggiungerai il relativo supporto all'app GDG Finder.

Imparerai inoltre a utilizzare i chip con la tua app Android. Puoi utilizzare i chip per rendere la tua app più interessante, mantenendola accessibile.

Informazioni importanti

Dovresti acquisire familiarità con:

• Come creare app con attività e frammenti e navigare tra i frammenti che trasmettono dati.
• Utilizzare le viste e i gruppi di viste per definire un'interfaccia utente, in particolare RecyclerView.
• Come usare i componenti dell'architettura, tra cui ViewModel, con l'architettura consigliata per creare un'app ben strutturata ed efficiente.
• Associazione di dati, coroutine e gestione dei clic del mouse.
• Come connetterti a Internet e memorizzare nella cache i dati localmente usando un database delle stanze.
• Come impostare le proprietà delle viste e come estrarre e utilizzare le risorse dei file delle risorse XML.
• Come usare stili e temi per personalizzare l'aspetto della tua app.
• Come utilizzare i componenti Materiale, le risorse di dimensioni e la colorazione personalizzata.

Obiettivi didattici

• Come rendere la tua app utilizzabile dal maggior numero di utenti.
• Come far funzionare la tua app per le lingue con direzione da destra verso sinistra (RTL).
• Come valutare l'accessibilità della tua app.
• Come usare le descrizioni dei contenuti per migliorare il funzionamento dell'app con gli screen reader.
• Come utilizzare i chip.
• Come far funzionare la tua app con la modalità Buio.

In questo lab proverai a:

• Valuta ed estendi una determinata app per migliorarne l'accessibilità facendola funzionare per le lingue RTL.
• Analizza l'app per determinare dove potrebbe essere migliorata l'accessibilità.
• Utilizza le descrizioni dei contenuti per le immagini.
• Scopri come utilizzare i disegni.
• Aggiungi la possibilità di utilizzare la modalità notturna alla tua app.

L'app iniziale di GDG-finder si basa su tutto ciò che hai imparato finora in questo corso.

L'app utilizza ConstraintLayout per creare tre schermate. Due delle schermate sono solo file di layout che utilizzerai per esplorare colori e testo su Android.

Il terzo schermo è un rilevatore GDG. I gruppi GDG o Google Developer Group sono community di sviluppatori che si concentrano sulle tecnologie Google, inclusa Android. I GDG di tutto il mondo organizzano incontri, conferenze, jam di studio e altri eventi.

Man mano che sviluppi questa app, lavori sul vero elenco di GDG. La schermata di ricerca utilizza la posizione del dispositivo per ordinare i GDG in base alla distanza.

Se hai fortunato e nella tua area geografica c'è un GDG, puoi visitare il sito web e registrarti ai loro eventi. Gli eventi GDG sono un ottimo modo per incontrare altri sviluppatori Android e scoprire le best practice del settore che non si sono rivelate adatte a questo corso.

Gli screenshot riportati di seguito mostrano come cambierà l'app dall'inizio alla fine di questo codelab.

La differenza principale tra le lingue con direzione da sinistra verso destra e da destra verso sinistra è la direzione dei contenuti visualizzati. Quando la direzione dell'interfaccia utente viene modificata da LTR a RTL (o viceversa), viene spesso chiamata mirroring. Il mirroring interessa gran parte dello schermo, inclusi testo, icone dei campi di testo, layout e icone con indicazioni stradali (ad esempio le frecce). Non viene eseguito il mirroring di altri elementi, ad esempio numeri (orologio, numeri di telefono), icone prive di direzione (modalità aereo, Wi-Fi), controlli di riproduzione e gran parte dei grafici e delle diagrammi.

Le lingue che utilizzano la direzione del testo RTL vengono utilizzate da più di un miliardo di persone in tutto il mondo. Gli sviluppatori Android sono in tutto il mondo, quindi un'app GDG Finder deve supportare le lingue RTL.

Passaggio 1: aggiungi il supporto RTL

In questo passaggio, potrai far funzionare l'app GDG Finder con le lingue RTL.

1. Scarica ed esegui l'app GDGFinderMaterial, che è l'app iniziale per questo codelab o continua dal codice finale del codelab precedente.
2. Apri il file manifest Android.
3. Nella sezione <application>, aggiungi il codice seguente per specificare che l'app supporta RTL.

<application
        ...
        android:supportsRtl="true">

4. Apri activity_main.xml nella scheda Design.
5. Dal menu a discesa Impostazioni internazionali per anteprima, scegli Anteprima da destra a sinistra. Se non trovi questo menu, espandi il riquadro o chiudi il riquadro Attributi per scoprirlo.

Suggerimento: non è necessario cambiare lingua sul dispositivo per verificare l'aspetto visivo della tua app in RTL.

6. Nell'anteprima, nota che l'intestazione "GDG Finder" è stata spostata a destra e il resto dello schermo rimane pressoché invariato. In generale, questa schermata è passabile. Tuttavia, l'allineamento nella visualizzazione di testo è ora errato, perché è allineato a sinistra anziché a destra.

7. Per farlo, sul tuo dispositivo o sull'emulatore Impostazioni, in Opzioni sviluppatore, seleziona Forza layout RTL. Se devi attivare le Opzioni sviluppatore, trova il numero di build e fai clic finché non viene visualizzato un toast che indica che sei uno sviluppatore. Questo varia in base al dispositivo e alla versione del sistema Android.

8. Esegui l'app e verifica sul dispositivo che la schermata principale venga visualizzata come nell'anteprima. Tieni presente che ora il FAB è cambiato a sinistra e il menu di Hamburger a destra.
9. Nell'app, apri il riquadro di navigazione a scomparsa e vai alla schermata Cerca. Come mostrato di seguito, le icone sono ancora a sinistra e il testo non è visibile. Il testo risulta disattivato sullo schermo, a sinistra dell'icona. Ciò accade perché il codice utilizza riferimenti a sinistra/schermata a destra nelle proprietà di visualizzazione e nei vincoli di layout.

Passaggio 2: utilizza inizio e fine anziché sinistra e destra

"Sinistra" e "destra" sullo schermo (quando ti trovi di fronte allo schermo) non cambiare, anche se la direzione del testo cambia. Ad esempio, layout_constraintLeft_toLeftOf limita sempre il lato sinistro dell'elemento a quello sinistro dello schermo. Nel caso della tua app, il testo non è visibile sullo schermo nelle lingue RTL, come mostrato nello screenshot sopra.

Per risolvere il problema, utilizza la terminologia "Start" e "End" invece di "left" e "right". Questa terminologia imposta l'inizio e la fine del testo in modo appropriato per la direzione del testo nella lingua corrente, in modo che i margini e i layout si trovino nelle aree corrette degli schermi.

1. Openlist_item.xml.
2. Sostituisci i riferimenti a Left e Right con i riferimenti a Start e End.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

3. Sostituisci layout_marginLeft di ImageView con layout_marginStart. In questo modo il margine viene spostato nella posizione corretta per allontanare l'icona dal bordo dello schermo.

<ImageView
android:layout_marginStart="
?

4. Apri fragment_gdg_list.xml. Controlla l'elenco dei GDG nel riquadro Anteprima. Tieni presente che l'icona è ancora puntata nella direzione sbagliata, perché ne viene eseguito il mirroring, se l'icona non è ancora mostrata nell'anteprima da destra a sinistra. Secondo le linee guida di Material Design, le icone non devono essere sottoposte a mirroring.
5. Apri res/drawable/ic_gdg.xml.
6. Nella prima riga di codice XML, individua ed elimina android:autoMirrored="true" per disattivare il mirroring.
7. Controlla l'anteprima o esegui di nuovo l'app e apri la schermata Ricerca GDG. Ora il layout deve essere corretto.

Suggerimento: Android Studio offre suggerimenti per le evidenziazioni gialle per incoraggiare l'utilizzo degli attributi di inizio e di fine.

Utilizza la funzione di ricerca e sostituzione con corrispondenza delle richieste per trovare tutte le occorrenze di Left e Right nei layout XML.

Passaggio 3: affidati ad Android Studio

Nell'esercizio precedente, hai svolto le prime azioni per supportare le lingue RTL. Per fortuna, Android Studio è in grado di analizzare la tua app e configurare molte nozioni di base.

1. Nel file list_item.xml, nel file TextView, reimposta layout_marginStart su layout_marginLeft, in modo che lo scanner abbia qualcosa da trovare.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

2. In Android Studio, scegli Refactoring > Aggiungi il supporto RTL ove possibile e seleziona le caselle per l'aggiornamento del manifest e i file di layout per utilizzare le proprietà inizio e fine.

3. Nel riquadro Anteprima del refactoring, individua la cartella app ed espandila finché non è aperta per tutti i dettagli.
4. Nella cartella dell'app, nota che layout_marginLeft che hai appena modificato è elencato come codice da refactoring.

5. Tieni presente che nell'anteprima sono elencati anche i file di sistema e della libreria. Fai clic con il pulsante destro del mouse su layout e ayout-watch-v20 e su qualsiasi altra cartella che non fa parte dell'app e scegli Escludi dal menu contestuale.

6. Vai avanti e fai il refactoring ora. Se ricevi un popup sui file di sistema, assicurati di aver escluso tutte le cartelle che non fanno parte del codice dell'app.

7. Nota che layout_marginLeft è stato modificato di nuovo in layout_marginStart.

Nota: alcuni componenti View richiedono un'ulteriore personalizzazione per funzionare correttamente con RTL. Per avere un controllo più preciso sull'interfaccia utente, puoi utilizzare quattro diverse API:

• android:layoutDirection per impostare la direzione del layout di un componente.
• android:textDirection per impostare la direzione del testo di un componente.
• android:textAlignment per impostare l'allineamento del testo di un componente.
• getLayoutDirectionFromLocale() è un metodo per ottenere a livello di programmazione la lingua che specifica la direzione.

Passaggio 3: esplora le cartelle per le impostazioni internazionali

Finora hai appena modificato la direzione della lingua predefinita utilizzata per l'app. Per un'app di produzione dovresti inviare il file strings.xml a un traduttore per far sì che venga tradotto in una nuova lingua. Per questo codelab, l'app fornisce un file strings.xml in spagnolo (abbiamo utilizzato Google Traduttore per generare le traduzioni, quindi non sono perfette).

1. In Android Studio, passa alla visualizzazione progetto su File di progetto.
2. Espandi la cartella res e osserva le cartelle per res/values e res/values-es. Il nome "nella cartella" è il codice lingua per lo spagnolo. Le cartelle values-"language code" contengono valori per ogni lingua supportata. La cartella values senza estensione contiene le risorse predefinite, altrimenti applicabili.

3. In values-es, apri strings.xml e nota che tutte le stringhe sono in spagnolo.
4. In Android Studio, apri activity_main.xml nella scheda Design.
5. Nel menu a discesa Impostazioni internazionali, seleziona Spagnolo. Ora il testo dovrebbe essere in spagnolo.

6. [Facoltativo] Se conosci bene una lingua RTL, crea una cartella values e una strings.xml in quella lingua e testa come viene visualizzata sul dispositivo.
7. [Facoltativo] Modifica le impostazioni della lingua sul tuo dispositivo ed esegui l'app. Assicurati di non modificare la lingua del dispositivo, altrimenti sarà difficile annullare l'operazione.

Nell'attività precedente hai modificato manualmente l'app, quindi hai utilizzato Android Studio per controllare la presenza di ulteriori miglioramenti RTL.

L'app Accessibility Scanner è la soluzione migliore quando vuoi rendere la tua app accessibile. Analizza l'app sul dispositivo di destinazione e suggerisce miglioramenti, come l'aumento dei target touch, l'aumento del contrasto e la descrizione delle immagini per rendere l'app più accessibile. Accessibility Scanner è stato prodotto da Google e puoi installarlo dal Play Store.

Passaggio 1: installa ed esegui Accessibility Scanner

1. Apri il Play Store ed effettua l'accesso, se necessario. Puoi svolgere questa operazione sul tuo dispositivo fisico o sull'emulatore. Questo codelab utilizza l'emulatore.
   

Nota: se non hai il Play Store sull'emulatore, potrebbe essere necessario creare un nuovo emulatore. Assicurati di selezionare un'opzione con l'icona "Play Store" attivata durante la creazione dell'emulatore.

Importante: per utilizzare il Play Store dall'emulatore, devi accedere con un account. Puoi utilizzare il tuo account normale oppure creare un account solo per i test con l'emulatore. Qualsiasi account creato è reale e l'account è collegato a Play Services, non a una versione emulata.

Importante: puoi saltare la configurazione delle opzioni di fatturazione.

2. Nel Play Store, cerca Accessibility Scanner di Google LLC. Assicurati di avere l'app corretta rilasciata da Google, in quanto tutte le scansioni richiedono molte autorizzazioni.

3. Installa lo scanner sull'emulatore.
4. Al termine dell'installazione, fai clic su Apri.
5. Fai clic su Inizia.
6. Fai clic su OK per avviare la configurazione di Accessibility Scanner nelle Impostazioni.

7. Fai clic su Scanner per accedere alle impostazioni di accessibilità del dispositivo.

8. Per attivarlo, fai clic su Utilizza il servizio.

9. Segui le istruzioni sullo schermo e concedi tutte le autorizzazioni.
10. Dopodiché fai clic su OK e torna alla schermata Home. Potresti notare un pulsante blu con un segno di spunta in un punto dello schermo. Se fai clic su questo pulsante vengono attivati i test dell'app in primo piano. Puoi riposizionare il pulsante trascinandolo. Questo pulsante rimane nella parte superiore di qualsiasi app per consentirti di attivare il test in qualsiasi momento.

Per disattivare lo scanner, vai alle Impostazioni e disattiva l'app.

11. Apri o esegui l'app.
12. Fai clic sul pulsante blu e accetta autorizzazioni e avvisi di sicurezza aggiuntivi.

La prima volta che fai clic sull'icona Scanner di accessibilità, l'app richiede l'autorizzazione per visualizzare tutti i contenuti sullo schermo. Sembra un'autorizzazione molto spaventosa, e lo è.

Non dovresti quasi mai concedere un'autorizzazione come questa, che consente alle app di leggere le tue email o persino di recuperare i dati del tuo conto bancario. Tuttavia, per il suo funzionamento, Accessibility Scanner deve esaminare la tua app nel modo in cui lo fa l'utente: ecco perché ha bisogno di questa autorizzazione.

Importante: prima di attivare questa autorizzazione, assicurati di aver verificato l'app Accessibility Scanner di Google LLC.

13. Fai clic sul pulsante blu e attendi il completamento dell'analisi. Lo screenshot sarà visibile di seguito, con il titolo e il FAB inseriti in rosso. Indica due suggerimenti per migliorare l'accessibilità in questa schermata.

14. Fai clic sulla casella che circonda GDG Finder. Si apre un riquadro con informazioni aggiuntive, come mostrato di seguito, che indica i problemi di contrasto dell'immagine.
15. Espandi le informazioni sul Contrasto dell'immagine e lo strumento suggerirà dei rimedi.
16. Fai clic sulle frecce a destra per visualizzare informazioni sull'elemento successivo.

17. Nell'app, vai alla schermata Richiedi per GDG ed eseguine la scansione con l'app Accessibility Scanner. Fornisce alcuni suggerimenti, come mostrato a sinistra. 12, per essere precisi. Ad esempio, alcuni di questi elementi sono duplicati di elementi simili.
18. Fai clic sull'icona"stack"; nella barra degli strumenti in basso per visualizzare un elenco di tutti i suggerimenti, come mostrato di seguito nello screenshot a destra. Hai risolto tutti questi problemi in questo codelab.

Accessibilità di Android, una raccolta di app di Google, include strumenti che contribuiscono a rendere le app più accessibili. Include strumenti come TalkBack. TalkBack è uno screen reader che offre il controllo uditivo, aptico e vocale, che consente agli utenti di sfogliare e visualizzare contenuti sui propri dispositivi senza occhio.

A quanto pare, TalkBack non è utilizzato solo dalle persone non vedenti, ma anche da molte persone con problemi di vista. O anche solo alle persone che vogliono riposarsi gli occhi!

Quindi, l'accessibilità è per tutti! In questa attività, provi TalkBack e aggiorni l'app per renderla adeguata.

Passaggio 1: installa ed esegui Accessibility Suite

TalkBack è preinstallato su molti dispositivi fisici, ma su un emulatore è necessario installarlo.

1. Apri il Play Store.
2. Cerca la Accessibilità. Assicurati che sia l'app corretta di Google.
3. Se non è installata, installa la Suite di accessibilità.
4. Per attivare TalkBack sul dispositivo, vai a Impostazioni > Accessibilità e attiva TalkBack selezionando Utilizza servizio. Proprio come lo scanner di accessibilità, TalkBack richiede le autorizzazioni per leggere i contenuti sullo schermo. Una volta accettate le richieste di autorizzazione, TalkBack ti dà il benvenuto in un elenco di tutorial che spiegano come utilizzare TalkBack in modo efficace.
5. Metti in pausa qui e segui i tutorial, se non altro per scoprire come disattivare TalkBack al termine.
6. Per uscire dal tutorial, fai clic sul pulsante Indietro per selezionarlo, quindi tocca due volte qualsiasi punto dello schermo.

Suggerimento: se non riesci a sentire nulla, alza il volume.

Suggerimento: per fare clic su un elemento, toccalo due volte. Per scorrere o trascinare, tocca due volte e trascina.

7. Esplora con l'app Finder di GDG con TalkBack. Nota le posizioni in cui TalkBack non fornisce informazioni utili sullo schermo o su un controllo. Lo risolverai nel prossimo esercizio.

Passaggio 2: aggiungi una descrizione dei contenuti

I descrittori dei contenuti sono etichette descrittive che spiegano il significato delle visualizzazioni. La maggior parte delle visualizzazioni dovrebbe avere descrizioni dei contenuti.

1. Con l'app GDG Finder in esecuzione e Talback abilitato, vai alla schermata Applica per eseguire GDG.
2. Tocca l'immagine principale ... e non succede niente.
3. Apri add_gdg_fragment.xml.
4. In ImageView, aggiungi un attributo descrittore dei contenuti come mostrato di seguito. La stringa stage_image_description viene fornita in strings.xml.

android:contentDescription="@string/stage_image_description"

5. Esegui la tua app.
6. Vai a Applica per eseguire GDG e fai clic sull'immagine. Ora dovresti sentire una breve descrizione dell'immagine.
7. [Facoltativo] Aggiungi descrizioni dei contenuti alle altre immagini in questa app. In un'app di produzione, tutte le immagini devono avere descrizioni dei contenuti.

Passaggio 3: aggiungi suggerimenti ai campi di testo modificabili

Per gli elementi modificabili, ad esempio EditText, puoi utilizzare android:hint nel file XML per consentire agli utenti di capire che cosa digitare. Un suggerimento viene sempre visualizzato nell'interfaccia utente in quanto è il testo predefinito in un campo di immissione.

1. Sempre in add_gdg_fragment.xml.
2. Aggiungi descrizioni dei contenuti e suggerimenti, utilizzando il codice riportato di seguito come guida.

Aggiungi a textViewIntro:

android:contentDescription="@string/add_gdg"

Aggiungi rispettivamente ai testi modificati:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

3. Aggiungi una descrizione dei contenuti a labelTextWhy.

android:contentDescription="@string/motivation" 

4. Aggiungi un suggerimento a EditTextWhy. Dopo aver etichettato le caselle di modifica, aggiungi una descrizione dei contenuti all'etichetta e un suggerimento.

android:hint="@string/enter_motivation"

5. Aggiungi una descrizione dei contenuti per il pulsante Invia. Tutti i pulsanti devono avere una descrizione dell'azione eseguita.

android:contentDescription="@string/submit_button_description"

6. Esegui la tua app con Talback abilitato e compila il modulo per richiedere l'esecuzione di un GDG.

Passaggio 4: crea un gruppo di contenuti

Per i controlli dell'interfaccia utente che TalkBack deve considerare come gruppo, puoi utilizzare il raggruppamento di contenuti. I contenuti correlati raggruppati vengono annunciati insieme. Gli utenti delle tecnologie per la disabilità non hanno quindi bisogno di scorrere, scansionare o attendere spesso per scoprire tutte le informazioni visualizzate sullo schermo. Questa operazione non influisce sulla modalità di visualizzazione dei controlli sullo schermo.

Per raggruppare i componenti dell'interfaccia utente, aggregali in un elemento ViewGroup, ad esempio un LinearLayout. Nell'app GDG Finder, gli elementi labelTextWhy e editTextWhy sono ottimi candidati per il raggruppamento, poiché appartengono insieme in modo semantico.

1. Apri add_gdg_fragment.xml.
2. Aggrega un elemento LinearLayout intorno a LabelTextWhy e EditTextWhy per creare un gruppo di contenuti. Copia e incolla il codice qui sotto. Questo LinearLayout contiene già alcuni degli stili che ti servono. Assicurati che il valore di button non sia compreso nel valore di LinearLayout.

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

3. Scegli Codice &Riformatta per formattare correttamente il rientro di tutto il codice.
4. Rimuovi tutti i margini del layout da labelTextWhy e editTextWhy.
5. In labelTextWhy, modifica il vincolo layout_constraintTop_toTopOf in contentGroup.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

6. In editTextWhy, modifica il vincolo layout_constraintBottom_toBottomOf in contentGroup.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

7. Limita EditTextRegion e Button a contentGroup per eliminare gli errori.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. Aggiungi margini a LinearLayout. Se lo desideri, estrai questo margine come dimensione.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

Se hai bisogno di aiuto, confronta il codice con add_gdg_fragment.xml nel codice della soluzione.

9. Esegui l'app ed esplora la schermata Applica per eseguire GDG con TalkBack.

Passaggio 5: aggiungi un'area geografica attiva

Attualmente, l'etichetta sul pulsante di invio è OK. È meglio che il pulsante abbia un'etichetta e una descrizione prima di inviare il modulo e che quest'ultimo sia stato modificato dinamicamente con un'etichetta e una descrizione dei contenuti diversi dopo che l'utente ha fatto clic e l'invio del modulo. A questo scopo, puoi utilizzare un'area geografica attiva.

Un'area geografica attiva indica ai servizi di accessibilità se l'utente deve essere avvisato quando una vista cambia. Ad esempio, informare l'utente di una password errata o di un errore di rete è un ottimo modo per rendere la tua app più accessibile. In questo esempio, per semplicità è necessario informare l'utente quando il pulsante Invia ne cambia lo stato.

1. Apri add_gdg_fragment.xml.
2. Modifica l'assegnazione del testo del pulsante a Invia utilizzando la risorsa stringa submit fornita.

android:text="@string/submit"

3. Aggiungi un'area geografica attiva al pulsante impostando l'attributo android:accessibilityLiveRegion. Mentre digiti, hai diverse opzioni per il suo valore. In base all'importanza della modifica, puoi scegliere se interrompere l'utente. Con il valore "assertive", i servizi di accessibilità interrompono la conversazione costante per annunciare immediatamente le modifiche a questa visualizzazione. Se imposti il valore su "none" (nessuno), non vengono annunciate modifiche. Impostando "polite", i servizi di accessibilità annunciano le modifiche, ma attendono il loro turno. Imposta il valore su "polite".

android:accessibilityLiveRegion="polite"

4. Nel pacchetto add, aggiungi AddGdgFragment.kt.
5. All'interno di Observer showSnackBarEvent, quando hai finito di mostrare SnackBar, imposta una nuova descrizione dei contenuti e del testo per il pulsante.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

6. Esegui l'app e fai clic sul pulsante. Purtroppo il pulsante e il carattere sono troppo piccoli.

Passaggio 6. Correggi lo stile del pulsante

1. In add_gdg_fragment.xml, modifica width e height del pulsante in wrap_content, in modo che l'etichetta completa sia visibile e il pulsante sia di dimensioni adeguate.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

2. Elimina gli attributi backgroundTint, textColor e textSize dal pulsante in modo che l'app utilizzi lo stile migliore del tema.
3. Elimina l'attributo textColor da textViewIntro. I colori del tema devono avere un buon contrasto.
4. Esegui l'app. Nota il pulsante Invia molto più utile. Fai clic su Invia e osserva come cambia in Fine.

I chip sono elementi compatti che rappresentano un attributo, un testo, un'entità o un'azione. che consentono agli utenti di inserire informazioni, selezionare un'opzione, filtrare i contenuti o attivare un'azione.

Il widget Chip è un wrapper visualizzazione sottile intorno al ChipDrawable, che contiene tutto il layout e la logica di disegno. La logica aggiuntiva supporta la navigazione tramite tocco, mouse, tastiera e navigazione nell'accessibilità. Il chip principale e l'icona di chiusura sono considerati visualizzazioni secondarie logiche separate e contengono il proprio stato di navigazione e stato.

I chip utilizzano disegni. Gli elementi tracciabili di Android ti consentono di disegnare immagini, forme e animazioni sullo schermo e possono avere dimensioni fisse o dimensioni dinamiche. Puoi usare immagini come disegni, ad esempio le immagini nell'app GDG. Inoltre, puoi utilizzare disegni vettoriali per disegnare tutto ciò che puoi immaginare. Esiste anche un file disegnabile ridimensionabile chiamato 9-patchDrawable, che non è coperto in questo codelab. Il logo GDG, in drawable/ic_gdg.xml, è un altro elemento disegnabile.

Gli elementi da disegnare non sono visualizzazioni, quindi non puoi inserirli direttamente all'interno di ConstraintLayout: devi inserirli all'interno di ImageView. Puoi anche utilizzare i disegni per fornire uno sfondo per una visualizzazione di testo o un pulsante e lo sfondo verrà disegnato dietro il testo.

Passaggio 1: aggiungi i chip all'elenco di GDG

Il chip selezionato di seguito utilizza tre elementi disegnabili. Lo sfondo e il segno di spunta sono entrambi disegnabili. Toccando il chip si crea un effetto ripple, che viene eseguito con uno speciale RippleDrawable che mostra un effetto ripple in risposta a modifiche dello stato.

In questa attività devi aggiungere chip all'elenco di GDG e chiedere di cambiare lo stato quando vengono selezionati. In questo esercizio, aggiungi una riga di pulsanti chiamata chip nella parte superiore della schermata Cerca. Ogni pulsante filtra l'elenco GDG in modo che l'utente riceva solo i risultati dall'area geografica selezionata. Quando viene selezionato un pulsante, questo cambia il suo sfondo e mostra un segno di spunta.

1. Apri fragment_gdg_list.xml.
2. Crea un com.google.android.material.chip.ChipGroup all'interno della proprietà HorizontalScrollView.Imposta la proprietà singleLine su true, in modo che tutti i chip siano allineati su una riga orizzontale a scorrimento. Imposta la proprietà singleSelection su true in modo che sia possibile selezionare un solo chip alla volta. Ecco il codice.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

3. Nella cartella layout, crea un nuovo file di risorse di layout denominato region.xml per definire il layout di un elemento Chip.
4. In region.xml, sostituisci tutto il codice con il layout di un Chip come indicato di seguito. Tieni presente che questo Chip è un componente Materiale. Tieni presente, inoltre, che viene visualizzato il segno di spunta impostando la proprietà app:checkedIconVisible. Verrà visualizzato un errore per il colore selected_highlight mancante.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

5. Per creare il colore selected_highlight mancante, posiziona il cursore su selected_highlight, apri il menu dell'intent e crea una risorsa di colore per l'evidenziazione selezionata. Le opzioni predefinite sono corrette, quindi fai clic su OK. Il file viene creato nella cartella res/color.
6. Apri res/color/selected_highlight.xml. In questo elenco di stati dei colori, codificato come <selector>, puoi fornire colori diversi per stati diversi. Ogni stato e il colore associato sono codificati come <item>. Per ulteriori informazioni su questi colori, consulta la sezione Tema dei colori.

7. All'interno di <selector>, aggiungi un articolo con un colore predefinito colorOnSurface all'elenco degli stati. Negli elenchi di stati è importante coprire sempre tutti gli stati. Un modo per farlo è impostare un colore predefinito.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

8. Sopra il colore predefinito, aggiungi item con un colore colorPrimaryVariant e limita il suo utilizzo quando lo stato selezionato è true. Gli elenchi di stato vengono elaborati dall'alto verso il basso, come in una dichiarazione di caso. Se nessuno degli stati corrisponde, viene applicato lo stato predefinito.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

Passaggio 2: visualizza la riga di chip

L'app GDG crea un elenco di chip che mostrano le aree geografiche con GDG. Quando viene selezionato un chip, l'app filtra i risultati per mostrare solo i risultati di visualizzazione GDG per quella regione.

Nota: in che modo questo elenco viene creato e come vengono filtrati i risultati, non fa parte di questo codelab. Se vuoi sapere come viene ottenuto l'elenco dei GDG e come viene implementato il filtro, esamina i file nei pacchetti di ricerca e di rete. In particolare, esamina la GdgListViewModel.

1. Nel pacchetto di ricerca, apri GdgListFragment.kt.
2. In onCreateView(), subito sopra l'istruzione return, aggiungi un osservatore su viewModel.regionList e sostituisci onChanged(). Quando l'elenco delle aree geografiche fornito dal modello di visualizzazione cambia, i chip devono essere ricreati. Aggiungi un'istruzione da restituire immediatamente se l'elemento data fornito è null.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

3. All'interno di onChanged(), sotto il test null, assegna binding.regionList a una nuova variabile denominata chipGroup per memorizzare nella cache il valore regionList.

val chipGroup = binding.regionList

4. Di seguito, crea una nuova layoutInflator per l'aumento delle patatine di chipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

5. Pulisci e ricrea il tuo progetto per eliminare l'errore di databinding.

Sotto il gonfiatore, ora puoi creare i chip effettivi, uno per ogni area geografica in regionList.

6. Crea una variabile children per conservare tutti i chip. Assegna una funzione di mappatura al passaggio in data per creare e restituire ogni chip.

val children = data.map {} 

7. All'interno della lambda della mappa, crea e gonfia un chip per ogni elemento regionName. Il codice completato è riportato di seguito.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

8. All'interno del lambda, poco prima di restituire chip, aggiungi un listener di clic. Quando viene fatto clic su chip, imposta lo stato su checked. Richiama onFilterChanged() nel viewModel, che attiva una sequenza di eventi che recupera il risultato per questo filtro.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

9. Alla fine del lamba, rimuovi tutte le viste correnti da chipGroup, poi aggiungi tutti i chip da children a chipGroup. Non puoi aggiornare i chip, quindi devi rimuovere e ricreare il contenuto di chipGroup.

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

L'osservatore completato deve essere il seguente:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

12. Esegui l'app e cerca GDGS per aprire la schermata Cerca e usare i nuovi chip. Quando fai clic su ogni chip, l'app visualizza i gruppi filtro sottostanti.

Importante: Se l'avvio di Maps non consente di ottenere l'elenco, per fare in modo che funzioni sull'emulatore, chiudi gli emulatori in esecuzione. Esegui l'app, avvia un nuovo emulatore, avvia l'app Maps sull'emulatore, quindi esegui l'app.

La modalità notturna ti consente di modificare i colori con un tema scuro, ad esempio quando le impostazioni del dispositivo sono state attivate per la modalità notturna. In modalità notturna, le app cambiano gli sfondi luminosi predefiniti in scuro e cambiano tutti gli altri elementi dello schermo di conseguenza.

Passaggio 1: attiva la modalità notturna

Per fornire il tema scuro per la tua app, cambi il tema da Light a DayNight. Il tema DayNight appare chiaro o scuro, a seconda della modalità.

1. In styles.xml, cambia il tema principale AppTheme da Light a DayNight.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. Nel metodo onCreate() di MainActivity, chiama AppCompatDelegate.setDefaultNightMode() per attivare in modo programmatico il tema scuro.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. Esegui l'app e verifica che sia passato al tema scuro.

Passaggio 2: genera la tua tavolozza dei colori con tema scuro

Per personalizzare il tema scuro, crea cartelle con il qualificatore -night da utilizzare. Ad esempio, puoi avere colori specifici in modalità notturna creando una cartella denominata values-night.

1. Visita lo strumento per la selezione del colore materiale.io e crea una tavolozza dei colori con tema notturno. Ad esempio, potresti basarla su un colore blu scuro.
2. Genera e scarica il file colors.xml.
3. Passa alla visualizzazione File del progetto per elencare tutte le cartelle del progetto.
4. Trova la cartella res ed espandila.
5. Crea una cartella di risorse res/values-night.
6. Aggiungi il nuovo file colors.xml alla cartella di risorse res/values-night.
7. Esegui l'app, anche se è attiva la modalità notturna, e l'app dovrebbe usare i nuovi colori che hai definito per res/values-night. Nota che i chip utilizzano il nuovo colore secondario.

Progetto Android Studio: GDGFinderFinal.

Lingue RTL di assistenza

• Nel file manifest Android, imposta android:supportsRtl="true".
• Puoi visualizzare l'anteprima RTL nell'emulatore e utilizzare la tua lingua per controllare i layout dello schermo. Su un dispositivo o un emulatore, apri Impostazioni e, in Opzioni sviluppatore, seleziona Forza layout RTL.
• Sostituisci i riferimenti a Left e Right con i riferimenti a Start e End.
• Disattiva il mirroring per gli elementi tracciabili eliminando android:autoMirrored="true".
• Scegli Refactoring > Aggiungi il supporto RTL ove possibile per lasciare che sia Android Studio a eseguire l'operazione per te.
• Utilizza le cartelle values-"language code" per archiviare le risorse specifiche per la lingua.

Scansione per l'accessibilità

• Nel Play Store, scarica l'app Accessibility Scanner di Google LLC ed esegui la scansione per cercare elementi dello schermo da migliorare.

Progettare per TalkBack con descrizioni dei contenuti

• Installa la Android Accessibility Suite di Google, che include TalkBack.
• Aggiungi descrizioni dei contenuti a tutti gli elementi dell'interfaccia utente. Ad esempio:
  android:contentDescription="@string/stage_image_description"
• Per un elemento modificabile, ad esempio EditText, utilizza un attributo android:hint nel codice XML per fornire all'utente un suggerimento sul testo da digitare.
• Crea gruppi di contenuti includendo gli elementi correlati in un gruppo di visualizzazione.
• Crea un'area geografica attiva per fornire agli utenti ulteriore feedback con android:accessibilityLiveRegion.

Utilizzare il chip per implementare un filtro

• I chip sono elementi compatti che rappresentano un attributo, il testo, un'entità o un'azione.
• Per creare un gruppo di chip, utilizza un com.google.android.material.chip.ChipGroup.
• Definisci il layout di un elemento com.google.android.material.chip.Chip.
• Se vuoi che i chip cambino i colori, fornisci un elenco dello stato colore come <selector> con i colori stateful:
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• Associa i chip a dati in tempo reale aggiungendo un osservatore ai dati nel modello di visualizzazione.
• Per visualizzare i chip, crea un dispositivo di gonfiaggio per il gruppo di chip:
  LayoutInflater.from(chipGroup.context)
• Crea i chip, aggiungi un listener di clic che attivi l'azione desiderata e aggiungi i chip al gruppo di chip.

Supportare la modalità Buio

• Usa il AppTheme di DayNight per supportare la modalità Buio.
• Puoi impostare la modalità Buio in modo programmatico:
  AppCompatDelegate.setDefaultNightMode()
• Crea una cartella di risorse res/values-night per fornire colori e valori personalizzati per la modalità Buio.

Documentazione per gli sviluppatori Android:

• LayoutDirection (RTL)
• Bidirezionale
• Guida introduttiva all'accessibilità
• TalkBack
• Gesti di TalkBack
• Documentazione sulla panoramica dei disegni
• Descrittori di contenuti
• Raggruppamento di contenuti
• Aree geografiche attive
• Disegnabili NinePatch
• Strumento per disegnare 9 patch
• Patatine
• ChipGroup
• Tema scuro
• Tema dei colori
• Strumento Colore
• Animazione di grafica che consente di disegnare

Altre risorse:

• Sviluppo di app Android con Kotlin (corso Udacity)
• Kotlin Bootcamp per programmatori (corso su Udacity)
• Bootcamp Kotlin per programmatori codelab

In questa sezione sono elencati i possibili compiti per gli studenti che lavorano attraverso questo codelab nell'ambito di un corso tenuto da un insegnante. Spetta all'insegnante fare quanto segue:

• Assegna i compiti, se necessario.
• Comunica agli studenti come inviare compiti.
• Valuta i compiti.

Gli insegnanti possono utilizzare i suggerimenti solo quanto e come vogliono e dovrebbero assegnare i compiti che ritengono appropriati.

Se stai lavorando da solo a questo codelab, puoi utilizzare questi compiti per mettere alla prova le tue conoscenze.

Domanda 1

Quale dei seguenti elementi è obbligatorio per il supporto delle lingue RTL?

▢ Sostituisci Left e Right nelle proprietà con Start e End

▢ Passa a una lingua RTL

▢ Assicurati che tutte le icone usino android:autoMirrored="true"

▢ Fornisci le descrizioni dei contenuti

Domanda 2

Quale dei seguenti strumenti di accessibilità è integrato nella maggior parte dei dispositivi Android?

▢ TalkBack

▢ Scanner

▢ In Android Studio, Refactoring > aggiungi il supporto RTL ove possibile

▢ Lint

Domanda 3

Quale delle seguenti affermazioni relative ai chip non è vera?

▢ Mostra i chip come parte di un ChipGroup.

▢ Puoi fornire un elenco degli stati dei colori per un ChipGroup.

▢ I chip sono elementi compatti che rappresentano un input, un attributo o un'azione.

▢ sempre abilitare DarkTheme se la tua app utilizza chip.

Domanda 4

Quale tema ti ispira per le modalità Buio e Luce?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Domanda 5

Che cos'è un'area geografica attiva?

▢ Un nodo che contiene informazioni importanti per l'utente

▢ Un'area geografica dello schermo che cambia forma in base alle linee guida sui materiali

▢ Una visualizzazione che consente lo streaming video

▢ Un file di disegno animato