Belajar Cara Membuat RecyclerView Material Design


Assalamualaikum Warahmatullahi Wabarakatuh.

Tutorial kali ini saya akan mengajarkan pada kalian, cara membuat RecyclerView Material Design, RecyclerView merupakan komponen pengganti ListView dan GridView, dengan menggunakan RecyclerView implementasi dan struktur programnya lebih rapi dibandingkan ListView, selain itu juga, pada RecyclerView kita bisa mendesain tampilan layout item yang akan digunakan.


Untuk membuat RecyclerView kita membuatuhkan beberapa elemen, yaitu:
  • Adapter: Adapter digunakan untuk mengatur bagaimana data itu akan ditampilkan pada RecyclerView, selain itu adapter digunakan untuk menyiapkan tampilan layout yang akan kita gunakan untuk mempilkan data per-itemnya.
  • ViewHolder: ViewHolder berfungsi untuk menyimpan view-view yang akan di gunakan pada item, view-view disini bisa berupa ImageView, TextView, EditText, Dll. ViewHolder adalah class static yang terdapat pada adapter, jadi setiap komponen yang kita buat, kita harus menginisialisasikannya didalam ViewHolder.

Tutorial Membuat RecyclerView Material Design

1) Buat Project baru pada Android Studio kalian, jika sudah, buka file build.gradle(app-level) lalu masukan ketiga dependensies berikut ini:
compile 'com.android.support:appcompat-v7:26.1.0'
compile 'com.android.support:design:26.1.0'
compile 'com.android.support:recyclerview-v7:26.1.0'
compile 'com.android.support:support-v4:26.1.0'
2) Sekarang Kita buat layout baru, dengan nama view_design.xml, di res/layout, layout tersebut digunakan untuk mengatur tampilan desain per-itemnya, tampilan desainnya akan kita buat seperti berikut ini:


Disana kita menggunakan 1 buah ImageView dan 2 Buah TextView, untuk tampilan dan gambarnya saya sudah membuatnya sendiri, jadi kalian tinggal mengikutinya atau bisa disesuaikan dengan keinginan kalian sendiri, berikut ini merupakan kode xml dari layout tersebut:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/item_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/meme"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:contentDescription="@string/todo"
        app:srcCompat="@drawable/meme1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_toEndOf="@+id/meme"
        android:layout_toRightOf="@+id/meme"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/memetitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="2dp"
            android:text="Wildan"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/sub_meme"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:text="Gambar Meme Ke: 0"
            android:textSize="14sp" />
    </LinearLayout>

</RelativeLayout>
Baca Juga:

3) Selanjutnya kita akan membuat sebuah class bernama RecyclerViewAdapter, adapter tersebut akan kita gunakan untuk mengatur data model yang akan ditampilkan pada RecyclerView, buat class baru bernama RecyclerViewAdapter, lalu masukan kode berikut ini:
package android.cianjur.developer.net.recyclerviewexample;

import android.support.design.widget.Snackbar;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import java.util.ArrayList;

//Class Adapter ini Digunakan Untuk Mengatur Bagaimana Data akan Ditampilkan
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>{

    private ArrayList<String> arrayList; //Digunakan untuk Judul
    private ArrayList<Integer> memeList; //Digunakan untuk Image/Gambar

    //Membuat Konstruktor pada Class RecyclerViewAdapter
    RecyclerViewAdapter(ArrayList<String> arrayList, ArrayList<Integer> memeList){
        this.arrayList = arrayList;
        this.memeList = memeList;
    }

    //ViewHolder Digunakan Untuk Menyimpan Referensi Dari View-View
    class ViewHolder extends RecyclerView.ViewHolder{

        private TextView JudulMeme, SubMeme;
        private ImageView Meme;
        private RelativeLayout ItemList;

        ViewHolder(View itemView) {
            super(itemView);
            //Menginisialisasi View-View untuk kita gunakan pada RecyclerView
            JudulMeme = itemView.findViewById(R.id.memetitle);
            SubMeme = itemView.findViewById(R.id.sub_meme);
            Meme = itemView.findViewById(R.id.meme);
            ItemList = itemView.findViewById(R.id.item_list);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //Membuat View untuk Menyiapkan dan Memasang Layout yang Akan digunakan pada RecyclerView
        View V = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_design, parent, false);
        ViewHolder VH = new ViewHolder(V);
        return VH;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        //Memanggil Nilai/Value Pada View-View Yang Telah Dibuat pada Posisi Tertentu
        final String Nama = arrayList.get(position);//Mengambil data sesuai dengan posisi yang telah ditentukan
        holder.JudulMeme.setText(Nama);
        holder.SubMeme.setText("Gambar Meme Ke: "+position);
        holder.Meme.setImageResource(memeList.get(position)); // Mengambil gambar sesuai posisi yang telah ditentukan
        //Membuat Aksi Saat Judul Pada List ditekan
        holder.JudulMeme.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Gambar Meme: "+position+" Ditekan", Snackbar.LENGTH_SHORT).show();
            }
        });
        //Membuat Aksi Saat List Ditekan
        holder.ItemList.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Nama Saya: "+Nama, Snackbar.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        //Menghitung Ukuran/Jumlah Data Yang Akan Ditampilkan Pada RecyclerView
        return arrayList.size();
    }

}
Salah stau kelebihan dari RecyclerView adalah kita bisa mengeset OnClickListener pada masing-masing view, seperti pada CardView, disana saya memasang OnClickListener pada Containernya(RelativeLayout) dan Judulnya.

4) Yang terakhir buka layout utama kalian, yang bernama ActivityMain.xml, lalu masukan RecyclerView, seperti berikut ini:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_margin="8dp"
    tools:context="android.cianjur.developer.net.recyclerviewexample.MainActivity">

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

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

</RelativeLayout>
5) Selanjutnya tamahkan kode berikut ini pada MainActivity.java kalian, sebelumnya saya sudah mengset/menambahkan beberapa gambar pada project tersebut, bagian terpenting dari code tersebut adalah RecyclerView, Adapter dan LayoutManager:
package android.cianjur.developer.net.recyclerviewexample;

import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    private ArrayList<String> JudulMeme;
    private ArrayList<Integer> GambarMeme;
    //Daftar Judul
    private String[] Judul = {"Wildan", "Taufan", "Aish", "Ferdi", "Taufik", "Dzaki", "Annisa"};
    //Daftar Gambar
    private int[] Gambar = {R.drawable.meme1, R.drawable.meme2, R.drawable.meme3, R.drawable.meme4,
                            R.drawable.meme5, R.drawable.meme6, R.drawable.meme7};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        JudulMeme = new ArrayList<>();
        GambarMeme = new ArrayList<>();
        recyclerView = findViewById(R.id.recycler);
        DaftarItem();
        //Menggunakan Layout Manager, Dan Membuat List Secara Vertical
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(true);
        adapter = new RecyclerViewAdapter(JudulMeme, GambarMeme);
        //Memasang Adapter pada RecyclerView
        recyclerView.setAdapter(adapter);
    }

    //Mengambil data dari Varibale Gambar dan Judul, lalu memasangnya pada list yang terhubung dengan Class Adapter
    private void DaftarItem(){
        for (int w=0; w<Judul.length; w++){
            GambarMeme.add(Gambar[w]);
            JudulMeme.add(Judul[w]);
        }
    }
}
6) Disini kalian sudah bisa mencoba menjalankan project tersebut, Tambahan satu lagi, kalian bisa membuat sebuah underline pada setiap item dadalam recyclerView, seperti pada gambar berikut ini:


Cara membuatnya pertama tama, buat layout baru bernama line.xml pada direktori res > drawable > New > drawable resource file, jika sudah, masukan kode xml berikut ini.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFD8D8D8"/>
    <size android:height="0.5dp"/>
</shape>
7) Buka MainActivity.java kalian, lalu tambahkan kode berikut ini pada method onCreate():
//Membuat Underline pada Setiap Item Didalam List
DividerItemDecoration itemDecoration = new DividerItemDecoration(getApplicationContext(), DividerItemDecoration.VERTICAL);
itemDecoration.setDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.line));
recyclerView.addItemDecoration(itemDecoration);
Download projectnya Disini.

Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin kalian tanyakan, silakan isi kolom komentar di bawah, terakhir dari saya.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.