Android MDC-102: Tata Letak dan Struktur Material (Kotlin)

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

Dalam codelab MDC-101, Anda menggunakan dua Komponen Material (MDC) untuk mem-build halaman login: kolom teks dan tombol dengan ink ripple (efek riak tinta). Sekarang, mari kita perluas dasar ini dengan menambahkan navigasi, struktur, dan data.

Yang akan Anda buat

Dalam codelab ini, Anda akan mem-build layar utama untuk aplikasi bernama Shrine, sebuah aplikasi e-commerce yang menjual pakaian dan perlengkapan rumah. Layar utama ini akan berisi:

• Panel aplikasi atas
• Daftar petak yang lengkap berisi produk

Codelab ini adalah yang kedua dari empat codelab yang akan memandu Anda mem-build aplikasi untuk sebuah produk yang disebut Shrine. Sebaiknya pelajari semua codelab secara berurutan karena Anda perlu menyelesaikan setiap tugas langkah demi langkah. Codelab terkait dapat ditemukan di: MDC-101: Dasar-dasar Komponen Material (MDC) 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 yang terlihat seperti ini:

Komponen MDC-Android dalam codelab ini

• AppBarLayout
• MaterialCardView

Dalam codelab ini, Anda akan menggunakan komponen default yang disediakan oleh MDC-Android. Anda akan mempelajari cara menyesuaikannya 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 membuat aplikasi Android?

Pemula Menengah Mahir

Melanjutkan dari MDC-101?

Jika Anda sudah menyelesaikan MDC-101, kode Anda untuk codelab ini seharusnya sudah disiapkan. Langsung ke langkah 3: Menambahkan panel aplikasi atas.

Memulai dari awal?

Mendownload aplikasi codelab awal

Download aplikasi awal

Aplikasi awal terletak di direktori material-components-android-codelabs-102-starter/kotlin. 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 102-starter

Untuk mendapatkan bantuan lebih lanjut: Meng-clone 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 support library MDC Android. 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 MDC Android:

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

2. (Opsional) Jika perlu, edit file build.gradle untuk menambahkan dependensi berikut dan sinkronkan 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 bahwa 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 perangkat Android sudah tercantum di perangkat Anda yang tersedia, lewati 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 gagal menambahkan dependensi atau menjalankan aplikasi, hentikan dan lakukan pemecahan masalah pada lingkungan developer Anda.

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

Berhasil! Anda akan melihat halaman login Shrine dari codelab MDC-101.

Setelah layar login terlihat bagus, mari kita isi aplikasi dengan beberapa produk.

Layar utama akan ditampilkan saat halaman login ditutup, dengan layar yang bertuliskan "You did it!". Bagus! Namun, sekarang pengguna tidak dapat melakukan tindakan apa pun atau tidak tahu mereka di bagian aplikasi yang mana. Untuk membantu mengatasinya, kini saatnya Anda menambahkan navigasi.

Navigasi mengacu pada komponen, interaksi, petunjuk visual, dan arsitektur informasi yang memungkinkan pengguna melakukan perpindahan dalam aplikasi. Ini membantu agar konten dan fiturnya dapat ditemukan, sehingga tugas mudah diselesaikan.

Desain Material menawarkan pola navigasi yang memastikan tingkat kegunaan yang tinggi. Salah satu komponen yang paling terlihat adalah panel aplikasi atas.

Anda mungkin mengenal panel aplikasi atas sebagai "Navigation Bar" di iOS, atau hanya "App Bar" atau "Header".

Untuk menyediakan navigasi serta memberi pengguna akses cepat ke tindakan lainnya, mari tambahkan panel aplikasi atas.

Menambahkan widget AppBar

Di shr_product_grid_fragment.xml, hapus blok <LinearLayout> yang berisi "Anda berhasil!". TextView dan ganti dengan kode berikut:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

shr_product_grid_fragment.xml Anda sekarang akan terlihat seperti berikut:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
   tools:context=".ProductGridFragment">

   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>
  
</FrameLayout>

Banyak panel aplikasi memiliki tombol di samping judul. Mari tambahkan ikon menu di aplikasi kita.

Menambahkan ikon navigasi

Saat masih berada di shr_product_grid_fragment.xml, tambahkan kode berikut ke komponen XML Toolbar yang baru saja Anda tambahkan ke tata letak:

shr_product_grid_fragment.xml

app:navigationIcon="@drawable/shr_menu"

shr_product_grid_fragment.xml Anda akan terlihat seperti berikut:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
   tools:context=".ProductGridFragment">
  
   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:navigationIcon="@drawable/shr_menu"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>
  
</FrameLayout>

Menambahkan tombol tindakan dan menata panel aplikasi atas

Anda juga dapat menambahkan tombol ke sisi akhir panel aplikasi. Di Android, ini disebut tombol tindakan. Kita akan menata gaya panel aplikasi atas dan menambahkan tombol tindakan ke menunya secara terprogram.

Penting: Saat mengimpor class Toolbar, pastikan Anda mengimpor androidx.appcompat.widget.Toolbar, bukan android.widget.Toolbar

Dalam fungsi onCreateView ProductGridFragment.kt, tetapkan Toolbar activity yang akan digunakan sebagai ActionBar menggunakan setSupportActionBar. Anda dapat melakukannya setelah tampilan dibuat dengan inflater.

ProductGridFragment.kt

override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   // Inflate the layout for this fragment with the ProductGrid theme
   val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

   // Set up the toolbar.
   (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

   return view;
}

Penting: Pastikan untuk import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*.. Hal ini akan memungkinkan kita mengakses tampilan dengan ID app_bar menggunakan properti sintetis Kotlin, bukan menggunakan findViewById.

Selama codelab, Anda dapat terus menambahkan pernyataan impor saat diminta oleh Android Studio.

Selanjutnya, tepat di bawah metode yang baru saja kita ubah untuk menyiapkan toolbar, mari kita mengganti onCreateOptionsMenu untuk memunculkan konten shr_toolbar_menu.xml ke toolbar:

ProductGridFragment.kt

override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
   menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
   super.onCreateOptionsMenu(menu, menuInflater)
}

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.

Terakhir, ganti onCreate() di ProductGridFragment.kt, dan setelah memanggil super(), panggil setHasOptionMenu dengan true:

ProductGridFragment.kt

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setHasOptionsMenu(true)
}

Cuplikan kode di atas menetapkan panel aplikasi dari tata letak XML kita menjadi Panel Tindakan untuk aktivitas ini. Callback onCreateOptionsMenu memberi tahu aktivitas apa yang akan digunakan sebagai menu kita. Dalam hal ini, item menu dari R.menu.shr_toolbar_menu akan dimasukkan ke panel aplikasi. File menu berisi dua item: "Search" dan "Filter".

shr_toolbar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/search"
       android:icon="@drawable/shr_search"
       android:title="@string/shr_search_title"
       app:showAsAction="always" />
   <item
       android:id="@+id/filter"
       android:icon="@drawable/shr_filter"
       android:title="@string/shr_filter_title"
       app:showAsAction="always" />
</menu>

Setelah perubahan tersebut, file ProductGridFragment.kt Anda akan terlihat seperti berikut:

ProductGridFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*

class ProductGridFragment : Fragment() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setHasOptionsMenu(true)
   }

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment with the ProductGrid theme
       val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

       // Set up the tool bar
       (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

       return view;
   }

   override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
       super.onCreateOptionsMenu(menu, menuInflater)
   }
}

Build dan jalankan. Layar utama Anda akan terlihat seperti ini:

Sekarang toolbar memiliki ikon navigasi, judul, dan dua ikon tindakan di sisi kanan. Toolbar juga menampilkan ketinggian menggunakan bayangan halus yang menunjukkan bahwa toolbar berada di lapisan yang berbeda dengan konten.

Anda akan melihat status bar di bagian atas terlihat sedikit generik. Jangan khawatir tentang hal itu untuk saat ini, karena kita akan memperbaikinya saat melakukan pemberian tema warna di MDC-103.

Karena saat ini aplikasi ini memiliki beberapa struktur, mari kita susun konten dengan menempatkannya ke dalam kartu.

Kartu

Kartu adalah elemen independen yang menampilkan konten dan tindakan dalam satu subjek. Dengan kartu, konten serupa dapat ditampilkan sebagai koleksi dengan fleksibel.

Menambahkan kartu

Mari mulai dengan menambahkan satu kartu di bawah panel aplikasi atas. Kartu harus memiliki region untuk gambar, judul, dan label untuk teks sekunder. Tambahkan kode berikut di shr_product_grid_fragment.xml di bawah AppBarLayout.

shr_product_grid_fragment.xml

<com.google.android.material.card.MaterialCardView
   android:layout_width="160dp"
   android:layout_height="180dp"
   android:layout_marginBottom="16dp"
   android:layout_marginLeft="16dp"
   android:layout_marginRight="16dp"
   android:layout_marginTop="70dp"
   app:cardBackgroundColor="?attr/colorPrimaryDark"
   app:cardCornerRadius="4dp">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
       android:background="#FFFFFF"
       android:orientation="vertical"
       android:padding="8dp">

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:text="@string/shr_product_title"
           android:textAppearance="?attr/textAppearanceHeadline6" />

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:text="@string/shr_product_description"
           android:textAppearance="?attr/textAppearanceBody2" />
   </LinearLayout>
</com.google.android.material.card.MaterialCardView>

Build dan jalankan:

Dalam pratinjau ini, Anda dapat melihat kartu disisipkan dari tepi kiri, dan memiliki sudut bulat serta bayangan (yang menunjukkan ketinggian kartu). Seluruh elemen disebut "penampung". Selain container, semua elemen di dalamnya bersifat opsional.

Anda dapat menambahkan elemen berikut ke penampung: teks header, thumbnail atau avatar, teks subjudul, pemisah, dan bahkan tombol serta ikon. Misalnya, kartu yang baru saja kita buat berisi dua TextView (satu untuk judul, dan satu untuk teks sekunder) dalam LinearLayout, yang diratakan ke bagian bawah kartu.

Kartu biasanya ditampilkan dalam koleksi dengan kartu lain. Di bagian codelab berikutnya, kita akan menyusunnya sebagai koleksi dalam petak.

Jika ada beberapa kartu di layar, kartu tersebut dikelompokkan ke dalam satu atau beberapa koleksi. Kartu dalam petak bersifat koplanar, yang berarti kartu berada pada ketinggian yang sama antara satu sama lain (kecuali diambil atau ditarik, tetapi kita tidak akan membahasnya dalam codelab ini).

Menyiapkan petak kartu

Lihat file shr_product_card.xml yang telah kami berikan untuk Anda:

shr_product_card.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/white"
   app:cardElevation="2dp"
   app:cardPreventCornerOverlap="true">

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

       <com.android.volley.toolbox.NetworkImageView
           android:id="@+id/product_image"
           android:layout_width="match_parent"
           android:layout_height="@dimen/shr_product_card_image_height"
           android:background="?attr/colorPrimaryDark"
           android:scaleType="centerCrop" />

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

           <TextView
               android:id="@+id/product_title"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/shr_product_title"
               android:textAppearance="?attr/textAppearanceHeadline6" />

           <TextView
               android:id="@+id/product_price"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/shr_product_description"
               android:textAppearance="?attr/textAppearanceBody2" />
       </LinearLayout>
   </LinearLayout>
</com.google.android.material.card.MaterialCardView>

Tata letak kartu ini berisi kartu dengan gambar (dalam hal ini, NetworkImageView, yang memungkinkan kita memuat dan menampilkan gambar dari URL), dan dua TextViews.

Selanjutnya, lihat ProductCardRecyclerViewAdapter yang telah kami berikan untuk Anda. File ini ada dalam paket yang sama dengan ProductGridFragment.

ProductCardRecyclerViewAdapter.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry

/**
* Adapter used to show a simple grid of products.
*/
class ProductCardRecyclerViewAdapter(private val productList: List<ProductEntry>) : RecyclerView.Adapter<ProductCardViewHolder>() {

   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProductCardViewHolder {
       val layoutView = LayoutInflater.from(parent.context).inflate(R.layout.shr_product_card, parent, false)
       return ProductCardViewHolder(layoutView)
   }

   override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
       // TODO: Put ViewHolder binding code here in MDC-102
   }

   override fun getItemCount(): Int {
       return productList.size
   }
}

Class adapter di atas mengelola konten petak kita. Untuk menentukan tindakan yang harus dilakukan setiap tampilan dengan konten yang diberikan, kita akan segera menulis kode untuk onBindViewHolder().

Dalam paket yang sama, Anda juga dapat melihat ProductCardViewHolder. Class ini menyimpan tampilan yang memengaruhi tata letak kartu, sehingga kita dapat mengubahnya nanti.

ProductCardViewHolder.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.View
import androidx.recyclerview.widget.RecyclerView

class ProductCardViewHolder(itemView: View) //TODO: Find and store views from itemView
   : RecyclerView.ViewHolder(itemView)

Untuk menyiapkan petak, pertama-tama kita akan menghapus MaterialCardView placeholder dari shr_product_grid_fragment.xml. Selanjutnya, Anda harus menambahkan komponen yang merepresentasikan petak kartu kita. Dalam hal ini, kita akan menggunakan RecyclerView. Tambahkan komponen RecyclerView ke shr_product_grid_fragment.xml di bawah komponen XML AppBarLayout:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

shr_product_grid_fragment.xml Anda akan terlihat seperti berikut:

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
   tools:context=".ProductGridFragment">

   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:navigationIcon="@drawable/shr_menu"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>

   <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="56dp"
       android:background="@color/productGridBackgroundColor"
       android:paddingStart="@dimen/shr_product_grid_spacing"
       android:paddingEnd="@dimen/shr_product_grid_spacing"
       app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/recycler_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />

   </androidx.core.widget.NestedScrollView>

</FrameLayout>

Terakhir, di onCreateView(), tambahkan kode inisialisasi RecyclerView ke ProductGridFragment.kt setelah Anda memanggil setUpToolbar(view) dan sebelum pernyataan return:

ProductGridFragment.kt

override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   // Inflate the layout for this fragment with the ProductGrid theme
   val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

   // Set up the toolbar.
   (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

   // Set up the RecyclerView
   view.recycler_view.setHasFixedSize(true)
   view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
   val adapter = ProductCardRecyclerViewAdapter(
           ProductEntry.initProductEntryList(resources))
   view.recycler_view.adapter = adapter
   val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
   val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
   view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

   return view;
}

Cuplikan kode di atas berisi langkah-langkah inisialisasi yang diperlukan untuk menyiapkan RecyclerView. Hal ini mencakup menyetel pengelola tata letak RecyclerView, serta menginisialisasi dan menyetel adaptor RecyclerView.

File ProductGridFragment.kt Anda sekarang akan terlihat seperti berikut:

ProductGridFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*

class ProductGridFragment : Fragment() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setHasOptionsMenu(true)
   }

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment with the ProductGrid theme
       val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

       // Set up the toolbar.
       (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

       // Set up the RecyclerView
       view.recycler_view.setHasFixedSize(true)
       view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
       val adapter = ProductCardRecyclerViewAdapter(
               ProductEntry.initProductEntryList(resources))
       view.recycler_view.adapter = adapter
       val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
       val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
       view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

       return view;
   }

   override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
       super.onCreateOptionsMenu(menu, menuInflater)
   }
}

Build dan jalankan:

Kartu sudah ada sekarang. Komponen tersebut belum menampilkan apa pun, jadi mari kita tambahkan beberapa data produk.

Menambahkan gambar dan teks

Untuk setiap kartu, tambahkan gambar, nama produk, dan harga. Abstraksi ViewHolder kita menyimpan tampilan untuk setiap kartu. Di ViewHolder, tambahkan tiga tampilan sebagai berikut.

ProductCardViewHolder.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

import com.android.volley.toolbox.NetworkImageView

class ProductCardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

   var productImage: NetworkImageView = itemView.findViewById(R.id.product_image)
   var productTitle: TextView = itemView.findViewById(R.id.product_title)
   var productPrice: TextView = itemView.findViewById(R.id.product_price)
}

Perbarui metode onBindViewHolder() di ProductCardRecyclerViewAdapter untuk menetapkan judul, harga, dan gambar produk untuk setiap tampilan produk seperti yang ditunjukkan di bawah:

ProductCardRecyclerViewAdapter.kt

override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
   if (position < productList.size) {
       val product = productList[position]
       holder.productTitle.text = product.title
       holder.productPrice.text = product.price
       ImageRequester.setImageFromUrl(holder.productImage, product.url)
   }
}

Kode di atas memberi tahu adaptor RecyclerView tentang tindakan yang harus dilakukan dengan setiap kartu, menggunakan ViewHolder.

Di sini, data teks ditetapkan pada setiap TextView ViewHolder, dan ImageRequester dipanggil untuk mendapatkan gambar dari URL. ImageRequester adalah class yang kami sediakan untuk memudahkan Anda, dan menggunakan library Volley (Ini adalah topik di luar cakupan codelab ini, tetapi Anda dapat menjelajahi kode sendiri).

Build dan jalankan:

Produk kami kini ditampilkan di aplikasi.

Aplikasi ini memiliki alur dasar yang mengarahkan pengguna dari layar login ke layar utama, tempat produk dapat dilihat. Hanya dalam beberapa baris kode, panel aplikasi atas dengan judul dan tiga tombol, serta petak kartu untuk menampilkan konten aplikasi ini ditambahkan. Layar utamanya kini sederhana dan fungsional, dengan struktur dasar dan konten yang dapat ditindaklanjuti.

Aplikasi MDC 102 yang sudah selesai tersedia dengan mendownload codelab yang sudah selesai, atau dengan melihat 102-complete dengan git: git checkout 102-complete.

Anda dapat menguji versi aplikasi Anda berdasarkan aplikasi di cabang tersebut.

Langkah berikutnya

Dengan panel aplikasi atas, kartu, kolom teks, dan tombol, kini kita telah menggunakan empat komponen Desain Material inti dari library MDC-Android. Anda dapat mempelajari lebih lanjut komponen dengan membuka Katalog MDC-Android.

Meskipun berfungsi sepenuhnya, aplikasi ini belum menyatakan merek atau gaya tertentu. Dalam MDC-103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis, kita akan menyesuaikan gaya komponen ini untuk mengekspresikan merek modern yang cerah.

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