Material Design na Androida

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z motywów w sekcji Utwórz
Material Design 3 →

Material Design to wszechstronny przewodnik na temat projektowania elementów wizualnych, ruchomych i interaktywnych na różnych platformach i urządzeniach. Aby używać interfejsu Material Design w aplikacjach na Androida, postępuj zgodnie ze wskazówkami w specyfikacji Material Design. Jeśli Twoja aplikacja korzysta z Jetpack Compose, możesz używać biblioteki Compose Material 3. Jeśli Twoja aplikacja korzysta z widoków, możesz korzystać z biblioteki Android Material Komponenty.

Android oferuje te funkcje, które pomagają w tworzeniu aplikacji w stylu Material Design:

  • Motyw aplikacji Material Design, który nadaje styl wszystkim widżetom interfejsu
  • widżety do obsługi złożonych widoków, takie jak listy i karty.
  • Interfejsy API do niestandardowych cieni i animacji

Motyw Material Design i widżety

Aby korzystać z funkcji Material, takich jak styl standardowych widżetów interfejsu, i poprawić styl aplikacji, zastosuj do niej motyw oparty na materiale.

Rysunek 1. motyw Ciemny materiał.
Rysunek 2. Jasny motyw materiałowy.

Jeśli tworzysz projekt na Androida za pomocą Android Studio, domyślnie stosuje się w nim motyw Material Design. Aby dowiedzieć się, jak zaktualizować motyw projektu, przeczytaj artykuł Style i motywy.

Aby zapewnić użytkownikom dobrze znane treści, użyj najczęstszych wzorców UX Material:

  • Promuj główne działanie interfejsu za pomocą pływającego przycisku polecenia (FAB).
  • Pokaż swoją markę, nawigację, wyszukiwanie i inne działania za pomocą paska aplikacji.
  • Aby pokazać i ukryć nawigację w aplikacji, użyj panelu nawigacji.
  • Wybierz jeden z wielu innych komponentów Material Design, aby dostosować układ aplikacji i poruszać się po niej, np. zwijające się paski narzędzi, karty czy dolny pasek nawigacyjny. Aby zobaczyć wszystkie, zajrzyj do katalogu Material Komponenty na Androida.

W miarę możliwości używaj wstępnie zdefiniowanych ikon Materiał. Na przykład jako przycisk menu nawigacji w panelu nawigacji użyj standardowej ikony „hamburger”. Listę dostępnych ikon znajdziesz w sekcji Ikony Material Design. Ikony SVG możesz też zaimportować z biblioteki Material Icon za pomocą narzędzia Vector Asset Studio w Android Studio.

Karty i cienie wysokości

Oprócz usług 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 z wyższą wartością Z rzucają większy cień.
  • Kolejność rysowania: widoki o wyższych wartościach Z pojawiają się nad innymi widokami.
Rysunek 3. Wartość Z oznacza wysokość.

W układzie opartym na kartach możesz zastosować wysokość, by wyświetlać ważne informacje na kartach, które zapewniają wygląd materiału. Za pomocą widżetu CardView możesz tworzyć karty z domyślną wysokością. Więcej informacji znajdziesz w artykule o tworzeniu układu opartego na kartach.

Informacje o dodawaniu wysokości do innych widoków znajdziesz w artykule Tworzenie cieni i widoków klipów.

Animacje

Rysunek 4. Animacja przedstawiająca reagowanie na dotyk.

Interfejsy API animacji umożliwiają tworzenie niestandardowych animacji na potrzeby reakcji na dotyk w elementach sterujących interfejsu użytkownika, zmian stanu widoku i przejścia aktywności.

Dzięki tym interfejsom API możesz:

  • Reagowanie na zdarzenia dotknięcia w widokach za pomocą animacji powtórzenia dotknięcia.
  • Ukrywanie i pokazywanie widoków za pomocą animacji okrągłych odsłon.
  • Przełączaj się między aktywnościami za pomocą niestandardowych animacji przejścia aktywności.
  • Twórz bardziej naturalne animacje za pomocą zakrzywionego ruchu.
  • Animacja zmian w co najmniej 1 usłudze widoku za pomocą animacji zmiany stanu widoku.
  • Pokazuj animacje w elementach rysowanych z listą stanów między zmianami stanu widoku.

Animacje reakcji na dotyk są wbudowane w kilka standardowych widoków, np. przyciski. Interfejsy API animacji umożliwiają dostosowywanie tych animacji i dodawanie ich do widoków niestandardowych.

Więcej informacji znajdziesz w artykule Wprowadzenie do animacji.

Elementy rysowalne

Te funkcje elementów rysowalnych pomagają wdrożyć aplikacje Material Design: