1. Zanim zaczniesz
W tym ćwiczeniu zaktualizujesz aplikację startową, czyli kalkulator napiwków, aby korzystać z nowych funkcji Material Design 3, które umożliwiają dynamiczne dostosowywanie interfejsu aplikacji do tapety użytkownika. Poniżej znajdziesz kilka zrzutów ekranu aplikacji z zastosowanym dynamicznym kolorem. Poznasz też dodatkowe scenariusze, które pozwolą Ci kontrolować sposób stosowania kolorów.
Wymagania wstępne
Deweloperzy powinni
- znajomość podstawowych koncepcji motywów w Androidzie;
- umiejętność modyfikowania motywu aplikacji;
Czego się nauczysz
- Jak odróżnić istniejące komponenty Material od motywów Material 3
- Jak zaktualizować motyw do Material 3
- Jak tworzyć motywy za pomocą naszych narzędzi i je stosować
- Jak atrybuty tematu są ze sobą powiązane
Czego potrzebujesz
- komputer z zainstalowanym Androidem Studio,
- Kod aplikacji Tip Time. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Omówienie aplikacji startowej
Aplikacja Tip Time to kalkulator napiwków z opcjami dostosowywania napiwku. Jest to jedna z przykładowych aplikacji z naszego kursu Android Basics in Kotlin.
3. Aktualizowanie zależności Gradle
Zanim zaktualizujemy motyw i zastosujemy dynamiczne kolory, musimy wprowadzić kilka zmian w pliku build.gradle aplikacji.
W sekcji zależności upewnij się, że biblioteka materiałów ma wersję 1.5.0-alpha04 lub nowszą:
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
W sekcji android zmień wartości compileSdkVersion i targetSdkVersion.
do 31 lub nowszej:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
W tych instrukcjach przyjęto, że aplikacja ma stosunkowo nowe zależności. Jeśli aplikacja nie korzysta jeszcze z Material Design lub używa starszej wersji, zapoznaj się z instrukcjami w dokumentacji Wprowadzenie komponentów Material Design na Androida.
W miejscach, w których zostały utworzone motywy, zmień odwołania do Theme.MaterialComponents.* na Theme.Material3.*. Niektóre style nie mają jeszcze nowego stylu w przestrzeni nazw Material3, ale większość komponentów będzie dziedziczyć nowy styl po zaktualizowaniu motywu nadrzędnego do wersji Theme.Material3.*. Poniżej widać, że przyciski mają teraz nowy, zaokrąglony wygląd.
W pliku motywów poniżej zmieniono tylko motyw nadrzędny. Za chwilę całkowicie zastąpimy ten motyw. Niektóre atrybuty koloru zostały wycofane, a niektóre utworzone przez nas style niestandardowe są teraz standardem w Material3, ale chcieliśmy, aby
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryVariant">@color/green_dark</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue</item>
<item name="colorSecondaryVariant">@color/blue_dark</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. Informacje o motywach kolorystycznych i rolach kolorów
System kolorów Material 3 wykorzystuje uporządkowane podejście do stosowania kolorów w interfejsie. Wiele atrybutów z Theme.AppCompat jest nadal używanych. W wersji Theme.MaterialComponents.* dodano jednak więcej atrybutów, a w wersji Theme.Material3.* jeszcze więcej, dlatego ważne jest, aby sprawdzić wszystkie ekrany aplikacji i upewnić się, że z motywu podstawowego nie przenikają żadne niezaimplementowane właściwości.
Informacje o rolach kolorów
W motywie Material 3 jest ponad 20 atrybutów związanych z kolorem. Początkowo może się to wydawać trudne, ale w rzeczywistości istnieje kilka kluczowych kolorów, które w połączeniu z tymi samymi 4–5 rolami kolorów tworzą kolory pochodne.
Te grupy kolorów to:
- Podstawowy, główny kolor aplikacji
- Drugorzędny, kolor drugorzędny aplikacji
- trzeci kolor, który jest dopełnieniem kolorów podstawowego i dodatkowego;
- Błąd, używany w tekstach i oknach dialogowych błędów
- Tło
- Surface, SurfaceVariant, Surface Inverse
Role dla kolorów podstawowego, dodatkowego, trzeciorzędowego i błędu są następujące:
<kolor podstawowy> | Kolor podstawowy |
on<base color> | kolor ikon i tekstu wyświetlanych na kolorze podstawowym; |
<base color>Container | pochodny od koloru podstawowego, używany w przypadku przycisków, okien itp. |
on<base color>Container | kolor ikon i tekstu w kontenerze, |
Na przykład pływający przycisk polecenia ze stylem domyślnym w Material 3 używa koloru podstawowego Primary, więc kolor tła przycisku to primaryContainer, a kolor jego zawartości to onPrimaryContainer.
Podczas ręcznego dostosowywania motywu musisz przynajmniej sprawdzić, czy atrybut on<base color> każdego zmienionego koloru podstawowego jest nadal czytelny.
Najlepszym rozwiązaniem jest dostosowanie wszystkich ról w grupie kolorów w tym samym czasie, aby uniknąć artefaktów od podstawy aż po aplikację.
Kolory tła i powierzchni mają zwykle 2 zastosowania: jako kolor podstawowy i on<base color> dla ikon lub tekstu wyświetlanych na jego tle.
5. Tworzenie motywu Material 3 za pomocą narzędzia Material Theme Builder
Narzędzie Material Theme Builder ułatwia tworzenie niestandardowego schematu kolorów. Możesz użyć wbudowanej funkcji eksportu kodu, aby przejść na system kolorów M3 i korzystać z dynamicznych kolorów. Więcej informacji: material.io/material-theme-builder
Motyw aplikacji Tip Time zawiera kilka stylów komponentów, ale większość z nich to domyślne style w motywach Material 3. Dwa najważniejsze kolory, na których musimy się skupić, to podstawowy i dodatkowy.
Odpowiadają one zielonemu kolorowi podstawowemu (#1B5E20) i niebieskiemu kolorowi dodatkowemu (#0288D1).
Możesz wprowadzić te kolory do narzędzia Material Theme Builder i wyeksportować pełny motyw (zakładając, że link do pełnego omówienia znajduje się w innym miejscu).
Pamiętaj, że wpisane kolory mogą się nieco różnić od tych wygenerowanych przez algorytm, aby zapewnić komplementarność i czytelność.
Poniżej znajduje się podzbiór wartości wygenerowanych po wprowadzeniu spersonalizowanych kolorów.
6. Praca z plikami eksportu z narzędzia Material Theme Builder
Archiwum eksportu zawiera katalogi values i values-night/ z własnymi plikami themes.xml, które odpowiadają jasnemu i ciemnemu motywowi. Wszystkie kolory są zdefiniowane w pliku values/colors.xml.
Pliki można skopiować w takiej postaci, ale musisz zmienić nazwę motywu w pliku AndroidManifest.xml lub w plikach motywu, aby były zgodne. Domyślna nazwa z narzędzi to AppTheme.
Uruchom aplikację ponownie, a będzie wyglądać niemal identycznie. Jedną z najważniejszych zmian jest przełącznik i przycisk opcji, których wybrane stany są teraz kolorowane odcieniami koloru podstawowego, a nie kolorami dodatkowymi. W przypadku większych aplikacji może być konieczne ponowne sprawdzenie niektórych projektów.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. Dodawanie dynamicznych kolorów
Jeśli używasz odpowiedniego motywu Material 3, możesz dynamicznie zmieniać interfejs za pomocą kilku niewielkich dodatków.
Interfejs Dynamic Colors API umożliwia stosowanie dynamicznych kolorów we wszystkich aktywnościach.
w aplikacji, poszczególnych działaniach lub w poszczególnych widokach lub fragmentach. Dla
tej aplikacji, będziemy stosować dynamiczne kolory na całym świecie.
Tworzenie pliku klasy Application
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Musimy odwołać się do tego nowo utworzonego pliku w manifeście Androida:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
W systemach z Androidem 12 lub nowszym tapeta użytkownika (w przypadku domyślnego schematu) jest analizowana w celu wygenerowania kilku palet tonalnych. Wartości z tych palet są używane do tworzenia ThemeOverlay.
Klasa DynamicColors rejestruje ActivityLifecycleCallbacks, który przechwytuje ActivityPreCreated, aby zastosować dynamiczną nakładkę motywu utworzoną przez system lub dostarczoną przez Ciebie.
8. Stosowanie nakładki motywu niestandardowego
Nasze narzędzia mogą eksportować nakładki motywu, ale możesz też tworzyć je ręcznie, jeśli zastępujesz niewielką liczbę atrybutów.
Nakładka motywu jest przeznaczona do używania w połączeniu z innym motywem i zawiera tylko wartości, które zostaną zmienione w motywie podstawowym.
Załóżmy, że z jakiegoś powodu, np. ze względu na branding, potrzebujemy, aby podstawowe odcienie kolorów były odcieniami czerwieni. Możemy to zrobić za pomocą tych plików i atrybutów.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
W przypadku powyższego kodu Android 12 zastosuje dynamiczny jasny motyw i nałoży na niego Twoje zmiany. Możesz też użyć dowolnej prawidłowej nakładki ThemeOverlay jako elementu nadrzędnego, w tym dowolnej z tych opcji:
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Aby użyć tej nakładki motywu zamiast domyślnego motywu Material, zmień wywołanie DynamicColors.applyToActivitiesIfAvailable na:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Dodawanie dynamicznego koloru do atrybutów niestandardowych
Do tej pory zastępowaliśmy właściwości, które już istnieją w motywie Material 3. W przypadku koloru dynamicznego może wystąpić inna sytuacja, w której trzeba przypisać co najmniej 1 atrybut niestandardowy.
Gdy aplikacja włączy dynamiczne kolory, uzyska dostęp do 5 palet tonalnych – 3 palet akcentujących i 2 palet neutralnych o przybliżonych rolach:
system_accent1 | Odcienie koloru podstawowego |
system_accent2 | Drugorzędne odcienie kolorów |
system_accent3 | Odcienie kolorów trzeciorzędowych |
system_neutral1 | Neutralne tła i powierzchnie |
system_neutral2 | Neutralne powierzchnie i kontury |
Każda paleta ma kilka odcieni, od białego
do czerni: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Projektując interfejs z dynamicznymi kolorami, nie myśl o konkretnym kolorze, ale raczej o relacji między odcieniem i luminancją tego komponentu a innymi elementami w systemie projektowania.
Załóżmy, że chcesz, aby ikony były tematyczne przy użyciu pomocniczej palety kolorów akcentujących, i dodałeś atrybut do barwienia ikon z tym wpisem w pliku attrs.xml.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
Nakładka motywu może wyglądać mniej więcej tak:
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
Gdy ponownie zainstalujesz aplikację i zmienisz tapetę, aplikacja wybierze tę drugą paletę.
Te palety są przeznaczone dla Androida 12 (API 31), więc musisz umieścić odpowiednie pliki w folderach z sufiksem -v31, chyba że minimalna wersja pakietu SDK aplikacji jest ustawiona na 31 lub wyższą.
10. Podsumowanie
W ramach tego ćwiczenia z programowania udało Ci się:
- Dodaj zależności, aby uaktualnić motyw do Material 3.
- Poznaj nowe grupy kolorów i role.
- Dowiedz się, jak przejść z motywu statycznego na dynamiczny kolor.
- Dowiedz się, jak używać nakładek motywu i dynamicznych kolorów w przypadku atrybutów motywu niestandardowego.