Kotlin Android Fundamentals 10.3: Progettare per tutti

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.

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

Ti consigliamo di svolgere le tre codelab di questa serie in ordine, perché le attività vengono eseguite passo dopo passo:

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

Introduzione

Rendere un'app utilizzabile dal maggior numero di utenti ha senso, sia che tu la sviluppi per divertimento o per scopi commerciali. Per raggiungere questo obiettivo, è necessario considerare diversi aspetti.

• Supporta le lingue RTL. Le lingue europee e molte altre si leggono da sinistra a destra e le app provenienti da questi paesi sono comunemente progettate per adattarsi bene a queste lingue. Molte altre lingue con un gran numero di parlanti si leggono da destra a sinistra, come l'arabo. Fai in modo che la tua app funzioni con le lingue con scrittura da destra a sinistra (RTL) per aumentare il tuo pubblico potenziale.
• Scansiona per verificare l'accessibilità. Indovinare come un'altra persona potrebbe utilizzare la tua app è un'opzione con delle insidie. L'app Accessibility Scanner elimina le congetture e analizza la tua app, identificando i punti in cui potresti migliorare la sua accessibilità.
• Progetta per TalkBack con descrizioni dei contenuti. I problemi di vista sono più comuni di quanto si possa pensare e molti utenti, non solo i non vedenti, utilizzano uno screen reader. Le descrizioni dei contenuti sono frasi che uno screen reader pronuncia 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 interagire visivamente con la tua app. Android semplifica il supporto della modalità notturna, che dovresti sempre supportare per offrire agli utenti un'alternativa semplice ai colori dello schermo predefiniti.

In questo codelab, esplorerai ciascuna di queste opzioni e aggiungerai il supporto all'app GDG Finder.

Scopri anche come utilizzare i chip con la tua app per Android. Puoi utilizzare i chip per rendere la tua app più interessante, mantenendola accessibile.

Cosa devi già sapere

Devi avere familiarità con:

• Come creare app con attività e frammenti e spostarsi tra i frammenti passando i dati.
• Utilizzo di visualizzazioni e gruppi di visualizzazioni per disporre un'interfaccia utente, in particolare RecyclerView.
• Come utilizzare i componenti dell'architettura, incluso ViewModel, con l'architettura consigliata per creare un'app ben strutturata ed efficiente.
• Data binding, coroutine e come gestire i clic del mouse.
• Come connettersi a internet e memorizzare i dati nella cache localmente utilizzando un database Room.
• Come impostare le proprietà della visualizzazione e come estrarre e utilizzare le risorse dai file di risorse XML.
• Come utilizzare stili e temi per personalizzare l'aspetto della tua app.
• Come utilizzare i componenti Material, le risorse delle dimensioni e la colorazione personalizzata.

Obiettivi didattici

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

In questo lab proverai a:

• Valuta ed estendi una determinata app per migliorare l'accessibilità facendola funzionare per le lingue RTL.
• Analizza la tua app per determinare dove è possibile migliorare l'accessibilità.
• Utilizza le descrizioni dei contenuti per le immagini.
• Scopri come utilizzare gli elementi disegnabili.
• Aggiungi la possibilità di utilizzare la modalità notturna alla tua app.

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

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

La terza schermata è un localizzatore di GDG. I GDG, o Google Developer Group, sono community di sviluppatori che si concentrano sulle tecnologie Google, tra cui Android. I GDG di tutto il mondo ospitano meetup, conferenze, study jam e altri eventi.

Mentre sviluppi questa app, lavori sull'elenco reale dei GDG. La schermata di ricerca utilizza la posizione del dispositivo per ordinare i GDG in base alla distanza.

Se hai fortuna e nella tua regione è presente un GDG, puoi visitare il sito web e registrarti ai suoi eventi. Gli eventi GDG sono un ottimo modo per incontrare altri sviluppatori Android e apprendere le best practice del settore che non sono state incluse in questo corso.

Gli screenshot seguenti mostrano come cambierà la tua app dall'inizio alla fine di questo codelab.

La differenza principale tra le lingue con scrittura da sinistra a destra (LTR) e da destra a sinistra (RTL) è la direzione dei contenuti visualizzati. Quando la direzione dell'interfaccia utente viene modificata da sinistra a destra a destra a sinistra (o viceversa), spesso si parla di mirroring. Il mirroring interessa la maggior parte dello schermo, inclusi testo, icone dei campi di testo, layout e icone con indicazioni (come le frecce). Altri elementi non vengono visualizzati in mirroring, ad esempio numeri (orologio, numeri di telefono), icone senza direzione (modalità aereo, Wi-Fi), controlli di riproduzione e la maggior parte dei grafici.

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

Passaggio 1: aggiungi il supporto RTL

In questo passaggio, fai in modo che l'app GDG Finder funzioni con le lingue RTL.

1. Scarica ed esegui l'app GDGFinderMaterial, che è l'app iniziale per questo codelab, oppure continua dal codice finale del codelab precedente.
2. Apri il file manifest di Android.
3. Nella sezione <application>, aggiungi il seguente codice per specificare che l'app supporta la scrittura da destra a sinistra.

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

4. Apri activity_main.xml nella scheda Design.
5. Dal menu a discesa Locale per l'anteprima, scegli Anteprima da destra a sinistra. Se non trovi questo menu, allarga il riquadro o chiudi il riquadro Attributi per visualizzarlo.

Suggerimento : non devi 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 della schermata è rimasto pressoché invariato. Nel complesso, questa schermata è accettabile. Tuttavia, l'allineamento nella visualizzazione del testo è ora errato, perché è allineato a sinistra anziché a destra.

7. Per far funzionare questa funzionalità sul tuo dispositivo, nelle Impostazioni del dispositivo o dell'emulatore, seleziona Forza layout da destra a sinistra in Opzioni sviluppatore. (Se devi attivare le Opzioni sviluppatore, individua il Numero build e fai clic finché non viene visualizzato un messaggio 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 appaia come nell'anteprima. Il pulsante Azione è ora spostato a sinistra e il menu a tre linee a destra.
9. Nell'app, apri il riquadro di navigazione a scomparsa e vai alla schermata Cerca. Come mostrato di seguito, le icone si trovano ancora a sinistra e non è visibile alcun testo. Il testo si trova fuori dallo schermo, a sinistra dell'icona. Questo perché il codice utilizza riferimenti allo schermo sinistro/destro nelle proprietà della visualizzazione e nei vincoli di layout.

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

"Sinistra" e "destra" sullo schermo (quando lo guardi) non cambiano, anche se la direzione del testo cambia. Ad esempio, layout_constraintLeft_toLeftOf vincola sempre il lato sinistro dell'elemento al lato sinistro dello schermo. Nel caso della tua app, il testo non viene visualizzato sullo schermo nelle lingue RTL, come mostrato nello screenshot precedente.

Per risolvere il problema, anziché "sinistra" e "destra", utilizza la terminologia Start e End. 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. Open list_item.xml.
2. Sostituisci tutti i riferimenti a Left e Right con 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. Nota che l'icona punta ancora nella direzione sbagliata perché è specchiata (se l'icona non è specchiata, assicurati di visualizzare ancora l'anteprima da destra a sinistra). Secondo le linee guida di Material Design, le icone non devono essere specchiate.
5. Apri res/drawable/ic_gdg.xml.
6. Nella prima riga del 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 Cerca GDG. Il layout ora dovrebbe essere corretto.

Suggerimento:Android Studio fornisce suggerimenti evidenziati in giallo per incoraggiare l'utilizzo degli attributi start e end.

Utilizza la funzionalità di ricerca e sostituzione con corrispondenza tra maiuscole e minuscole per trovare tutte le occorrenze di Left e Right nei layout XML.

Passaggio 3: lascia che Android Studio faccia il lavoro per te

Nell'esercizio precedente, hai fatto i primi passi per supportare le lingue RTL. Fortunatamente, Android Studio può analizzare la tua app e configurare molte impostazioni di base.

1. In list_item.xml, in TextView, modifica layout_marginStart riportandolo a layout_marginLeft, in modo che lo scanner abbia qualcosa da trovare.

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

2. In Android Studio, scegli Refactor > Add RTL support where possible (Refattorizza > Aggiungi supporto RTL, se possibile) e seleziona le caselle per aggiornare il manifest e i file di layout in modo da utilizzare le proprietà start e end.

3. Nel riquadro Anteprima refactoring, trova la cartella app ed espandila fino a visualizzare 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 l'anteprima elenca anche i file di sistema e della libreria. Fai clic con il tasto destro del mouse su layout e layout-watch-v20 e su qualsiasi altra cartella che non fa parte di app, quindi scegli Escludi dal menu contestuale.

6. Procedi ora con il refactoring. Se viene visualizzato un popup relativo ai file di sistema, assicurati di aver escluso tutte le cartelle che non fanno parte del codice dell'app.

7. Nota che layout_marginLeft è stato riportato a layout_marginStart.

Nota: alcuni componenti di View richiedono un'ulteriore personalizzazione per funzionare correttamente con la direzione di scrittura da destra a sinistra. Per un controllo più preciso dell'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 le impostazioni internazionali che specificano la direzione.

Passaggio 3: esplora le cartelle per le impostazioni internazionali

Finora hai solo modificato la direzione della lingua predefinita utilizzata per l'app. Per un'app di produzione, invieresti il file strings.xml a un traduttore per farlo tradurre 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 del progetto File di progetto.
2. Espandi la cartella res e noterai le cartelle res/values e res/values-es. "es" nel nome della cartella è il codice lingua per lo spagnolo. Le cartelle values-"codice lingua" contengono valori per ogni lingua supportata. La cartella values senza estensione contiene le risorse predefinite che si applicano in caso contrario.

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 Progettazione.
5. Nel menu a discesa Impostazioni internazionali per l'anteprima, scegli Spagnolo. Il testo dovrebbe ora essere in spagnolo.

6. [Facoltativo] Se hai familiarità con una lingua RTL, crea una cartella values e un file strings.xml in quella lingua e verifica il suo aspetto sul dispositivo.
7. [Facoltativo] Modifica le impostazioni della lingua sul dispositivo ed esegui l'app. Assicurati di non impostare una lingua che non conosci, perché sarà un po' difficile annullare l'operazione.

Nell'attività precedente, hai modificato manualmente la tua app e poi hai utilizzato Android Studio per verificare se erano necessari ulteriori miglioramenti RTL.

L'app Accessibility Scanner è il tuo migliore alleato per rendere accessibile la tua app. Esegue la scansione della tua app sul dispositivo di destinazione e suggerisce miglioramenti, ad esempio ingrandire i target di tocco, aumentare il contrasto e fornire descrizioni per le immagini per rendere la tua app più accessibile. Accessibility Scanner è stato creato da Google e puoi installarlo dal Play Store.

Passaggio 1: installa ed esegui Accessibility Scanner

1. Apri il Play Store e accedi, se necessario. Puoi farlo sul tuo dispositivo fisico o sull'emulatore. Questo codelab utilizza l'emulatore.
   

Nota:se non hai il Play Store sull'emulatore, potresti doverne creare uno nuovo. 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 o crearne uno solo per i test con l'emulatore. Qualsiasi account che crei è reale e ti connetti ai servizi Google Play reali, 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 scaricare l'app corretta, rilasciata da Google, poiché qualsiasi scansione richiede molte autorizzazioni.

3. Installa lo scanner sull'emulatore.
4. Una volta installato, fai clic su Apri.
5. Fai clic su Inizia.
6. Fai clic su Ok per avviare la configurazione di Accessibility Scanner in Impostazioni.

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

8. Fai clic su Utilizza servizio per attivarlo.

9. Segui le istruzioni sullo schermo e concedi tutte le autorizzazioni.
10. Poi fai clic su Ok, ho capito e torna alla schermata Home. Potresti vedere un pulsante blu con un segno di spunta da qualche parte sullo schermo. Se fai clic su questo pulsante, viene attivato il test dell'app in primo piano. Puoi riposizionare il pulsante trascinandolo. Questo pulsante rimane in primo piano rispetto a qualsiasi app, quindi puoi attivare i test in qualsiasi momento.

Per disattivare lo scanner, vai a Impostazioni e disattiva Accessibility Scanner.

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

La prima volta che fai clic sull'icona di Accessibilità Scanner, l'app chiede l'autorizzazione per accedere a tutti i contenuti visualizzati sullo schermo. Questa autorizzazione sembra molto spaventosa, ed è così.

Non dovresti quasi mai concedere un'autorizzazione come questa, perché consente alle app di leggere le tue email o persino di recuperare i dati del tuo conto bancario. Tuttavia, affinché Accessibility Scanner possa funzionare, deve esaminare la tua app come farebbe un utente, ecco perché ha bisogno di questa autorizzazione.

Importante: prima di attivare questa autorizzazione, verifica che l'app che hai installato sia Accessibility Scanner di Google LLC.

13. Fai clic sul pulsante blu e attendi il completamento dell'analisi. Vedrai qualcosa di simile allo screenshot qui sotto, con il titolo e il pulsante di azione rapida racchiusi in un riquadro rosso. Ciò 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 indicano problemi con il contrasto dell'immagine.
15. Espandi le informazioni sul contrasto dell'immagine e lo strumento suggerisce le soluzioni.
16. Fai clic sulle frecce a destra per visualizzare le informazioni relative all'elemento successivo.

17. Nella tua app, vai alla schermata Richiedi GDG e scansionala con l'app Accessibility Scanner. Vengono visualizzati diversi suggerimenti, come mostrato di seguito a sinistra. 12, per l'esattezza. A essere onesti, alcuni sono duplicati di articoli 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. In questo codelab vengono affrontati tutti questi problemi.

La suite di accessibilità Android, una raccolta di app di Google, include strumenti per rendere le app più accessibili. Include strumenti come TalkBack. TalkBack è uno screen reader che offre feedback uditivi, aptici e vocali, consentendo agli utenti di navigare e consumare contenuti sui propri dispositivi senza usare la vista.

È emerso che TalkBack non viene utilizzato solo da persone cieche, ma anche da molte persone con disabilità visive di vario tipo. O anche persone che vogliono solo riposare gli occhi.

Quindi, l'accessibilità è per tutti. In questa attività, proverai TalkBack e aggiornerai l'app in modo che funzioni correttamente.

Passaggio 1: installa ed esegui Accessibility Suite

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

1. Apri il Play Store.
2. Trova Accessibilità Suite. Assicurati che sia l'app corretta di Google.
3. Se non è installato, installa Accessibility Suite.
4. Per attivare TalkBack sul dispositivo, vai a Impostazioni > Accessibilità e attiva TalkBack selezionando Utilizza servizio. Proprio come lo scanner di accessibilità, TalkBack richiede autorizzazioni per leggere i contenuti sullo schermo. Una volta accettate le richieste di autorizzazione, TalkBack ti accoglie con un elenco di tutorial per insegnarti a utilizzare TalkBack in modo efficace.
5. Fermati qui e segui i tutorial, anche solo per imparare a disattivare TalkBack quando hai finito.
6. Per uscire dal tutorial, fai clic sul pulsante Indietro per selezionarlo, quindi tocca due volte un punto qualsiasi dello schermo.

Suggerimento:se non senti nulla, alza il volume.

Suggerimento:per fare clic su un elemento, toccalo due volte; per scorrere o trascinare, toccalo due volte e trascinalo.

7. Scopri come utilizzare l'app GDG Finder con TalkBack. Presta attenzione ai punti in cui TalkBack non fornisce informazioni utili sullo schermo o su un controllo. Risolvi il problema nel prossimo esercizio.

Passaggio 2: aggiungi una descrizione dei contenuti

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

1. Con l'app GDG Finder in esecuzione e TalkBack attivato, vai alla schermata Fai domanda per gestire un GDG.
2. Tocca l'immagine principale… e non succede nulla.
3. Apri add_gdg_fragment.xml.
4. In ImageView, aggiungi un attributo descrittore dei contenuti come mostrato di seguito. La stringa stage_image_description ti viene fornita in strings.xml.

android:contentDescription="@string/stage_image_description"

5. Esegui l'app.
6. Vai a Fai domanda per gestire un GDG e fai clic sull'immagine. Ora dovresti sentire una breve descrizione dell'immagine.
7. [Facoltativo] Aggiungi descrizioni dei contenuti per le 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 un EditText, puoi utilizzare android:hint in XML per aiutare gli utenti a capire cosa digitare. Un suggerimento viene sempre visualizzato nell'interfaccia utente perché è il testo predefinito in un campo di input.

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

Aggiungi a textViewIntro:

android:contentDescription="@string/add_gdg"

Aggiungi ai testi di modifica rispettivamente:

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 alla casella.

android:hint="@string/enter_motivation"

5. Aggiungi una descrizione dei contenuti per il pulsante Invia. Tutti i pulsanti devono avere una descrizione di ciò che succede se vengono premuti.

android:contentDescription="@string/submit_button_description"

6. Esegui l'app con TalkBack attivato 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 trattare come un gruppo, puoi utilizzare il raggruppamento dei contenuti. I contenuti correlati raggruppati vengono annunciati insieme. Gli utenti di tecnologie assistive non dovranno scorrere, scansionare o attendere così spesso per scoprire tutte le informazioni sullo schermo. Ciò non influisce sull'aspetto dei controlli sullo schermo.

Per raggruppare i componenti dell'interfaccia utente, racchiudili in un ViewGroup, ad esempio un LinearLayout. Nell'app GDG Finder, gli elementi labelTextWhy e editTextWhy sono ottimi candidati per il raggruppamento, in quanto appartengono insieme a livello semantico.

1. Apri add_gdg_fragment.xml.
2. Inserisci un LinearLayout intorno a LabelTextWhy e EditTextWhy per creare un gruppo di contenuti. Copia e incolla il codice riportato di seguito. Questo LinearLayout contiene già parte dello stile che ti serve. Assicurati che button sia AL DI FUORI 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 codice per rientrare correttamente 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. Vincola EditTextRegion e Button a contentGroup per eliminare gli errori.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. Aggiungi margini a LinearLayout. (Facoltativo) Estrai questo margine come dimensione.

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

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

9. Esegui l'app ed esplora la schermata Richiedi l'esecuzione di GDG con TalkBack.

Passaggio 5: aggiungi una regione live

Al momento, l'etichetta sul pulsante di invio è Ok. Sarebbe meglio se il pulsante avesse un'etichetta e una descrizione prima dell'invio del modulo e cambiasse dinamicamente in un'etichetta e una descrizione dei contenuti diverse dopo che l'utente ha fatto clic e il modulo è stato inviato. Puoi farlo utilizzando una regione attiva.

Una regione in tempo reale indica ai servizi di accessibilità se l'utente deve ricevere una notifica quando una visualizzazione 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 semplificare, informi l'utente quando il pulsante di invio cambia stato.

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

android:text="@string/submit"

3. Aggiungi una regione attiva al pulsante impostando l'attributo android:accessibilityLiveRegion. Mentre digiti, hai diverse opzioni per il valore. A seconda dell'importanza della modifica, puoi scegliere se interrompere l'utente. Con il valore "assertivo", i servizi di accessibilità interrompono la sintesi vocale in corso per annunciare immediatamente le modifiche a questa visualizzazione. Se imposti il valore su "none", non vengono annunciate modifiche. Se impostato su "educato", i servizi di accessibilità annunciano le modifiche, ma aspettano il loro turno. Imposta il valore su "polite".

android:accessibilityLiveRegion="polite"

4. Nel pacchetto add, apri AddGdgFragment.kt.
5. All'interno di showSnackBarEvent Observer, dopo aver mostrato SnackBar, imposta una nuova descrizione e un nuovo 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 abbia una dimensione adeguata.

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 uno stile del tema migliore.
3. Elimina l'attributo textColor da textViewIntro. I colori del tema devono fornire un buon contrasto.
4. Esegui l'app. Nota il pulsante Invia, molto più utilizzabile. Fai clic su Invia e nota come cambia in Fine.

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

Il widget Chip è un wrapper di visualizzazione sottile intorno a ChipDrawable, che contiene tutta la logica di layout e disegno. La logica aggiuntiva esiste per supportare la navigazione tramite tocco, mouse, tastiera e accessibilità. Il chip principale e l'icona di chiusura sono considerati sottoviste logiche separate e contengono il proprio comportamento e stato di navigazione.

I chip utilizzano risorse disegnabili. Le risorse grafiche di Android ti consentono di disegnare immagini, forme e animazioni sullo schermo e possono avere dimensioni fisse o essere dimensionate dinamicamente. Puoi utilizzare le immagini come risorse disegnabili, ad esempio le immagini nell'app GDG. Inoltre, puoi utilizzare i disegni vettoriali per disegnare qualsiasi cosa tu possa immaginare. Esiste anche un elemento disegnabile ridimensionabile chiamato elemento disegnabile 9-patch, che non è trattato in questo codelab. Il logo GDG, in drawable/ic_gdg.xml, è un altro elemento disegnabile.

Gli elementi grafici non sono visualizzazioni, quindi non puoi inserirli direttamente in un ConstraintLayout, ma devi inserirli in un ImageView. Puoi anche utilizzare risorse disegnabili per fornire uno sfondo a una visualizzazione di testo o a un pulsante e lo sfondo viene disegnato dietro il testo.

Passaggio 1: aggiungi i chip all'elenco dei GDG

Il chip selezionato di seguito utilizza tre risorse disegnabili. Lo sfondo e il segno di spunta sono entrambi risorse disegnabili. Il tocco del chip crea un effetto increspato, che viene realizzato con uno speciale RippleDrawable che mostra un effetto increspato in risposta ai cambiamenti di stato.

In questa attività, aggiungi chip all'elenco dei GDG e fai in modo che cambino stato quando vengono selezionati. In questo esercizio, aggiungi una riga di pulsanti chiamati chip nella parte superiore della schermata Ricerca. Ogni pulsante filtra l'elenco dei GDG in modo che l'utente riceva solo i risultati della regione selezionata. Quando viene selezionato un pulsante, lo sfondo cambia e viene visualizzato un segno di spunta.

1. Apri fragment_gdg_list.xml.
2. Crea un com.google.android.material.chip.ChipGroup all'interno di HorizontalScrollView.Imposta la proprietà singleLine su true, in modo che tutti i chip siano allineati su una riga scorrevole orizzontalmente. Imposta la proprietà singleSelection su true in modo che sia possibile selezionare un solo chip alla volta nel gruppo. 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 una Chip.
4. In egion.xml, sostituisci tutto il codice con il layout per un Chip come indicato di seguito. Tieni presente che questo Chip è un componente Material. Tieni presente anche che ottieni il segno di spunta impostando la proprietà app:checkedIconVisible. Riceverai 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, visualizza il menu di intenti e crea la risorsa di colore per l'evidenziazione selezionata. Le opzioni predefinite vanno bene, 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 di colore, codificato come <selector>, puoi fornire colori diversi per stati diversi. Ogni stato e il relativo colore sono codificati come <item>. Per saperne di più su questi colori, consulta Temi a colori.

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

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

8. Sopra il colore predefinito, aggiungi un item con un colore di colorPrimaryVariant e limita il suo utilizzo a quando lo stato selezionato è true. Gli elenchi di stati vengono elaborati dall'alto verso il basso, come un'istruzione case. 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 regioni in cui sono presenti i GDG. Quando viene selezionato un chip, l'app filtra i risultati in modo da mostrare solo quelli dei GDG per quella regione.

Nota:la modalità di creazione di questo elenco e di filtraggio dei risultati non fa parte di questo codelab. Se vuoi sapere come viene ottenuta la lista dei GDG e come viene implementato il filtro, esamina i file nei pacchetti search e network. In particolare, esamina GdgListViewModel.

1. Nel pacchetto search, apri GdgListFragment.kt.
2. In onCreateView(), appena sopra l'istruzione return, aggiungi un osservatore su viewModel.regionList e sostituisci onChanged(). Quando l'elenco delle regioni fornito dal modello di visualizzazione cambia, i chip devono essere ricreati. Aggiungi un'istruzione per restituire immediatamente il valore data fornito se è 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 nullo, assegna binding.regionList a una nuova variabile chiamata chipGroup per memorizzare nella cache regionList.

val chipGroup = binding.regionList

4. Di seguito, crea un nuovo layoutInflator per gonfiare le chip da chipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

5. Pulisci e ricompila il progetto per eliminare l'errore di data binding.

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

6. Crea una variabile, children, per contenere tutti i chip. Assegna una funzione di mappatura all'data passato per creare e restituire ogni chip.

val children = data.map {} 

7. All'interno della lambda della mappa, per ogni regionName, crea e gonfia un chip. 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 della lambda, appena prima di restituire chip, aggiungi un listener di clic. Quando si fa clic su chip, imposta il relativo stato su checked. Chiama onFilterChanged() in 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 della lambda, rimuovi tutte le visualizzazioni correnti da chipGroup, poi aggiungi tutti i chip da children a chipGroup. Non puoi aggiornare i chip, quindi devi rimuovere e ricreare i contenuti di chipGroup.

chipGroup.removeAllViews()

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

L'osservatore completato dovrebbe 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 utilizzare i nuovi chip. Man mano che fai clic su ogni chip, l'app visualizza i gruppi di filtri sottostanti.

Importante. Se l'avvio delle mappe non ti aiuta a ottenere l'elenco, per far funzionare questa operazione sull'emulatore, chiudi tutti gli emulatori in esecuzione. Esegui l'app, avvia un nuovo emulatore e avvia l'app Maps su quell'emulatore, quindi esegui l'app.

La modalità Notte consente all'app di cambiare i colori in un tema scuro, ad esempio quando le impostazioni del dispositivo sono state configurate per attivare la modalità Notte. In modalità notturna, le app cambiano i loro sfondi chiari predefiniti in scuri e modificano di conseguenza tutti gli altri elementi dello schermo.

Passaggio 1: attiva la modalità notturna

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

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

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

2. Nel metodo MainActivity di onCreate(), chiama AppCompatDelegate.setDefaultNightMode() per attivare il tema scuro a livello di programmazione.

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 del tema scuro

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

1. Visita lo strumento di selezione dei colori di material.io e crea una tavolozza di colori per il tema scuro. Ad esempio, potresti basarlo su un colore blu scuro.
2. Genera e scarica il file colors.xml.
3. Passa alla visualizzazione File di 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 delle risorse res/values-night.
7. Esegui l'app, sempre con la modalità Buio attivata, e l'app dovrebbe utilizzare i nuovi colori che hai definito per res/values-night. Nota che i chip utilizzano il nuovo colore secondario.

Progetto Android Studio: GDGFinderFinal.

Supporto delle lingue RTL

• Nel file manifest Android, imposta android:supportsRtl="true".
• Puoi visualizzare l'anteprima della visualizzazione da destra a sinistra 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 da destra a sinistra.
• Sostituisci i riferimenti a Left e Right con i riferimenti a Start e End.
• Disattiva il mirroring per le risorse disegnabili eliminando android:autoMirrored="true".
• Scegli Refactor > Add RTL support where possible per lasciare che Android Studio faccia il lavoro per te.
• Utilizza le cartelle valori-"codice lingua" per archiviare le risorse specifiche della lingua.

Scansione per l'accessibilità

• Nel Play Store, scarica Accessibility Scanner di Google LLC ed eseguilo per cercare elementi dello schermo da migliorare.

Progettare per TalkBack con descrizioni dei contenuti

• Installa Accessibilità di Android 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 come un EditText, utilizza un attributo android:hint nel file XML per fornire all'utente un suggerimento su cosa digitare.
• Crea gruppi di contenuti raggruppando gli elementi correlati in un gruppo di visualizzazione.
• Crea una regione live per fornire agli utenti un feedback aggiuntivo con android:accessibilityLiveRegion.

Utilizzare i chip per implementare un filtro

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

Supporto della modalità Buio

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

Documentazione per sviluppatori Android:

• LayoutDirection (RTL)
• Bidirezionalità
• Guida introduttiva ad Accessibility Scanner
• TalkBack
• Gesti TalkBack
• Documentazione sulla panoramica degli elementi disegnabili
• Descrittori di contenuti
• Raggruppamento di contenuti
• Regioni dinamiche
• Risorse grafiche NinePatch
• Strumento Disegna 9-patch
• Patatine
• ChipGroup
• Tema scuro
• Temi a colori
• Strumento Colore
• Animare la grafica disegnabile

Altre risorse:

• Developing Android Apps with Kotlin (corso Udacity)
• Kotlin Bootcamp for Programmers (corso Udacity)
• Codelab di Kotlin Bootcamp for Programmers

Questa sezione elenca i possibili compiti a casa per gli studenti che seguono questo codelab nell'ambito di un corso guidato da un insegnante. Spetta all'insegnante:

• Assegna i compiti, se richiesto.
• Comunica agli studenti come inviare i compiti.
• Valuta i compiti a casa.

Gli insegnanti possono utilizzare questi suggerimenti nella misura che ritengono opportuna e sono liberi di assegnare qualsiasi altro compito a casa che ritengono appropriato.

Se stai seguendo questo codelab in autonomia, sentiti libero di utilizzare questi compiti per casa per mettere alla prova le tue conoscenze.

Domanda 1

Quale dei seguenti elementi è obbligatorio per supportare le lingue RTL?

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

▢ Passa a una lingua RTL

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

▢ Fornisci descrizioni dei contenuti

Domanda 2

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

▢ TalkBack

▢ Accessibility Scanner

▢ In Android Studio, Refactor > Add RTL support where possible

▢ Lint

Domanda 3

Quale delle seguenti affermazioni sulle patatine non è vera?

▢ Mostri i chip come parte di un ChipGroup.

▢ Puoi fornire un elenco di stati di colore per un ChipGroup.

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

▢ Devi sempre attivare DarkTheme se la tua app utilizza i chip.

Domanda 4

Quale tema offre uno stile per le modalità Buio e Luce?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Domanda 5

Che cos'è una regione live?

▢ Un nodo che contiene informazioni importanti per l'utente

▢ Una regione dello schermo che cambia forma in base alle linee guida di Material

▢ Una visualizzazione che consente lo streaming video

▢ Una risorsa drawable animata