5.2: Material Design: Lists, Cards and Colors

Task 1: Download the starter code

1.1 Open and run the Material Me project

download project Material Me yang telah lengkap lalu ekstrak

buka projecttersebut di dalam android studio kita

1.2 Explore the app

mengeskplorasi java :

1. sport java

2. sportAdapter.java

3. mainactivity.java

4. string.xml

5. list_item.xml

Task 2: Add a CardView and images

2.1 Add the CardView

cardview tidak termasuk dalam android SDK oleh karena itu harus ditambah terlebih dahulu di gradle, ikuti langkah berikut :

lalu buat layout-nya

run aplikasi :

2.2 Download the images

download file image yang diperintahan di dalam website, setelah itu cpy-paste sehingga akan ada pada drawable setelah itu di dalam string masukkan kodingan dibawah :

2.3 Modify the Sport object

objek dari sport.java membutuhkan drawable resource yang merespon terhadap sport, untuk itu tambahkan kodingan dibawah :

2.4 Fix the initializeData() method

Struktur data yang mudah adalah menggunakan TypedArray. TypedArray memungkinkan menyimpan larik sumber daya XML lainnya. Dengan menggunakan TypedArray, Anda akan bisa memperoleh sumber daya gambar, serta judul dan informasi olahraga dengan menggunakan pengindeksan di loop yang sama.

2.5 Add an ImageView to the list items

2.6 Load the images using Glide

Setelah mengunduh gambar dan menyiapkan ImageView, langkah berikutnya adalah memodifikasi SportsAdapter untuk memuat gambar ke dalam ImageView di onBindViewHolder().

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 Anda lakukan di langkah ini.

Task 3: Make your CardView swipeable, movable, and clickable

3.1 Implement swipe to dismiss

Android SDK menyertakan sebuah kelas bernama ItemTouchHelper yang digunakan untuk mendefinisikan apa yang terjadi ke item daftar RecyclerView saat pengguna melakukan berbagai tindakan sentuh, seperti menggesek atau menyeret dan melepas.

ikuti kodingan dibawah :

Jalankan aplikasi Anda, Anda sekarang bisa menggesek item daftar ke kiri dan ke kanan untuk menghapusnya

3.2 Implement drag and drop

Anda juga bisa mengimplementasikan fungsionalitas seret dan lepas menggunakan SimpleCallback yang sama. Argumen SimpleCallback pertama menentukan arah mana yang didukung oleh ItemTouchHelper untuk memindahkan objek. Lakukan yang berikut:

3.3 Implement the detail view

aplikasikan layoit dibawah :

Setel OnClickListener ke itemview di konstruktor:

Dalam metode onClick(), dapatkan objek Sport untuk item yang diklik menggunakan getAdapterPosition().

Buat sebuah Intent yang meluncurkan aktivitas Detail, dan letakkan judul dan sumber daya gambar sebagai ekstra di Intent:

Panggil startActivity() di variabel mContext, dengan meneruskan Intent baru.Dalam DetailActivity.java, lakukan inisialisasi ImageView dan TextView judul di onCreate():

Dapatkan judul dari Intent yang masuk dan setel ke TextView,

Gunakan Glide untuk memuat gambar ke dalam ImageView:

Jalankan aplikasi. Mengetuk item daftar sekarang meluncurkan aktivitas detail.

Task 4: Add the FAB and choose a Material Design color palette

4.1 Add the FAB

Salah satu prinsip Material Design adalah menggunakan elemen yang konsisten di semua aplikasi dan platform sehingga pengguna mengenali pola dan mengetahui cara menggunakannya.

FAB adalah tombol bulat yang mengambang di atas UI. Ini digunakan untuk mempromosikan tindakan tertentu kepada pengguna, tindakan yang paling mungkin digunakan pada aktivitas tertentu.

4.2 Choose a Material Design palette

Jika Anda menjalankan aplikasi, Anda mungkin memperhatikan bahwa FAB memiliki warna yang tidak Anda definisikan di mana pun.

1. Buka file styles.xml Anda (yang ada di direktori values). Gaya AppTheme mendefinisikan tiga warna secara default: colorPrimary, colorPrimaryDark, dan colorAccent. Gaya ini didefinisikan oleh nilai dari file colors.xml. Desain Material menyarankan agar memilih setidaknya tiga warna ini untuk aplikasi Anda:
2. Warna primer. Ini otomatis digunakan untuk mewarnai bilah aplikasi Anda.
3. Warna gelap primer. Warna lebih gelap dari warna yang sama. Ini digunakan untuk bilah status di atas bilah aplikasi, di antara yang lain.
4. Warna aksen. Warna yang cukup kontras dengan warna primer. Ini digunakan untuk beragam sorotan, tetapi juga menjadi warna default FAB.
5. Ambil warna dari panduan untuk digunakan sebagai warna utama Anda. Warna harus dalam rentang 300-700 sehingga Anda masih bisa memilih warna aksen dan gelap yang sesuai. Modifikasi nilai hex colorPrimary di file colors.xml Anda agar sesuai dengan warna yang Anda pilih.
6. Pilih tingkat warna yang lebih gelap dari warna yang sama untuk digunakan sebagai warna gelap primer. Modifikasi warna hex colors.xml lagi agar sesuai dengan colorPrimaryDark.
7. Pilih warna aksen untuk FAB Anda dari warna yang nilainya dimulai dengan A dan yang warnanya cukup kontras dengan warna primer (seperti Orange A200). Ubah nilai colorAccent di colors.xml agar menyesuaikan.
8. Tambahkan Tambahkan atribut android:tint ke FAB dan setel agar sama dengan #FFFFFF (putih) untuk mengubah warna ikon ke putih.
9. Jalankan aplikasi. Bilah Aplikasi dan FAB berubah untuk mencerminkan palet warna baru