[Tutorial] RecyclerView Android

Apakah RecyclerView itu?

Sederhananya RecyclerView adalah semacam ListView, dapat digunakan untuk menampilkan item-item dalam suatu tampilan list. RecyclerView dimunculkan sebagai improvement dari ListView, khususnya untuk membuat tampilan item list yang kompleks. RecyclerView memiliki efisiensi kinerja yang lebih baik untuk menangani tampilan list yang memiliki banyak komponen.


Lebih lanjut anda dapat membaca tautan berikut:
http://stackoverflow.com/questions/26728651/recyclerview-vs-listview
https://developer.android.com/training/material/lists-cards.html#RecyclerView
https://medium.com/wolox-driving-innovation/the-good-the-bad-and-the-ugly-things-about-the-new-recyclerview-1795df6f94c9#.jy3fvzgjz

Wis lah mas ra perlu kakean teori

Oke mas, mohon bersabar ini ujian, ini adalah perjuangan. Pada tutorial kali ini saya akan membagikan contoh pembuatan aplikasi Android yang menggunakan RecyclerView untuk menampilkan list item sederhana.

Show me the code!

Monggo, mari kita codingkan. Buat project Android baru menggunakan Android Studio.

[1] build.gradle
Tambahkan library RecyclerView dan CardView ke build.gradle
compile 'com.android.support:cardview-v7:25.1.0'
compile 'com.android.support:recyclerview-v7:25.1.0'
Keterangan :
25.1.0 dapat diganti dengan versi yang terpasang pada mesin Anda
atau sederhananya samakan dengan versi appcompat, cari baris berikut di file build.gradle
compile 'com.android.support:appcompat-v7:25.1.0'
Samakan versi cardview dan recyclerview dengan versi appcompat
(*source code lengkap build.gradle bisa dilihat di sini)

[2] view_card.xml
Buat file layout untuk tampilan item list, misalnya di sini saya membuat view_card.xml.Isinya adalah sebuah ImageView untuk menampilkan foto dan dua buah TextView untuk menampilkan nama serta usia orang.
<?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">

    <!--
    komponen CardView untuk membentuk CardView
    mengenai Card bisa dibaca guidelinenya di
    https://material.io/guidelines/components/cards.html#
    -->
    <android.support.v7.widget.CardView
        android:id="@+id/cv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp">

     <!-- ImageView untuk menampung foto orang -->
            <ImageView
                android:id="@+id/person_photo"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="16dp" />

     <!-- TextView untuk memuat nama orang -->
            <TextView
                android:id="@+id/person_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/person_photo"
                android:textSize="30sp" />

     <!-- TextView untuk memuat usia orang -->
            <TextView
                android:id="@+id/person_age"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/person_name"
                android:layout_toRightOf="@+id/person_photo" />

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

[3] activity_main.xml
Buat activity, misalnya di sini adalah ActivityMain. Tambahkan komponen RecyclerView ke layout activity utama
<!-- komponen RecyclerView -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/rv"/>
(*source code lengkap activity_main.xml ada di sini)

[4] Person.java
Buat class Person, isinya adalah setter dan getter atribut-atribut yang mewakili object orang.
package luv.linux.recyclerview.model;

/**
 * Created by linuxluv on 1/5/17.
 *
 * class POJO untuk mewakili object Person
 * memiliki atribut: nama, usia, id foto
 */

public class Person {
    private String name;
    private String age;
    private int photoId;

    public Person(String name, String age, int photoId) {
        this.name = name;
        this.age = age;
        this.photoId = photoId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public int getPhotoId() {
        return photoId;
    }

    public void setPhotoId(int photoId) {
        this.photoId = photoId;
    }
}

[5] RVAdapter.java
Class RVAdapter adalah adapter bagi recyclerView yang akan digunakan. Class ini extends RecyclerView.Adapter<RVAdapter.PersonViewHolder>. Di dalamnya buat internal class PersonViewHolder yang akan menangani binding komponen layout ke atribut-atribut object Person.
/* binding dari atribut person ke komponen-komponen layout di dalam CardView
* nama masuk ke TextView personName
* usia masuk ke TextView personAge
* foto masuk ke ImageView personPhoto */
public static class PersonViewHolder extends RecyclerView.ViewHolder {
        CardView cv;
        TextView personName;
        TextView personAge;
        ImageView personPhoto;

        PersonViewHolder(View itemView) {
            super(itemView);
            cv = (CardView)itemView.findViewById(R.id.cv);
            personName = (TextView)itemView.findViewById(R.id.person_name);
            personAge = (TextView)itemView.findViewById(R.id.person_age);
            personPhoto = (ImageView)itemView.findViewById(R.id.person_photo);
        }
}
(*source code lengkap RVAdapter.java bisa dilihat di sini)

[6] MainActivity.java
Buat variabel persons untuk menampung data yang akan ditampilkan di RecyclerView
private List persons;

Masukkan file gambar ke folder drawable untuk nantinya ditampilkan sebagai foto orang yang muncul di RecyclerView. Kemudian buat method initializeData untuk mengisi array persons.
private void initializeData(){
    persons = new ArrayList<>();
    persons.add(new Person("Emma Wilson", "23 years old", R.drawable.ubuntu));
    persons.add(new Person("Lavery Maiss", "25 years old", R.drawable.lm));
    persons.add(new Person("Lillie Watts", "35 years old", R.drawable.debian));
}

Selanjutnya di dalam onCreate panggil method-method yang telah dibuat dan bentuk RecyclerViewnya.
@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 //mengisi variabel persons
 initializeData();

 //inisialisasi RecyclerView
 RecyclerView rv = (RecyclerView) findViewById(R.id.rv);
 rv.setHasFixedSize(true);

 //inisialisasi layout RecyclerView
 LinearLayoutManager llm = new LinearLayoutManager(this);
 rv.setLayoutManager(llm);

 //inisialisasi adapter RecyclerView
 RVAdapter adapter = new RVAdapter(persons);
 rv.setAdapter(adapter);
}
(*source code lengkap MainActivity.java ada di sini)

Selanjutnya run project, apabila berhasil akan didapatkan tampilan program yang memuat list data orang seperti pada screenshot di atas. Silakan tulis komentar apabila masih ada hal kurang jelas. Terima kasih, sampai berjumpa pada postingan selanjutnya.

source code lengkap :
https://github.com/ardhiesta/sngcdg-recycler_view

Comments

Popular posts from this blog

Contoh Inheritance (Pewarisan) di Java

Contoh Penerapan Interface di Pemrograman Java

Review Singkat Pilihan Transportasi Umum Rute Solo - Wonosobo