1. Zanim zaczniesz
W ramach tego ćwiczenia w Codelabs zaktualizujesz aplikację startową, czyli kalkulator napiwków, aby korzystać z nowych funkcji Material Design 3, które umożliwiają dynamiczne dostosowywanie motywu interfejsu na podstawie tapety użytkownika. Poniżej znajdziesz kilka zrzutów ekranu aplikacji z zastosowanymi dynamicznymi kolorami. Przeanalizujesz również dodatkowe scenariusze, które pozwolą Ci kontrolować sposób stosowania kolorów.
Wymagania wstępne
Programiści powinni
- Zapoznanie się z podstawowymi pojęciami dotyczącymi motywów na Androidzie
- Możliwość zmiany motywu aplikacji
Czego się nauczysz
- Jak odróżnić istniejące komponenty Material Komponenty i motywy Material 3
- Jak zaktualizować motyw do Material 3
- Jak tworzyć motywy przy użyciu naszych narzędzi i je stosować
- Jak są ze sobą powiązane atrybuty motywu
Czego potrzebujesz
- komputer z zainstalowanym Androidem Studio,
- Kod aplikacji Czas na wskazówkę. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Omówienie aplikacji dla początkujących
Aplikacja Czas napiwków to kalkulator napiwków z opcjami dostosowania napiwku. Jest to jedna z przykładowych aplikacji w naszym kursie „Podstawy Androida w Kotlinie”.
3. Aktualizowanie zależności Gradle
Zanim zaktualizujemy rzeczywisty motyw i zastosujemy dynamiczny kolor, w pliku build.gradle musisz wprowadzić kilka zmian w Twojej aplikacji.
W sekcji zależności sprawdź, czy biblioteka materiałów ma wersję 1.5.0-alpha04 lub nowszą:
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
W sekcji dotyczącej Androida zmień atrybuty buildSdkVersion i targetSdkVersion.
do wersji 31 lub nowszej:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
W tych instrukcjach zakładamy, że aplikacja ma stosunkowo aktualne zależności. W przypadku aplikacji, które nie korzystają jeszcze z Material Design lub z mniejszej wersji, zapoznaj się z instrukcjami podanymi w dokumentacji wprowadzającej w artykule Material Design Komponenty na Androida.
Wszędzie, gdzie utworzyłeś swoje motywy, zmień odniesienia z Theme.MaterialComponents.* na Theme.Material3.*. Niektóre style nie mają jeszcze nowego stylu w przestrzeni nazw Material3, ale większość komponentów nadal odziedziczy nowy styl po zaktualizowaniu motywu nadrzędnego do Theme.Material3.*. Widzimy, że przyciski mają teraz nowy okrągły wygląd.
W poniższym pliku motywów zmieniono tylko motyw nadrzędny. Za chwilę całkowicie zastąpimy ten motyw. Niektóre atrybuty koloru są nieaktualne, a niektóre utworzone przez nas style niestandardowe są teraz dostępne w standardzie Material3.
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. Omówienie motywów kolorów i ról kolorów
System kolorów Material 3 wykorzystuje uporządkowane podejście do stosowania kolorów w interfejsie użytkownika. Niektóre atrybuty z domeny Theme.AppCompat są nadal używane. W Theme.MaterialComponents.* dodaliśmy jednak więcej atrybutów, a jeszcze więcej w Theme.Material3.*. Dlatego ważne jest sprawdzenie wszystkich ekranów aplikacji i upewnienie się, że żadne niezaimplementowane właściwości nie przenikają z motywu podstawowego.
Informacje o rolach kolorów
Istnieje ponad 20 atrybutów związanych z kolorem w motywie Material 3. Początkowo może się to wydawać zniechęcające, ale istnieje naprawdę kilka kluczowych kolorów, które można połączyć z tymi samymi rolami 4–5 kolorów, tworząc barwy pochodne.
Te grupy kolorów to:
- Główny, podstawowy kolor aplikacji
- Dodatkowy (dodatkowy kolor aplikacji)
- trzeciorzędny – trzeci kolor uzupełniający kolory podstawowe i drugorzędne,
- Błąd – używany w tekstach błędów i oknach
- Tło
- Powierzchnia, wariant powierzchni, odwrotność powierzchni
Są to role podstawowe, dodatkowe, wyższe i błędy:
<kolor podstawowy> | Kolor podstawowy |
on<kolor podstawowy> | kolor ikon i tekstu w kolorze podstawowym, |
<base color>Kontener | jest uzyskiwana na podstawie podstawy, koloru, przycisków, okien dialogowych itd. |
on<base color>Kontener | kolor ikon i tekstu w kontenerze; |
Na przykład pływający przycisk polecenia z domyślnym stylem w Material 3 używa koloru podstawowego w kolorze Primary, więc kolor tła przycisku to primaryContainer, a zawartość – onPrimaryContainer.
Jeśli chcesz ręcznie dostosować motyw, sprawdź co najmniej, czy atrybut on<base color> każdego zmienionego koloru podstawowego nadal jest czytelny.
Sprawdzoną metodą jest dostosowanie wszystkich ról w grupie kolorów jednocześnie, aby uniknąć zakłóceń w działaniu od bazy do aplikacji.
Kolory tła i podstawowej powierzchni mają zwykle 2 role: kolor podstawowy i on<base color> – ikony lub wyświetlany na nim tekst.
5. Tworzenie motywu Material 3 za pomocą narzędzia Material Theme Builder
Material Theme Builder ułatwia tworzenie niestandardowych schematów kolorów, a wbudowany eksport kodu umożliwia migrację do systemu kolorów M3 i wykorzystanie dynamicznych kolorów. Dowiedz się więcej na temat material.io/material-theme-builder
Motyw aplikacji Tip Time zawiera kilka stylów komponentów, ale większość z nich to domyślne w motywach Material 3. Jedyne 2 kolory, które musimy zwrócić uwagę, to kolor podstawowy i dodatkowy.
Odpowiadają one kolorowi głównemu zielonym (#1B5E20) i niebieskim kolorowi dodatkowym (#0288D1).
Możesz dodać te kolory do narzędzia Material Theme Builder i wyeksportować pełny motyw (zakładając, że w innym miejscu podasz link do pełnego opisu).
Pamiętaj, że wprowadzane kolory mogą zmienić ton, aby dostosować je do algorytmu generowania kolorów i zapewnić uzupełniające i czytelne kolory.
Poniżej znajduje się podzbiór wartości generowanych podczas wpisywania kolorów niestandardowych.
6. Praca z plikami eksportu Material Theme Builder
Archiwum eksportu zawiera wartości i katalogi value-night/ oraz własne pliki themes.xml zgodne z jasnymi i ciemnymi motywami. Wszystkie kolory są zdefiniowane w pliku values/colors.xml.
Pliki można skopiować w takiej postaci, w jakiej są, ale musisz zmienić nazwę motywu AndroidManifest.xml lub pliki motywu, aby do siebie pasowały. Domyślna nazwa tego narzędzia to AppTheme.
Zrestartuj aplikację – wygląda ona prawie tak samo. Jedną z ważnych zmian są przełączniki i przyciski opcji, których wybrane stany to obecnie odcienie koloru podstawowego i koloru dodatkowego. W większych aplikacjach konieczna może być zmiana 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. Dodaję kolor dynamiczny
Odpowiedni motyw Material 3 pozwala sprawić, że interfejs będzie bardziej dynamiczny, dodając kilka drobnych dodatków.
Interfejs Dynamic Colors API umożliwia zastosowanie dynamicznych kolorów do wszystkich aktywności
w aplikacji, poszczególnych aktywnościach, poszczególnych widokach danych lub fragmentach. Dla:
tę aplikację, będziemy stosować dynamiczne kolory na całym świecie.
Tworzenie pliku klasy aplikacji
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Musimy odwołać się do tego nowo utworzonego pliku w pliku manifestu Androida:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Na urządzeniach z Androidem 12 i nowszym papier ścienny użytkownika dotyczący schematu domyślnego jest badany w celu wygenerowania kilku palet tonalnych. Wartości z tych palet służą do utworzenia elementu ThemeOverlay.
Klasa DynamicColors rejestruje obiekt ActivityLifecycleCallbacks, który przechwytuje element ActivityPreCreated, aby zastosować utworzoną przez system dynamiczną nakładkę motywu lub podaną przez Ciebie.
8. Stosowanie nakładki z motywem niestandardowym
Nasze narzędzia umożliwiają eksportowanie nakładek z motywu, ale możesz też tworzyć je ręcznie, jeśli zastępujesz niewielką liczbę atrybutów.
Nakładka motywu jest przeznaczona do połączenia z innym motywem i zawiera tylko wartości, które zostaną zmienione na podstawie motywu podstawowego.
Załóżmy, że z jakiegoś powodu, na przykład w celu promowania marki, potrzebne są odcienie koloru podstawowego. Mogliśmy to zrobić, używając poniższych 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ć dowolnego prawidłowego elementu ThemeOverlay jako elementu nadrzędnego, w tym:
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 ustawienia Materiał, zmień wywołanie na DynamicColors.applyToActivitiesIfAvailable na:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Dodawanie dynamicznego koloru do atrybutów niestandardowych
Do tej pory zastąpiliśmy właściwości, które już istnieją w motywie Material 3. Istnieje inny przypadek dynamicznego koloru, w którym możemy mieć jeden lub więcej atrybutów niestandardowych, które muszą zostać przydzielone.
Gdy aplikacja zmieni tryb kolorów dynamicznych, uzyska dostęp do 5 palet odcieni – trzech palet uzupełniających i dwóch palet neutralnych z tymi rolami w przybliżeniu:
system_accent1 | Odcienie kolorów podstawowych |
system_accent2 | Odcienie kolorów dodatkowych |
system_accent3 | Tony kolorów trzeciorzędnych |
system_neutral1 | Neutralne tła i platformy |
system_neutral2 | Neutralne powierzchnie i kontury |
Każda paleta ma wiele poziomów tonacji, od bieli
dla czarnego: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Projektując interfejs pod kątem dynamicznych kolorów, nie bierz pod uwagę konkretnego koloru, a bardziej związek między kolorem i luminancją tego komponentu względem innych elementów w systemie projektowania.
Załóżmy, że chcesz dodać do ikon motyw z pomocniczej palety akcentów i dodaliśmy atrybut odcienia ikon w pliku attrs.xml.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
Nakładka z motywem 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>
Po ponownym zainstalowaniu aplikacji i zmianie tapety aplikacja pobierze tę drugą paletę.
Te palety są typowe dla Androida 12 (API 31), dlatego odpowiednie pliki należy umieszczać w folderach z sufiksem -v31, chyba że w aplikacji znajduje się pakiet SDK w wersji 31 lub nowszej.
10. Podsumowanie
Dzięki tym ćwiczeniom w programie 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.
- Dowiedz się, jak korzystać z nakładek z motywów i używać dynamicznych kolorów w atrybutach niestandardowych motywów.