4.4 Membuat RecyclerView

Tugas 1. Membuat dan mengonfigurasi proyek baru

1.1. proyek

 

  1. Mulai Android Studio dan buat proyek baru dengan parameter berikut:
    Atribut Nilai
    Application Name RecyclerView
    Company Name com.example.android atau domain Anda sendiri
    Phone and Tablet Minimum SDK API15: Android 4.0.3 IceCreamSandwich
    Template Empty Activity
    Generate Layout file box Checked

  2. Jalankan aplikasi Anda di emulator atau perangkat keras. Anda akan melihat judul “RecyclerView” dan “Hello World” dalam tampilan kosong.

1.2 Tambahkan pustaka dukungan ke file build

  1. Di Android Studio, di proyek Anda, pastikan Anda berada dalam panel Project (1) dan di tampilan Android (2).
  2. Di hierarki file, temukan folder Gradle Scripts (3).
  3. Luaskan Gradle Scripts, jika perlu, dan buka file build.gradle (Module: app)
  4. Di akhir file build.gradle (Module: app), temukan bagian dependensi.
  5. Tambahkan kedua dependensi ini sebagai dua baris di dalam bagian dependensi:
    compile 'com.android.support:recyclerview-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
    
    • Mungkin terdapat baris yang sudah ada seperti ini, tetapi jumlahnya mungkin berbeda: compile 'com.android.support:appcompat-v7:23.1.1'
    • Tambahkan baris Anda bawah baris tersebut.
    • Pastikan nomor versi baris Anda sesuai dengan nomor versi baris tersebut.
    • Pastikan nomor versi semua pustaka sama dan cocok dengan compiledSdkVersion di bagian atas file. Jika tidak cocok, Anda akan mendapatkan kesalahan build time.
    1. Buka file MainActivity.java.
    2. Tambahkan variabel anggota privat untuk daftar tertaut mWordList.
    3. Tambahakn variabel mCount penghitung integer untuk melacak angka kata.
    4. Tambahkan kode yang mengisikan mWordList dengan kata. Gabungkan string “Word” dengan nilai mCount, lalu tingkatkan hitungan angka.
    5. Karena Anda belum bisa menampilkan kata untuk pengujian, tambahkan pernyataan log yang memverifikasi bahwa kata ditambahkan ke daftar tertaut dengan benar.
    6. Jalankan aplikasi Anda untuk memastikan tidak ada kesalahan.

    UI aplikasi tidak berubah, tetapi Anda seharusnya melihat daftar pesan log di logcat, seperti: android.example.com.wordlist D/WordList: Word 1.

 

Tugas 3: Membuat RecyclerView

3.1 Buat layout utama di activity_main.xml

Di main_activity.xml, ganti kode yang dibuat oleh Empty Activity dengan kode untuk CoordinatorLayout, lalu tambahkan RecyclerView:

  1. Buka activity_main.xml.
  2. Pilih semua kode di activity_main.xml dan ganti dengan kode ini:
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    </android.support.design.widget.CoordinatorLayout>

     

  3. Tambahkan kode RecyclerView di dalam CoordinatorLayout:
    • Anda perlu menetapkan jalur lengkap, karena RecyclerView adalah bagian dari pustaka dukungan.
      <android.support.v7.widget.RecyclerView>
      </android.support.v7.widget.RecyclerView>
    • Jalankan aplikasi Anda dan pastikan tidak ada kesalahan yang ditampilkan di logcat. Anda hanya akan melihat layar kosong karena Anda belum menempatkan item apa pun ke dalam RecyclerView.

3.2 Buat layout untuk satu item daftar

Buat layout item kata sederhana menggunakan LinearLayout vertikan dengan TextView:

  1. Klik kanan folder app/res/layout dan pilih New > Layout resource file.
  2. Beri nama file wordlist_item dan klik OK.
  3. Dalam mode Text, ubah LinearLayout yang dibuat dengan file agar sesuai dengan atribut berikut. Ekstrak sumber daya selagi Anda bekerja.
    Atribut Nilai
    android:layout_width “match_parent”
    android:layout_height “wrap_content”
    android:orientation “vertical”
    android:padding “6dp”
  4. Tambahkan TextView untuk kata ke LinearLayout:
    Atribut Nilai
    android:id “@+id/word”
    android:layout_width “match_parent”
    android:layout_height “wrap_content”
    android:textSize “24sp”
    android:textStyle “bold”

3.3 Buat gaya dari atribut TextView

  1. Saat wordlist_item.xml terbuka, arahkan mouse ke atas bagian TextView yang baru Anda buat dan Klik kanan > Refactor > Extract > Style.
  2. Dalam dialog Extract Android Style dialog,
    • Beri nama gaya Anda dengan word_title.
    • Biarkan semua kotak tidak tercentang.
    • Centang kotak Launch ‘Use Style Where Possible‘.
    • Klik OK.
    • Temukan dan periksa gaya word_title di values/styles.xml.
  3. Jalankan aplikasi Anda. Karena Anda telah membuang tampilan teks “Hello World” default, Anda akan melihat judul “RecyclerView” dan tampilan kosong

3.4. Buat adapter dengan holder tampilan

  1. Klik kanan java/com.android.example.recyclerview dan pilih New >> Java Class.
  2. Beri nama kelas sebagai WordListAdapter.
  3. Klik deklarasi kelas (WordListAdapter) lalu klik bola lampu merah di sebelah kiri panel. Pilih Implement methods. Ini akan memunculkan kotak dialog yang meminta Anda memilih metode mana yang akan diimplementasikan. Pilih ketiga metode dan klik OK.
  4. Di dalam kelas WordListAdapter, tambahkan kelas dalam WordViewHolder dengan tanda tangan ini:
    class WordViewHolder extends RecyclerView.ViewHolder {}
  5. Di dalam kelas WordListAdapter, tambahkan kelas dalam WordViewHolder dengan tanda tangan ini:
    class WordViewHolder extends RecyclerView.ViewHolder {}
    
  6. Anda akan melihat kesalahan tentang konstruktor default yang tidak ada. Anda bisa melihat detail tentang kesalahan dengan mengarahkan mouse ke atas kode sumber yang digaris bawah merah atau ke atas baris horizontal merah di margin kanan panel open-files.
  7. Tambahkan variabel ke kelas dalam WordViewHolder untuk tampilan teks dan adaptor:
    public final TextView wordItemView;
    final WordListAdapter mAdapter;
    
  8. Dalam kelas dala WordViewHolder, tambahkan sebuah konstruktor yang melakukan inisialisasi tampilan teks holder tampilan dari sumber daya XML dan menyetel adaptornya:
    public WordViewHolder(View itemView, WordListAdapter adapter) {
       super(itemView);
       wordItemView = (TextView) itemView.findViewById(R.id.word);
       this.mAdapter = adapter;
    }

  9. Jalankan aplikasi Anda untuk memastikan tidak ada kesalahan. Anda masih akan melihat tampilan kosong. Perhatikan peringatan E/RecyclerView: No adapter attached; skipping layout di logcat.

3.6 Menyimpan data Anda di adaptor

Untuk menampung data Anda di adaptor, buat daftar string yang tertaut dan privat di WordListAdapter dan beri nama mWordList.

private final LinkedList<String> mWordList;

Anda sekarang bisa mengisi metode getItemCount() untuk mengembalikan ukuran mWordList.

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

Buat variabel anggota untuk inflater di WordListAdapter.

Implementasikan constructor untuk WordListAdapter. Constructor perlu memiliki parameter konteks dan daftar kata tertaut dengan data aplikasi. Metode perlu membuat instance layout inflater untuk mInflater dan menyetel mWordList ke data yang diteruskan.

Isikan metode onCreateViewHolder() dengan kode berikut. Metode onCreateViewHolder sama dengan metode onCreate. Metode ini memekarkan layout item dan mengembalikan holder tampilan dengan layout dan adaptor.

Isikan metode onBindViewHolder dengan kode berikut. Metode onBindViewHolder menghubungkan d ata Anda ke holder tampilan.

@Override
public void onBindViewHolder(WordViewHolder holder, int position) {
   String mCurrent = mWordList.get(position);
   holder.wordItemView.setText(mCurrent);
}
  1. Jalankan aplikasi Anda untuk memastikan tidak ada kesalahan. Anda masih akan melihat peringatan “E/RecyclerView: No adapter attached; skipping layout”. Anda akan memperbaikinya di tugas selanjutnya.

Tugas 4. Membuat daftar agar interaktif

4.1 Buat item merespons klik

 

Tugas 5. Menambahkan FAB untuk menyisipkan item

5.1. Menambahkan Tombol Aksi Mengambang (FAB)

Leave a Reply

Your email address will not be published. Required fields are marked *