MDC-101 Android: componenti di base (MDC) (Kotlin)

Gli elementi MDC (Material Components) aiutano gli sviluppatori a implementare Material Design. Creata da un team di ingegneri e designer UX di Google, MDC offre decine di componenti dell'interfaccia utente belli e funzionali ed è disponibile per Android, iOS, Web e Flutter. material.io/develop

Cosa sono i materiali e il design per Android?

Material Design è un sistema per creare prodotti digitali accattivanti e bellissimi. Combinando stile, branding, interazione e movimento in base a un insieme coerente di principi e componenti, i team di prodotto possono realizzare le loro maggiori potenzialità di progettazione.

Per le applicazioni Android, Material Components for Android (MDC Android) unisce il design e la progettazione con una raccolta di componenti per assicurare coerenza all'interno dell'app. Man mano che il sistema Material Design si evolve, questi componenti vengono aggiornati per garantire un'implementazione coerente con i pixel e l'ottemperanza agli standard di sviluppo front-end di Google. MDC è inoltre disponibile per il Web, iOS e Flutter.

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

Cosa imparerai a realizzare

Questo codelab è il primo di quattro codelab che ti guideranno attraverso lo sviluppo di un'app chiamata Shrine, un'app Android di e-commerce che vende abbigliamento e prodotti per la casa. Dimostrerà come personalizzare i componenti per riflettere qualsiasi brand o stile utilizzando MDC Android.

In questo codelab, creerai una pagina di accesso per il santuario che contiene:

• Due campi di testo, uno per l'inserimento di un nome utente e l'altro per l'inserimento di una password
• Due pulsanti, uno per "Annulla", 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 dei materiali con colore, forma, altitudine e tipo
• MDC 104: Componenti avanzati di Material Design

Entro la fine del MDC 104, creerai un'app Android simile alla seguente:

Componenti Android MDC in questo codelab

• Campo di testo
• Pulsante

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

Che cosa ti serve

• Conoscenza di base dello sviluppo di Android
• Android Studio (scaricalo qui se non lo hai già)
• Un emulatore o dispositivo Android (disponibile tramite Android Studio)
• Il codice di esempio (vedi il passaggio successivo)

Come giudichi il tuo livello di esperienza nella creazione di app Android?

Principiante Intermedio Esperto

Avviare 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 Procedura guidata di configurazione di Android Studio con i valori predefiniti. Il passaggio può richiedere diversi minuti per scaricare e installare i file necessari. Lasciali in esecuzione in background mentre esegui la sezione successiva.

Scarica l'app del codelab per iniziare

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 i comandi seguenti:

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. Una volta terminata la configurazione guidata e mostrata 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 sul tuo computer santo) per aprire il progetto di spedizione.
2. Aspetta un momento che 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 causare alcuni errori di generazione perché non disponi dell'SDK Android o di strumenti di sviluppo come quello mostrato di seguito. Segui le istruzioni in Android Studio per installarle/aggiornarle e sincronizzare il tuo progetto.

Aggiungi le dipendenze del progetto

Il progetto richiede una dipendenza dalla libreria di assistenza Android MDC. Il codice di esempio che hai scaricato deve avere già questa dipendenza, ma è consigliabile farlo seguendo questi passaggi.

1. Passa al file build.gradle del modulo app e assicurati che il blocco dependencies includa una dipendenza su MDC 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'
}

Esegui l'app iniziale

Assicurati che la configurazione della build a sinistra del pulsante Esegui/Riproduci sia app. Premi il pulsante verde Esegui/Riproduci per creare ed eseguire l'app. Se nella finestra Seleziona target di deployment è già presente un dispositivo Android, vai al passaggio 8. In caso contrario, fai clic su Crea nuovo dispositivo virtuale. Nella schermata Seleziona hardware, seleziona un dispositivo telefonico, ad esempio Pixel 2, quindi fai clic su Avanti. Nella schermata System System (Immagine di sistema), seleziona una versione recente di Android, preferibilmente il livello API più alto. Se non è installato, fai clic sul link Scarica visualizzato e completa il download. Tocca Avanti. Nella schermata Android Virtual Device (AVD), lascia le impostazioni invariate e fai clic su Fine. Seleziona un dispositivo Android dalla finestra di dialogo del target di deployment. Fai clic su OK. Android Studio crea l'app, ne esegue il deployment e la apre automaticamente sul dispositivo di destinazione.

Se non hai potuto aggiungere la dipendenza o eseguire correttamente l'app, interrompi e risolvi i problemi relativi all'ambiente per sviluppatori.

Se viene visualizzato un errore INSTALL_FAILED_INVALID_APK durante la creazione, prova a eseguire un comando "Build' -> "Clean Project' in Android Studio.

Operazione riuscita. Il codice di avvio della 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. Abbiamo fornito un semplice framework di navigazione Fragment nel nostro codice campione 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. Deve contenere:

Nota: per ulteriori informazioni sulla navigazione, sulla creazione e la gestione dei percorsi di navigazione utilizzando Android Studio, consulta l'esercizio Kotlin Android Fundamentals 03.2: Definisce i percorsi di navigazione

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()
   }
}

Questa attività mostra il file di layout R.layout.shr_main_activity, definito in shr_main_activity.xml.

Puoi vedere che in onCreate(), MainActivity.kt viene avviata una transazione di 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 altro frammento.

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

Nota: se vedi un'anteprima dell'applicazione invece di un file XML quando apri shr_main_activity.xml, passa dalla scheda "Struttura" scheda alla scheda "Testoin basso a sinistra della scheda. 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 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 mostra in onCreateView().

Ora diamo un'occhiata al file di layout shr_login_fragment.xml per vedere come viene visualizzata 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 una <LinearLayout> con un <ImageView> in alto, che rappresenta il logo di Santuario.

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

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

Per iniziare, aggiungeremo due campi di testo alla nostra pagina di accesso in modo che gli utenti possano inserire nome utente e password. Useremo il componente Campo di testo MDC, che include funzionalità integrata che mostra un'etichetta mobile e messaggi di errore.

I campi di testo di Material Design sono stati notevolmente migliorati per fornire più opzioni di personalizzazione a supporto del tuo brand, con miglioramenti supportati da una ricerca approfondita sull'esperienza utente (UX) che migliora la usabilità e la grafica.

Scopri di più sui nuovi campi di testo nel loro articolo delle Linee guida sui materiali.

Aggiungere il file XML

In shr_login_fragment.xml, aggiungi due elementi TextInputLayout con un bambino 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 costituito 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.

stringhe.xml

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

Aggiungi convalida input

I componenti TextInputLayout offrono una funzionalità di feedback di errore integrata.

Per mostrare un feedback di errore, apporta le seguenti modifiche a shr_login_fragment.xml:

• Imposta l'attributo app:errorEnabled su true nell'elemento PasswordTextInputLayout. In questo modo verrà aggiunta una spaziatura interna aggiuntiva 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 le modifiche, i campi di testo in 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"!

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

Le funzionalità del campo di testo MDC includono:

• Visualizzazione del feedback sugli errori integrato
• Supporto dell'attivazione/disattivazione della visibilità delle password tramite app:passwordToggleEnabled
• Offre funzionalità di testo di supporto integrata tramite app:helperText
• Visualizzazione del numero totale e massimo di caratteri da app:counterEnabled e app:counterMaxLength

Quindi, aggiungeremo due pulsanti alla nostra pagina di accesso: "Annulla" e "Avanti." Useremo il componente Pulsante MDC, dotato dell'iconico effetto ondulato Material Design integrato.

Aggiungere il file XML

In shr_login_fragment.xml, aggiungi un <RelativeLayout> a <LinearLayout>, sotto gli elementi TextInputLayout. Quindi aggiungi 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 con colori elevati. Per questo pulsante Annulla, tuttavia, vogliamo un pulsante inevaso. A tale scopo, applichiamo un attributo style: @style/Widget.MaterialComponents.Button.TextButton.

Ecco fatto. Quando esegui l'app, quando tocchi ciascun pulsante viene visualizzata una serie di inchiostri.

Le funzionalità del pulsante MDC includono:

• Feedback tattile integrato (chiamato MDC Ripple) per impostazione predefinita
• Elevazione predefinita
• Raggio e tratto d'angolo personalizzabili

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

Aggiungi un metodo isPasswordValid privato booleano in LoginFragment.kt sotto onCreateView(), con logica per determinare se la password è valida o meno. Ai fini di questa demo, faremo in modo che la password contenga 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"Next" (Avanti) che imposta e cancella l'errore in base al metodo isPasswordValid() che abbiamo appena creato. In onCreateView(), questo listener di clic deve essere posizionato tra la linea di gonfiaggio e la riga return view.

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

Il metodo onCreateView() ora dovrebbe essere 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 Android Studio rileva errori Impossibile risolvere il simbolo durante la scrittura del 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 ha esito positivo. Il codice di clickListener dovrebbe essere simile al seguente:

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 caso else del listener di clic. Questa riga chiama il metodo navigateTo() da MainActivity per passare a un nuovo frammento: ProductGridFragment. Al momento 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 barra delle applicazioni, in modo che l'utente non possa tornare alla schermata di accesso utilizzando la sua chiave indietro.

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

Obiettivo raggiunto. Questa schermata sarà il punto di partenza del nostro prossimo codelab su cui lavorerai in MDC-102.

Utilizzando il markup XML di base e circa 30 righe di Kotlin, la libreria Material Components per Android ti ha aiutato a creare una bellissima pagina di accesso conforme alle linee guida di Material Design, oltre a presentare un comportamento coerente su tutti i dispositivi.

L'app MDC 101 completata è disponibile scaricando il codelab completato oppure consultando il sito 101-complete con Git: git checkout 101-complete.

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

Passaggi successivi

Il campo di testo e il pulsante sono due componenti principali della libreria Android di MDC, ma ce ne sono molti altri! Puoi esplorare gli altri componenti in Android MDC. In alternativa, vai alla pagina MDC 102: Material Design Structured and Layout per ulteriori informazioni sulla barra dell'app, sulla visualizzazione delle schede e sul layout della griglia in alto. Grazie per aver provato i componenti materiali. Ci auguriamo che questo codelab sia stato di tuo gradimento.

Sono riuscito a completare questo codelab con un tempo e con un impegno ragionevoli

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

Vorrei continuare a utilizzare i componenti materiali in futuro

Totalmente d'accordo Totalmente d'accordo Neutro Totalmente in disaccordo Totalmente in disaccordo