MDC-101 Android: Dasar-dasar Komponen Material (MDC) (Kotlin)

Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MMD memiliki banyak komponen UI yang indah dan fungsional serta tersedia untuk Android, iOS, web dan Flutter. material.io/develop

Apa yang dimaksud dengan Desain Material dan Komponen Material untuk Android?

Desain Material adalah sistem untuk mem-build produk digital yang menarik dan indah. Dengan menyatukan gaya, branding, interaksi, dan gerakan di bawah kumpulan prinsip dan komponen yang konsisten, tim produk dapat mewujudkan potensi desain terbesar mereka.

Untuk aplikasi Android, Komponen Material untuk Android (MDC Android) menyatukan desain dan teknik dengan library komponen untuk menciptakan konsistensi di seluruh aplikasi Anda. Seiring berkembangnya sistem Desain Material, komponen ini diupdate untuk memastikan konsistensi piksel yang sempurna dan kepatuhan terhadap standar pengembangan front-end Google. MDC juga tersedia untuk web, iOS, dan Flutter.

Dalam codelab ini, Anda akan membuat halaman login menggunakan beberapa komponen MDC Android.

Yang akan Anda build

Codelab ini adalah yang pertama dari 4 codelab yang akan memandu Anda mem-build aplikasi bernama Shrine, sebuah aplikasi Android e-commerce yang menjual pakaian dan perlengkapan rumah. Codlab ini akan mendemonstrasikan cara menyesuaikan komponen agar mencerminkan merek atau gaya apa pun menggunakan Android MDC.

Dalam codelab ini, Anda akan mem-build halaman login untuk Shrine yang berisi:

• Dua kolom teks, yang pertama untuk memasukkan nama pengguna dan yang kedua untuk sandi
• Dua tombol, satu untuk "Batalkan" dan satu untuk "Berikutnya"
• Nama aplikasi (Shrine)
• Gambar logo Shrine

Codelab terkait dapat ditemukan di:

• MDC 102: Tata Letak dan Struktur Desain Material
• MDC 103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis
• MDC 104: Komponen Lanjutan Desain Material

Di akhir MDC 104, Anda akan mem-build aplikasi Android yang terlihat seperti ini:

Komponen Android MDC dalam codelab ini

• Kolom teks
• Tombol

Dalam codelab ini, Anda akan menggunakan komponen default yang disediakan oleh Android MDC. Anda akan mempelajari cara menyesuaikan komponen tersebut di MDC 103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis.

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 mem-build aplikasi Android?

Pemula Menengah Mahir

Memulai Android Studio

Saat Anda membuka Android Studio, jendela yang berjudul "Welcome to Android Studio" akan ditampilkan. Namun, jika ini adalah pertama kalinya Anda meluncurkan Android Studio, selesaikan langkah-langkah Wizard Penyiapan Android Studio dengan nilai default. Langkah ini dapat memerlukan waktu beberapa menit untuk mendownload dan menginstal file yang diperlukan, jadi jangan ragu untuk membiarkan proses ini berjalan di latar belakang sembari Anda melakukan bagian berikutnya.

Mendownload aplikasi codelab awal

Download aplikasi awal

Aplikasi awal terletak di direktori material-components-android-codelabs-101-starter/kotlin.

...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 101-starter

Untuk bantuan lebih lanjut: Cloning a repositori dari GitHub

Memuat kode awal di Android Studio

1. 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 -> Shrine (atau telusuri shrine di komputer Anda) untuk membuka project Shipping.
2. Tunggu Android Studio mem-build dan menyinkronkan project, seperti yang ditunjukkan oleh indikator aktivitas di bagian bawah jendela Android Studio.
3. 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.

Menambahkan dependensi project

Project memerlukan dependensi pada MDC Android support library. Kode contoh yang Anda download seharusnya sudah mencantumkan dependensi ini, tetapi sebaiknya lakukan langkah-langkah berikut untuk memastikannya.

1. Buka file build.gradle modul app dan pastikan blok dependencies menyertakan dependensi pada Android MDC:

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

2. (Opsional) Jika perlu, edit file build.gradle untuk menambahkan dependensi berikut dan menyinkronkan project.

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'
}

Menjalankan aplikasi awal

Pastikan konfigurasi build di sebelah kiri tombol Run / Play adalah app. Tekan tombol Run/Play berwarna hijau untuk mem-build dan menjalankan aplikasi. Di jendela Select Deployment Target, jika Anda sudah memiliki perangkat Android yang tercantum di perangkat yang tersedia, lanjutkan ke Langkah 8. Jika tidak tercantum, klik Create New Virtual Device. Di layar Select Hardware, pilih perangkat ponsel, misalnya Pixel 2, lalu klik Next. Di layar System Image, pilih recent Android version, terutama API level yang paling tinggi. Jika tidak terinstal, klik link Download yang ditampilkan dan selesaikan proses download-nya. Klik Next. Di layar Android Virtual Device (AVD) , biarkan setelan lalu klik Finish. Pilih perangkat Android dari dialog target deployment. Klik Ok. Android Studio mem-build, men-deploy, dan otomatis membuka aplikasi di perangkat target.

Jika Anda tidak berhasil menambahkan dependensi atau berhasil menjalankan aplikasi, hentikan dan lakukan pemecahan masalah pada lingkungan developer Anda.

Jika Anda mendapatkan error INSTALL_FAILED_INVALID_APK saat membuat, coba lakukan 'Build' -> ‘Clean Project' di Android Studio.

Berhasil! Kode awal untuk halaman login Shrine akan berjalan di emulator Anda. Anda akan melihat nama "Shrine" dan logo Shrine tepat di bawahnya.

Mari kita lihat tata kodenya. Kami menyediakan framework navigasi Fragment sederhana dalam kode contoh kami untuk menampilkan fragmen dan berpindah antar-fragmen.

Buka MainActivity.kt di direktori shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine. Akan berisi seperti ini:

Catatan: Untuk mempelajari lebih lanjut tentang Navigasi, membuat dan mempertahankan jalur Navigasi menggunakan Android Studio, lihat latihan Kotlin Android Fundamentals 03.2: Menentukan jalur navigasi

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()
   }
}

Aktivitas ini menampilkan file tata letak R.layout.shr_main_activity, yang ditentukan dalam shr_main_activity.xml.

Anda dapat melihat bahwa di onCreate(), MainActivity.kt memulai transaksi Fragment untuk menampilkan LoginFragment. Untuk codelab ini, kita akan memodifikasi LoginFragment. Aktivitas ini juga mengimplementasikan metode navigateTo(Fragment), yang ditentukan di NavigationHost, yang memungkinkan fragmen mengarah ke fragmen lain.

Command + Click (atau Control + Klik) shr_main_activity di file aktivitas untuk membuka file tata letak, atau buka file tata letak di app -> res -> layout -> shr_main_activity.xml.

Catatan: Jika Anda melihat pratinjau aplikasi, bukan file XML saat membuka shr_main_activity.xml, beralihlah dari tab "Desain" ke tab "Teks" di kiri bawah panel. Kita akan mengerjakan tab "Teks" selama durasi codelab ini.

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"/>

Di sini, kita melihat <FrameLayout> sederhana yang berfungsi sebagai penampung untuk setiap fragmen yang ditampilkan aktivitas.

Berikutnya, buka 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 meng-inflate file tata letak shr_login_fragment dan menampilkannya di onCreateView().

Sekarang, mari kita lihat file tata letak shr_login_fragment.xml untuk melihat tampilan halaman login.

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>

Di sini, kita dapat melihat <LinearLayout> dengan <ImageView> di bagian atas, yang mewakili logo Shrine.

Setelah itu, ada tag <TextView> yang mewakili label Shrine di bawah logo. Teks untuk label ini adalah resource string bernama @string/shr_app_name. Jika Anda menekan Command + Click (atau Control + Klik) nama resource string, atau membuka app -> res -> values -> strings.xml, Anda dapat melihat file strings.xml tempat resource string ditetapkan. Saat resource string lainnya ditambahkan di masa mendatang, resource tersebut akan ditentukan di sini. Setiap resource dalam file ini harus memiliki awalan shr_ untuk menunjukkan bahwa resource tersebut adalah bagian dari aplikasi Shrine.

Setelah Anda memahami kode awal, mari kita implementasikan komponen pertamanya.

Untuk memulai, kami akan menambahkan dua kolom teks ke halaman login agar orang dapat memasukkan nama pengguna dan sandi mereka. Kita akan menggunakan komponen Kolom Teks MDC, yang mencakup fungsi bawaan yang menampilkan label mengambang dan pesan error.

Kolom teks Desain Material telah disempurnakan secara signifikan untuk memberikan lebih banyak opsi penyesuaian guna mendukung merek Anda, dengan peningkatan yang didukung oleh riset pengalaman pengguna (UX) yang menyeluruh demi kegunaan dan desain visual yang lebih baik.

Pelajari lebih lanjut kolom teks baru di artikel Pedoman Material.

Menambahkan XML

Di shr_login_fragment.xml, tambahkan dua elemen TextInputLayout dengan turunan TextInputEditText di dalam <LinearLayout>, di bawah label "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>

Tips: Untuk membuka file dengan cepat di Android Studio, ketuk dua kali tombol Shift untuk memunculkan kotak penelusuran mengambang, dan ketik nama file yang ingin Anda buka.

Cuplikan di atas mewakili dua kolom teks, masing-masing terdiri dari elemen <TextInputLayout> dan turunan <TextInputEditText>. Teks petunjuk untuk setiap kolom teks ditentukan dalam atribut android:hint.

Kami telah menyertakan dua resource string baru untuk kolom teks -- @string/shr_hint_username dan @string/shr_hint_password. Buka strings.xml untuk melihat resource string ini.

strings.xml

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

Menambahkan validasi input

Komponen TextInputLayout menyediakan fungsi masukan error bawaan.

Untuk menampilkan masukan error, buat perubahan berikut pada shr_login_fragment.xml:

• Tetapkan atribut app:errorEnabled ke true pada elemen Password TextInputLayout. Ini akan menambahkan padding tambahan untuk pesan error di bawah kolom teks.
• Tetapkan atribut android:inputType ke "textPassword" pada elemen Sandi TextInputEditText. Tindakan ini akan menyembunyikan teks input di kolom sandi.

Dengan perubahan ini, kolom teks di shr_login_fragment.xml akan terlihat seperti ini:

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>

Sekarang, coba jalankan aplikasi. Anda akan melihat halaman yang berisi dua kolom teks untuk "Nama Pengguna" dan "Sandi"!

Lihat animasi label mengambang:

Fitur Kolom Teks MDC mencakup:

• Menampilkan masukan error bawaan
• Mendukung tombol beralih untuk visibilitas sandi menggunakan app:passwordToggleEnabled
• Menawarkan fungsi teks bantuan bawaan menggunakan app:helperText
• Menampilkan jumlah karakter maksimal dan maksimum menggunakan app:counterEnabled dan app:counterMaxLength

Selanjutnya, kita akan menambahkan dua tombol ke halaman login: "Cancel" dan "Next". Kami akan menggunakan komponen Tombol MDC, yang dilengkapi dengan efek riak tinta Desain Material bawaan.

Menambahkan XML

Di shr_login_fragment.xml, tambahkan <RelativeLayout> ke <LinearLayout>, di bawah elemen TextInputLayout. Lalu, tambahkan dua elemen <MaterialButton> ke <RelativeLayout>.

File XML yang dihasilkan akan terlihat seperti ini:

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>

Catatan: Komponen MaterialButton memiliki gaya default tombol yang tinggi dan berwarna. Namun, untuk tombol Batal ini, kita ingin tombol yang tidak ditingkatkan dan tidak terisi. Untuk mencapai ini, kami menerapkan atribut style: @style/Widget.MaterialComponents.Button.TextButton.

Selesai. Saat menjalankan aplikasi, riak tinta akan ditampilkan saat Anda mengetuk setiap tombol.

Fitur Tombol MDC mencakup:

• Masukan sentuh bawaan (disebut MDC Ripple) secara default
• Elevasi default
• Garis dan sudut yang dapat disesuaikan

Terakhir, kita akan menambahkan beberapa kode Kotlin ke LoginFragment.kt untuk menghubungkan tombol "NEXT" untuk bertransisi ke fragmen lain.

Mari tambahkan metode isPasswordValid boolean pribadi dalam LoginFragment.kt di bawah onCreateView(), dengan logika untuk menentukan apakah sandi valid atau tidak. Untuk tujuan demo ini, kami hanya akan memastikan panjang sandi setidaknya 8 karakter:

LoginFragment.kt

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

Selanjutnya, tambahkan pemroses klik ke tombol "Next" yang menetapkan dan menghapus error berdasarkan metode isPasswordValid() yang baru saja kita buat. Di onCreateView(), pemroses klik ini harus ditempatkan di antara baris inflater dan baris return view.

Sekarang tambahkan pemroses kunci ke sandi TextInputEditText untuk memproses peristiwa penting yang akan menghapus error. Pemroses ini juga harus menggunakan isPasswordValid() untuk memeriksa apakah sandi valid atau tidak. Anda dapat menambahkannya langsung di bawah pemroses klik di onCreateView().

Metode onCreateView() Anda sekarang akan terlihat seperti ini:

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
   }
}

Catatan: Jika Android Studio mengalami error Cannot resolve symbol saat menulis kode ini, tekan Alt + Enter atau (Option + Return di Mac) untuk mengimpor simbol yang tidak ada.

Sekarang kita dapat menavigasi ke fragmen lain. Di onCreateView(), update OnClickListener untuk membuka fragmen lain saat validasi error berhasil. Kode clickListener Anda sekarang akan terlihat seperti berikut:

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)
   }
})

Kami telah menambahkan baris (activity as NavigationHost).navigateTo(ProductGridFragment(), false) ke kasus else pemroses klik. Baris ini memanggil metode navigateTo() dari MainActivity untuk membuka fragmen baru -- ProductGridFragment. Saat ini, halaman ini adalah halaman kosong yang akan Anda kerjakan di MDC-102.

Parameter false di navigateTo() memberi tahu aktivitas untuk tidak menambahkan fragmen saat ini ke data sebelumnya, sehingga pengguna tidak akan dapat kembali ke layar login menggunakan kunci kembali.

Sekarang, build aplikasi. Lanjutkan dan tekan tombol Next.

Anda berhasil! Layar ini akan menjadi titik awal codelab berikutnya yang akan Anda kerjakan di MDC-102.

Menggunakan markup XML dasar dan ~30 baris Kotlin, komponen Material untuk library Android telah membantu Anda membuat halaman login indah yang sesuai dengan panduan Desain Material, dan juga terlihat serta berperilaku secara konsisten di seluruh perangkat.

Aplikasi 101 MDC yang telah selesai tersedia dengan mendownload codelab yang sudah selesai, atau dengan menyelesaikan 101-lengkap dengan git: git checkout 101-complete.

Anda dapat menguji versi halaman berdasarkan versi yang telah selesai dengan membuka project shrine di direktori tersebut menggunakan Android Studio dan menjalankan aplikasi.

Langkah berikutnya

Tombol dan Kolom Teks adalah dua komponen inti di library Android MDC, tetapi ada banyak lagi. Anda dapat mempelajari komponen lainnya di MDC Android. Atau, buka MDC 102: Tata Letak dan Struktur Desain Material untuk mempelajari panel aplikasi atas, tampilan kartu, dan tata letak petak. Terima kasih telah mencoba Komponen Material. Kami harap Anda menikmati codelab ini.

Saya dapat menyelesaikan codelab ini dengan upaya dan dalam durasi waktu yang wajar

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju

Saya ingin terus menggunakan Komponen Material pada masa mendatang

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju