Android Academy · Lekcja

Podstawy Material Design

Korzystaj z komponentów Material: MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog i Dynamic Color.

Podstawy Material Design to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 1 z 5. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 5 lekcji w sumie.

Czym jest Material Design?

Material Design to system projektowania firmy Google służący do tworzenia atrakcyjnych i spójnych aplikacji na Androida. Oferuje:

Bogaty zestaw gotowych komponentów interfejsu użytkownika
Spójne zasady dotyczące odstępów, typografii i kolorów
Dostępne i responsywne komponenty
Wbudowane animacje i przejścia

Biblioteka Material Components for Android (MDC) udostępnia Material 3 w Jetpack.

Dodawanie komponentów Material

Dodaj zależność i ustaw motyw aplikacji na motyw Material:

// app/build.gradle:
dependencies {
    implementation 'com.google.android.material:material:1.12.0'
}

// res/values/themes.xml:
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorSecondary">@color/secondary</item>
    <!-- ... -->
</style>

MaterialButton

Zastąp zwykły komponent Button komponentem MaterialButton, aby uzyskać zaokrąglone narożniki, efekt fali i obsługę ikon:

<!-- Filled (default) -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Save"
    app:icon="@drawable/ic_save" />

<!-- Outlined style -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Cancel" />

<!-- Text button -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.TextButton"
    android:text="Learn more" />

TextInputLayout i TextInputEditText

TextInputLayout opakowuje EditText, zapewniając pływające etykiety, komunikaty o błędach i liczniki znaków:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilEmail"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email address"
    app:helperText="We will never share your email">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

MaterialCardView

MaterialCardView dodaje kontenerowi efekt uniesienia, zaokrąglone narożniki i obramowanie:

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="4dp"
    app:strokeColor="@color/outline"
    app:strokeWidth="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <TextView android:text="Card Title" />
        <TextView android:text="Card content goes here" />

    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

FloatingActionButton (FAB)

Komponenty FAB wyróżniają główną czynność na ekranie. Material 3 oferuje trzy rozmiary:

<!-- Standard FAB -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:contentDescription="Add item"
    app:srcCompat="@drawable/ic_add" />

<!-- Extended FAB (icon + text) -->
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:text="New Note"
    app:icon="@drawable/ic_edit"
    android:layout_gravity="bottom|end" />

MaterialToolbar

Zastąp domyślny ActionBar komponentem MaterialToolbar, aby zastosować styl Material 3:

<!-- In layout XML -->
<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorSurface"
    app:title="My App"
    app:navigationIcon="@drawable/ic_menu" />

// In Activity:
setSupportActionBar(binding.toolbar)
binding.toolbar.setNavigationOnClickListener {
    onBackPressedDispatcher.onBackPressed()
}

Snackbar

Snackbar wyświetla u dołu ekranu krótkie komunikaty, z którymi użytkownik może wejść w interakcję. Używaj go zamiast Toast:

// Simple message:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_SHORT).show()

// With action:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_LONG)
    .setAction("Undo") {
        viewModel.undoDelete()
    }
    .setAnchorView(binding.fab)   // appears above the FAB
    .show()

Chip i ChipGroup

Chipy to kompaktowe elementy służące do filtrowania, oznaczania i wybierania:

<com.google.android.material.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kotlin"
        style="@style/Widget.Material3.Chip.Filter" />

    <com.google.android.material.chip.Chip
        android:text="Android"
        style="@style/Widget.Material3.Chip.Filter" />

    <com.google.android.material.chip.Chip
        android:text="Jetpack"
        style="@style/Widget.Material3.Chip.Filter" />

</com.google.android.material.chip.ChipGroup>

BottomSheetDialog

Modalny dolny arkusz wysuwa się od dołu i zawiera treści lub akcje:

class OptionsBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.bottom_sheet_options, container, false)
    }
}

// Show it from a Fragment:
val sheet = OptionsBottomSheet()
sheet.show(parentFragmentManager, "options")

Material You — dynamiczny kolor

Android 12 i nowsze wersje obsługują dynamiczny kolor — schemat kolorów aplikacji automatycznie dostosowuje się do tapety użytkownika:

// In Application.onCreate():
override fun onCreate() {
    super.onCreate()
    DynamicColors.applyToActivitiesIfAvailable(this)
}

// That's it! Colors automatically extract from wallpaper on Android 12+
// On older Android, fallback colors from your theme are used.

Szybkie sprawdzenie

Jakiego komponentu Material należy użyć do opakowania komponentu EditText, aby uzyskać pływające etykiety i umieszczane bezpośrednio przy polu komunikaty o błędach?

Podsumowanie: podstawy Material Design

Komponenty Material ułatwiają tworzenie atrakcyjnych aplikacji:

MaterialButton — style wypełnione, obrysowane i tekstowe
TextInputLayout + TextInputEditText — pływające etykiety i błędy
MaterialCardView — karty z efektem uniesienia i obramowaniem
FloatingActionButton — przycisk głównej akcji
Snackbar — zamykane komunikaty z akcjami
Chip — oznaczenia, filtry i wybory
Dynamiczny kolor — dostosowuje się do tapety w systemie Android 12 i nowszych

Dalej: motywy, style i tryb ciemny.

Często zadawane pytania

Czy lekcja „Podstawy Material Design” jest bezpłatna?

Tak — pełny tekst „Podstawy Material Design” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 5 lekcji w sumie.

Co nauczysz się w „Podstawy Material Design”?

Korzystaj z komponentów Material: MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog i Dynamic Color. Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 5.

Ile czasu zajmuje lekcja „Podstawy Material Design”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Android Academy