MDC-103 Android: temi dei materiali con colore, movimento e tipo (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

Nei codelab MDC-101 e MDC-102, hai utilizzato Material Components (MDC) per creare le basi di un'app chiamata Shrine, un'app di e-commerce che vende abbigliamento e prodotti per la casa. Questa app contiene una procedura che inizia con una schermata di accesso e porta l'utente a una schermata Home che mostra i prodotti.

La recente espansione di Material Design offre a designer e sviluppatori una maggiore flessibilità per esprimere il brand del prodotto. Ora puoi utilizzare MDC per personalizzare il santuario e rispecchiare il suo stile unico più che mai.

Cosa imparerai a realizzare

In questo codelab, potrai personalizzare il Santuario per riflettere il suo brand utilizzando:

• Colore
• Tipografia
• Elevation
• Layout

Questo è il terzo di quattro codelab che ti guideranno attraverso lo sviluppo di un'app chiamata Santuario, un'app di e-commerce che vende abbigliamento e prodotti per la casa. I codelab correlati sono disponibili all'indirizzo MDC-101: Nozioni di base sui componenti materiali MDC-102: Struttura e layout di Material Design MDC-104: componenti avanzati di Material Design Entro la fine del MDC 104, creerai un'app simile alla seguente:

Componenti e sottosistemi Android MDC utilizzati in questo codelab

• Temi
• Tipografia
• Elevation

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-102?

Se hai completato MDC-102, il codice deve essere pronto per questo codelab. Vai al passaggio 3: cambia il colore.

Scarica l'app del codelab per iniziare

Scarica l'app iniziale

L'app iniziale si trova nella directory material-components-android-codelabs-103-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 103-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 la pagina di accesso di Santuario in esecuzione sul tuo dispositivo o emulatore. Quando premi Avanti, viene visualizzata la home page del santuario, con una barra delle app nella parte superiore e una griglia di immagini del prodotto.

Rendiamo la barra superiore dell'app in linea con il brand santuario cambiando colore, altitudine e tipografia.

Questo tema a colori è stato creato da un designer con colori personalizzati (mostrati nell'immagine di seguito). Contiene i colori selezionati dal brand di Santuario e applicati all'editor di temi, che li ha espansi per creare una tavolozza più completa. Questi colori non rientrano nelle tavolozze dei colori del materiale 2014.

L'editor del tema del materiale li ha organizzati in tonalità etichettate numericamente, incluse le etichette 50, 100, 200, ... e 900 di ogni colore. Santuario usa solo le tonalità 50, 100 e 300 del campione rosa e il 900 del campione marrone.

Cambiamo il colore della barra superiore dell'app in base a quella combinazione di colori.

Impostare colorPrimaryDark e colorAccent

Modifica le seguenti righe in colors.xml. L'attributo colorAccent controlla, tra le altre cose, il colore della barra superiore dell'app, mentre l'attributo colorPrimaryDark controlla il colore della barra di stato.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

Per utilizzare le icone scure nella barra di stato, aggiungi quanto segue al tema dell'app Theme.Shrine, di Santuario:

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

colors.xml e styles.xml dovrebbero avere il seguente aspetto:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

In colors.xml, aggiungi una nuova risorsa colore textColorPrimary impostata su #442C2E e aggiorna l'attributo toolbarIconColor in modo che faccia riferimento al colore textColorPrimary.

Aggiorna il file styles.xml per impostare l'attributo android:textColorPrimary sul colore textColorPrimary.

Se imposti android:textColorPrimary in Theme.Shrine, il testo verrà applicato a tutti gli elementi, inclusa la barra superiore dell'app e le icone nella barra superiore dell'app.

Un'altra cosa: imposta l'attributo android:theme nello stile Widget.Shrine.Toolbar su Theme.Shrine.

Se imposti android:textColorPrimary in Theme.Shrine, il testo verrà applicato a tutti gli elementi, incluse la barra superiore dell'app e le icone nella barra superiore dell'app.

colors.xml e styles.xml dovrebbero avere il seguente aspetto:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Crea ed esegui. La griglia dei prodotti dovrebbe avere il seguente aspetto:

Cambiamo lo stile della schermata di accesso in base alla nostra combinazione di colori.

Definizione dei campi di testo

Cambiamo gli input di testo nella pagina di accesso per delinearli e utilizzare i colori migliori per il layout.

Aggiungi la seguente risorsa colore al tuo file colors.xml:

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

Aggiungi due nuovi stili in styles.xml:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Infine, imposta l'attributo di stile su entrambi i componenti XML TextInputLayout in shr_login_fragment.xml sul nuovo stile:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   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>

Definizione dei colori dei pulsanti

Infine, applica uno stile ai colori dei pulsanti nella pagina di accesso. Aggiungi i seguenti stili a styles.xml:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Lo stile di Widget.Shrine.Button si estende dallo stile predefinito di MaterialButton e modifica il colore del testo e la tinta di sfondo del pulsante. Widget.Shrine.Button.TextButton si estende dallo stile testo MaterialButton predefinito e cambia solo il colore del testo.

Imposta lo stile Widget.Shrine.Button sul pulsante Avanti e lo stile Widget.Shrine.Button.TextButton sul pulsante Annulla, come indicato di seguito:

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"
       style="@style/Widget.Shrine.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.Shrine.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>

Aggiorna il colore del logo del santuario nella pagina di accesso. Sarà richiesta una piccola modifica al disegno vettoriali shr_logo.xml. Apri il file che è possibile disegnare e imposta la proprietà android:fillAlpha su 1. L'elemento dovrebbe essere simile al seguente:

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

Imposta l'attributo android:tint sul logo <ImageView> in shr_login_fragment.xml su ?android:attr/textColorPrimary, come segue:

shr_login_fragment.xml

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

Crea ed esegui. La schermata di accesso ora dovrebbe essere simile a questa:

Note su colori e temi:

• Puoi personalizzare il colore nell'interfaccia utente per esprimere meglio il tuo brand.
• Crea una tavolozza dei colori a partire da due colori (i colori primari e secondari), con le varianti di colore chiaro e scuro di tali colori. In alternativa, utilizza lo strumento tavolozza di Material Design per generare le tavolozze.
• Non dimenticare il colore della tua tipografia.
• Assicurati che il contrasto del colore da testo a sfondo sia in un rapporto accessibile (3:1 per i formati di grandi dimensioni, 4,5:1 per i piccoli).

Oltre alle variazioni di colore, il designer ti ha anche fornito una tipografia specifica da utilizzare sul sito. Aggiungilo anche alla barra delle app in alto.

Stile della barra delle app in alto

Applica stili all'aspetto del testo della barra superiore dell'app in base alle specifiche fornite dal tuo designer. Aggiungi il seguente stile di aspetto del testo a styles.xml e imposta la proprietà titleTextAppearance in modo che faccia riferimento a questo stile nel tuo stile Widget.Shrine.Toolbar.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

colors.xml e styles.xml dovrebbero avere il seguente aspetto:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>


   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

Applicare uno stile alle etichette

Lo stile delle etichette delle schede di prodotto verrà definito in modo da utilizzare l'aspetto testo corretto e centrato orizzontalmente all'interno della scheda.

Aggiorna l'etichetta sulla tua etichetta del titolo da textAppearanceHeadline6 a textAppearanceSubtitle2 come segue:

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

Per centrare le etichette delle immagini, modifica l'etichetta <TextView> in shr_product_card.xml per impostare l'attributo android:textAlignment="center":

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

Crea ed esegui. La schermata della griglia dei prodotti dovrebbe avere il seguente aspetto:

Cambiamo la tipografia della schermata di accesso in modo che corrisponda.

Cambiare il tipo di carattere della schermata di accesso

In styles.xml, aggiungi il seguente stile:

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

In shr_login_fragment.xml, imposta il nuovo stile sull'attributo <TextView> del titolo "SHRINE" (ed elimina gli attributi textAllCaps e textSize presenti):

shr_login_fragment.xml

<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:textAppearance="@style/TextAppearance.Shrine.Title" />

Crea ed esegui. La schermata di accesso ora dovrebbe essere simile a questa:

Note sulla tipografia:

• Quando scegli i caratteri di testo, utilizzati per caratteri di piccole dimensioni e corpo, scegli caratteri chiari e non specifici.
• I caratteri display, utilizzati per grandi titoli e titoli, devono essere utilizzati per esprimere o mettere in evidenza il brand.

Ora che hai applicato allo stile la pagina con il colore e la tipografia specifici che corrispondono a Santuario, diamo un'occhiata alle schede che mostrano i prodotti del Santuario. Al momento sono posizionati su una superficie bianca sotto la navigazione dell'app. Diamo più risalto ai prodotti per attirare la loro attenzione.

Modificare l'elevazione della griglia di prodotto

Puoi modificare l'elevazione della barra superiore dell'app e dei contenuti in modo che i contenuti si trovino su un foglio mobile sopra la barra superiore dell'app. Aggiungi gli attributi app:elevation all'attributo AppBarLayout e l'attributo android:elevation ai componenti XML di NestedScrollView in shr_product_grid_fragment.xml come segue:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<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:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.appcompat.app.AlertController.RecycleListView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Modificare l'elevazione (e il colore) della scheda

Puoi regolare l'elevazione di ogni scheda modificando il valore di app:cardElevation in shr_product_card.xml da 2dp a 0dp. Cambia anche il campo app:cardBackgroundColor in @android:color/transparent.

shr_product_card.xml

<com.google.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

Sei curioso? Hai modificato l'elevazione di ogni scheda nella pagina della griglia del prodotto.

Modificare l'elevazione del pulsante Avanti

In styles.xml, aggiungi la seguente proprietà allo stile Widget.Shrine.Button:

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

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.

L'impostazione di android:stateListAnimator nello stile di Button imposta il pulsante Avanti per utilizzare l'animazione che abbiamo fornito.

Crea ed esegui. La schermata di accesso ora dovrebbe essere simile a questa:

Note sull'elevazione:

• Tutte le superfici e i componenti di Material Design hanno valori di altitudine.
• La divisione tra il punto in cui termina una superficie e l'altra è delimitata dai bordi della superficie.
• La differenza di altitudine tra le superfici può essere espressa utilizzando sfondi oscurati, sfondi più chiari o ombre.
• In genere, le superfici davanti ad altre piattaforme includono contenuti più importanti.

Modifica il layout per mostrare le schede con proporzioni e dimensioni diverse, in modo che ciascuna abbia un aspetto unico.

Usa un adattatore scaglionato RecyclerView

Nel pacchetto staggeredgridlayout è stato fornito un nuovo adattatore RecyclerView che mostra un layout della scheda scaglionato, asimmetrico, destinato a scorrere in orizzontale. Puoi analizzare il codice in autonomia, ma non ci occuperemo di come verrà implementato qui.

Per utilizzare questo nuovo adattatore, modifica il tuo metodo onCreateView() in ProductGridFragment.java. Sostituisci il blocco di codice dopo "imposta il commento di RecyclerView" con quanto segue:

ProductGridFragment.java

// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.HORIZONTAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
   @Override
   public int getSpanSize(int position) {
       return position % 3 == 2 ? 2 : 1;
   }
});
recyclerView.setLayoutManager(gridLayoutManager);
StaggeredProductCardRecyclerViewAdapter adapter = new StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

Dovremo anche apportare una piccola modifica al nostro product_grid_fragment.xml per rimuovere le spaziatura interna dal NestedScrollView, come indicato di seguito:

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"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

Infine, modificheremo anche la spaziatura interna delle carte all'interno di RecyclerView modificando ProductGridItemDecoration.java. Modifica il metodo getItemOffsets() di ProductGridItemDecoration.java come segue:

ProductGridItemDecoration.java

@Override
public void getItemOffsets(Rect outRect, View view,
                          RecyclerView parent, RecyclerView.State state) {
   outRect.left = smallPadding;
   outRect.right = largePadding;
}

Crea ed esegui. Gli elementi della griglia del prodotto ora devono essere scaglionati:

Il colore è un modo potente per esprimere il tuo brand e un piccolo cambiamento di colore può avere un grande impatto sull'esperienza utente. Per provarlo, vediamo come apparirebbe il Santuario se la combinazione di colori del brand fosse completamente diversa.

Modificare stili e colori

In styles.xml, aggiungi il seguente nuovo tema:

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

Nella AndroidManifest.xml puoi utilizzare questo nuovo tema nella tua applicazione:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
   android:name="com.google.codelabs.mdc.java.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

Modifica il colore dell'icona della barra degli strumenti in colors.xml come mostrato di seguito:

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

Poi, imposta l'attributo android:theme del nostro stile della barra degli strumenti in modo che faccia riferimento al tema corrente utilizzando l'attributo "themet??meme" anziché il hardcoded:

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

Quindi, illumina il colore del testo del suggerimento nella schermata di accesso dei campi di testo. Aggiungi l'attributo android:textColorHint ai campi di testo style:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

Crea ed esegui. A questo punto dovresti vedere il nuovo tema in anteprima.

Ripristina il codice modificato in questa sezione prima di passare a MDC-104.

A questo punto hai creato un'app che assomiglia alle specifiche di progettazione del tuo designer.

L'app MDC 103 completata è disponibile scaricando il codelab completato oppure controllando la versione completata di questo codelab con git: git checkout 103-complete.

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

Passaggi successivi

Hai utilizzato questi componenti MDC: tema, tipografia e altitudine. Puoi esplorare ancora più componenti nel catalogo MDC-Android dei dispositivi Android MDC.

Cosa succede se il design pianificato dell'app contiene elementi che non hanno componenti nella libreria MDC? In MDC-104: Material Design Advanced Components, illustreremo come creare componenti personalizzati utilizzando la libreria MDC per ottenere un aspetto specifico.

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