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

Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MMD 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 membuat halaman login: tombol dan kolom teks. 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 produk

Ini adalah yang kedua dari empat codelab yang akan memandu Anda mem-build aplikasi untuk produk yang disebut Shrine. Sebaiknya Anda melakukan semua codelab secara berurutan seiring kemajuannya 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 menyesuaikan komponen tersebut 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 mem-build aplikasi Android?

Pemula Menengah Mahir

Melanjutkan dari MDC-101?

Jika Anda sudah menyelesaikan MDC-101, kode Anda seharusnya siap untuk codelab ini. Anda dapat 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/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 102-starter

Untuk bantuan lebih lanjut: Cloning a 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 java -> Shrine (atau telusuri shrine di komputer Anda) untuk membuka project Shrine.
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 MDC Android support library. 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 Android MDC:

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

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

Jika Anda mendapatkan error INSTALL_FAILED_INVALID_APK saat membuat, 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 terungkap saat halaman login ditutup, dengan layar yang mengatakan "You did it!" Kerja bagus. Namun, sekarang pengguna tidak dapat melakukan tindakan apa pun atau tidak tahu mereka di bagian aplikasi yang mana. Untuk membantu mengatasinya, mari kita tambahkan 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 navigasi yang paling penting 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

Pada shr_product_grid_fragment.xml, hapus tag <LinearLayout> yang berisi "Anda berhasil!" TextView dan menggantinya 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 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 ke akun kita.

Menambahkan ikon navigasi

Selagi masih 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 gaya panel aplikasi atas

Anda juga dapat menambahkan tombol ke sisi akhir panel aplikasi. Di Android, tombol ini disebut tombol tindakan.

Awal dan akhir adalah istilah yang menyatakan arah, yang mengacu pada awal dan akhir baris teks dengan cara bahasa-agnostik. Saat bekerja dalam bahasa LTR (dari kiri ke kanan) seperti bahasa Inggris, awal berarti kiri dan akhir berarti kanan. Dalam bahasa RTL (dari kanan ke kiri) seperti bahasa Arab, awal berarti kanan dan akhir berarti kiri.

Untuk informasi selengkapnya mengenai Pencerminan UI, lihat pedoman Desain Material di Bidirectionality.

Kita akan menata panel aplikasi atas dan menambahkan tombol tindakan ke menu secara terprogram.

Pertama, mari kita buat metode untuk menyiapkan toolbar. Metode ini harus mendapatkan referensi ke toolbar menggunakan id, dan juga mendapatkan referensi ke aktivitas menggunakan getActivity(). Jika aktivitas tersebut bukan null, tetapkan Toolbar untuk digunakan sebagai ActionBar menggunakan setSupportActionBar:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }
}

Selanjutnya, tepat di bawah metode setUpToolbar yang baru saja kita tambahkan, mari kita ganti onCreateOptionsMenu untuk meng-inflate konten shr_toolbar_menu.xml ke dalam toolbar:

ProductGridFragment.java

@Override
public void 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.

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

Sekarang tambahkan panggilan ke metode setUpToolbar yang kita tambahkan ke konten metode onCreateView() dengan yang berikut ini:

ProductGridFragment.java

@Override
public View onCreateView(
       @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   // Inflate the layout for this fragment with the ProductGrid theme
   View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);

   // Set up the toolbar
   setUpToolbar(view);

   return view;
}

Terakhir, tambahkan metode onCreate() ke ProductGridFragment.java. Dalam isi metode, tetapkan parameter setHasOptionMenu sebagai true.

Metode akan terlihat seperti berikut:

ProductGridFragment.java

@Override
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setHasOptionsMenu(true);
}

Kode di atas menyetel panel aplikasi dari tata letak XML kita menjadi Panel Tindakan untuk aktivitas ini. Callback onCreateOptionsMenu memberi tahu aktivitas apa yang harus 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: "Telusuri" 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.java Anda akan terlihat seperti berikut:

ProductGridFragment.java

package com.google.codelabs.mdc.java.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 android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;


public class ProductGridFragment extends Fragment {

   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setHasOptionsMenu(true);
   }
  
   @Override
   public View onCreateView(
           @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       // Inflate the layout for this fragment with the ProductGrid theme
       View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);

       // Set up the toolbar
       setUpToolbar(view);

       return view;
   }
  
   private void setUpToolbar(View view) {
       Toolbar toolbar = view.findViewById(R.id.app_bar);
       AppCompatActivity activity = (AppCompatActivity) getActivity();
       if (activity != null) {
           activity.setSupportActionBar(toolbar);
       }
   }

   @Override
   public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
       super.onCreateOptionsMenu(menu, menuInflater);
   }

}

Buat 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 menunjukkannya pada lapisan yang berbeda dengan konten.

Anda akan melihat status bar di bagian atas tampak tidak cocok. Jangan khawatir untuk itu untuk saat ini, karena kami akan memperbaikinya saat kami melakukan Tema Warna di MDC-103.

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

Kartu

Kartu adalah komponen 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.

Di shr_product_grid_fragment.xml, tambahkan kode berikut 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>

Membuat dan menjalankan:

Dalam pratinjau ini, Anda dapat melihat kartu disisipkan dari tepi kiri layar, dan memiliki sudut bulat dan bayangan (yang menunjukkan ketinggian kartu). Seluruh area ini disebut "container." Selain container itu sendiri, 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. Kartu yang baru saja dibuat, berisi dua TextView (satu untuk judul, dan satu untuk teks sekunder) dalam LinearLayout, sejajar dengan bagian bawah kartu.

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

Saat beberapa kartu muncul di layar, kartu tersebut dikelompokkan ke dalam satu atau beberapa koleksi. Kartu dalam petak bersifat koplanar, yang berarti kartu tersebut berada pada ketinggian istirahat yang sama 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 (di sini NetworkImageView, yang memungkinkan kita menyertakan gambar dari URL), dan dua TextViews.

Berikutnya, lihat ProductCardRecyclerViewAdapter yang kami berikan untuk Anda. Paketnya sama dengan ProductGridFragment.

ProductCardRecyclerViewAdapter.java

package com.google.codelabs.mdc.java.shrine;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.google.codelabs.mdc.java.shrine.network.ImageRequester;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;

import java.util.List;

/**
* Adapter used to show a simple grid of products.
*/
public class ProductCardRecyclerViewAdapter extends RecyclerView.Adapter<ProductCardViewHolder> {

   private List<ProductEntry> productList;
   private ImageRequester imageRequester;

   ProductCardRecyclerViewAdapter(List<ProductEntry> productList) {
       this.productList = productList;
       imageRequester = ImageRequester.getInstance();
   }

   @NonNull
   @Override
   public ProductCardViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.shr_product_card, parent, false);
       return new ProductCardViewHolder(layoutView);
   }

   @Override
   public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
       // TODO: Put ViewHolder binding code here in MDC-102
   }

   @Override
   public int getItemCount() {
       return productList.size();
   }
}

Class adaptor 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 memodifikasinya nanti.

ProductCardViewHolder.java

package com.google.codelabs.mdc.java.shrine;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;

public class ProductCardViewHolder extends RecyclerView.ViewHolder {

   public ProductCardViewHolder(@NonNull View itemView) {
       super(itemView);
       // TODO: Find and store views from itemView
   }
}

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

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.java setelah Anda memanggil setUpToolbar(view) dan sebelum pernyataan return:

ProductGridFragment.java

@Override
public View onCreateView(
       @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   ...
   setUpToolbar(view);

   // Set up the RecyclerView
   RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
   recyclerView.setHasFixedSize(true);
   recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
   ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
           ProductEntry.initProductEntryList(getResources()));
   recyclerView.setAdapter(adapter);
   int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
   int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
   recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

   return view;
}

Cuplikan kode di atas berisi langkah-langkah inisialisasi yang diperlukan untuk menyiapkan RecyclerView. Ini termasuk menetapkan pengelola tata letak RecyclerView, serta menginisialisasi dan menyetel adaptor RecyclerView.

File ProductGridFragment.java Anda sekarang akan terlihat seperti berikut:

ProductGridFragment.java

package com.google.codelabs.mdc.java.shrine;

import android.os.Bundle;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;


import com.google.codelabs.mdc.java.shrine.network.ProductEntry;

public class ProductGridFragment extends Fragment {

   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setHasOptionsMenu(true);
   }

   @Override
   public View onCreateView(
           @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       // Inflate the layout for this fragment with the ProductGrid theme
       View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);

       // Set up the toolbar
       setUpToolbar(view);

       // Set up the RecyclerView
       RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
       recyclerView.setHasFixedSize(true);
       recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
       ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
               ProductEntry.initProductEntryList(getResources()));
       recyclerView.setAdapter(adapter);
       int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
       int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
       recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

       return view;
   }

   private void setUpToolbar(View view) {
       Toolbar toolbar = view.findViewById(R.id.app_bar);
       AppCompatActivity activity = (AppCompatActivity) getActivity();
       if (activity != null) {
           activity.setSupportActionBar(toolbar);
       }
   }

   @Override
   public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
       super.onCreateOptionsMenu(menu, menuInflater);
   }

}

Buat dan jalankan.

Kartu sudah ada! Ekstensi 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 ketiga tampilan sebagai berikut:

ProductCardViewHolder.java

package com.google.codelabs.mdc.java.shrine;

import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import androidx.annotation.NonNull;

import com.android.volley.toolbox.NetworkImageView;

public class ProductCardViewHolder extends RecyclerView.ViewHolder {

   public NetworkImageView productImage;
   public TextView productTitle;
   public TextView productPrice;

   public ProductCardViewHolder(@NonNull View itemView) {
       super(itemView);
       productImage = itemView.findViewById(R.id.product_image);
       productTitle = itemView.findViewById(R.id.product_title);
       productPrice = itemView.findViewById(R.id.product_price);
   }
}

Pada adaptor RecyclerView, di ViewHolder, perbarui metode onBindViewHolder() untuk menyetel informasi pada setiap tampilan:

ProductCardRecyclerViewAdapter.java

@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
   if (productList != null && position < productList.size()) {
       ProductEntry product = productList.get(position);
       holder.productTitle.setText(product.title);
       holder.productPrice.setText(product.price);
       imageRequester.setImageFromUrl(holder.productImage, product.url);
   }
}

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

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

Membuat dan menjalankan:

Produk kami kini ditampilkan di aplikasi.

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

Aplikasi MDC 102 yang telah selesai tersedia dengan mendownload codelab yang sudah selesai, atau dengan menyelesaikan 102 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 kami telah menggunakan empat komponen Desain Material inti dari library MDC-Android. Anda dapat menjelajahi lebih banyak komponen di Katalog MDC-Android dalam MDC Android.

Meskipun berfungsi sepenuhnya, aplikasi kami belum menunjukkan merek 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