MDC-103 Android: dopasowywanie motywu z kolorem, wysokością i typem (Kotlin)

1. Wprowadzenie

Komponenty Material (MDC) pomagają deweloperom wdrażać Material Design. MDC zostało stworzone przez zespół inżynierów i projektantów UX w Google. Zawiera dziesiątki atrakcyjnych i funkcjonalnych komponentów interfejsu, które są dostępne na platformach Android, iOS, internetowej i Flutter.material.io/develop

W warsztatach MDC-101 i MDC-102 używasz komponentów Material Design (MDC) do tworzenia podstaw aplikacji Shrine, czyli aplikacji e-commerce do sprzedaży odzieży i artykułów gospodarstwa domowego. Aplikacja zawiera ścieżkę użytkownika, która zaczyna się od ekranu logowania i prowadzi do ekranu głównego z wyświetlonymi produktami.

Niedawne rozszerzenie Material Design zapewnia projektantom i programistom większą elastyczność w zakresie wyrażania marki produktu. Możesz teraz używać MDC do dostosowywania aplikacji Shrine i odzwierciedlania jej unikalnego stylu.

Co utworzysz

W tym ćwiczeniu dostosujesz aplikację Shrine do swojej marki, używając:

• Kolor
• Typografia
• Wysokość
• Układ

To trzecie z 4 laboratoriów, które przeprowadzą Cię przez proces tworzenia aplikacji o nazwie Shrine, czyli aplikacji e-commerce do sprzedaży odzieży i artykułów gospodarstwa domowego.Powiązane laboratoria znajdziesz tutaj: MDC-101: Material Components (MDC) Basics MDC-102. Struktura i układ Material Design MDC-104. Zaawansowane komponenty Material Design Po ukończeniu MDC 104 utworzysz aplikację, która będzie wyglądać tak:

Komponenty i podsystemy MDC Android użyte w tym ćwiczeniu:

• Motywy
• Typografia
• Wysokość

Czego potrzebujesz

• Podstawowa wiedza na temat programowania aplikacji na Androida
• Android Studio (jeśli nie masz jeszcze tego środowiska, pobierz je tutaj).
• emulator lub urządzenie z Androidem (dostępne w Androidzie Studio);
• Przykładowy kod (patrz następny krok)

Jak oceniasz swoje doświadczenie w tworzeniu aplikacji na Androida?

Początkujący Średnio zaawansowany Zaawansowany

2. Konfigurowanie środowiska programistycznego

Kontynuujesz naukę z MDC-102?

Jeśli udało Ci się ukończyć MDC-102, kod powinien być gotowy do użycia w tym ćwiczeniu. Przejdź do kroku 3: Zmień kolor.

Pobierz aplikację Codelabs

Pobierz aplikację startową

Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-103-starter/kotlin. Zanim zaczniesz, cd do tego katalogu.

...lub sklonuj go z GitHub

Aby skopiować ten codelab z GitHuba, uruchom te polecenia:

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

Więcej informacji: Klonowanie repozytorium z GitHub

Wczytaj kod startowy w Android Studio

1. Gdy kreator konfiguracji zakończy działanie i wyświetli się okno Witamy w Android Studio, kliknij Otwórz istniejący projekt Android Studio. Przejdź do katalogu, w którym został zainstalowany przykładowy kod, i wybierz kotlin -> shrine (lub wyszukaj na komputerze shrine), aby otworzyć projekt Shipping.
2. Poczekaj chwilę, aż Android Studio utworzy i zsynchronizuje projekt. Wskaźniki aktywności u dołu okna Android Studio będą pokazywać postęp.
3. W tym momencie Android Studio może zgłosić błędy kompilacji, ponieważ brakuje Ci pakietu SDK Androida lub narzędzi do kompilacji, np. takich jak te pokazane poniżej. Postępuj zgodnie z instrukcjami w Android Studio, aby zainstalować lub zaktualizować te komponenty i zsynchronizować projekt.

Dodawanie zależności projektu

Projekt musi mieć zależność od biblioteki pomocy MDC na Androida. Pobrany przykładowy kod powinien już zawierać tę zależność, ale warto wykonać poniższe czynności, aby się upewnić.

1. Otwórz plik build.gradle modułu app i upewnij się, że blok dependencies zawiera zależność od MDC Android:

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

2. (Opcjonalnie) W razie potrzeby edytuj plik build.gradle, aby dodać te zależności, i zsynchronizuj projekt.

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'
}

Uruchom aplikację startową

Sprawdź, czy konfiguracja kompilacji po lewej stronie przycisku Uruchom / Odtwórz to app. Naciśnij zielony przycisk Uruchom / Odtwórz, aby skompilować i uruchomić aplikację. Jeśli w oknie Select Deployment Target (Wybierz miejsce docelowe wdrożenia) na liście dostępnych urządzeń widzisz już urządzenie z Androidem, przejdź do kroku 8. W przeciwnym razie kliknij Utwórz nowe urządzenie wirtualne. Na ekranie Wybierz sprzęt wybierz telefon, np. Pixel 2, a potem kliknij Dalej. Na ekranie Obraz systemu wybierz ostatnią wersję Androida, najlepiej z najwyższym poziomem interfejsu API. Jeśli nie jest zainstalowana, kliknij wyświetlony link Pobierz i pobierz aplikację. Kliknij Dalej. Na ekranie Android Virtual Device (AVD) (Wirtualne urządzenie z Androidem) pozostaw ustawienia bez zmian i kliknij Finish (Zakończ). W oknie docelowym wdrożenia wybierz urządzenie z Androidem. Kliknij OK. Android Studio skompiluje aplikację, wdroży ją i automatycznie otworzy na urządzeniu docelowym.

Jeśli nie udało Ci się dodać zależności lub uruchomić aplikacji, zatrzymaj się i rozwiąż problemy ze środowiskiem deweloperskim.

Jeśli podczas kompilacji pojawi się błąd INSTALL_FAILED_INVALID_APK, w Android Studio wybierz kolejno „Build” (Kompilacja) i „Clean Project” (Wyczyść projekt).

Gotowe! Na urządzeniu lub emulatorze powinna być widoczna strona logowania Shrine. Po naciśnięciu przycisku Dalej pojawi się strona główna Shrine z paskiem aplikacji u góry i siatką obrazów produktów poniżej.

Sprawimy, że górny pasek aplikacji będzie pasował do marki Shrine, zmieniając jego kolor, wysokość i typografię.

3. Zmień kolor

Ten motyw kolorystyczny został utworzony przez projektanta z użyciem spersonalizowanych kolorów (widocznych na obrazie poniżej). Zawiera kolory wybrane z marki Shrine i zastosowane w Material Theme Editor, który rozszerzył je, aby utworzyć pełniejszą paletę. (Te kolory nie pochodzą z palet kolorów Material z 2014 roku).

Edytor motywów Material uporządkował je w odcienie oznaczone numerami, w tym etykietami 50, 100, 200 … do 900 dla każdego koloru. Shrine używa tylko odcieni 50, 100 i 300 z różowej palety oraz odcienia 900 z brązowej palety.

Zmieńmy kolor górnego paska aplikacji, aby odzwierciedlał ten schemat kolorów.

Ustawianie kolorów colorPrimaryDark i colorAccent

W colors.xml zmodyfikuj te wiersze: Atrybut colorAccent określa m.in. kolor górnego paska aplikacji, a atrybut colorPrimaryDark określa kolor paska stanu.

colors.xml

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

Aby używać ciemnych ikon na pasku stanu, dodaj ten kod do Theme.Shrine motywu aplikacji Shrine:

styles.xml

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

Wskazówka: musisz zaimportować przestrzeń nazw narzędzi w tagu <resource>, jak pokazano poniżej:

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

Pliki colors.xml i styles.xml powinny wyglądać tak:

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>

W colors.xml dodaj nowy textColorPrimary zestaw zasobów kolorów do #442C2E i zaktualizuj atrybut toolbarIconColor, aby odwoływał się do textColorPrimary koloru.

Zaktualizuj plik styles.xml, aby ustawić

atrybutu do textColorPrimary koloru, który właśnie zdefiniowaliśmy.

Jeszcze jedno: ustaw atrybut android:theme w stylu Widget.Shrine.Toolbar na Theme.Shrine.

Ustawienie android:textColorPrimary w Theme.Shrine spowoduje zastosowanie stylu tekstu we wszystkich elementach, w tym na górnym pasku aplikacji, oraz ikonach na tym pasku.

Pliki colors.xml i styles.xml powinny wyglądać tak:

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>

Skompiluj i uruchom. Siatka produktów powinna teraz wyglądać tak:

Zmieńmy styl ekranu logowania, aby pasował do naszego schematu kolorów.

Stylizowanie pól tekstowych

Zmieńmy pola tekstowe na stronie logowania, aby były obrysowane, i użyjmy lepszych kolorów w układzie.

Dodaj do pliku colors.xml ten zasób koloru:

colors.xml

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

Dodaj 2 nowe style w sekcji 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>

Na koniec ustaw atrybut stylu na obu komponentach XML TextInputLayout w shr_login_fragment.xml na nowy styl:

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>

Dostosowywanie kolorów przycisków

Na koniec dostosuj kolory przycisków na stronie logowania. Dodaj do pliku styles.xml te style:

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>

Styl Widget.Shrine.Button jest rozszerzeniem domyślnego stylu MaterialButton i zmienia kolor tekstu oraz odcień tła przycisku. Widget.Shrine.Button.TextButton rozszerza domyślny styl tekstu MaterialButton i zmienia tylko kolor tekstu.

Ustaw styl Widget.Shrine.Button na przycisku Dalej, a styl Widget.Shrine.Button.TextButton na przycisku Anuluj w ten sposób:

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>

Zaktualizuj kolor logo Shrine na stronie logowania. Wymaga to niewielkiej zmiany w obiekcie rysowalnym wektorowo shr_logo.xml. Otwórz plik obiektu rysowalnego i zmień wartość właściwości android:fillAlpha na 1. Obiekt rysowalny powinien wyglądać tak:

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>

Następnie ustaw atrybut android:tint w logo <ImageView> w shr_login_fragment.xml na ?android:attr/textColorPrimary w ten sposób:

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" />

Skompiluj i uruchom. Ekran logowania powinien teraz wyglądać tak:

Uwagi dotyczące kolorów i motywów:

• Możesz dostosować kolor interfejsu, aby lepiej wyrazić swoją markę.
• Utwórz paletę kolorów, zaczynając od dwóch kolorów (głównego i dodatkowego) oraz ich jasnych i ciemnych odcieni. Możesz też użyć narzędzia do tworzenia palet Material Design.
• Nie zapomnij o kolorze typografii.
• Upewnij się, że kontrast między tekstem a kolorem tła jest na poziomie zapewniającym dostępność (3:1 w przypadku dużych liter, 4,5:1 w przypadku małych).

4. Modyfikowanie typografii i stylów etykiet

Oprócz zmian kolorów projektant podał też konkretną typografię, której należy używać w witrynie. Dodajmy go też do górnego paska aplikacji.

Określanie stylu górnego paska aplikacji

Dostosuj wygląd tekstu na górnym pasku aplikacji do specyfikacji podanej przez projektanta. Dodaj do styles.xml ten styl wyglądu tekstu i ustaw właściwość titleTextAppearance, aby odwoływała się do tego stylu w stylu 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>

Pliki colors.xml i styles.xml powinny wyglądać tak:

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>

Stylizowanie etykiet

Etykiety na karcie produktu zostaną sformatowane tak, aby miały odpowiedni wygląd i były wyśrodkowane w poziomie na karcie.

Zmień typografię etykiety tytułu z textAppearanceHeadline6 na textAppearanceSubtitle2 w ten sposób:

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" />

Aby wyśrodkować etykiety obrazów, zmodyfikuj etykiety <TextView>s w shr_product_card.xml, aby ustawić atrybut 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>

Skompiluj i uruchom. Ekran siatki produktów powinien teraz wyglądać tak:

Zmieńmy typografię ekranu logowania, aby pasowała do reszty.

Zmiana kroju pisma na ekranie logowania

W polu styles.xml dodaj ten styl:

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>

W shr_login_fragment.xml ustaw nowy styl dla tytułu „SHRINE” <TextView> (i usuń atrybuty textAllCaps i textSize):

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" />

Skompiluj i uruchom. Ekran logowania powinien teraz wyglądać tak:

Uwagi dotyczące typografii:

• Wybierając czcionki do tekstu, który będzie wyświetlany w małym rozmiarze, i do tekstu głównego, wybieraj czcionki czytelne, a nie takie, które mają określony styl.
• Czcionki wyświetlane, używane w przypadku dużych liter i tytułów, powinny służyć do wyrażania lub podkreślania marki.

5. Dostosowywanie wysokości

Strona ma już określony styl, kolor i typografię pasujące do motywu Shrine. Przyjrzyjmy się teraz kartom z produktami Shrine. Obecnie są one umieszczane na białej powierzchni pod nawigacją aplikacji. Aby zwrócić uwagę na produkty, bardziej je wyeksponujmy.

Zmiana wysokości siatki produktów

Aby sprawić, że treść będzie wyglądać jak arkusz unoszący się nad górnym paskiem aplikacji, zmień poziomy górnego paska aplikacji. Dodaj atrybut app:elevation do komponentu XML AppBarLayout i atrybut android:elevation do komponentu XML NestedScrollView w shr_product_grid_fragment.xml w ten sposób:

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.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Zmiana wysokości karty (i koloru)

Dostosuj wysokość każdej karty, zmieniając wartość app:cardElevation w shr_product_card.xml z 2dp na 0dp. Zmień też app:cardBackgroundColor na @android:color/transparent.

shr_product_card.xml

<com.google.android.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">

Sprawdź! Dostosowano poziom każdej karty na stronie siatki produktów.

Zmiana wysokości przycisku Dalej

W pliku styles.xml dodaj do stylu Widget.Shrine.Button tę właściwość:

styles.xml

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

Uwaga: jeśli podczas pisania tego kodu Android Studio napotka błędy Cannot resolve symbol, naciśnij Alt + Enter lub Option + Return (na Macu), aby zaimportować brakujące symbole.

Ustawienie android:stateListAnimator w stylu Button powoduje, że przycisk Dalej korzysta z dostarczonego przez nas animatora.

Skompiluj i uruchom. Ekran logowania powinien teraz wyglądać tak:

Uwagi dotyczące wysokości:

• Wszystkie powierzchnie i komponenty Material Design mają wartości wysokości.
• Granica między jedną powierzchnią a drugą jest wyznaczana przez krawędzie powierzchni.
• Różnicę wysokości między powierzchniami można wyrazić za pomocą przyciemnionych lub rozjaśnionych teł albo cieni.
• Platformy znajdujące się przed innymi platformami zwykle zawierają ważniejsze treści.

6. Zmiana układu

Zmieńmy układ, aby karty miały różne proporcje i rozmiary, dzięki czemu każda z nich będzie wyglądać inaczej.

Używanie adaptera RecyclerView z układem kaskadowym

W pakiecie staggeredgridlayout udostępniliśmy nowy RecyclerView adapter, który wyświetla asymetryczny układ kart z przesunięciem, przeznaczony do przewijania w poziomie. Możesz samodzielnie przeanalizować ten kod, ale nie będziemy tutaj omawiać sposobu jego implementacji.

Aby użyć tego nowego adaptera, zmodyfikuj metodę onCreateView() w ProductGridFragment.kt. Zastąp blok kodu po komentarzu „set up the RecyclerView” (skonfiguruj RecyclerView) tym kodem:

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

Musimy też wprowadzić niewielką zmianę w naszym pliku shr_product_grid_fragment.xml, aby usunąć dopełnienie z elementu 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"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

Na koniec dostosujemy też dopełnienie karty w RecyclerView, modyfikując ProductGridItemDecoration.kt. Zmodyfikuj metodę getItemOffsets() klasy ProductGridItemDecoration.kt w ten sposób:

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

Skompiluj i uruchom. Elementy siatki produktów powinny być teraz rozmieszczone naprzemiennie:

7. Wypróbuj inny motyw

Kolor to skuteczny sposób na wyrażenie tożsamości marki, a niewielka zmiana koloru może mieć duży wpływ na wrażenia użytkowników. Aby to sprawdzić, zobaczmy, jak wyglądałaby aplikacja Shrine, gdyby schemat kolorów marki był zupełnie inny.

Modyfikowanie stylów i kolorów

W sekcji styles.xml dodaj ten nowy motyw:

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>

W AndroidManifest.xml użyj tego nowego motywu w aplikacji:

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.kotlin.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>

Zmień kolor ikony paska narzędzi w colors.xml, jak pokazano poniżej:

colors.xml

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

Następnie ustaw atrybut android:theme stylu paska narzędzi, aby odwoływać się do bieżącego motywu za pomocą atrybutu „?theme”, zamiast go na stałe kodować:

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>

Następnie rozjaśnij kolor tekstu podpowiedzi w polach tekstowych na ekranie logowania. Dodaj atrybut android:textColorHint do stylu pól tekstowych:

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>

Skompiluj i uruchom. Nowy motyw powinien być teraz widoczny w podglądzie.

Przed przejściem do MDC-104 cofnij zmiany kodu wprowadzone w tej sekcji.

8. Podsumowanie

Masz już utworzoną aplikację, która jest zgodna ze specyfikacją projektu od projektanta.

Gotowa aplikacja MDC 103 jest dostępna po pobraniu ukończonego ćwiczenia lub po sprawdzeniu ukończonej wersji tego ćwiczenia za pomocą Gita: git checkout 103-complete.

Możesz przetestować swoją wersję aplikacji w porównaniu z jej ukończoną wersją.

Dalsze kroki

Używasz tych komponentów MDC: motyw, typografia i wysokość. Więcej komponentów i podsystemów znajdziesz w [bibliotece MDC Web].

Co zrobić, jeśli planowany projekt aplikacji zawiera elementy, które nie mają komponentów w bibliotece MDC? W module MDC-104: Zaawansowane komponenty Material Design omówimy, jak tworzyć komponenty niestandardowe za pomocą biblioteki MDC, aby uzyskać określony wygląd.

Udało mi się ukończyć to ćwiczenie w rozsądnym czasie i przy rozsądnym nakładzie pracy.

Zdecydowanie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Zdecydowanie się nie zgadzam

Chcę nadal korzystać z komponentów Material

Zdecydowanie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Zdecydowanie się nie zgadzam