Material Design to kompleksowy przewodnik po projektowaniu wizualnym, animacji i interakcji na różnych platformach i urządzeniach. Aby używać Material Design w aplikacjach na Androida, postępuj zgodnie z wytycznymi określonymi w specyfikacji Material Design. Jeśli Twoja aplikacja korzysta z Jetpack Compose, możesz użyć biblioteki Compose Material 3. Jeśli Twoja aplikacja korzysta z widoków, możesz użyć biblioteki Android Material Components.
Android udostępnia te funkcje, które pomagają tworzyć aplikacje zgodne z Material Design:
- Motyw aplikacji Material Design do stylizowania wszystkich widżetów interfejsu
- widżety do złożonych widoków, takich jak listy i karty;
- Interfejsy API do tworzenia niestandardowych cieni i animacji
Motyw Material Design i widżety
Aby korzystać z funkcji Material, takich jak stylizacja standardowych widżetów interfejsu, i uprościć definicję stylu aplikacji, zastosuj w niej motyw oparty na Material.
Jeśli do tworzenia projektu aplikacji na Androida używasz Androida Studio, domyślnie stosowany jest motyw Material. Aby dowiedzieć się, jak zaktualizować motyw projektu, przeczytaj artykuł Style i motywy.
Aby zapewnić użytkownikom znajome wrażenia, używaj najpopularniejszych wzorców UX w Material Design:
- Promuj główne działanie interfejsu za pomocą pływającego przycisku polecenia (FAB).
- Wyświetlaj markę, nawigację, wyszukiwanie i inne działania za pomocą paska aplikacji.
- Wyświetlaj i ukrywaj nawigację aplikacji za pomocą panelu nawigacji.
- Wybieraj spośród wielu innych komponentów Material do układu i nawigacji w aplikacji, takich jak zwijane paski narzędzi, karty, dolny pasek nawigacyjny i inne. Wszystkie znajdziesz w katalogu komponentów Material Design na Androida.
W miarę możliwości używaj wstępnie zdefiniowanych ikon Material Icons. Na przykład w przypadku przycisku „menu” w panelu nawigacji użyj standardowej ikony „hamburgera”. Listę dostępnych ikon znajdziesz na stronie Material Design Icons. Możesz też importować ikony SVG z biblioteki ikon Material za pomocą Vector Asset Studio w Androidzie Studio.
Cienie i karty
Oprócz właściwości X i Y widoki na Androidzie mają właściwość Z. Ta właściwość reprezentuje wysokość widoku, która określa:
- Rozmiar cienia: widoki o wyższych wartościach Z rzucają większe cienie.
- Kolejność rysowania: widoki o wyższych wartościach Z są wyświetlane nad innymi widokami.
Możesz zastosować efekt podniesienia do układu opartego na kartach, co pomoże Ci wyświetlać ważne informacje na kartach, które mają wygląd zgodny z Material Design. Za pomocą widżetu
CardView możesz tworzyć karty z domyślnym poziomem uniesienia. Więcej informacji znajdziesz w artykule Tworzenie układu opartego na kartach.
Informacje o dodawaniu cieni do innych widoków znajdziesz w artykule Tworzenie cieni i przycinanie widoków.
Animacje
Interfejsy API animacji umożliwiają tworzenie niestandardowych animacji na potrzeby reakcji na dotyk w elementach interfejsu, zmian stanu widoku i przejść między aktywnościami.
Te interfejsy API umożliwiają:
- Odpowiadaj na zdarzenia dotknięcia w widokach za pomocą animacji reakcji na dotyk.
- Ukrywaj i wyświetlaj widoki za pomocą animacji okrągłego ujawnienia.
- Przełączaj się między aktywnościami za pomocą niestandardowych animacji przejścia aktywności.
- Twórz bardziej naturalne animacje dzięki krzywym ruchu.
- Animuj zmiany w co najmniej 1 właściwości widoku za pomocą animacji zmiany stanu widoku.
- Wyświetla animacje w rysowalnych listach stanów między zmianami stanu widoku.
Animacje reakcji na dotyk są wbudowane w kilka standardowych widoków, np. przycisków. Interfejsy API animacji umożliwiają dostosowywanie tych animacji i dodawanie ich do widoków niestandardowych.
Więcej informacji znajdziesz w artykule Wprowadzenie do animacji.
Obiekty rysowalne
Te funkcje rysunków pomagają wdrażać aplikacje zgodne z Material Design:
- Obiekty rysunkowe wektorowe można skalować bez utraty jakości. Idealnie nadają się do jednokolorowych ikon w aplikacji. Dowiedz się więcej o grafice wektorowej.
- Cieniowanie rysowalnych pozwala zdefiniować mapy bitowe jako maskę alfa i cieniować je kolorem w czasie działania programu. Dowiedz się, jak dodać odcień do elementów rysowalnych.
- Identyfikowanie koloru umożliwia automatyczne wyodrębnianie dominujących kolorów z obrazu bitmapowego. Dowiedz się, jak wybierać kolory za pomocą interfejsu Palette API.