Android

Modul 1: RecyclerView

Tujuan Praktikum

  1. Mempraktikan cara menggunakan kelas RecyclerView untuk menampilkan item dalam daftar yang dapat digulir (scroll).
  2. Mempraktikan cara menambahkan item secara dinamis pada RecyclerView.
  3. Mengimplementasikan cara melakukan tindakan saat pengguna mengetuk item tertentu.
  4. Mengimplementasikan cara menggunakan FAB (Floating Action Button) dan melakukan tindakan saat pengguna mengetuknya.

Landasan Teori

Memberikan kemampuan terhadap pengguna untuk dapat menampilkan, menggulir, dan memanipulasi daftar item data yang tersedia merupakan fitur yang umum yang terdapat dalam sebuah aplikasi Android. Beberapa contoh daftar yang dapat digulir adalah daftar kontak, daftar putar musik, permainan, direktori foto, kamus, daftar belanja, dan indeks dokumen.

Anda dapat menggunakan ScrollView untuk menyediakan fitur di atas untuk menggulir View atau ViewGroup. Salah satu alasannya adalah bahwa ScrollView ini mudah diimplemntasikan. Namun penggunaaannya tidak disarankan untuk daftar yang panjang dan dapat digulir.

RecyclerView adalah subkelas dari ViewGroup dan merupakan cara yang lebih efisien jika dilihat dari penggunaan sumber daya untuk menampilkan daftar yang dapat digulir. Alih-alih membuat View untuk setiap item yang mungkin atau mungkin tidak terlihat di layar, RecyclerView membuat sejumlah item daftar dan akan gunakan kembali item tersebut untuk konten yang terlihat.

Terdapat beberapa komponen yang diperlukan agar pengimplementasian RecyclerView ini dapat berjalan dengan baik, yaitu:

  • Data,
  • RecylerView itu sendiri,
  • Layout untuk sebuat item data (dalam berkas XML),
  • LayoutManager yang bertugas mengorganisasi antarmukan dalam view,
  • Adapter untuk menghubungkan data ke RecyclerView, dan
  • ViewHolder yang memuat informasi dari view untuk ditampilkan di sebuah item

Alat dan Bahan

Alat dan bahan yang digunakan pada praktikum ini adalah sebagai berikut:

  • Perangkat lunak Android Studio
  • Perangkat lunak Emulator
  • Perangkat keras device Android
  • Kabel USB
  • Internet

Metode Praktikum

86fabc5476249934.png
Gambar 1. Aplikasi yg Akan Dibuat

Dalam praktikum ini Anda akan membuat sebuah aplikasi seperti gambar 1 di atas dengan melakukan hal berikut:

  • Menggunakan RecyclerView untuk menampilkan daftar yang dapat digulir.
  • Menambahkan event handler untuk setiap klik yang dilakukan terhadap item daftar.
  • Menambahkan item ke daftar menggunakan FAB. Tombol ini berupa tombol merah muda di layar di bagian Activity utama. FAB akan digunakan untuk tindakan utama yang Anda ingin pengguna ambil.

Tugas 1 - Membuat Proyek dan Dataset

Sebelum Anda dapat menampilkan RecyclerView, Anda memerllukan data untuk ditampilkan. Karenanya Data merupakan komponen utama yang dibutuhkan dalam implementasi RecyclerView. Dalam tugas ini, Anda akan membuat proyek baru untuk aplikasi dan mebuat sebuah dataset melalusi looping. Dalam aplikasi yang lebih kompleks, data Anda mungkin berasal dari penyimpanan internal (file, basis data SQLite, preferensi tersimpan), dari aplikasi lain (Kontak, Foto), atau dari internet (penyimpanan awan, Google Sheets, atau data apa pun dengan API).

Menyimpan dan mengambil data adalah topik yang dibahas dalam bab penyimpanan data. Untuk latihan ini, Anda akan mensimulasikan data dengan membuatnya dalam metode callback onCreate() pada kelas MainActivity.

1.1. Buat proyek dan tata letak

  1. Mulai Android Studio,
  2. Buat proyek baru dengan nama RecyclerView , pilih templat Aktivitas Dasar (Basic Activity), dan hasilkan file tata letak (layout). Templat Aktivitas Dasar menyediakan FAB dan app bar di dalam layout Activity (activity_main.xml), dan layout untuk Activity Konten (content_main.xml).
  3. Jalankan aplikasi Anda. Anda akan melihat judul aplikasi RecyclerView dan "Hello World" di layar.

Jika Anda menemukan kesalahan terkait Gradle, lakukan sinkronisasi proyek.

1.2. Tambahkan kode untuk membuat data

Pada langkah ini Anda akan membuat daftar string LinkedList Word yang diakhiri dengan angka, seperti pada ["Word 1", "Word 2", "Word 3", ....].

  1. Buka MainActivity dan tambahkan variabel mWordList sebagai instan dari LinkedList dan jadikan variabel tersebut mempunyai visibility private
    public class MainActivity extends AppCompatActivity { 
    	private final LinkedList mWordList = new LinkedList<>(); 
        // ... Kode lainnya di MainActivity ...
    }
    
  2. Tambahkan kode dalam metode onCreate() yang diisi mWordList dengan daftar kata:
    // masukkan data inisial ke dalam word list.
    for (int i = 0; i < 20; i++) {
    	mWordList.addLast("Word " + i);
    }
    
    Kode di atas, menggabungkan string "Word" dengan nilai i sambil meningkatkan nilainya. Ini semua yang Anda butuhkan sebagai dataset untuk latihan ini.

1.3. Ubah Ikon FAB (Opsional)

Dalam praktikum ini, Anda juga akan menggunakan FAB untuk menghasilkan kata baru untuk dimasukkan ke dalam daftar. Template Basic Activity menyediakan FAB, tetapi Anda mungkin ingin mengubah ikonnya. Anda dapat memilih ikon dari serangkaian ikon di Android Studio untuk FAB. Ikuti langkah ini:

  1. Buka res di panel Project > Android , dan klik kanan (atau Control-klik) folder drawable.
  2. Pilih New > Image Asset. Dialog Configure Image Asset akan muncul.
  3. Pilih Action Bar and Tab Items di menu dropdown di bagian atas dialog.
  4. Ubah ic_action_name di baigan Name menjadi ic_add_for_fab.
  5. Klik gambar clipart (logo Android di sebelah Clipart:) untuk memilih gambar clipart sebagai ikon. Halaman ikon muncul. Klik ikon yang ingin Anda gunakan untuk FAB, seperti tanda tambah ( + ).
  6. Pilih HOLO_DARK dari menu dropdown Theme. Dengan demikian akan mengatur ikon menjadi putih dengan latar belakang berwarna gelap (atau hitam). Klik Next.
  7. Klik Finish dalam dialog Confirm Icon Path.

Tip : Untuk deskripsi lengkap tentang penambahan ikon, lihat Membuat ikon aplikasi dengan Image Asset Studio


Tugas 2: Buat RecyclerView

Dalam tugas kedua ini, Anda akan mulai menampilkan data dalam a RecyclerView. Untuk melakukannya, Anda membutuhkan komponenen-komponen berikut ini:

  • Data untuk ditampilkan: Kita akan menggunakan mWordList yang dibuat sebelumnya.
  • Sebuah RecyclerView untuk daftar gulir yang berisi item daftar.
  • Layout untuk satu item data. Semua item daftar terlihat sama.
  • Layout Manager (manajer tata letak). RecyclerView.LayoutManager menangani hierarki dan tata letak elemen View. RecyclerView membutuhkan manajer tata letak untuk mengelola pengaturan item daftar yang terkandung di dalamnya. Tata letak ini bisa vertikal, horizontal, atau kotak. Dalam praktikum ini, Anda akan menggunakan vertikal LinearLayoutManager.
  • Adapter, RecyclerView.Adapter menghubungkan data Anda ke RecyclerView. Dia bertugas untuk mempersiapkan data dalam RecyclerView.ViewHolder. Anda akan membuat adapter yang memasukkan dan memperbarui kata-kata yang Anda hasilkan dalam tampilan Anda.
  • Sebuah ViewHolder. Di dalam adapter Anda, Anda akan membuat ViewHolder yang berisi informasi View untuk menampilkan satu item dari tata letak item.

Diagram di bawah ini menunjukkan hubungan antara Data, Adapter, ViewHolder, dan, LayoutManager.

b2b7e77b940791a5.png
Gambar 2. Hubungan antara Data, Adapter, ViewHolder dan LayoutManager

Untuk menerapkan bagian-bagian ini, Anda harus:

  1. Menambahkan elemen RecyclerView ke layout MainActivity Konten XML (content_main.xml) untuk aplikasi RecyclerView.
  2. Buat file layout XML (wordlist_item.xml) untuk satu item daftar, yaitu WordListItem.
  3. Buat adapter (WordListAdapter) dengan sebuah ViewHolder(WordViewHolder). Terapkan metode yang mengambil data, dan letakkan di ViewHolder, dan biarkan layout manager untuk menampilkannya.
  4. Dalam metode onCreate() di MainActivity, buat variabel RecyclerView dan inisialisasi dengan adapter dan layout manager standar.

Mari kita lakukan langkah-langkah di atas satu per satu.

2.1. Ubah Tata Letak (Layout) di content_main.xml

Untuk menambahkan elemen RecyclerView ke layout XML, ikuti langkah-langkah berikut:

  1. Buka content_main.xml di aplikasi RecyclerView Anda. Isinya menunjukkan TextView "Hello World" di dalam sebuah ConstraintLayout.
  2. Klik tab Text untuk menampilkan kode XML.
  3. Ganti seluruh TextViewelemen dengan yang berikut:
    <android.support.v7.widget.RecyclerView
    	android:id="@+id/recyclerview"
      	android:layout_width="match_parent"
      	android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
    

    Anda perlu menentukan path lengkap (android.support.v7.widget.RecyclerView), karena RecyclerView merupakan bagian dari Perpustakaan Dukungan (Support Library).

2.2. Buat Tata Letak (Layout) untuk Satu Item Daftar

Adapter membutuhkan tata letak (layout) untuk satu item dalam daftar. Semua item menggunakan layout yang sama. Anda perlu menentukan layout item daftar dalam file layout terpisah, karena digunakan secara terpisah oleh adapter dari RecyclerView.
Buat layout item kata sederhana menggunakan LinearLayout vertikal dengan TextView:

  1. Klik kanan pada folder app > res> layout dan pilih New > Layout resource file.
  2. Beri nama file wordlist_item dan klik OK.
  3. Di file layout baru, klik tab Text untuk menampilkan kode XML.
  4. Ubah ConstraintLayout yang telah dibuat dengan file menjadi LinearLayout dengan atribut berikut:
    Atribut LinearLayoutNilai
    android:layout_width"match_parent"
    android:layout_height"wrap_content"
    android:orientation"vertical"
    android:padding"6dp"
  5. Tambahkan sebuah TextView untuk sebuah kata di LinearLayout. Gunakan word sebagai ID dari kata tersebut:
    AtributNilai
    android:id"@+id/word"
    android:layout_width"match_parent"
    android:layout_height"wrap_content"
    android:textSize"24sp"
    android:textStyle"bold"

2.3 Buat Sebuah Style dari Atribut TextView

Anda dapat menggunakan style untuk memungkinkan elemen berbagi tampilan grup atribut. Cara mudah untuk membuat style adalah mengekstraksi style elemen UI yang sudah Anda buat. Untuk mengekstrak informasi gaya untuk word TextViewdi wordlist_item.xml:

  1. Buka wordlist_item.xml jika belum dibuka.
  2. Klik kanan (atau Kontrol-klik) tag TextView yang baru saja Anda buat pada wordlist_item.xml, dan pilih Refactor> Extract> Style. Kemudian Extract Android Style dialog akan muncul.
  3. Beri nama style Anda dengan word_title dan biarkan semua opsi lain. Pilih opsi Launch 'Use Style Where Possible'. Kemudian klik OK .
  4. Saat diminta, terapkan gaya ke semua proyek .
  5. Temukan dan periksa style word_title dalam value > styles.xml.
  6. Buka kembali wordlist_item.xml jika belum dibuka. Sekarang TextView sudah menggunakan style baru, seperti ditunjukkan potongan kode di bawah ini.
    <?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"
      	android:padding="6dp">
    	<TextView
      		android:id="@+id/word"
      		style="@style/word_title"/>
    </LinearLayout>
    

2.4. Buat Adapter

Android menggunakan adapter (dari kelas Adapter) untuk menghubungkan data dengan item View dalam daftar. Ada banyak jenis adapter yang tersedia, dan Anda juga dapat menulis adapter khusus. Dalam tugas ini Anda akan membuat adapter yang mengaitkan daftar kata Anda dengan item View daftar kata.

Untuk menghubungkan data dengan item View, adapter perlu mengetahui item View. Adapter menggunakan ViewHolder yang menjelaskan item View dan posisinya di dalam RecyclerView.

Pertama, Anda akan membangun adapter yang menjembatani kesenjangan antara data dalam daftar kata Anda dan RecyclerView yang menampilkannya:

  1. Klik kanan java/com.android.example.recyclerview dan pilih New > Java Class.
  2. Beri nama kelas WordListAdapter.
  3. Jadikan WordListAdaptert menurunkan kelas RecyclerView.Adapter berikut:
    public class WordListAdapter extends RecyclerView.Adapter<WordListAdapter.WordViewHolder>{}
    
    Ketika Anda mengimplementasi WordListAdapter di atas, WordViewHolder akan menunjukkan tanda kesalahan, hal ini normal karena Anda belum mendefinisikannya di dalam kelas tersebut.
  4. Klik deklarasi kelas (WordListAdapter), lalu klik tanda bohlam lampu merah di sisi kiri panel, kemudian pilih Implement methods. atau dengan shortcut alt + enter.
    Akan muncul dialog yang meminta Anda untuk memilih metode yang akan diterapkan. Pilih ketiga metode dan klik OK.

Android Studio membuat placeholder kosong untuk semua metode. Perhatikan bagaimana onCreateViewHolder dan onBindViewHolder keduanya merujuk pada WordViewHolder, yang belum diimplementasikan sebelumnya.

2.5 Buat ViewHolder untuk Adapter

Untuk membuat ViewHolder, ikuti langkah-langkah ini:

  1. Di dalam kelas WordListAdapter, tambahkan kelas (inner class) WordViewHolder berikut:
    class WordViewHolder extends RecyclerView.ViewHolder{}
    Anda akan melihat kesalahan tentang konstruktor default yang hilang. Anda dapat melihat detail tentang kesalahan dengan mengarahkan kursor mouse Anda di atas kode yang digarisbawahi merah atau pada setiap garis horizontal merah di margin kanan panel editor.
  2. Tambahkan variabel ke WordViewHolder kelas bagian dalam untuk TextView dan adapter:
    public final TextView wordItemView;
    final WordListAdapter mAdapter;
  3. Di kelas dalam WordViewHolder, tambahkan konstruktor yang menginisialisasi ViewHolder TextView dari sumber word XML, dan set adapternya:
    public WordViewHolder(View itemView, WordListAdapter adapter) {
      	super(itemView);
        wordItemView = itemView.findViewById(R.id.word);
        this.mAdapter = adapter;
    }
    
    Jalankan aplikasi Anda untuk memastikan bahwa Anda tidak memiliki kesalahan. Anda masih akan melihat hanya tampilan kosong.
  4. Klik tab Logcat untuk melihat panel Logcat , dan perhatikan peringatan E/RecyclerView: No adapter attached; skipping layout. Anda akan memasang adapter ke RecyclerView pada langkah selanjutnya nanti.
2.6 Menyimpan Data Anda di Adapter

Anda perlu menyimpan data Anda di adapter, dan WordListAdapter membutuhkan konstruktor yang menginisialisasi daftar kata dari data. Ikuti langkah ini:

  1. Untuk menyimpan data Anda di adapter, buat daftar string yang ditautkan secara private ke WordListAdapter dan sebut saja mWordList.
    private final LinkedList<String> mWordList;
  2. Anda sekarang dapat mengisi metode getItemCount() untuk mengembalikan ukuran mWordList:
    @Overridepublic
    int getItemCount() {
    	return mWordList.size();
    }
    
  3. WordListAdapter membutuhkan konstruktor yang menginisialisasi daftar kata dari data. Untuk membuat View item daftar, WordListAdapter akan meniupkan XML untuk item daftar, dan Anda akan menggunakan layout inflator untuk melakukannya. LayoutInflator akan membaca deskripsi layout XML dan mengubahnya menjadi View item yang sesuai. Mulailah dengan membuat variabel anggota untuk inflater di WordListAdapter:
    private LayoutInflater mInflater;
  4. Terapkan konstruktor untuk WordListAdapter. Konstruktor perlu memiliki parameter konteks, dan daftar kata yang ditautkan dengan data aplikasi. Metode tersebut perlu menginstansiasi LayoutInflator untuk mInflater dan mengatur mWordList untuk mengirimkan data:
    public WordListAdapter(Context context, LinkedList wordList) {
    	mInflater = LayoutInflater.from(context);
        this.mWordList = wordList;
    }
    
  5. Isi metode onCreateViewHolder() dengan kode berikut:
    @Overridepublic 
    WordViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {
    	View mItemView = mInflater.inflate(R.layout.wordlist_item, parent, false);
        return new WordViewHolder(mItemView, this);
    }
    
    Metode onCreateViewHolder() ini mirip dengan metode onCreate() pada Activity. Tugasnya untuk meniupkan layout item, dan mengembalikan ViewHolder dengan layout dan adapter.
  6. Isi metode onBindViewHolder() dengan kode di bawah ini:
    @Overridepublic
    void onBindViewHolder(WordViewHolder holder, int position) {
    	String mCurrent = mWordList.get(position);
        holder.wordItemView.setText(mCurrent);
    }
    
    Metode onBindViewHolder() menghubungkan data Anda ke view holder.
  7. Jalankan aplikasi Anda untuk memastikan tidak ada kesalahan.

2.7. Buat RecyclerView di Aktivitas (Activity)

Sekarang Anda memiliki adapter dengan ViewHolder, dengan demikian Anda akhirnya dapat membuat RecyclerView dan menghubungkan semua bagian untuk menampilkan data Anda.

  1. Buka MainActivity .
  2. Tambahkan variabel anggota untuk RecyclerViewdan adaptor.
    private RecyclerView mRecyclerView;
    private WordListAdapter mAdapter;
    
  3. Dalam onCreate()metode MainActivity, tambahkan kode berikut yang membuat RecyclerView terhubung dengan adapter dan data. Komentar menjelaskan setiap baris. Anda harus memasukkan kode ini setelah parameter mWordListinisialisasi.
    // Get a handle to the RecyclerView.
    mRecyclerView = findViewById(R.id.recyclerview);
                
    // Create an adapter and supply the data to be displayed.
    mAdapter = new WordListAdapter(this, mWordList);
                
    // Connect the adapter with the RecyclerView.
    mRecyclerView.setAdapter(mAdapter);
                
    // Give the RecyclerView a default layout manager.
    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
    
  4. Jalankan aplikasi Anda. Anda akan melihat daftar kata yang ditampilkan, dan Anda dapat menggulir daftar seperti pada gambar 3 berikut.
    8f0a2bef15cdf09.png
    Gambar 3. Hasil Akhir Aplikasi

Tugas 3: Buat Daftar Menjadi Interaktif

Melihat daftar item menarik, tetapi jauh lebih menyenangkan dan bermanfaat jika pengguna Anda dapat berinteraksi dengannya. Untuk melihat bagaimana RecyclerView respons pengguna terhadap input, Anda akan melampirkan pengendali klik untuk setiap item. Ketika item diketuk, penangan klik dieksekusi, dan teks item itu akan berubah.

Daftar item yang RecyclerView ditampilkan juga dapat dimodifikasi secara dinamis — tidak harus berupa daftar statis. Ada beberapa cara untuk menambahkan perilaku tambahan. Salah satunya adalah dengan menggunakan FAB. Misalnya, di Gmail, FAB digunakan untuk menulis email baru. Untuk praktis ini, Anda akan menghasilkan kata baru untuk dimasukkan ke dalam daftar. Untuk aplikasi yang lebih bermanfaat, Anda akan mendapatkan data dari pengguna Anda.

3.1. Buat Item dapat Merespons Klik

  1. Buka WordListAdapter.
  2. Ubah WordViewHolder tanda tangan kelas untuk menerapkan View.onClickListener:
    class WordViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
  3. Klik header kelas dan pada bohlam lampu merah untuk menerapkan bertopik untuk metode yang diperlukan, yang dalam hal ini hanya onClick()metode.
  4. Tambahkan kode berikut ke tubuh onClick() metode.
    // Get the position of the item that was clicked.
    int mPosition = getLayoutPosition();
                
    // Use that to access the affected item in mWordList.
    String element = mWordList.get(mPosition);
                
    // Change the word in the mWordList.
    mWordList.set(mPosition, "Clicked! " + element);
                
    // Notify the adapter, that the data has changed so it can 
    // update the RecyclerView to display the data.
    mAdapter.notifyDataSetChanged();
    
  5. Hubungkan onClickListenerdengan View.
  6. Tambahkan kode ini ke WordViewHolderkonstruktor (di bawah this.mAdapter = adaptergaris):
    itemView.setOnClickListener(this);
  7. Jalankan aplikasi Anda. Klik item untuk melihat perubahan teks.

3.2. Tambahkan Perilaku ke FAB

Dalam bagian terakhir ini Anda akan menerapkan tindakan untuk FAB untuk:

  • Tambahkan kata ke akhir daftar kata.
  • Beri tahu adapter bahwa data telah berubah.
  • Gulir ke item yang dimasukkan.

Ikuti langkah-langkah berikut:

  1. Buka MainActivity. Metode onCreate() akan menambahkan OnClickListener() FloatingActionButton dengan metode onClick() untuk mengambil tindakan. Ubah metode onClick() menjadi:
    @Override
    public void onClick(View view) {
    	int wordListSize = mWordList.size();
                     
    	// Add a new word to the wordList.
    	mWordList.addLast("+ Word " + wordListSize);
                 
    	// Notify the adapter, that the data has changed.
    	mRecyclerView.getAdapter().notifyItemInserted(wordListSize);
                    
    	// Scroll to the bottom.
    	mRecyclerView.smoothScrollToPosition(wordListSize);
    }
    
  2. Jalankan aplikasi.
  3. Gulir daftar kata dan klik item.
  4. Tambahkan item dengan mengklik FAB.

Tugas Laporan

Buat aplikasi yang menggunakan RecyclerViewuntuk menampilkan daftar resep. Berikut spesifikasi yang harus dipenuhi:

  • Setiap item daftar harus menunjukkan nama resep dengan deskripsi singkat, maksimum 3 baris. 
  • Saat pengguna mengetuk resep (item dalam daftar), mulai Activityyang memperlihatkan detil teks resep dengan menggunakan Intent. Layout dapat menggunkan Linear Layout, Relative Layout atau Constraint Layout.
  • Saat mengklik tombol Back di layar detil resep, pengguna akan dibawa kembali ke daftar resep.
  • Gunakan file json berikut untuk data resep: recipes.jsonAnda bisa merujuk contoh di https://stackoverflow.com/a/19945484 untuk membaca dan memparsing JSON di Android.

Gambar di bawah ini menunjukkan contoh untuk implementasi sederhana. Aplikasi yang Anda buat dapat terlihat sangat berbeda, asalkan memiliki fungsi yang diperlukan.

Gambar 4. Tugas Implementasi RecyclerView pada Aplikasi 

Referensi

Comments

Related posts