Material Design di Android: Lists, Cards and Colors

Kali ini kita akan mempelajari konsep dari panduan Desain Material Google, serangkaian praktik terbaik untuk membuat aplikasi yang indah secara visual dan mudah digunakan. Kita akan mempelajari cara menambahkan dan menggunakan CardView dan Tampilan Tombol Aksi Mengambang, menggunakan gambar secara efisien, serta menerapkan praktik terbaik desain untuk membuat pengalaman pengguna yang menyenangkan.

1. Unduh dan buka zip file MaterialMe-Starter.
2. Buka aplikasi di Android Studio.
3. Bangun dan jalankan aplikasi.

Aplikasi menampilkan daftar nama olahraga dengan beberapa teks berita placeholder untuk setiap olahraga. Layout dan gaya aplikasi saat ini membuatnya hampir tidak bisa dipakai: setiap baris data tidak dipisahkan dengan jelas dan tidak ada gambar atau warna untuk membuat pengguna tertarik.

Salah satu prinsip dasar Material Design adalah pengguna gambar yang berani untuk meningkatkan pengalaman pengguna. Menambahkan gambar ke item daftar RecyclerView adalah awal yang baik untuk membuat pengalaman pengguna yang dinamis dan memukau.

Dalam bagian ini, kita akan memindahkan setiap item daftar ke dalam CardView dan menambahkan Gambar untuk membuat aplikasi mematuhi panduan Material.

CardView tidak disertakan di Android SDK default, jadi kita harus menambahkannya sebagai dependensi build.gradle. Lakukan yang berikut:

1. Di file build.gradle tingkat aplikasi kita, tambahkan baris berikut ke blok dependensi:

   compile 'com.android.support:cardview-v7:24.1.1'

2. Di file list_item.xml, kurung LinearLayout root dengan CardView dengan atribut berikut:

Pada string.xml, masukkan array string berikut:

Tampilan sementara adalah seperti ini setekah dimasukkan carView nya

Kemudian kita masukkan fungsu berkut, untuk menimplementasikan gambar pada RecycleView nya seperti pada postingan sebelumnya

Ada sejumlah cara untuk mengurangi konsumsi memori saat memuat gambar, tetapi salah satu pendekatan yang paling mudah adalah menggunakan Image Loading Library seperti Glide, yang akan kita lakukan di langkah ini. Glide menggunakan pemrosesan latar belakang, serta beberapa pemrosesan kompleks lain, untuk mengurangi kebutuhan memori pemuatan gambar. Ini juga menyertakan beberapa fitur yang berguna, seperti menampilkan gambar placeholder saat gambar yang diinginkan sedang dimuat.

Tambahkan dependensi berikut untuk Glide, di file build.gradle tingkat aplikasi Anda:

compile 'com.github.bumptech.glide:glide:3.5.2'

KEmudian kasukkan dan modifikasi method seperti berikut ini

Tampilan akan seperti berikut, tapi disini belum bisa dilakuakn fungsi nya, masih berupa tampilan

Kemudian kita akan memasukkan fungsi pada tampilan yang kit buat

ItemTouchHelper.SimpleCallback memungkinkan Anda mendefinisikan arah mana yang didukung untuk menggesek dan memindahkan item daftar dan mengimplementasikan perilaku penggesekan dan pemindahan.

Lakukan langkah berikut:

1. Buat objek ItemTouchHelper baru, di metode onCreate() MainActivity.java. Untuk argumennya, buat instance baru ItemTouchHelper.SimpleCallback dan tekan Enter untuk membuat Android Studio mengisi metode yang diperlukan: onMove() dan onSwiped().

KEmudian isi menjadi seperti berikut ini

Kita bisa lihat, bahwa aplikasi kita sudah mengimplementasikan fitur swap

Kemudian kita akan menambahkan fitur detail pada aplikasi kita

1. Buat aktivitas baru dengan masuk ke File > New > Activity > Empty Activity.
2. Beri nama DetailActivity, dan terima semua default.
3. Di file layout yang baru dibuat, buang padding dari RelativeLayout rootview.
4. Salin semua dari tampilan TextView dan ImageView dari file list_item.xml ke file activity_detail.xml.
5. Tambahkan kata “Detail” ke setiap referensi ke sebuah id, untuk membedakannya dengan id list_item. Misalnya, ubah id ImageView dari sportsImage ke sportsImageDetail, serta semua referensi ke id ini untuk penepatan relatif, seperti layout_below.
6. Contohnya seperti berikut, (lakukan pada seluruh attribute)
7. Untuk textview subTitleDetal, buang semua string teks placeholder dan tempelkan paragraf teks generik untuk menggantikan semua teks detail (Misalnya, beberapa paragraf Lorem Ipsum).
8. Ubah padding TextView menjadi 16dp.

9. Bungkus keseluruhan activity_detail.xml di ScrollView dan ubah atribut layout_height RelativeLayout ke “wrap_content”.

Kemudian masukkan kode berikut ke beberapa method:

Untuk emnambahkan FAB untuk merefresh halaman yang telah dilakukan proses swapping,

1. Definisikan metode resetSports() di MainActivity.java agar cukup memanggil initializeData() untuk menyetel ulang data.
2. MAsukkan kode berikut main layout activity_main: