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

Che cosa sono Material Design e Material Components 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 applicazioni Android, Material Components for Android (MDC Android) unisce design e progettazione a una libreria di componenti per creare coerenza all'interno dell'app. Man mano che il sistema Material Design si evolve, questi componenti vengono aggiornati per garantire un'implementazione coerente e perfetta con i 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 un nome utente e l'altro per una 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: Material Design Structure and Layout
• MDC 103: Temi di Material Design con colore, forma, elevazione e tipo
• MDC 104: Componenti avanzati di Material Design

Al termine del modulo MDC 104, avrai creato 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. Scopri come personalizzarli in MDC 103: Material Design Theming with Color, Shape, Elevation and Type.

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 Intermedio Proficiente

2. Configurazione dell'ambiente di sviluppo

Avvia Android Studio

Quando apri Android Studio, dovrebbe essere visualizzata una finestra intitolata "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 passi alla sezione successiva.

Scarica l'app codelab iniziale

Scarica l'app iniziale

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

…oppure clonalo 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. Vai alla directory in cui hai installato il codice di esempio e seleziona kotlin -> shrine (o cerca shrine sul computer) per aprire il progetto di spedizione.
2. Attendi un momento per consentire ad Android Studio di compilare e sincronizzare il progetto, come indicato 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 installare/aggiornare questi componenti e sincronizzare il progetto.

Aggiungere dipendenze del progetto

Il progetto deve avere una dipendenza dalla libreria di supporto MDC per Android. 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 sincronizzare 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'
}

Eseguire l'app iniziale

Assicurati che la configurazione di build a sinistra del pulsante Esegui/Riproduci sia app. Premi il pulsante Esegui/Riproduci verde per compilare ed eseguire l'app. Nella finestra Seleziona destinazione di deployment, se hai già un dispositivo Android elencato tra i dispositivi disponibili, 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 Destinazione di deployment. 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 creare un'operazione "Build" -> "Clean Project" (Ripulisci il progetto) in Android Studio.

Operazione riuscita. Il codice di avvio per la pagina di accesso di Shrine dovrebbe essere in esecuzione nell'emulatore. Dovresti vedere il nome "Shrine" e il logo di Shrine subito 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 scoprire di più sulla navigazione, sulla creazione e sulla gestione dei percorsi di navigazione utilizzando Android Studio, consulta l'esercizio Kotlin Android Fundamentals 03.2: Define navigation paths

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 Control + 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 visualizzi un'anteprima dell'applicazione anziché un file XML, passa dalla scheda "Design" alla scheda "Testo" in basso a sinistra nel riquadro. Lavoreremo nella scheda "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 apri 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().

Ora diamo un'occhiata al file di layout shr_login_fragment.xml per vedere come appare 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 Control + clic) sul nome della risorsa stringa o apri app -> res -> values -> strings.xml, puoi vedere il file strings.xml in cui sono definite le risorse stringa. Quando in futuro verranno aggiunte altre risorse stringa, verranno definite qui. Ogni risorsa in questo file deve avere un prefisso shr_ per indicare che fa parte dell'app Shrine.

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

3. Aggiungi campi di testo

Per iniziare, aggiungeremo due campi di testo alla pagina di accesso in cui gli utenti potranno inserire il nome utente e la password. Utilizzeremo il componente Campo di testo MDC, che include funzionalità integrate che mostrano 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 nell'articolo delle linee guida di Material.

Aggiungere il file XML

In shr_login_fragment.xml, aggiungi due elementi TextInputLayout con un TextInputEditText secondario all'interno di <LinearLayout>, sotto l'etichetta "SHRINE" <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 visualizzare queste risorse 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 poter 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à aggiunto un ulteriore spazio sotto il campo di testo per il messaggio di errore.
• Imposta l'attributo android:inputType su "textPassword" nell'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 visualizzare una pagina con due campi di testo: "Nome utente" e "Password".

Dai un'occhiata all'animazione dell'etichetta mobile:

Le funzionalità del campo di testo MCD includono:

• Visualizzazione del feedback sugli errori integrati
• Supporto di un pulsante di attivazione/disattivazione per la visibilità della password utilizzando app:passwordToggleEnabled
• Offrire la funzionalità del testo di aiuto integrato utilizzando app:helperText
• Visualizzazione del numero totale e massimo di caratteri utilizzando app:counterEnabled e app:counterMaxLength

4. Aggiungere pulsanti

Aggiungiamo 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 un <RelativeLayout> a <LinearLayout>, sotto gli elementi TextInputLayout. Aggiungi poi due elementi <MaterialButton> a <RelativeLayout>.

Il file XML risultante dovrebbe avere il seguente aspetto:

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 angolare personalizzabili

5. Vai al frammento successivo

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

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

LoginFragment.kt

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

In seguito, aggiungi un listener di clic al pulsante "Avanti" per impostare e cancellare l'errore in base al metodo isPasswordValid() appena creato. In onCreateView(), il 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 ascoltatore deve utilizzare anche isPasswordValid() per verificare se la password è valida o meno. 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 degli errori va a buon fine. Il codice clickListener 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) alla casella else del listener di clic. Questa riga chiama il metodo navigateTo() da MainActivity per passare a un nuovo frammento, ProductGridFragment. Attualmente questa è una pagina vuota, su cui lavorerai in MDC-102.

Il parametro false in navigateTo() indica all'attività di non aggiungere il frammento corrente alla pila di ritorno, pertanto l'utente non potrà tornare alla schermata di accesso utilizzando il tasto Indietro.

Ora crea l'app. Vai avanti 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 completata è disponibile scaricando il codelab completo o eseguendo il check out di 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 principali della libreria MDC per Android, ma ce ne sono molti altri. Puoi esplorare gli altri componenti di MDC Android. In alternativa, consulta MDC 102: Material Design Structure and Layout per saperne 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 potuto completare questo codelab con un impegno e un tempo ragionevoli

Totalmente d'accordo D'accordo Neutrale In disaccordo Totalmente in disaccordo

Vorrei continuare a utilizzare Material Components in futuro

Totalmente d'accordo D'accordo Neutrale In disaccordo Totalmente in disaccordo