MDC-104 Android: componenti Material Advanced (Java)

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

Nel codelab MDC-103, hai personalizzato il colore, l'elevazione e la tipografia dei componenti materiali (MDC) per dare uno stile alla tua app.

Un componente del sistema Material Design esegue una serie di attività predefinite e ha alcune caratteristiche specifiche, come un pulsante. Tuttavia, un pulsante non è solo un modo per compiere un'azione: è anche un'espressione visiva di forma, dimensione e colore che comunica all'utente che è interattivo e che succede qualcosa al tocco o al clic.

Le linee guida di Material Design descrivono i componenti di un punto di vista di un designer. Descrivono una vasta gamma di funzioni di base disponibili su più piattaforme, nonché gli elementi anatomici che compongono ogni componente. Ad esempio, uno sfondo contiene un livello posteriore e i suoi contenuti, il livello anteriore e i suoi contenuti, le regole di movimento e le opzioni di visualizzazione. Ognuno di questi componenti può essere personalizzato per le esigenze, i casi d'uso e i contenuti di ogni app. Questi elementi, per la maggior parte, sono visualizzazioni, controlli e funzioni tradizionali dell'SDK della tua piattaforma.

Le linee guida di Material Design assegnano un nome a molti componenti, ma non tutti sono idonei per il codice riutilizzabile. Per questo motivo, non sono presenti in MDC. Puoi creare queste esperienze personalmente per ottenere uno stile personalizzato per la tua app, utilizzando il codice tradizionale.

Cosa imparerai a realizzare

In questo codelab, aggiungerai uno sfondo a Shrine. Filtra i prodotti mostrati nella griglia asimmetrica per categoria. Utilizzerai:

• Shape
• Movimento
• Classi di SDK Android tradizionali

Questo è l'ultimo dei quattro codelab che ti guideranno nella creazione di un'app per un prodotto chiamato Sanctuary. Ti consigliamo di eseguire tutti i codelab in modo che mantengano passo passo le varie attività. I codelab correlati sono disponibili all'indirizzo: MDC-101: Nozioni di base sui componenti materiali MDC-102: Struttura e layout di Material Design. MDC-103: tema dei materiali con colore, forma, altitudine e tipo

Componenti di MDC-Android in questo codelab

• Shape

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

Vuoi continuare da MDC-103?

Se hai completato MDC-103, il codice dovrebbe essere pronto per questo codelab. Vai al passaggio 3.

È tutto da zero?

Scarica l'app del codelab per iniziare

Scarica l'app iniziale

L'app iniziale si trova nella directory material-components-android-codelabs-104-starter/java. Assicurati di cd nella directory prima di iniziare.

...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 104-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 java -> santuario (o cerca sul tuo computer santuario) per aprire il progetto Santuario.
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. Dovresti vedere l'app Santuario in esecuzione sul tuo dispositivo.

Lo sfondo è la superficie posteriore più lontana di un'app e viene visualizzata dietro tutti gli altri contenuti e componenti. È composto da due piattaforme: un livello posteriore (che mostra azioni e filtri) e un livello anteriore (che mostra i contenuti). Puoi utilizzare uno sfondo per visualizzare informazioni e azioni interattive, come i filtri di navigazione o dei contenuti.

Nascondere i contenuti della griglia

In shr_product_grid_fragment.xml, aggiungi l'attributo android:visibility="gone" all'attributo NestedScrollView per rimuovere temporaneamente i contenuti dei prodotti:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Installeremo uno sfondo in questa area geografica. Per evitare di mostrare una divisione tra la barra superiore dell'app e i contenuti del menu visualizzati sullo sfondo, imposteremo lo stesso colore della barra superiore dell'app.

In shr_product_grid_fragment.xml, aggiungi quanto segue come primo elemento nella FrameLayout principale, prima di AppBarLayout:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

In styles.xml, aggiungi quanto segue:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

Ottimo lavoro! Hai aggiunto uno splendido sfondo all'interfaccia utente di Santuario. Poi aggiungeremo un menu.

Aggiungi il menu

Un menu è essenzialmente un elenco di pulsanti di testo. Ne aggiungeremo una qui.

Crea un nuovo layout denominato shr_backdrop.xml nella directory res -> layout e aggiungi quanto segue:

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

Inoltre, aggiungi questo elenco ai LinearLayout che hai appena aggiunto in shr_product_grid_fragment.xml utilizzando un tag <include>:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

Crea ed esegui. La schermata Home dovrebbe avere il seguente aspetto:

Lo sfondo è pronto. Ricapitoliamo i contenuti che abbiamo nascosto in precedenza.

Prima di apportare modifiche a Santuario in questo codelab, i suoi contenuti principali del prodotto si trovavano sulla superficie posteriore più lontana. Grazie all'aggiunta di uno sfondo, questi contenuti vengono messi in maggiore risalto perché davanti a quello sfondo.

Aggiungere un nuovo livello

Dovrebbe essere mostrato di nuovo il livello della griglia del prodotto. Rimuovi l'attributo android:visibility="gone" da NestedScrollView:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Applica lo stile al livello anteriore con una tacca nell'angolo in alto a sinistra. Material Design si riferisce a questo tipo di personalizzazione come forma. Le superfici del materiale possono essere visualizzate in diverse forme. Le forme conferiscono risalto e stile alle superfici e possono essere utilizzate per esprimere il branding. Le forme dei materiali possono avere angoli e bordi curvi o inclinati e qualsiasi numero di lati. Possono essere simmetriche o irregolari.

Aggiungere una forma

Modifica la forma della griglia. Abbiamo fornito uno sfondo personalizzato, ma la forma viene visualizzata correttamente solo su Android Marshmallow e versioni successive. Possiamo impostare lo sfondo di shr_product_grid_background_shape su NestedScrollView solo per Android Marshmallow e versioni successive. Innanzitutto, aggiungi un elemento id all'elemento NestedScrollView per poterlo fare riferimento nel codice come segue:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:id="@+id/product_grid"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Quindi, imposta lo sfondo in modo programmatico in ProductGridFragment.java. Aggiungi la seguente logica per impostare lo sfondo alla fine di onCreateView(), subito prima dell'istruzione di restituzione:

ProductGridFragment.java

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}

Infine, aggiorneremo la risorsa colore productGridBackgroundColor (utilizzata anche dallo sfondo della forma personalizzata) come segue:

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

Crea ed esegui:

Abbiamo conferito al santuario una forma personalizzata sulla sua superficie principale. A causa dell'altezza della superficie, gli utenti possono vedere che c'è qualcosa dietro il livello di bianco anteriore. Aggiungiamo movimento per consentire agli utenti di vedere cosa c'è alla porta: il menu.

Il movimento è un modo per dare vita alla tua app. Il movimento può essere ampio e suggestivo, sottile e minimo o in qualsiasi modo. Il tipo di movimento utilizzato deve essere adatto alla situazione. I movimenti applicati a azioni regolari ripetute dovrebbero essere piccoli e di lieve entità, perciò non richiedono troppo tempo a intervalli regolari. Altre situazioni, ad esempio la prima volta che un utente apre un'app, possono essere più accattivanti e aiutarle a capire come utilizzare l'app.

Aggiungi movimento per mostrare il pulsante Menu

Il movimento è la forma in avanti che si sposta in basso. Abbiamo già fornito un listener di clic per te, che eseguirà l'animazione di traduzione per il foglio in NavigationIconClickListener.java. Possiamo impostare questo listener di clic nel metodo setupToolbar() di ProductGridFragment.java:

ProductGridFragment.java

toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));

Ora il tuo metodo setUpToolbar() dovrebbe essere simile al seguente:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}

Crea ed esegui. Premi il pulsante Menu:

Premi di nuovo l'icona del menu di navigazione per nasconderlo.

Perfezionare il movimento del livello anteriore

Il movimento è un ottimo modo per esprimere il tuo brand. Ora vediamo come si presenta l'animazione utilizzando una curva di sincronizzazione diversa.

Aggiorna il codice in setupToolbar() in ProductGridFragment.java per passare un interpolatore al listener di clic dell'icona di navigazione, come segue:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator()));
}

Si crea un effetto diverso, vero?

L'iconografia brandizzata si estende anche alle icone note. Rendiamo personalizzata l'icona di divulgazione e uniscila al nostro titolo per dare un tocco unico al brand.

Cambiare l'icona del pulsante del menu

Modifica il pulsante del menu per visualizzare un'icona con un design a rombo. Aggiorna la tua barra degli strumenti in shr_product_grid_fragment.xml per utilizzare una nuova icona con brand che abbiamo fornito (shr_branded_menu) e imposta gli attributi app:contentInsetStart e android:padding per adattare meglio la barra degli strumenti alle specifiche del tuo designer:

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

Aggiorna di nuovo il listener di clic in setupToolbar() in ProductGridFragment.java per poter essere aggiunto alla barra degli strumenti quando il menu è aperto e quando è chiuso, come descritto di seguito:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator(),
           getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
           getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}

Crea ed esegui:

Bene! Quando lo sfondo può essere mostrato, viene visualizzata l'icona del menu Con diamante. Quando il menu può essere nascosto, viene visualizzata un'icona di chiusura.

Nel corso di questi quattro codelab, hai imparato a utilizzare i componenti materiali per creare esperienze utente uniche ed eleganti che esprimono la personalità e lo stile di un brand.

L'app MDC 104 completata è disponibile scaricando il codelab completato oppure controllando il formato 104 con git: git checkout 104-complete.

Puoi testare la tua versione dell'app confrontandola con quella del ramo.

Passaggi successivi

Questo codelab, MDC-104, completa questa sequenza di codelab. Puoi esplorare altri componenti di MDC-Android visitando il catalogo di Android.

Per un'ulteriore verifica con questo codelab, modifica l'applicazione Santuario per cambiare le immagini prodotto mostrate quando viene selezionata una categoria dal menu dello sfondo.

Per scoprire come connettere questa app a Firebase per un backend funzionante, consulta il codelab di Android Firebase.

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