Menampilkan daftar gambar menggunakan kartu

1. Sebelum memulai

Di codelab sebelumnya, Anda membuat aplikasi Affirmations yang menampilkan daftar teks di RecyclerView.

Di codelab lanjutan ini, Anda akan menambahkan gambar yang menginspirasi pada setiap afirmasi aplikasi. Anda akan menampilkan teks dan gambar untuk setiap afirmasi dalam kartu, menggunakan widget MaterialCardView dari Komponen Material untuk library Android. Kemudian Anda akan menyelesaikan aplikasi ini dengan meningkatkan UI untuk membuat pengalaman pengguna yang lebih kohesif dan menarik. Ini adalah screenshot aplikasi yang telah selesai:

Prasyarat

• Dapat menambahkan aset gambar ke aplikasi.
• Paham cara mengubah tata letak XML.
• Dapat membuat aplikasi yang menampilkan daftar teks di RecyclerView.
• Dapat membuat adaptor untuk RecyclerView.

Yang akan Anda pelajari

• Cara menambahkan gambar ke daftar afirmasi yang ditampilkan di RecyclerView.
• Cara menggunakan MaterialCardView di tata letak item RecyclerView.
• Cara membuat perubahan visual di UI agar aplikasi terlihat lebih baik.

Yang akan Anda bangun

• Aplikasi Affirmations bagus yang menggunakan RecyclerView untuk menampilkan daftar kartu. Setiap kartu berisi gambar dan teks afirmasi.

Yang Anda perlukan

• Komputer yang dilengkapi Android Studio versi 4.1 atau yang lebih baru.
• Akses ke koneksi internet untuk mendownload file gambar.
• Aplikasi Affirmations dari codelab Membuat aplikasi Affirmations sebelumnya. (Kode awal tidak disediakan. Membuat aplikasi adalah prasyarat).

2. Menambahkan gambar ke item daftar

Sejauh ini Anda telah membuat adaptor ItemAdapter untuk menampilkan string afirmasi di RecyclerView. Adaptor ini berfungsi dengan baik, tetapi visualisasinya kurang menarik. Dalam tugas ini, Anda akan mengubah tata letak item daftar dan kode adaptor untuk menampilkan gambar dengan afirmasi.

Mendownload gambar

1. Untuk memulai, buka project aplikasi Affirmations di Android Studio dari codelab sebelumnya. Jika Anda tidak memiliki project ini, ikuti langkah-langkah di codelab sebelumnya untuk membuat project tersebut. Kemudian kembali ke sini.
2. Selanjutnya download file gambar ke komputer Anda. Seharusnya ada sepuluh gambar, satu gambar untuk setiap afirmasi di aplikasi Anda. Nama file harus diubah dari image1.jpg menjadi image10.jpg.
3. Salin gambar dari komputer Anda ke dalam folder (app/src/main/res/drawable) project res > drawable Anda di dalam Android Studio. Jika aset ini telah ditambahkan, Anda akan dapat mengakses gambar tersebut dari kode Anda menggunakan ID asetnya, seperti R.drawable.image1. (Anda mungkin harus membuat ulang kode untuk Android Studio guna menemukan gambarnya.)

Sekarang gambar ini siap digunakan di aplikasi.

Menambahkan dukungan untuk gambar di class Affirmation

Pada langkah ini, Anda akan menambahkan properti di class data Affirmation untuk menyimpan nilai ID aset gambar. Dengan begitu, satu instance objek Affirmation akan berisi satu ID aset untuk teks afirmasi dan satu ID aset untuk gambar afirmasi.

1. Buka file Affirmation.kt dalam paket model.
2. Ubah konstruktor class Affirmation dengan menambahkan parameter Int lain bernama imageResourceId.

Menggunakan anotasi aset

stringResourceId dan imageResourceId adalah nilai bilangan bulat. Meskipun tampak benar, pemanggil dapat tidak sengaja meneruskan argumen dalam urutan yang salah (imageResourceId terlebih dahulu, bukan stringResourceId).

Untuk menghindari hal ini, Anda dapat menggunakan anotasi Aset. Anotasi berguna karena fungsi ini menambahkan info tambahan ke class, metode, atau parameter. Anotasi selalu dideklarasikan dengan simbol @. Dalam kasus ini, tambahkan anotasi @StringRes ke properti ID aset string dan anotasi @DrawableRes ke properti ID resource drawable Anda. Kemudian Anda akan mendapatkan peringatan jika memberikan jenis ID aset yang salah.

1. Tambahkan anotasi @StringRes ke stringResourceId.
2. Tambahkan anotasi @DrawableRes ke imageResourceId.
3. Pastikan impor androidx.annotation.DrawableRes dan androidx.annotation.StringRes ditambahkan di bagian atas file Anda setelah deklarasi paket.

Affirmation.kt

package com.example.affirmations.model

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes

data class Affirmation(
   @StringRes val stringResourceId: Int,
   @DrawableRes val imageResourceId: Int
)

Melakukan inisialisasi daftar afirmasi dengan gambar

Setelah mengubah konstruktor class Affirmation, Anda harus mengupdate class Datasource. Teruskan ID aset gambar ke setiap objek Affirmation yang diinisialisasi.

1. Buka Datasource.kt. Anda akan melihat error untuk setiap pembuatan instance Affirmation.
2. Untuk setiap Affirmation, tambahkan ID aset gambar sebagai argumen, seperti R.drawable.image1.

Datasource.kt

package com.example.affirmations.data

import com.example.affirmations.R
import com.example.affirmations.model.Affirmation

class Datasource() {

    fun loadAffirmations(): List<Affirmation> {
        return listOf<Affirmation>(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            Affirmation(R.string.affirmation3, R.drawable.image3),
            Affirmation(R.string.affirmation4, R.drawable.image4),
            Affirmation(R.string.affirmation5, R.drawable.image5),
            Affirmation(R.string.affirmation6, R.drawable.image6),
            Affirmation(R.string.affirmation7, R.drawable.image7),
            Affirmation(R.string.affirmation8, R.drawable.image8),
            Affirmation(R.string.affirmation9, R.drawable.image9),
            Affirmation(R.string.affirmation10, R.drawable.image10)
        )
    }
}

Menambahkan ImageView ke tata letak item daftar

Agar gambar ditampilkan untuk setiap afirmasi dalam daftar, Anda harus menambahkan ImageView ke tata letak item. Karena Anda sekarang memiliki dua tampilan (TextView dan ImageView), Anda harus menempatkannya sebagai tampilan turunan di dalam ViewGroup. Untuk mengatur tampilan di kolom vertikal, Anda dapat menggunakan LinearLayout. LinearLayout meratakan semua tampilan turunan dalam satu arah, secara vertikal atau horizontal.

1. Buka res > layout > list_item.xml. Tambahkan LinearLayout di sekitar TextView yang ada dan setel properti orientation ke vertical.
2. Pindahkan baris deklarasi xmlns schema dari elemen TextView ke elemen LinearLayout untuk menghilangkan error.

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

3. Di dalam LinearLayout, sebelum TextView,, tambahkan ImageView dengan ID aset item_image.
4. Setel lebar ImageView menjadi match_parent dan tinggi menjadi 194dp. Tergantung pada ukuran layar, nilai ini akan menampilkan beberapa kartu di layar kapan saja.
5. Setel scaleType menjadi centerCrop.
6. Setel atribut importantForAccessibility menjadi no karena gambar digunakan untuk tujuan dekoratif.

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="194dp"
        android:id="@+id/item_image"
        android:importantForAccessibility="no"
        android:scaleType="centerCrop" />

Mengupdate ItemAdapter untuk menyetel gambar

1. Buka adapter/ItemAdapter.kt (app > java > adapter > ItemAdapter)
2. Buka class ItemViewHolder.
3. Instance ItemViewHolder harus memiliki referensi ke TextView dan referensi ke ImageView di tata letak item daftar. Buat perubahan berikut.

Di bawah inisialisasi properti textView, tambahkan val bernama imageView. Gunakan findViewById() untuk menemukan referensi ke ImageView dengan ID item_image dan tetapkan fungsi tersebut ke properti imageView.

ItemAdapter.kt

class ItemViewHolder(private val view: View): RecyclerView.ViewHolder(view) {
    val textView: TextView = view.findViewById(R.id.item_title)
    val imageView: ImageView = view.findViewById(R.id.item_image)
}

4. Temukan fungsi onBindViewHolder() di ItemAdapter.
5. Sebelumnya Anda menyetel stringResourceId afirmasi menjadi textView di ItemViewHolder. Sekarang setel imageResourceId item afirmasi ke ImageView tampilan item daftar.

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        val item = dataset[position]
        holder.textView.text = context.resources.getString(item.stringResourceId)
        holder.imageView.setImageResource(item.imageResourceId)
    }

6. Jalankan aplikasi, lalu scroll daftar afirmasi.

Aplikasi ini terlihat jauh lebih bagus dengan gambar. Namun, Anda tetap dapat meningkatkan UI aplikasi ini. Di bagian berikutnya, Anda akan membuat penyesuaian kecil pada aplikasi ini untuk meningkatkan UI.

3. Memoles UI

Sejauh ini, Anda telah membuat aplikasi fungsional yang berisi daftar string dan gambar afirmasi. Di bagian ini, Anda akan melihat bagaimana perubahan kecil dalam kode dan XML bisa membuat aplikasi tampak lebih menarik.

Menambahkan padding

Untuk memulai, tambahkan beberapa spasi kosong di antara item dalam daftar.

1. Buka item_list.xml (app > res > layout > item_list.xml), lalu tambahkan padding 16dp ke LinearLayout yang ada.

list_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

2. Tambahkan padding 16dp ke item_title TextView.
3. Di TextView, setel atribut textAppearance ke ?attr/textAppearanceHeadline6. textAppearance adalah atribut yang memungkinkan Anda menentukan gaya tertentu untuk teks. Untuk kemungkinan lain dari nilai tampilan teks yang ditentukan sebelumnya, Anda dapat melihat bagian TextAppearances di postingan blog tentang Atribut Tema Umum ini.

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:textAppearance="?attr/textAppearanceHeadline6" />

4. Jalankan aplikasi. Apakah menurut Anda daftar tersebut tampak lebih baik?

Menggunakan kartu

Masih sulit untuk mengetahui apakah suatu gambar adalah bagian dari teks afirmasi di atas atau di bawahnya. Untuk memperbaikinya, Anda dapat menggunakan tampilan Kartu. Tampilan Kartu memberikan cara mudah untuk menampung sekelompok tampilan, sekaligus memberikan gaya yang konsisten untuk penampung. Untuk panduan Desain Material selengkapnya tentang cara menggunakan kartu, lihat panduan tentang kartu ini.

1. Tambahkan MaterialCardView di sekitar LinearLayout yang ada.
2. Sekali lagi, pindahkan deklarasi skema dari LinearLayout ke dalam MaterialCardView.
3. Setel layout_width dari MaterialCardView ke match_parent, dan layout_height ke wrap_content.
4. Tambahkan layout_margin dari 8dp.
5. Hapus padding di LinearLayout, agar tidak terlalu banyak spasi kosong.
6. Sekarang jalankan aplikasi lagi. Dapatkah Anda membedakan setiap afirmasi dengan MaterialCardView?

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/item_image"
            android:layout_width="match_parent"
            android:layout_height="194dp"
            android:importantForAccessibility="no"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:textAppearance="?attr/textAppearanceHeadline6" />

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

Mengubah warna tema aplikasi

Warna tema aplikasi default mungkin tidak menenangkan seperti beberapa pilihan lain yang dapat Anda buat. Dalam tugas ini, Anda akan mengubah warna tema aplikasi menjadi biru. Anda kemudian mengubahnya lagi menggunakan ide Anda sendiri!

Anda dapat menemukan nuansa biru yang ditentukan sebelumnya dari palet warna Desain Material dari link ini.

Dalam codelab ini, Anda akan menggunakan warna berikut dari palet Desain Material:

• blue_200: #FF90CAF9
• blue_500: #FF2196F3
• blue_700: #FF1976D2

Menambahkan aset warna

Tentukan warna yang digunakan dalam aplikasi Anda di tempat terpusat: file colors.xml.

1. Buka colors.xml (res > values > colors.xml).
2. Tambahkan aset warna baru ke file untuk warna biru yang ditentukan di bawah:

<color name="blue_200">#FF90CAF9</color>
<color name="blue_500">#FF2196F3</color>
<color name="blue_700">#FF1976D2</color>

Mengubah warna tema

Setelah memiliki aset warna baru, Anda dapat menggunakannya di tema.

1. Buka themes.xml (res > values > themes > themes.xml).
2. Temukan bagian <!-- Primary brand color. -->.
3. Tambahkan atau ubah colorPrimary untuk menggunakan @color/blue_500.
4. Tambahkan atau ubah colorPrimaryVariant untuk menggunakan @color/blue_700.

<item name="colorPrimary">@color/blue_500</item>
<item name="colorPrimaryVariant">@color/blue_700</item>

5. Jalankan aplikasi. Anda akan melihat warna panel aplikasi berubah menjadi biru.

Mengupdate warna tema gelap

Sebaiknya pilih lebih banyak warna pudar untuk tema gelap aplikasi.

1. Buka file themes.xml tema gelap (themes > themes.xml (night)).
2. Tambahkan atau ubah atribut tema colorPrimary dan colorPrimaryVariant seperti berikut:

<item name="colorPrimary">@color/blue_200</item>
<item name="colorPrimaryVariant">@color/blue_500</item>

3. Jalankan aplikasi Anda.
4. Di Settings perangkat Anda, aktifkan Dark Theme.

5. Aplikasi Anda akan beralih ke Dark Theme. Pastikan screenshot terlihat seperti di bawah ini:

6. Pada tahap ini, Anda juga dapat menghapus warna yang tidak digunakan di file colors.xml Anda (misalnya, aset warna ungu digunakan di tema aplikasi default).

Mengubah ikon aplikasi

Sebagai langkah terakhir, Anda akan mengupdate ikon aplikasi.

1. Download file ikon aplikasi ic_launcher_foreground.xml dan ic_launcher_background.xml. Jika browser menampilkan file, pilih File > Save Page As... untuk menyimpannya ke komputer, bukan mendownloadnya.
2. Di dalam Android Studio, hapus dua file: file drawable/ic_launcher_background.xml dan drawable-v24/ic_launcher_foreground.xml karena keduanya untuk ikon aplikasi sebelumnya. Anda dapat menghapus centang pada kotak Safe delete (with usage search).
3. Kemudian, klik kanan folder res > drawable dan pilih New > Image Asset.

4. Di jendela Configure Image Asset, pastikan Foreground layer dipilih.

5. Di bawahnya, temukan label Path.
6. Klik ikon folder di dalam kotak teks Path.
7. Temukan dan buka file ic_launcher_foreground.xml yang Anda download di komputer.

8. Beralih ke tab Background Layer.
9. Klik ikon Browse di dalam kotak teks Path.
10. Temukan dan buka file ic_launcher_background.xml di komputer. Tidak ada perubahan lain yang diperlukan.
11. Klik Next.

12. Di dialog Confirm Icon Path, klik Finish. Anda dapat menimpa ikon yang ada.
13. Untuk praktik terbaik, Anda dapat memindahkan vektor drawable baru ic_launcher_foreground.xml dan ic_launcher_background.xml ke direktori aset baru yang disebut drawable-anydpi-v26. Ikon adaptif diperkenalkan di API 26, sehingga aset ini hanya akan digunakan pada perangkat yang menjalankan API 26 dan yang lebih baru (untuk semua dpi).
14. Hapus direktori drawable-v24 jika tidak ada lagi yang tersisa.
15. Jalankan aplikasi Anda dan lihat ikon aplikasi yang baru dan bagus di panel daftar aplikasi!

16. Sebagai langkah terakhir, jangan lupa memformat ulang Kotlin dan file XML di project sehingga kode Anda lebih rapi dan mengikuti panduan gaya.

Selamat! Anda telah membuat aplikasi Affirmations yang menginspirasi.

Dengan menggunakan pengetahuan cara menampilkan daftar data di aplikasi Android, apa yang dapat Anda buat berikutnya?

4. Kode solusi

Kode solusi untuk aplikasi Affirmations ada di repositori GitHub di bawah:

1. Buka halaman repositori GitHub yang disediakan untuk project.
2. Pastikan nama cabang cocok dengan nama cabang yang ditentukan dalam codelab. Misalnya, dalam screenshot berikut, nama cabang adalah main (utama).

3. Di halaman GitHub project, klik tombol Code yang akan menampilkan pop-up.

4. Pada pop-up, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
5. Temukan file di komputer Anda (mungkin di folder Downloads).
6. Klik dua kali pada file ZIP untuk mengekstraknya. Tindakan ini akan membuat folder baru yang berisi file project.

Membuka project di Android Studio

1. Mulai Android Studio.
2. Di jendela Welcome to Android Studio, klik Open.

Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > Open.

3. Di file browser, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
4. Klik dua kali pada folder project tersebut.
5. Tunggu Android Studio membuka project.
6. Klik tombol Run untuk mem-build dan menjalankan aplikasi. Pastikan aplikasi di-build seperti yang diharapkan.

5. Ringkasan

• Untuk menampilkan konten tambahan di RecyclerView, ubah class model data dan sumber data yang mendasarinya. Kemudian lakukan update pada tata letak item daftar dan adaptor untuk menyetel data tersebut pada tampilan.
• Gunakan anotasi aset untuk membantu memastikan bahwa jenis ID aset yang tepat diteruskan ke konstruktor class.
• Gunakan Komponen Material untuk library Android agar aplikasi Anda lebih mudah mengikuti panduan Desain Material yang direkomendasikan.
• Gunakan MaterialCardView untuk menampilkan konten di kartu Material.
• Penyesuaian visual kecil pada warna dan spasi aplikasi Anda dapat membuat aplikasi tampak lebih bagus dan konsisten.

6. Pelajari lebih lanjut

• Membuat daftar dengan RecyclerView
• RecyclerView class
• RecyclerView Adaptor
• RecyclerView ViewHolder
• Daftar di Desain Material
• Kartu di Desain Material
• MaterialCardView
• Mulai Menggunakan Komponen Material untuk Android
• Gaya Android: Tema vs. Gaya
• Ikon adaptif

7. Tugas tantangan

Dalam serangkaian codelab ini, Anda telah belajar menggunakan LinearLayoutManager dengan RecyclerView. RecyclerView dapat menggunakan LayoutManagers lain untuk data tata letak yang berbeda.

• Ubah properti layoutManager dari RecyclerView menjadi GridLayoutManager.
• Ubah jumlah kolom menjadi 3.
• Ubah tata letak adaptor untuk memvisualisasikan data dalam petak.