MDC-101 Android: nozioni di base di Material Components (MDC) (Kotlin)

1. Introduzione

Material Components (MDC) consente agli sviluppatori di implementare Material Design. Creato dal team di ingegneri e designer UX di Google, MDC è dotato di decine di componenti UI belli e funzionali ed è disponibile per Android, iOS, web e Flutter.material.io/develop

Cosa sono Material Design e Material Component per Android?

Material Design è un sistema per la creazione di prodotti digitali belli e audaci. Unendo stile, branding, interazione e movimento in un insieme coerente di principi e componenti, i team di prodotto possono realizzare il loro massimo potenziale di progettazione.

Per le app per Android, Material Components for Android (MDC Android) unisce design e progettazione a una libreria di componenti per garantire coerenza all'interno dell'app. Man mano che il sistema Material Design si evolve, questi componenti vengono aggiornati per garantire un'implementazione perfetta in pixel e il rispetto degli standard di sviluppo front-end di Google. MDC è disponibile anche per il web, iOS e Flutter.

In questo codelab, creerai una pagina di accesso utilizzando diversi componenti di MDC Android.

Cosa creerai

Questo codelab è il primo dei quattro codelab che ti guideranno nella creazione di un'app chiamata Shrine, un'app per Android di e-commerce che vende abbigliamento e articoli per la casa. Scoprirai come personalizzare i componenti per adattarli a qualsiasi brand o stile con MDC Android.

In questo codelab, creerai una pagina di accesso per il Santuario contenente:

• Due campi di testo, uno per inserire il nome utente e l'altro per la password
• Due pulsanti, uno per "Annulla" e uno per "Avanti"
• Il nome dell'app (Shrine)
• Immagine del logo di Santuario

I codelab correlati sono disponibili all'indirizzo:

• MDC 102: Struttura e layout di Material Design
• MDC 103: Temi di Material Design con colore, forma, elevazione e tipo
• MDC 104: Componenti avanzati di Material Design

Entro il termine del corso MDC 104, creerai un'app per Android simile alla seguente:

Componenti di MDC per Android in questo codelab

• Campo di testo
• Pulsante

In questo codelab utilizzerai i componenti predefiniti forniti da MDC Android. Scoprirai come personalizzarli in MDC 103: Tema di Material Design con colore, forma, altezza e tipo.

Che cosa ti serve

• Conoscenza di base dello sviluppo di Android
• Android Studio (scaricalo qui se non l'hai ancora fatto)
• Un emulatore o un dispositivo Android (disponibile tramite Android Studio)
• Il codice di esempio (vedi il passaggio successivo)

Come giudichi il tuo livello di esperienza nello sviluppo di app per Android?

Principiante Livello intermedio Eccellente

2. Configurazione dell'ambiente di sviluppo

Avvia Android Studio

Quando apri Android Studio, dovrebbe essere visualizzata una finestra chiamata "Ti diamo il benvenuto in Android Studio". Tuttavia, se è la prima volta che avvii Android Studio, segui la procedura della Configurazione guidata di Android Studio con i valori predefiniti. Questo passaggio può richiedere diversi minuti per scaricare e installare i file necessari, quindi non esitare a lasciarlo in esecuzione in background mentre esegui la prossima sezione.

Scarica l'app codelab iniziale

Scarica l'app iniziale

L'app iniziale si trova nella directory material-components-android-codelabs-101-starter/kotlin.

...o clonarlo da GitHub

Per clonare questo codelab da GitHub, esegui questi comandi:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 101-starter

Per ulteriore assistenza: Clonare un repository da GitHub

Carica il codice di avvio in Android Studio

1. Al termine della configurazione guidata e visualizzata la finestra Ti diamo il benvenuto in Android Studio, fai clic su Apri un progetto Android Studio esistente. Passa alla directory in cui hai installato il codice di esempio e seleziona kotlin -> santuario (o cerca shrine sul computer) per aprire il progetto Shipping.
2. Attendi un momento affinché Android Studio crei e sincronizzi il progetto, come mostrato dagli indicatori di attività nella parte inferiore della finestra di Android Studio.
3. A questo punto, Android Studio potrebbe generare alcuni errori di generazione perché non disponi dell'SDK Android o degli strumenti di sviluppo, come quello mostrato di seguito. Segui le istruzioni in Android Studio per installarle/aggiornarle e sincronizzare il progetto.

Aggiungi le dipendenze del progetto

Il progetto richiede una dipendenza dalla libreria di supporto Android MDC. Il codice campione che hai scaricato dovrebbe già avere questa dipendenza elencata, ma è buona norma svolgere i seguenti passaggi per averne la certezza.

1. Passa al file build.gradle del modulo app e assicurati che il blocco dependencies includa una dipendenza su MDC per Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Facoltativo) Se necessario, modifica il file build.gradle per aggiungere le seguenti dipendenze e sincronizza il progetto.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Esegui l'app iniziale

Assicurati che la configurazione della build a sinistra del pulsante Esegui / Riproduci sia app. Premi il pulsante Esegui / Riproduci verde per creare ed eseguire l'app. Se tra i dispositivi disponibili è già elencato un dispositivo Android, nella finestra Seleziona la destinazione del deployment vai al passaggio 8. In caso contrario, fai clic su Crea nuovo dispositivo virtuale. Nella schermata Seleziona hardware, seleziona uno smartphone, ad esempio Pixel 2, quindi fai clic su Avanti. Nella schermata Immagine di sistema, seleziona una versione di Android recente, preferibilmente il livello API più elevato. Se non è installata, fai clic sul link Scarica visualizzato e completa il download. Fai clic su Avanti. Nella schermata Dispositivo virtuale Android (AVD), lascia le impostazioni invariate e fai clic su Fine. Seleziona un dispositivo Android dalla finestra di dialogo della destinazione dell'implementazione. Fai clic su Ok. Android Studio crea l'app, la distribuisce e la apre automaticamente sul dispositivo di destinazione.

Se non riesci ad aggiungere la dipendenza o a eseguire l'app correttamente, interrompi l'ambiente di sviluppo e risolvi i problemi.

Se ricevi un errore INSTALL_FAILED_INVALID_APK durante la creazione, prova a eseguire una procedura di tipo "Build" -> "Pulisci progetto" in Android Studio.

Operazione riuscita. Il codice di avvio per la pagina di accesso di Santuario dovrebbe essere in esecuzione nell'emulatore. Dovresti vedere il nome "Shrine" e il logo del santuario immediatamente sotto.

Diamo un'occhiata al codice. Nel nostro codice di esempio, abbiamo fornito un semplice framework di navigazione Fragment per visualizzare i frammenti e navigare tra i frammenti.

Apri MainActivity.kt nella directory shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine. Dovrebbe contenere quanto segue:

Nota: per ulteriori informazioni sulla navigazione, sulla creazione e sulla gestione dei percorsi di navigazione tramite Android Studio, consulta l'esercizio Kotlin Android Fundamentals 03.2: Define navigazione percorsi.

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

In questa attività viene visualizzato il file di layout R.layout.shr_main_activity, definito in shr_main_activity.xml.

Puoi vedere che in onCreate(), MainActivity.kt avvia una transazione Fragment per mostrare LoginFragment. Per questo codelab, modificheremo LoginFragment. L'attività implementa anche un metodo navigateTo(Fragment), definito in NavigationHost, che consente a qualsiasi frammento di passare a un frammento diverso.

Comando + clic (o Ctrl + clic) shr_main_activity nel file dell'attività per aprire il file di layout oppure vai al file di layout in app -> res -> layout -> shr_main_activity.xml.

Nota: se quando apri shr_main_activity.xml viene visualizzata l'anteprima di un'applicazione anziché un file XML, passa dalla sezione "Design" premi Tab fino a "Testo" nella parte inferiore sinistra del riquadro. Lavoreremo nella sezione "Testo" per la durata di questo codelab.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

Qui vediamo un semplice <FrameLayout> che funge da contenitore per tutti i frammenti visualizzati dall'attività.

Ora apriamo LoginFragment.kt.

LoginFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

LoginFragment gonfia il file di layout shr_login_fragment e lo visualizza in onCreateView().

Diamo ora un'occhiata al file di layout shr_login_fragment.xml per vedere come si presenta la pagina di accesso.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

       <ImageView
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="48dp"
           android:layout_marginBottom="16dp"
           app:srcCompat="@drawable/shr_logo" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:layout_marginBottom="132dp"
           android:text="@string/shr_app_name"
           android:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

Qui possiamo vedere un <LinearLayout> con una <ImageView> in alto, che rappresenta il logo del Santuario.

A seguire, è presente un tag <TextView> che rappresenta l'etichetta del santuario sotto il logo. Il testo di questa etichetta è una risorsa stringa denominata @string/shr_app_name. Se premi Comando + clic (o Ctrl + clic) sul nome della risorsa stringa o apri app -> res -> values -> strings.xml, puoi visualizzare il file strings.xml in cui sono definite le risorse di tipo stringa. Quando verranno aggiunte altre risorse di tipo stringa in futuro, queste verranno definite qui. Ogni risorsa in questo file deve avere un prefisso shr_ per indicare che fanno parte dell'app Santuario.

Ora che hai acquisito familiarità con il codice di base, implementiamo il nostro primo componente.

3. Aggiungi campi di testo

Per iniziare, aggiungeremo due campi di testo alla nostra pagina di accesso per consentire agli utenti di inserire nome utente e password. Utilizzeremo il componente Campo di testo MDC, che include una funzionalità integrata che visualizza un'etichetta mobile e messaggi di errore.

I campi di testo di Material Design sono stati notevolmente migliorati per offrire più opzioni di personalizzazione a supporto del brand, con miglioramenti supportati da un'ampia ricerca sull'esperienza utente (UX) per una migliore usabilità e design visivo.

Scopri di più sui nuovi campi di testo nel relativo articolo delle linee guida sui materiali.

Aggiungere il file XML

In shr_login_fragment.xml, aggiungi due elementi TextInputLayout con un elemento secondario TextInputEditText all'interno di <LinearLayout>, sotto "SHRINE" etichetta <TextView>:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

Suggerimento: per aprire rapidamente un file in Android Studio, tocca due volte il tasto Maiusc per visualizzare una barra di ricerca mobile e digita il nome del file che vuoi aprire.

Lo snippet riportato sopra rappresenta due campi di testo, ciascuno composto da un elemento <TextInputLayout> e da un elemento secondario <TextInputEditText>. Il testo del suggerimento per ogni campo di testo è specificato nell'attributo android:hint.

Abbiamo incluso due nuove risorse stringa per il campo di testo: @string/shr_hint_username e @string/shr_hint_password. Apri strings.xml per vedere queste risorse di stringa.

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

Aggiungi convalida input

I componenti di TextInputLayout forniscono una funzionalità integrata di feedback sugli errori.

Per mostrare il feedback sull'errore, apporta le seguenti modifiche a shr_login_fragment.xml:

• Imposta l'attributo app:errorEnabled su true nell'elemento Password TextInputLayout. Verrà aggiunta un'ulteriore spaziatura interna per il messaggio di errore sotto il campo di testo.
• Imposta l'attributo android:inputType su "textPassword" sull'elemento Password TextInputEditText. Il testo inserito nel campo della password verrà nascosto.

Con queste modifiche, i campi di testo di shr_login_fragment.xml dovrebbero avere il seguente aspetto:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Ora prova a eseguire l'app. Dovresti vedere una pagina con due campi di testo per "Nome utente" e "Password".

Guarda l'animazione dell'etichetta mobile:

Le funzionalità del campo di testo MCD includono:

• Visualizzazione del feedback sugli errori integrati
• Supporto dell'attivazione/disattivazione della visibilità delle password utilizzando app:passwordToggleEnabled
• Offerta di funzionalità di testo di supporto integrate utilizzando app:helperText
• Visualizzazione del numero totale e massimo di caratteri utilizzando app:counterEnabled e app:counterMaxLength

4. Aggiungere pulsanti

Successivamente, aggiungeremo due pulsanti alla pagina di accesso: "Annulla" e "Avanti". Utilizzeremo il componente Pulsante MDC, che è integrato nell'iconico effetto inchiostro a inchiostro.

Aggiungere il file XML

In shr_login_fragment.xml, aggiungi <RelativeLayout> a <LinearLayout>, sotto gli elementi TextInputLayout. Poi aggiungi due elementi <MaterialButton> a <RelativeLayout>.

Il file XML risultante dovrebbe avere l'aspetto seguente:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.MaterialComponents.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Nota: il componente MaterialButton ha uno stile predefinito di un pulsante colorato in rilievo. Per il pulsante Annulla, tuttavia, è necessario un pulsante non assegnato e non riempito. A questo scopo, viene applicato un attributo style: @style/Widget.MaterialComponents.Button.TextButton.

È tutto. Quando esegui l'app, viene visualizzata un'onda di inchiostro quando tocchi ciascun pulsante.

Le funzionalità del pulsante MDC includono:

• Feedback al tocco integrato (chiamato MDC Ripple) per impostazione predefinita
• Altitudine predefinita
• Raggio e tratto personalizzabili

5. Vai al frammento successivo

Infine, aggiungeremo del codice Kotlin a LoginFragment.kt per collegare il nostro "AVANTI" per passare a un altro frammento.

Aggiungiamo un metodo isPasswordValid booleano privato in LoginFragment.kt sotto onCreateView(), con una logica per determinare se la password è valida o meno. Ai fini di questa demo, ci assicureremo che la password sia composta da almeno 8 caratteri:

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

A questo punto, aggiungi un listener di clic al pulsante "Avanti". che imposta e cancella l'errore in base al metodo isPasswordValid() appena creato. In onCreateView(), questo listener di clic deve essere posizionato tra la riga di rigonfiamento e la riga return view.

Ora aggiungiamo un listener di chiavi alla password TextInputEditText per rimanere in ascolto degli eventi chiave che cancellano l'errore. Questo listener deve utilizzare anche isPasswordValid() per verificare se la password è valida. Puoi aggiungerlo direttamente sotto il listener di clic in onCreateView().

Il tuo metodo onCreateView() dovrebbe avere ora un aspetto simile al seguente:

LoginFragment.kt

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

Nota: se in Android Studio si verificano errori di tipo Impossibile risolvere il simbolo durante la scrittura di questo codice, premi Alt + Invio o (Opzione + Invio su Mac) per importare i simboli mancanti.

Ora possiamo passare a un altro frammento. In onCreateView(), aggiorna OnClickListener per passare a un altro frammento quando la convalida dell'errore ha esito positivo. Il codice di clickListener ora dovrebbe avere il seguente aspetto:

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

Abbiamo aggiunto la riga (activity as NavigationHost).navigateTo(ProductGridFragment(), false) al else caso del listener di clic. Questa riga chiama il metodo navigateTo() da MainActivity per passare a un nuovo frammento: ProductGridFragment. Al momento si tratta di una pagina vuota, su cui lavorerai in MDC-102.

Il parametro false in navigateTo() indica all'attività di non aggiungere il frammento corrente al backstack, in modo che l'utente non possa tornare alla schermata di accesso utilizzando la chiave Indietro.

Ora, crea l'app. Procedi e premi il pulsante Avanti.

Ce l'hai fatta! Questa schermata sarà il punto di partenza del nostro prossimo codelab su cui lavorerai in MDC-102.

6. Fine

Utilizzando il markup XML di base e circa 30 righe di Kotlin, la libreria Material Components per Android ti ha aiutato a creare una fantastica pagina di accesso conforme alle linee guida di Material Design e che abbia l'aspetto e il comportamento coerente su tutti i dispositivi.

L'app MDC 101 completa è disponibile scaricando il codelab completato o controllando 101-complete con git: git checkout 101-complete.

Puoi testare la tua versione della pagina rispetto alla versione completata aprendo il progetto shrine nella directory con Android Studio ed eseguendo l'app.

Passaggi successivi

Il campo di testo e il pulsante sono due componenti fondamentali della libreria MDC per Android, ma ce ne sono molti altri. Puoi esplorare gli altri componenti di MDC Android. In alternativa, consulta l'articolo MDC 102: Struttura e layout di Material Design per scoprire di più sulla barra delle app in alto, sulla visualizzazione schede e sul layout a griglia. Grazie per aver provato Material Components. Speriamo che questo codelab ti sia piaciuto.

Ho completato questo codelab con una quantità di tempo e di sforzi ragionevoli

Totalmente d'accordo D'accordo Né chiara, né confusa In disaccordo Totalmente in disaccordo

Vorrei continuare a utilizzare Material Components in futuro

Totalmente d'accordo D'accordo Né chiara, né confusa In disaccordo Totalmente in disaccordo