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 dalam aplikasi Anda. MDC Android dibangun berdasarkan 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 membuat peningkatan desain langsung pada aplikasi yang 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 akan 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?
2. Menyiapkan lingkungan pengembangan
Mendownload aplikasi codelab awal
Aplikasi awal terletak di direktori material-components-android-codelabs-111-starter/java. 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 java -> shipping (atau telusuri komputer Anda untuk shipping) 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.
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-alpha06'
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 dengan garis luar atau pengisian latar belakang, pengguna lebih cenderung berinteraksi dengan formulir Anda atau mengidentifikasi kolom teks dalam konten yang lebih rumit.
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 harus terlihat sebagai 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.TextInputLayout
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.java, perbarui metode onCreate() agar terlihat sebagai berikut:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(null);
}
}
if (noErrors) {
// All fields are valid!
}
}
});
}
Build dan jalankan. Tekan SAVE, tetapi biarkan setidaknya satu kolom teks kosong:
Kolom teks yang kosong berwarna merah dan memiliki teks error di bawahnya.
4. Memperbarui tombol
MDC memiliki tombol dengan:
- Ink ripple (efek riak tinta)
- Sudut membulat
- Dukungan tema
- Tata letak dan tipografi yang sempurna
- Dibangun di AppCompatButton (class tombol Android standar), sehingga Anda tahu cara menggunakannya dalam kode Anda.
Mengganti class tombol secara opsional
Secara default, library Material otomatis meng-inflate Tombol reguler ke Tombol MDC. Namun, Anda dapat mengganti semua referensi ke Tombol dengan MaterialButton secara opsional sehingga Anda dapat mengakses metode tambahan yang hanya tersedia di MaterialButton seperti mengubah radius sudut. Tombol MDC adalah komponen plug-and-play sederhana. Anda hanya perlu 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. Menambahkan kartu
MaterialCardView adalah komponen yang dibangun di CardView dengan:
- Elevasi dan gaya yang benar
- Atribut lebar dan warna goresan
Membungkus konten dalam kartu
Bungkus LinearLayout yang berisi konten Anda di shipping_info_activity.xml dengan komponen MaterialCardView, sebagai 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 familiar tetapi baru untuk membungkus konten Anda dengan mudah dalam kartu.
6. Rekap
Anda telah mengganti beberapa komponen umum untuk menunjukkan nilai langsung: kolom teks, tombol, dan kartu, dan Anda tidak perlu melakukan desain ulang aplikasi secara keseluruhan. Komponen lain juga dapat membuat perbedaan besar, seperti Top App Bar dan TabLayout.
Langkah berikutnya
Anda dapat mempelajari lebih lanjut komponen di MDC-Android dengan mengunjungi Katalog Widget Android.