MDC-101 Android: podstawy komponentów Material Design (MDC) (Kotlin)

1. Wprowadzenie

Komponenty Material (MDC) pomagają deweloperom wdrażać Material Design. MDC zostało stworzone przez zespół inżynierów i projektantów UX w Google. Zawiera dziesiątki atrakcyjnych i funkcjonalnych komponentów interfejsu, które są dostępne na platformach Android, iOS, internetowej i Flutter.material.io/develop

Czym są Material Design i Material Components na Androida?

Material Design to system tworzenia atrakcyjnych i funkcjonalnych produktów cyfrowych. Łącząc styl, branding, interakcje i ruch w spójny zestaw zasad i komponentów, zespoły produktowe mogą w pełni wykorzystać swój potencjał projektowy.

W przypadku aplikacji na Androida Material Components for Android (MDC Android) łączy projektowanie i inżynierię z biblioteką komponentów, które zapewniają spójność w aplikacji. Wraz z rozwojem systemu Material Design komponenty te są aktualizowane, aby zapewnić spójną implementację z dokładnością do piksela i zgodność ze standardami Google dotyczącymi tworzenia interfejsu. MDC jest też dostępny w przypadku internetu, iOS i Flattera.

W tym ćwiczeniu dowiesz się, jak utworzyć stronę logowania za pomocą kilku komponentów MDC Androida.

Co utworzysz

Te ćwiczenia to pierwsze z 4 ćwiczeń, które pomogą Ci w utworzeniu aplikacji Shrine – aplikacji na Androida e-commerce, w której można kupować odzież i artykuły gospodarstwa domowego. Dowiesz się z niego, jak dostosowywać komponenty, aby odzwierciedlały dowolną markę lub styl przy użyciu MDC Android.

W tym ćwiczeniu utworzysz stronę logowania do aplikacji Shrine, która będzie zawierać:

• Dwa pola tekstowe: jedno do wpisania nazwy użytkownika, a drugie do wpisania hasła.
• 2 przyciski: „Anuluj” i „Dalej”.
• Nazwa aplikacji (Shrine)
• Obraz logo Shrine

Powiązane ćwiczenia znajdziesz na tych stronach:

• MDC 102. Struktura i układ Material Design
• MDC 103. Motywy Material Design z użyciem kolorów, kształtów, wysokości i rodzajów czcionek
• MDC 104: zaawansowane komponenty Material Design

Po ukończeniu MDC 104 utworzysz aplikację na Androida, która będzie wyglądać tak:

Komponenty MDC Android użyte w tym ćwiczeniu

• Pole tekstowe
• Przycisk

W tym laboratorium kodowania użyjesz domyślnych komponentów udostępnianych przez MDC Android. Dowiesz się, jak je dostosować, w MDC 103: Motywy Material Design – kolor, kształt, wysokość i typ.

Czego potrzebujesz

• Podstawowa wiedza na temat programowania aplikacji na Androida
• Android Studio (jeśli nie masz jeszcze tego środowiska, pobierz je tutaj).
• emulator lub urządzenie z Androidem (dostępne w Androidzie Studio);
• Przykładowy kod (patrz następny krok)

Jak oceniasz swoje doświadczenie w tworzeniu aplikacji na Androida?

Początkujący Średnio zaawansowany Zaawansowany

2. Konfigurowanie środowiska programistycznego

Uruchom Android Studio

Po otwarciu Androida Studio powinno się wyświetlić okno „Welcome to Android Studio” (Witamy w Androidzie Studio). Jeśli jednak uruchamiasz Android Studio po raz pierwszy, wykonaj czynności opisane w Kreatorze konfiguracji Androida Studio, używając wartości domyślnych. Pobranie i zainstalowanie niezbędnych plików może potrwać kilka minut, więc możesz pozostawić to działanie w tle i przejść do następnej sekcji.

Pobierz aplikację Codelabs

Pobierz aplikację startową

Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-101-starter/kotlin.

...lub sklonuj go z GitHub

Aby skopiować ten codelab z GitHuba, uruchom te polecenia:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 101-starter

Więcej informacji: Klonowanie repozytorium z GitHub

Wczytaj kod startowy w Android Studio

1. Gdy kreator konfiguracji zakończy działanie i wyświetli się okno Witamy w Android Studio, kliknij Otwórz istniejący projekt Android Studio. Przejdź do katalogu, w którym został zainstalowany przykładowy kod, i wybierz kotlin -> shrine (lub wyszukaj na komputerze shrine), aby otworzyć projekt Shipping.
2. Poczekaj chwilę, aż Android Studio utworzy i zsynchronizuje projekt. Wskaźniki aktywności u dołu okna Android Studio będą pokazywać postęp.
3. W tym momencie Android Studio może zgłosić błędy kompilacji, ponieważ brakuje Ci pakietu SDK Androida lub narzędzi do kompilacji, np. takich jak te pokazane poniżej. Postępuj zgodnie z instrukcjami w Android Studio, aby zainstalować lub zaktualizować te komponenty i zsynchronizować projekt.

Dodawanie zależności projektu

Projekt musi mieć zależność od biblioteki pomocy MDC na Androida. Pobrany przykładowy kod powinien już zawierać tę zależność, ale warto wykonać poniższe czynności, aby się upewnić.

1. Otwórz plik build.gradle modułu app i upewnij się, że blok dependencies zawiera zależność od MDC Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Opcjonalnie) W razie potrzeby edytuj plik build.gradle, aby dodać te zależności, i zsynchronizuj projekt.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Uruchom aplikację startową

Sprawdź, czy konfiguracja kompilacji po lewej stronie przycisku Uruchom / Odtwórz to app. Naciśnij zielony przycisk Uruchom / Odtwórz, aby skompilować i uruchomić aplikację. Jeśli w oknie Select Deployment Target (Wybierz miejsce docelowe wdrożenia) na liście dostępnych urządzeń widzisz już urządzenie z Androidem, przejdź do kroku 8. W przeciwnym razie kliknij Utwórz nowe urządzenie wirtualne. Na ekranie Wybierz sprzęt wybierz telefon, np. Pixel 2, a potem kliknij Dalej. Na ekranie Obraz systemu wybierz ostatnią wersję Androida, najlepiej z najwyższym poziomem interfejsu API. Jeśli nie jest zainstalowana, kliknij wyświetlony link Pobierz i pobierz aplikację. Kliknij Dalej. Na ekranie Android Virtual Device (AVD) (Wirtualne urządzenie z Androidem) pozostaw ustawienia bez zmian i kliknij Finish (Zakończ). W oknie docelowym wdrożenia wybierz urządzenie z Androidem. Kliknij OK. Android Studio skompiluje aplikację, wdroży ją i automatycznie otworzy na urządzeniu docelowym.

Jeśli nie udało Ci się dodać zależności lub uruchomić aplikacji, zatrzymaj się i rozwiąż problemy ze środowiskiem deweloperskim.

Jeśli podczas kompilacji pojawi się błąd INSTALL_FAILED_INVALID_APK, w Android Studio wybierz kolejno „Build” (Kompilacja) i „Clean Project” (Wyczyść projekt).

Gotowe! Kod startowy strony logowania Shrine powinien być uruchomiony w emulatorze. Powinna się wyświetlić nazwa „Shrine” i logo Shrine tuż pod nią.

Przyjrzyjmy się kodowi. W przykładowym kodzie udostępniliśmy prosty Fragmentszkielet nawigacji, który umożliwia wyświetlanie fragmentów i przechodzenie między nimi.

Otwórz plik MainActivity.kt w katalogu shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine. Powinien zawierać te informacje:

Uwaga: więcej informacji o nawigacji oraz tworzeniu i utrzymywaniu ścieżek nawigacji za pomocą Android Studio znajdziesz w ćwiczeniu Kotlin Android Fundamentals 03.2: Define navigation paths (w języku angielskim).

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

Ta aktywność wyświetla R.layout.shr_main_activityplik układushr_main_activity.xml zdefiniowany w shr_main_activity.xml.

Możesz to zobaczyć w onCreate(),. MainActivity.kt rozpoczyna transakcję Fragment, aby wyświetlić LoginFragment. W tym ćwiczeniu zmodyfikujemy plik LoginFragment. Aktywność implementuje też metodę navigateTo(Fragment) zdefiniowaną w NavigationHost, która umożliwia dowolnemu fragmentowi przejście do innego fragmentu.

Command + kliknięcie (lub Control + kliknięcie) shr_main_activity w pliku aktywności, aby otworzyć plik układu, lub przejdź do pliku układu w app -> res -> layout -> shr_main_activity.xml.

Uwaga: jeśli po otwarciu shr_main_activity.xml zobaczysz podgląd aplikacji zamiast pliku XML, w lewym dolnym rogu panelu przełącz się z karty „Projekt” na kartę „Tekst”. W tym laboratorium będziemy pracować na karcie „Tekst”.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

Widzimy tu prosty element <FrameLayout>, który działa jako kontener dla wszystkich fragmentów wyświetlanych przez aktywność.

Następnie otwórzmy LoginFragment.kt.

LoginFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

LoginFragment rozszerza plik układu shr_login_fragment i wyświetla go w onCreateView().

Przyjrzyjmy się teraz plikowi układu shr_login_fragment.xml, aby zobaczyć, jak wygląda strona logowania.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

       <ImageView
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="48dp"
           android:layout_marginBottom="16dp"
           app:srcCompat="@drawable/shr_logo" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:layout_marginBottom="132dp"
           android:text="@string/shr_app_name"
           android:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

Widzimy tu <LinearLayout> z <ImageView> u góry, co symbolizuje logo Sanktuarium.

Pod logo znajduje się tag <TextView> reprezentujący etykietę Shrine. Tekst tej etykiety to zasób tekstowy o nazwie @string/shr_app_name. Jeśli klikniesz nazwę zasobu tekstowego z naciśniętym klawiszem Command (lub Control) albo otworzysz plik app -> res -> values -> strings.xml, zobaczysz plik strings.xml, w którym zdefiniowane są zasoby tekstowe. Gdy w przyszłości dodamy więcej zasobów ciągów tekstowych, będą one zdefiniowane w tym miejscu. Każdy zasób w tym pliku powinien mieć prefiks shr_, aby wskazywać, że jest częścią aplikacji Shrine.

Znasz już kod startowy, więc teraz zaimplementujmy pierwszy komponent.

3. Dodawanie pól tekstowych

Na początek dodamy do strony logowania 2 pola tekstowe, w których użytkownicy będą mogli wpisać nazwę użytkownika i hasło. Użyjemy komponentu MDC Text Field, który ma wbudowaną funkcję wyświetlania pływającej etykiety i komunikatów o błędach.

Pola tekstowe Material Design zostały znacznie ulepszone, aby zapewnić więcej opcji dostosowywania do Twojej marki. Wprowadzone zmiany są oparte na szeroko zakrojonych badaniach dotyczących wygody użytkowników, dzięki czemu są bardziej użyteczne i atrakcyjne wizualnie.

Więcej informacji o nowych polach tekstowych znajdziesz w artykule w wytycznych Material Design.

Dodawanie pliku XML

W sekcji shr_login_fragment.xml dodaj 2 elementy TextInputLayout z elementem podrzędnym TextInputEditText w sekcji <LinearLayout> pod etykietą „SHRINE” <TextView>:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

Wskazówka: aby szybko otworzyć plik w Android Studio, kliknij dwukrotnie klawisz Shift, aby wyświetlić pływający pasek wyszukiwania, a następnie wpisz nazwę pliku, który chcesz otworzyć.

Powyższy fragment kodu zawiera 2 pola tekstowe, z których każde składa się z elementu <TextInputLayout> i elementu podrzędnego <TextInputEditText>. Tekst podpowiedzi w każdym polu tekstowym jest określony w atrybucie android:hint.

Dodaliśmy 2 nowe zasoby ciągów znaków dla pola tekstowego – @string/shr_hint_username i @string/shr_hint_password. Otwórz strings.xml, aby wyświetlić te zasoby ciągów znaków.

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

Dodawanie weryfikacji danych wejściowych

Komponenty TextInputLayout mają wbudowaną funkcję informacji o błędach.

Aby wyświetlać informacje o błędach, wprowadź w pliku shr_login_fragment.xml te zmiany:

• Ustaw atrybut app:errorEnabled na true w elemencie Hasło TextInputLayout. Spowoduje to dodanie dodatkowego dopełnienia komunikatu o błędzie pod polem tekstowym.
• Ustaw atrybut android:inputType na „textPassword” w elemencie Hasło TextInputEditText. Spowoduje to ukrycie wpisanego tekstu w polu hasła.

Po wprowadzeniu tych zmian pola tekstowe w shr_login_fragment.xml powinny wyglądać tak:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Teraz spróbuj uruchomić aplikację. Powinna pojawić się strona z 2 polami tekstowymi: „Nazwa użytkownika” i „Hasło”.

Sprawdź animację etykiety pływającej:

Pole tekstowe MDC ma te funkcje:

• Wyświetlanie wbudowanych informacji o błędach
• Obsługa przełącznika widoczności hasła za pomocą ikony app:passwordToggleEnabled
• Oferowanie wbudowanej funkcji tekstu pomocy za pomocą app:helperText
• Wyświetlanie łącznej i maksymalnej liczby znaków za pomocą app:counterEnabled i app:counterMaxLength

4. Dodawanie przycisków

Następnie dodamy do strony logowania 2 przyciski: „Anuluj” i „Dalej”. Użyjemy komponentu MDC Button, który ma wbudowany charakterystyczny efekt fali atramentu Material Design.

Dodawanie pliku XML

W sekcji shr_login_fragment.xml dodaj <RelativeLayout> do <LinearLayout> pod elementami TextInputLayout. Następnie dodaj do elementu <RelativeLayout> 2 elementy <MaterialButton>.

Wynikowy plik XML powinien wyglądać tak:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.MaterialComponents.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Uwaga: komponent MaterialButton ma domyślny styl kolorowego, podniesionego przycisku. W przypadku tego przycisku Anuluj chcemy jednak, aby był on niepodniesiony i nie wypełniony. Aby to zrobić, stosujemy atrybut style: @style/Widget.MaterialComponents.Button.TextButton.

To wszystko. Gdy uruchomisz aplikację, po naciśnięciu każdego przycisku pojawi się efekt rozchodzącego się atramentu.

Funkcje przycisku MDC:

• Domyślnie wbudowane reakcje na dotyk (tzw. MDC Ripple)
• Domyślna wysokość
• Możliwość dostosowania promienia rogu i obrysu

5. Przejdź do następnego fragmentu

Na koniec dodamy do pliku LoginFragment.kt kod w języku Kotlin, aby połączyć przycisk „DALEJ” z przejściem do innego fragmentu.

Dodajmy prywatną metodę logiczną isPasswordValid w LoginFragment.kt pod onCreateView(), która będzie określać, czy hasło jest prawidłowe. Na potrzeby tej wersji demonstracyjnej sprawdzimy tylko, czy hasło ma co najmniej 8 znaków:

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

Następnie dodaj do przycisku „Dalej” detektor kliknięć, który ustawia i usuwa błąd na podstawie utworzonej przez nas metody isPasswordValid(). W onCreateView() detektor kliknięć powinien znajdować się między wierszem inflatera a wierszem return view.

Teraz dodajmy detektor klawiszy do pola hasła TextInputEditText, aby nasłuchiwać zdarzeń klawiszy, które spowodują usunięcie błędu. Ten odbiorca powinien też użyć isPasswordValid(), aby sprawdzić, czy hasło jest prawidłowe. Możesz dodać go bezpośrednio pod detektorem kliknięć w onCreateView().

Metoda onCreateView() powinna teraz wyglądać mniej więcej tak:

LoginFragment.kt

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

Uwaga: jeśli podczas pisania tego kodu Android Studio napotka błędy Cannot resolve symbol, naciśnij Alt + Enter lub Option + Return (na Macu), aby zaimportować brakujące symbole.

Teraz możemy przejść do innego fragmentu. W onCreateView() zaktualizuj OnClickListener, aby po pomyślnej weryfikacji błędu przejść do innego fragmentu. Kod clickListener powinien teraz wyglądać tak:

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

Do else detektora kliknięć dodaliśmy wiersz (activity as NavigationHost).navigateTo(ProductGridFragment(), false). Ta linia wywołuje metodę navigateTo() z MainActivity, aby przejść do nowego fragmentu – ProductGridFragment. Obecnie jest to pusta strona, nad którą będziesz pracować w module MDC-102.

Parametr false w navigateTo() informuje aktywność, aby nie dodawać bieżącego fragmentu do listy wstecznej, dzięki czemu użytkownik nie będzie mógł wrócić do ekranu logowania za pomocą klawisza Wstecz.

Teraz skompiluj aplikację. Kliknij przycisk Dalej.

Udało się! Ten ekran będzie punktem początkowym naszych kolejnych zajęć z programowania, które odbędą się w ramach MDC-102.

6. Wszystko gotowe

Dzięki podstawowemu znacznikowi XML i około 30 wierszom kodu w języku Kotlin biblioteka Material Components for Android pomogła Ci utworzyć atrakcyjną stronę logowania, która jest zgodna z wytycznymi Material Design, a także wygląda i działa spójnie na wszystkich urządzeniach.

Gotową aplikację MDC 101 możesz pobrać, kończąc ćwiczenia z programowania, lub sprawdzić 101-complete za pomocą Gita: git checkout 101-complete.

Możesz przetestować swoją wersję strony w porównaniu z wersją ukończoną, otwierając projekt shrine w tym katalogu w Android Studio i uruchamiając aplikację.

Dalsze kroki

Pole tekstowe i przycisk to 2 podstawowe komponenty biblioteki MDC Android, ale jest ich znacznie więcej. Pozostałe komponenty MDC Android znajdziesz tutaj. Możesz też zapoznać się z artykułem MDC 102: Material Design Structure and Layout, aby dowiedzieć się więcej o górnym pasku aplikacji, widoku kart i układzie siatki. Dziękujemy za wypróbowanie komponentów Material. Mamy nadzieję, że to ćwiczenie było dla Ciebie przydatne.

Udało mi się ukończyć to ćwiczenie w rozsądnym czasie i przy rozsądnym nakładzie pracy.

Zdecydowanie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Zdecydowanie się nie zgadzam

Chcę nadal korzystać z komponentów Material

Zdecydowanie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Zdecydowanie się nie zgadzam