1. Pengantar
Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MDC memiliki banyak komponen UI yang indah dan fungsional serta tersedia untuk Android, iOS, web, dan Flutter.material.io/develop |
Komponen Material untuk Android (MDC Android) bukanlah sistem atau framework baru yang memerlukan perubahan paradigma di aplikasi Anda. MDC Android dibangun di class dan API yang sudah Anda ketahui di Android, seperti tombol dan kolom teks AppCompat. Komponen yang disediakan oleh MDC Android dapat digunakan sesuai kebutuhan dan langsung meningkatkan kualitas desain aplikasi yang sudah ada.
Yang akan Anda bangun
Dalam codelab ini, Anda akan mengganti beberapa komponen yang ada dalam formulir dengan komponen baru dari MDC.
Komponen MDC-Android dalam codelab ini
- Kolom teks
- Tombol
- Menu
Yang Anda butuhkan
- Pengetahuan dasar tentang pengembangan Android
- Android Studio (download di sini jika Anda belum memilikinya)
- Emulator atau perangkat Android (tersedia melalui Android Studio)
- Kode contoh (lihat langkah berikutnya)
Bagaimana Anda menilai tingkat pengalaman Anda membuat aplikasi Android?
2. Menyiapkan lingkungan pengembangan
Mendownload aplikasi codelab awal
Aplikasi awal terletak di direktori material-components-android-codelabs-111-starter/kotlin. Pastikan untuk cd ke direktori tersebut sebelum memulai.
...atau meng-clone codelab dari GitHub
Untuk meng-clone codelab ini dari GitHub, jalankan perintah berikut:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Memuat kode awal di Android Studio
- Setelah wizard penyiapan selesai dan jendela Welcome to Android Studio ditampilkan, klik Open an existing Android Studio project. Buka direktori tempat Anda menginstal kode contoh, lalu pilih kotlin -> shipping (atau telusuri shipping di komputer Anda) untuk membuka project Shipping.
- Tunggu Android Studio mem-build dan menyinkronkan project, seperti yang ditunjukkan oleh indikator aktivitas di bagian bawah jendela Android Studio.
- Pada tahap ini, Android Studio dapat memunculkan beberapa error build karena alat build atau Android SDK tidak ada, seperti yang ditampilkan di bawah. Ikuti petunjuk di Android Studio untuk menginstal/mengupdate versi ini dan menyinkronkan project Anda.
Menjalankan aplikasi awal
|
|
Berhasil! Anda akan melihat aplikasi dan formulirnya.
3. Memperbarui kolom teks
Kolom teks Desain Material memiliki peningkatan kegunaan yang signifikan dibandingkan kolom teks biasa. Dengan menentukan zona sentuh menggunakan garis batas atau pengisian latar belakang, pengguna cenderung berinteraksi dengan formulir Anda atau mengidentifikasi kolom teks dalam konten yang lebih rumit.
Mengimpor MDC-Android
Buka file build.gradle modul app dan pastikan blok dependencies menyertakan dependensi pada MDC Android:
api 'com.google.android.material:material:1.1.0-alpha05'
Mengganti gaya kolom teks
Di shipping_info_activity.xml, tambahkan gaya berikut ke semua komponen XML TextInputLayout:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Setiap TextInputLayout akan terlihat seperti berikut:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Build dan jalankan:
Semua kolom teks diperbarui untuk menggunakan desain yang lebih baru di MDC.
Menambahkan error
Kolom teks MDC memiliki presentasi error bawaan. MDC menambahkan teks merah di bawah kolom teks Anda dan memperbarui dekorasi menjadi merah juga.
Di ShippingInfoActivity.kt, perbarui onCreate() untuk memeriksa input teks dan menetapkan error sebagaimana mestinya. Tampilannya akan terlihat seperti ini:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
Build dan jalankan. Tekan SIMPAN, tetapi biarkan setidaknya satu kolom teks kosong:
Kolom teks yang kosong berwarna merah dan memiliki teks error di bawahnya.
4. Perbarui tombol
MDC memiliki tombol dengan:
- Riak tinta
- Sudut membulat
- Dukungan tema
- Tata letak dan tipografi yang sempurna
- Dibuat di AppCompatButton (class tombol Android standar) sehingga Anda tahu cara menggunakannya dalam kode Anda.
Opsi Ganti class tombol
Secara default, library Material otomatis meng-inflate Tombol reguler ke Tombol MDC. Namun, Anda dapat mengganti semua referensi ke Button dengan MaterialButton agar dapat mengakses metode tambahan yang hanya tersedia di MaterialButton, seperti mengubah radius sudut. Tombol MDC adalah komponen plug-and-play sederhana. Anda cukup mengganti nama komponen XML Button dengan MaterialButton, dan menerapkan gaya MaterialButton default ke MaterialButton.
Di shipping_info_activity.xml, ubah tombol Anda dari:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Kepada:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Build dan jalankan:
5. Tambahkan kartu
MaterialCardView adalah komponen yang dibangun di atas CardView dengan:
- Memperbaiki elevasi dan gaya
- Atribut lebar dan warna goresan
Membungkus konten dalam kartu
Gabungkan LinearLayout yang berisi konten Anda dalam shipping_info_activity.xml dengan komponen MaterialCardView, seperti berikut:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Build dan jalankan. Seluruh formulir harus dibungkus dalam kartu:
Komponen Tampilan Kartu Material adalah cara yang sudah dikenal, tetapi baru untuk membungkus konten Anda dengan mudah dalam kartu.
6. Rangkuman
Anda telah mengganti beberapa komponen umum untuk menunjukkan nilai langsung: kolom teks, tombol, kartu, dan Anda tidak perlu mendesain ulang seluruh aplikasi. Komponen lain juga dapat membuat perbedaan besar, seperti Panel Aplikasi Atas dan TabLayout.
Langkah berikutnya
Anda dapat mempelajari lebih lanjut komponen di MDC-Android dengan mengunjungi Android Widgets Catalog.