Tutorial Belajar Membuat RecyclerView di Android (Material Design)

Last Updated on 8 years by Mas Herdi

Hi semua, melengkapi series Belajar Material Design di Android yang saya buat, kali ini saya akan berbagi tentang cara membuat RecyclerView di Android menggunakan Android Studio. Yup RecyclerView merupakan salah satu elemen dari Android Material Design yang menggantikan ListView dan GridView. RecyclerView sudah sangat terkenal, (tidak seperti dulu tahun 2014 saat saya pertama kali belajar RecyclerView masih sedikit yang menggunakannya) dan digunakan untuk menampilkan list hampir di semua aplikasi.

Tutorial Membuat Material Design RecyclerView di Android

Sebelum belajar membuat code-nya, ada baiknya kita tahu keunggulan dari RecyclerView sehingga sekarang hampir semua aplikasi Android yang memiliki List menggunakan RecyclerView, bukan GridView atau ListView. Keunggulan RecyclerView ada dari sisi cara mengcoding-nya atau mengimplementasikannya yang lebih rapi dan terstruktur, sehingga performa dari RecyclerView akan lebih baik jika dibandingkan dengan ListView atau GridView.

RecyclerView juga mempunyai animasi default sesuai standar Google Material Design saat menambahkan atau menghapus elemen. Sedangkan untuk mengatur posisi item pada list, RecyclerView menggunakan LayoutManagers, dan ada beberapa jenis layout managers yang bisa digunakan.

Kemudian, RecyclerView menggunakan sebuah ViewHolder untuk menyimpan referensi dari view-view yang digunakan pada sebuah item di RecyclerView. ViewHolder adalah class static yang ada di dalam Adapter yang menyimpan view-view yang akan digunakan untuk menampilkan satu item data. Dengan menggunakan ViewHolder, initinya kalian bisa menghemat waktu dibandingkan memakai findViewById() saat ingin mengupdate list dengan data yang baru.

Elemen terakhir dari RecyclerView adalah Adapter. Adapter berguna untuk mengatur bagaimana data dari data model akan ditampilkan di RecyclerView sebagai sebuah single item. Adapter bisa menerima data dalam bentuk apa saja, tergantung model data yang dipakai. Namun biasanya data tersebut disimpan pada ArrayList.

Adapter juga akan menyiapkan layout yang akan digunakan untuk menampilkan data tersebut per item-nya. Layout dari Adapter kita sendiri yang tentukan, seperti apakah butuh gambar, atau mau ada berapa TextView kita bisa atur. Kemudian kita juga tentukan di Adapter view mana yang ingin diisi dengan data apa, untuk setiap item yang ada di RecyclerView. Misal TextView 1 akan diisi dengan data nama, dan sebagainya.

Contoh item layout yang akan dipakai di tutorial ini adalah satu gambar di sebelah kiri dan dua baris TextView di sebelah kanan seperti gambar berikut :

Touch Down Code

Oke, sekarang untuk kodingannya, sebelum membuat RecyclerView ada beberapa tutorial pre-requisites yang harus kalian baca :

• Tutorial Membuat Project Android di Android Studio
• Tutorial Lengkap Android Material Design

Jika kalian sudah membuat sebuah project aplikasi Android baru di Android Studio, maka buka file build.gradle dan masukkan dependencies seperti berikut :

apply plugin: 'com.android.application'

android {
compileSdkVersion 24
buildToolsVersion '24.0.2'
...
}

dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:design:24.2.1'
compile 'com.android.support:support-v4:24.2.1'
compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:palette-v7:24.2.1'
compile 'com.android.support:cardview-v7:24.2.1'
compile 'com.android.support:recyclerview-v7:24.2.1'
}

Langkah berikutnya adalah membuat layout untuk RecyclerView Adapter. Kita akan mendesain sehingga sebuah entry item di RecyclerView akan nampak seperti gambar di atas. Caranya buatlah sebuah file xml baru di res/layout, kemudian isikan kode berikut, file-nya bernama

view_rv_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:padding="10dip" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="6dip"
        android:contentDescription="TODO"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_subtitle"
        android:layout_width="fill_parent"
        android:layout_height="26dip"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@id/icon"
        android:ellipsize="marquee"
        android:singleLine="true"
        android:textColor="@android:color/black"
        android:text="Description"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_subtitle"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_alignWithParentIfMissing="true"
        android:layout_toRightOf="@id/icon"
        android:gravity="center_vertical"
        android:text="Example application"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

</RelativeLayout>

Selanjutnya, kita juga akan membuat layout menambahkan elemen RecyclerView pada layout utama, biasanya bernama activity_main.xml, sehingga kodenya akan berubah seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

</LinearLayout>

Setelah itu, kita akan membuat sebuah Adapter untuk RecyclerView, fungsi Adapter adalah seperti yang sudah dijelaskan di atas. Caranya, buatlah sebuah file .java baru bernama RecyclerViewAdapter.java dan copy pastekan kode berikut :

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Herdi_WORK on 15.09.16.
 */
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    private ArrayList<String> rvData;

    public RecyclerViewAdapter(ArrayList<String> inputData) {
        rvData = inputData;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        // di tutorial ini kita hanya menggunakan data String untuk tiap item
        public TextView tvTitle;
        public TextView tvSubtitle;

        public ViewHolder(View v) {
            super(v);
            tvTitle = (TextView) v.findViewById(R.id.tv_title);
            tvSubtitle = (TextView) v.findViewById(R.id.tv_subtitle);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // membuat view baru
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_item, parent, false);
        // mengeset ukuran view, margin, padding, dan parameter layout lainnya
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - mengambil elemen dari dataset (ArrayList) pada posisi tertentu
        // - mengeset isi view dengan elemen dari dataset tersebut
        final String name = rvData.get(position);
        holder.tvTitle.setText(rvData.get(position));
        holder.tvSubtitle.setText("Frau " + position);
    }

    @Override
    public int getItemCount() {
        // menghitung ukuran dataset / jumlah data yang ditampilkan di RecyclerView
        return rvData.size();
    }
}

Untuk keterangannya, bisa dibaca pada komentar yang sudah saya tambahkan pada baris kode di atas ya :).

Yang terakhir, kita akan tambahkan kode pada MainActivity.java, yang akan mensuplai Adapter dengan inputan data yang diinginkan, copy pastekan kode berikut pada file MainActivity.java :

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

/**
 * Created by Herdi_WORK on 15.09.16.
 */
public class MainActivity extends AppCompatActivity {

    private RecyclerView rvView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    private ArrayList<String> dataSet;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recyclerview);
        dataSet = new ArrayList<>();
        initDataset();

        rvView = (RecyclerView) findViewById(R.id.rv_main);
        rvView.setHasFixedSize(true);

        /**
         * Kita menggunakan LinearLayoutManager untuk list standar
         * yang hanya berisi daftar item
         * disusun dari atas ke bawah
         */
        layoutManager = new LinearLayoutManager(this);
        rvView.setLayoutManager(layoutManager);

        adapter = new RecyclerViewAdapter(dataSet);
        rvView.setAdapter(adapter);

    }

    private void initDataset(){

        /**
         * Tambahkan item ke dataset
         * dalam prakteknya bisa bermacam2
         * tidak hanya String seperti di kasus ini
         */
        dataSet.add("Karin");
        dataSet.add("Ingrid");
        dataSet.add("Helga");
        dataSet.add("Renate");
        dataSet.add("Elke");
        dataSet.add("Ursula");
        dataSet.add("Erika");
        dataSet.add("Christa");
        dataSet.add("Gisela");
        dataSet.add("Monika");

    }
}

Gampang sekali bukan? Jika sudah kita akan langsung running aplikasinya dan akan muncul tampilan RecyclerView seperti di bawah ini.

Demo

Tampilan RecyclerView :

RecyclerView di Android

Jika ingin desain list item yang lebih bagus dan rapi menggunakan CardView, silahkan cek tutorial mengintegrasikan RecyclerView dengan CardView di sini. 🙂

That’s all ! Semoga membantu. ? Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. ?Silahkan bertanya di bagian komentar jika ada yang kurang jelas.