Tworzenie przycisku

Przyciski umożliwiają użytkownikowi wywołanie określonego działania. Istnieją 5 typów przycisków:

Typ

Wygląd

Cel
Wypełniony

jednolite tło z tekstem o kontrastującym kolorze;

w przypadku działań głównych, takich jak „Prześlij” i „Zapisz”. Efekt cienia podkreśla znaczenie przycisku.
Tonalna

Kolor tła zmienia się, aby dopasować się do powierzchni.

Główne lub znaczące działania. Wypełnione przyciski mają większą wagę wizualną i są odpowiednie do działań takich jak „Dodaj do koszyka” i „Zaloguj się”.
Wysoka

Cień sprawia, że wyróżnia się na tle innych.

Główne lub znaczące działania. Zwiększ wysokość, aby przycisk był bardziej widoczny.
Z konturem

zawiera obramowanie bez wypełnienia.

Ważne, ale nie główne działania. Przyciski z konturem dobrze pasują do innych przycisków, aby wskazać alternatywne działania, np. „Anuluj” lub „Wstecz”.
Text

tekst bez tła ani obramowania;

W przypadku mniej ważnych działań, takich jak linki nawigacyjne lub działania dodatkowe, np. „Dowiedz się więcej” lub „Wyświetl szczegóły”.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Tworzenie wypełnionego przycisku

Komponent wypełnionego przycisku korzysta z podstawowego komponentu Button. Domyślnie jest ona wypełniona jednolitym kolorem.

Wyniki

Wypełniony przycisk na fioletowym tle z napisem „filled”
Rysunek 1. Wypełniony przycisk.

Tworzenie wypełnionego przycisku tonalnego

Wypełniony tonalny komponent przycisku używa komponentu FilledTonalButton. Domyślnie jest on wypełniony kolorem tonalnym.

Wyniki

Przycisk tonalny na jasnofioletowym tle z napisem „filled” (wypełniony).
Rysunek 2. Przycisk tonalny.

Tworzenie przycisku z konturem

Zarysowany komponent przycisku używa komponentu OutlinedButton. Domyślnie jest ona wyświetlana z obrysem.

Wyniki

Przezroczysty przycisk z konturem i ciemną obwódką z napisem „Outlined” (Obrys).
Rysunek 3. Przycisk z konturem.

Tworzenie przycisku z dostępem do uprawnień administracyjnych

Komponent przycisku wyższego poziomu korzysta z komponentu ElevatedButton. Domyślnie ma cień, który reprezentuje efekt podświetlenia, i wygląda jak przycisk z konturem i cieniem.

Wyniki

Podniesiony przycisk na szarym tle z napisem „Elevated” (Podniesiony).
Rysunek 4. Podniesiony przycisk.

Tworzenie przycisku tekstowego

Komponent przycisku tekstowego korzysta z komponentu TextButton. Dopóki nie zostanie kliknięty, będzie widoczny tylko jako tekst. Domyślnie nie ma jednolitej wypełnienia ani obrysu.

Wyniki

Przycisk tekstowy z napisem „Przycisk tekstowy”
Rysunek 5. Przycisk tekstowy.

Najważniejsze punkty

  • onClick: funkcja wywoływana, gdy użytkownik naciśnie przycisk.
  • enabled: jeśli ma wartość false, przycisk jest niedostępny i nieaktywny.
  • colors: wystąpienie klasy ButtonColors, które określa kolory użyte w przycisku.
  • contentPadding: odstęp wewnątrz przycisku.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię