MDC-103 Android: Material Design z użyciem kolorów, ruchu i typu (Java)

Komponenty Material Design (MDC) pomagają deweloperom wdrażać Material Design. Firma MDC została stworzona przez zespół inżynierów i projektantów UX w Google. Zawiera ona dziesiątki pięknych i funkcjonalnych elementów interfejsu oraz jest dostępna w aplikacjach na Androida, iOS, internet oraz Flutter. material.io/develop

W ćwiczeniach z programowania dla MDC-101 i MDC-102 komponent Material Design (MDC) został wykorzystany do stworzenia podstawowej aplikacji o nazwie Shrine – aplikacji e-commerce, która sprzedaje odzież i wyposażenie domu. Ta aplikacja składa się z przepływu użytkownika, który zaczyna się od ekranu logowania i przekierowuje użytkownika na ekran główny, na którym wyświetlają się produkty.

Niedawna ekspansja usługi Material Design daje projektantom i deweloperom większą elastyczność w prezentowaniu marki ich produktów. Za pomocą MDC możesz dostosować świątynię i uwzględnić jej unikalny styl.

Co stworzysz

W tym ćwiczeniu będziesz dostosować aplikację Shrine do swoich marek przy użyciu:

• Kolor
• Typografia
• Wysokość n.p.m.
• Układ

To trzeci z czterech ćwiczeń z programowania, które poprowadzą Cię przez proces tworzenia aplikacji e-commerce o nazwie Shrine, która sprzedaje odzież i wyposażenie domu. Powiązane ćwiczenia z programowania znajdziesz na MDC-101: podstawy komponentów MDC MDC-102: struktura i układ Material Design MDC-104: Material Design Advanced Components Do końca MDC 104 utworzysz aplikację, która będzie wyglądać tak:

Komponenty i podsystemy Android MDC używane w tym ćwiczeniu z programowania

• Motywy
• Typografia
• Wysokość n.p.m.

Czego potrzebujesz

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

Jak oceniasz tworzenie aplikacji na Androida?

Początkujący Średnio zaawansowany Zaawansowany

Kontynuujesz z MDC-102?

Jeśli ukończyłeś MDC-102, Twój kod może być gotowy do ćwiczenia. Przejdź do kroku 3: Zmień kolor.

Pobierz aplikację początkujących z programowania

Pobierz aplikację startową

Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-103-starter/java. Pamiętaj, aby przed wykonaniem czynności umieścić w cd katalog.

...lub skopiuj z GitHuba

Aby skopiować to ćwiczenia z programowania na GitHubie, uruchom następujące polecenia:

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

Więcej informacji znajdziesz w artykule Kopiowanie repozytorium z GitHuba

Wczytywanie kodu startowego w Android Studio

1. Gdy kreator konfiguracji zakończy się i pojawi się okno Witamy w Android Studio, kliknij Otwórz istniejący projekt Android Studio. Przejdź do katalogu, w którym jest zainstalowany przykładowy kod, i wybierz java -> Temple(lub wyszukaj na komputerze hasło sanktuarium), aby otworzyć projekt Shrine.
2. Zaczekaj, aż Android Studio skompiluje i zsynchronizuje projekt, na co wskazują wskaźniki aktywności na dole okna Android Studio.
3. W tym momencie Android Studio może wyświetlić błędy kompilacji, ponieważ brakuje w nim pakietu Android SDK lub narzędzi do kompilacji (takich jak ten poniżej). Postępuj zgodnie z instrukcjami w Android Studio, aby zainstalować lub zaktualizować te projekty, a następnie zsynchronizować projekt.

Dodawanie zależności od projektu

Projekt potrzebuje zależności od biblioteki pomocy MDC na Androida. Pobrany przykładowy kod powinien już być widoczny na liście, ale zalecamy wykonanie tych czynności, aby się upewnić.

1. Przejdź do pliku build.gradle modułu app i upewnij się, że blok dependencies zawiera zależność w MDC na Androida:

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

2. (Opcjonalnie) W razie potrzeby zmodyfikuj plik build.gradle, dodając 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'
}

Uruchamianie aplikacji startowej

Sprawdź, czy konfiguracja kompilacji po lewej stronie przycisku Uruchom/Odtwórz ma wartość app. Naciśnij zielony przycisk Uruchom/Odtwórz, aby utworzyć i uruchomić aplikację. Jeśli w oknie Select Deployment Target (Wybierz cel wdrożenia) masz już dostępne 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, na przykład Pixel 2, i kliknij Dalej. Na ekranie Obraz systemu wybierz najnowszą wersję Androida, najlepiej na najwyższym poziomie interfejsu API. Jeśli nie jest zainstalowany, kliknij widoczny link Pobierz, aby go pobrać. Kliknij Dalej. Na ekranie Wirtualne urządzenie z Androidem (AVD) pozostaw ustawienia bez zmian i kliknij Zakończ. W oknie celu 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 możesz dodać zależności lub uruchomić aplikacji, zatrzymaj i rozwiąż problemy ze środowiskiem programisty.

Jeśli podczas tworzenia wystąpi błąd INSTALL_FAILED_INVALID_APK, spróbuj wykonać czynności „Build” (Publikuj) -> Clean Project (nr projektu) w Android Studio.

Gotowe. W urządzeniu lub emulatorze powinna się wyświetlić strona logowania Shrine&#39. Po naciśnięciu przycisku Dalej zostanie wyświetlona strona główna sanktuarium z paskiem aplikacji u góry i siatką zdjęć produktów poniżej.

Zmień górny pasek aplikacji na zgodny z marką marki, zmieniając jej kolor, wysokość i typografię.

Ten motyw kolorów został stworzony przez projektanta w kolorach niestandardowych (widocznych na ilustracji poniżej). Zawiera on kolory, które zostały wybrane z marki marki Shrine i zastosowane do edytora motywów Material Design, który rozszerzył je, tworząc pełniejszą paletę. (Te kolory nie pochodzą z palet kolorów 2014).

Edytor Material Design pozwala podzielić je na odcienie oznaczone numerami, m.in. od 50, 100, 200 itd. do 900 kolorów. Sanktuarium używa tylko odcieni 50, 100 i 300 z różowego próbki oraz 900 od brązowego.

Zmień kolor górnego paska aplikacji, by odzwierciedlić ten schemat kolorów.

Ustawianie atrybutów ColorPrimaryDark i colorAccent

W colors.xml zmień te wiersze. Atrybut colorAccent steruje m.in. kolorem górnego paska aplikacji, a atrybut colorPrimaryDark – kolorem paska stanu.

colors.xml

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

Aby używać ciemnych ikon na pasku stanu, dodaj taki motyw do motywu aplikacji Theme.Shrine, sanktuarium:

styles.xml

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

Wartości 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 zasób textColorPrimary do atrybutu #442C2E i zaktualizuj atrybut toolbarIconColor, tak by kierował do koloru textColorPrimary.

Zaktualizuj plik styles.xml, aby ustawić atrybut android:textColorPrimary jako kolor textColorPrimary.

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

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

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

Wartości 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>

Twórz i uruchamiaj. Siatka produktów powinna teraz wyglądać następująco:

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

Zmienianie stylu pól tekstowych

Zmieńmy wpisany tekst na stronie logowania i pokażmy kolory w naszym układzie.

Dodaj ten plik koloru do pliku colors.xml:

colors.xml

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

Dodaj dwa nowe style w 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 w obu komponentach TextInputLayout w języku shr_login_fragment.xml w nowym stylu:

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>

Określanie koloru przycisków

Na koniec należy zmienić kolory przycisków na stronie logowania. Dodaj te style do urządzenia 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>

Styl Widget.Shrine.Button jest rozszerzany z domyślnego stylu MaterialButton i zmienia kolor tekstu oraz odcień przycisku. Widget.Shrine.Button.TextButton jest rozszerzana z domyślnego stylu tekstuMaterialButton i zmienia tylko kolor tekstu.

Ustaw styl Widget.Shrine.Button na przycisku Dalej i 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. Potrzebna będzie mała zmiana w rysowaniu wektorowym (shr_logo.xml). Otwórz plik rysowalny i zmień właściwość android:fillAlpha na 1. Element rysowany 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>

Ustaw atrybut android:tint logo logo <ImageView> na shr_login_fragment.xml na ?android:attr/textColorPrimary:

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

Twórz i uruchamiaj. Twój ekran logowania powinien wyglądać następująco:

Uwagi dotyczące koloru i motywów:

• Możesz dostosować kolor w interfejsie, aby lepiej wyrazić swoją markę.
• Utwórz paletę kolorów w 2 kolorach (podstawowym i dodatkowym), których kolory są jasne i ciemne. Możesz też użyć palet Material Design do wygenerowania palet.
• Nie zapomnij o kolorze typografii.
• Kontrast tekstu na kolor tła powinien być na takim samym poziomie (3:1 przy dużym typie, 4,5:1 przy małym).

Oprócz zmian kolorystycznych Twój projektant podał też konkretną typografię, którą możesz wykorzystać na stronie. Dodajmy ten tekst także do górnego paska aplikacji.

Określanie stylu górnego paska aplikacji

Dostosuj styl tekstu na górnym pasku aplikacji zgodnie ze specyfikacją podaną przez projektanta. Dodaj ten styl wyglądu tekstu do elementu styles.xml i ustaw właściwość titleTextAppearance, by odwoływać 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>

Wartości 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>

Określanie stylu etykiet

Styl kart produktów dostosujemy tak, by wyglądały właściwie i były wyśrodkowane w poziomie karty.

Zmień typografii na etykiecie 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 etykietę <TextView> 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>

Twórz i uruchamiaj. Ekran siatki produktów powinien teraz wyglądać tak:

Zmień typografię ekranu logowania na potrzeby dopasowania.

Zmiana kroju pisma na ekranie logowania

W 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 na &SHTNE" title <TextView> (oraz usuń dostępne 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" />

Twórz i uruchamiaj. Twój ekran logowania powinien wyglądać następująco:

Uwagi dotyczące typografii:

• Gdy wybierasz czcionki tekstowe używane w przypadku tekstu małego i typu treści, wybierz czcionki, które będą wyraźne, a nie w przypadku określonego stylu.
• Czcionkami displayowymi, używanymi w dużych typach i tytułach, należy eksponować lub podkreślić markę.

Teraz, gdy strona jest przygotowana z użyciem określonego koloru i typografii, które pasują do świątyni, przyjrzyjmy się kartom przedstawiającym jej produkty. Obecnie są umieszczone na białej powierzchni, która wyświetla się pod aplikacją. Skoncentruj się na produktach, aby zwrócić na nie uwagę.

Zmienianie wysokości siatki w usługach

Zmienimy wysokość górnego paska aplikacji i zawartość, tak aby treść znajdowała się w arkuszu wyświetlanym nad paskiem aplikacji. Dodaj atrybut app:elevation do AppBarLayout i android:elevation do komponentów XML NestedScrollView w shr_product_grid_fragment.xml:

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>

Zmienianie wysokości karty i koloru

Możesz dostosować wysokość każdej karty, zmieniając wartość app:cardElevation w kolumnie shr_product_card.xml z 2dp na 0dp. Zmień też app:cardBackgroundColor na @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">

Sprawdź to. Dostosowanie wysokości każdej karty na stronie siatki produktów zostało przez Ciebie dostosowane.

Zmienianie wysokości przycisku Dalej

W 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 tworzenia tego kodu w Android Studio wystąpią błędy Nie można rozpoznać symbolu, naciśnij Alt + Enter lub (Opcja + Zwróć na Macu), aby zaimportować brakujące symbole.

Ustawienie android:stateListAnimator w stylu Button powoduje ustawienie przycisku Dalej, tak aby można było korzystać z udostępnionego przez nas animacji.

Twórz i uruchamiaj. Twój ekran logowania powinien wyglądać następująco:

Uwagi o wysokości:

• Wszystkie powierzchnie i komponenty Material Design mają wartości wzniesienia.
• Dzielenie dwóch płaszczyzn przez jedną powierzchnię zaczyna się od krawędzi.
• Różnicę wysokości między powierzchniami można wyrazić, korzystając z przyciemnionego tła, rozjaśnionego tła lub cienia.
• Powierzchnie przed innymi powierzchniami zazwyczaj zawierają większe treści.

Zmień układ tak, aby były widoczne w różnych współczynnikach proporcji i rozmiarów.

Używanie rozłożonego adaptera RecyclerView

W pakiecie staggeredgridlayout wprowadziliśmy nowy adapter RecyclerView, który wyświetla asymetryczny, rozmieszczony układ kart z możliwością przewijania w poziomie. Możesz samodzielnie sprawdzić kod, ale nie omówimy go w tym miejscu.

Aby użyć nowego adaptera, zmień metodę onCreateView() w ProductGridFragment.java. Zastąp blok kodu &"ustaw komentarz RecyclerView:

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));

Aby usunąć dopełnienia z elementu NestedScrollView, musimy też wprowadzić niewielką zmianę w elemencie product_grid_fragment.xml w ten sposób:

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

I na koniec dostosujemy dopełnienie karty w obrębie znaczników RecyclerView przez zmodyfikowanie ProductGridItemDecoration.java. Zmodyfikuj metodę getItemOffsets() elementu ProductGridItemDecoration.java w ten sposób:

ProductGridItemdecorationion.java

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

Twórz i uruchamiaj. Elementy siatki produktów powinny być rozłożone w czasie:

Kolor to skuteczny sposób na wyrażenie swojej marki. Niewielka zmiana koloru może mieć duży wpływ na wrażenia użytkownika. Aby to sprawdzić, zobaczmy, jak wyglądałaby świątynia, gdyby schemat kolorystyczny marki całkowicie się zmienił.

Modyfikowanie stylów i kolorów

W 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>

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

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>

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

colors.xml

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

Następnie ustaw atrybut android:theme naszego paska narzędzi jako odsyłający do bieżącego motywu za pomocą atrybutu "?theme" zamiast zakodować go na stałe:

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 podpowiedzi w polu tekstowym na ekranie logowania. Dodaj atrybut android:textColorHint do pól tekstowych i styl:

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>

Twórz i uruchamiaj. Nowy motyw powinien być już dostępny do podglądu.

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

Udało Ci się utworzyć aplikację, która wygląda podobnie do specyfikacji projektu od Twojego projektanta.

Ukończoną aplikację MDC 103 możesz pobrać, pobierając zakończone ćwiczenia z programowania lub oglądając kompletną wersję ćwiczenia z git: git checkout 103-complete.

Możesz przetestować swoją wersję aplikacji w porównaniu z jej pełną wersją.

Dalsze kroki

Używasz tych komponentów MDC: motywu, typografii i wzniesienia. Jeszcze więcej znajdziesz w komponentach MDC-Android Catalog.

Co zrobić, jeśli planowany projekt aplikacji zawiera elementy, które nie zawierają komponentów w bibliotece MDC? W sekcji MDC-104: Material Design Advanced Components (Omówienie komponentu Material Design) nauczysz się tworzyć komponenty niestandardowe za pomocą biblioteki MDC, aby uzyskać określony wygląd.

Ukończenie ćwiczeń z programowania było sporą ilością czasu i wysiłku.

Całkowicie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Całkowicie się nie zgadzam

Chcę w przyszłości nadal korzystać z Komponentów Material Design

Całkowicie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Całkowicie się nie zgadzam