Contoh Simple RecylerView Sederhana Android

Contoh Simple RecylerView Sederhana Android sekarang harus mulai diimplementasikan untuk menggantikan ListView. Karena setelah bertahun-tahun ListView bertahan sebagai komponen penampil data dalam bentuk list di Android, sekarang posisinya akan digantikan oleh RecyclerView yang mempunyai kemampuan dan tampilan yang lebih lengkap dan lebih menarik.

Daftar Isi :
1. Membuat Project Baru di Android Studio
2. Menambahkan RecyclerView di Tampilan Layout XML
3. Menambahkan Layout Baris RecyclerView Row
4. Memastikan Library Gradle RecycleView Sudah Ditambahkan
5. Menambahkan Class Model, Adapter dan ViewHolder
6. Menambahkan Coding RecylerView Sederhana Android di Activity
7. Menjalankan Aplikasi RecyclerView Sederhana Android di HP
8. Demo dan Download Source Code

1. Membuat Project Baru di Android Studio

Buka Android Studio, sebaiknya sudah versi 3.0 keatas, karena RecyclerView pasti didukung setelah AndroidStudio versi diatas 3.0. Buat project baru, pilih Empty Activity.

Membuat Project Baru Empty Activity RecyclerView Sederhana Android
Membuat Project Baru Empty Activity RecyclerView Sederhana Android

Tunggu hingga loading selesai, tampilan project RecyclerView Sederhana Android akan tampak seperti berikut ini :

Project Baru RecyclerView Sederhana Android Studio
Project Baru RecyclerView Sederhana Android Studio

2. Menambahkan RecyclerView di Tampilan Layout XML

Buka layout tampilan di res/layout-activity_main.xml. Jika ingin lebih mudah mengatur tampilan, bisa digunakan LinearLayout dengan cara buka desain tampilan dalam bentuk Text.
Ubah xml menjadi seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="net.amijaya.simplerecyclerview.MainActivity">

</LinearLayout>

Kemudian tambahkan RecycleView dari desain sehingga tampak seperti ini :

Layout activity_main RecyclerView Sederhana Android
Layout activity_main RecyclerView Sederhana Android

XML nya akan menjadi sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="net.amijaya.simplerecyclerview.MainActivity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv"
    android:layout_width="368dp"
    android:layout_height="495dp"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="8dp" />
</LinearLayout>

3. Menambahkan Layout Baris RecyclerView Row

RecyclerView membutuhkan layout xml untuk menjadi style tiap baris data yang akan ditampilkan. Untuk membuat layout xml baris data, klik kanan layout, pilih XML layout

Membuat Layout XML Baris RecyclerView Sederhana Android
Membuat Layout XML Baris RecyclerView Sederhana Android

Kemudian dtambahkan kode xml berikut ini di dalamnya :

<?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">
    <TextView
        android:id="@+id/txtnama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:text="Nama" />
    <TextView
        android:id="@+id/txtdeskripsi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Deskripsi" />
</LinearLayout>

4. Memastikan Library Gradle RecycleView Sudah Ditambahkan

RecyclerView adalah komponen yang relatif baru di Android, sehingga library-nya pun belum masuk ke SDK standar. Tetapi pada Android Studio 3.0 keatas library/dependency tersebut sudah dimasukkan secara otomatis kedalam script Gradle/build.gradle(module app) seperti ini :

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
    implementation 'com.android.support:recyclerview-v7:26.1.0'
}

5. Menambahkan Class Model, Adapter dan ViewHolder

Pertama, tambahkan Class Model untuk menampung data per-baris sesuai banyaknya kolom / item data.

class SimpleViewModel {
    public String nama;
    public String deskripsi;
    public SimpleViewModel(@NonNull final String nama, @NonNull final String deskripsi) {
        this.nama = nama;
        this.deskripsi= deskripsi;
    }
}

Kedua tambahkan Class ViewHolder untuk mengaplikasikan per baris data ke dalam ber baris RecyclerView :

class SimpleViewHolder extends RecyclerView.ViewHolder {
    private TextView txtnama, txtdeskripsi;
    public SimpleViewHolder(final View itemView) {
        super(itemView);
        txtnama = (TextView) itemView.findViewById(R.id.txtnama);
        txtdeskripsi = (TextView) itemView.findViewById(R.id.txtdeskripsi);

        itemView.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                int pos = getAdapterPosition();
                Toast.makeText(itemView.getContext(), String.valueOf(pos) + " " + simpleViewModelList.get(pos).nama + "\n" + simpleViewModelList.get(pos).deskripsi, Toast.LENGTH_SHORT).show();
            }
        });
    }
    public void bindData(final SimpleViewModel viewModel) {
        txtnama.setText(viewModel.nama);
        txtdeskripsi.setText(viewModel.deskripsi);
    }
}

Ketiga tambahkan Class Adapter untuk mengadaptasi atau memasukkan data yang sudah disusun ViewHolder ke dalam Komponen RecyclerView.

class SimpleAdapter extends RecyclerView.Adapter {
    private int listItemLayout;
    private ArrayList&lt;SimpleViewModel&gt; models;
    public SimpleAdapter(int layoutId, ArrayList&lt;SimpleViewModel&gt; itemList) {
        listItemLayout = layoutId;
        this.models = itemList;
    }
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(final ViewGroup parent, final int viewType) {
        final View view = LayoutInflater.from(parent.getContext()).inflate(viewType, parent, false);
        return new SimpleViewHolder(view);
    }
    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
        ((SimpleViewHolder) holder).bindData(models.get(position));
    }
    @Override
    public int getItemCount() {
        return models.size();
    }
    @Override
    public int getItemViewType(final int position) {
        return R.layout.row_item;
    }
}

6. Menambahkan Coding RecylerView Sederhana Android di Activity

Coding RecyclerView Sederhana Android untuk memanggil semua class yang sudah disiapkan sebelumnya, harus dipanggil dari MainActivity.java pada method onCreate seperti ini :

RecyclerView rv;
ArrayList&lt;SimpleViewModel&gt; simpleViewModelList = new ArrayList&lt;&gt;();
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    simpleViewModelList.add(new SimpleViewModel("Tony Stark", "Avengers Tower"));
    simpleViewModelList.add(new SimpleViewModel("T'Chala", "Wakanda"));
    simpleViewModelList.add(new SimpleViewModel("Peter Quill", "Missisipi / Milano"));

    SimpleAdapter adapter = new SimpleAdapter(R.id.rv, simpleViewModelList);
    RecyclerView rv = (RecyclerView)findViewById(R.id.rv);
    rv.setHasFixedSize(true);
    rv.setLayoutManager(new LinearLayoutManager(this));
    rv.setAdapter(adapter);
}

Sehingga keseluruhan kode programnya di MainActivity seperti ini :

package net.amijaya.simplerecyclerview;

import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

// http://amijaya.net
// amijaya.net@gmail.com

public class MainActivity extends AppCompatActivity {
    RecyclerView rv;
    ArrayList&lt;SimpleViewModel&gt; simpleViewModelList = new ArrayList&lt;&gt;();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        simpleViewModelList.add(new SimpleViewModel("Tony Stark", "Avengers Tower"));
        simpleViewModelList.add(new SimpleViewModel("T'Chala", "Wakanda"));
        simpleViewModelList.add(new SimpleViewModel("Peter Quill", "Missisipi / Milano"));

        SimpleAdapter adapter = new SimpleAdapter(R.id.rv, simpleViewModelList);
        RecyclerView rv = (RecyclerView)findViewById(R.id.rv);
        rv.setHasFixedSize(true);
        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setAdapter(adapter);
    }

    class SimpleViewModel {
        public String nama;
        public String deskripsi;
        public SimpleViewModel(@NonNull final String nama, @NonNull final String deskripsi) {
            this.nama = nama;
            this.deskripsi= deskripsi;
        }
    }

    class SimpleAdapter extends RecyclerView.Adapter {
        private int listItemLayout;
        private ArrayList&lt;SimpleViewModel&gt; models;
        public SimpleAdapter(int layoutId, ArrayList&lt;SimpleViewModel&gt; itemList) {
            listItemLayout = layoutId;
            this.models = itemList;
        }
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(final ViewGroup parent, final int viewType) {
            final View view = LayoutInflater.from(parent.getContext()).inflate(viewType, parent, false);
            return new SimpleViewHolder(view);
        }
        @Override
        public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
            ((SimpleViewHolder) holder).bindData(models.get(position));
        }
        @Override
        public int getItemCount() {
            return models.size();
        }
        @Override
        public int getItemViewType(final int position) {
            return R.layout.row_item;
        }
    }

    class SimpleViewHolder extends RecyclerView.ViewHolder {
        private TextView txtnama, txtdeskripsi;
        public SimpleViewHolder(final View itemView) {
            super(itemView);
            txtnama = (TextView) itemView.findViewById(R.id.txtnama);
            txtdeskripsi = (TextView) itemView.findViewById(R.id.txtdeskripsi);

            itemView.setOnClickListener(new View.OnClickListener() {
                @Override public void onClick(View v) {
                    int pos = getAdapterPosition();
                    Toast.makeText(itemView.getContext(), String.valueOf(pos) + " " + simpleViewModelList.get(pos).nama + "\n" + simpleViewModelList.get(pos).deskripsi, Toast.LENGTH_SHORT).show();
                }
            });
        }
        public void bindData(final SimpleViewModel viewModel) {
            txtnama.setText(viewModel.nama);
            txtdeskripsi.setText(viewModel.deskripsi);
        }
    }
}

7. Menjalankan Aplikasi RecyclerView Sederhana Android di HP

Setelah semua selesai, jalankan (Run) aplikasi ke Handphone (HP) atau Emulator yang dimiliki. Hasilnya seperti berikut ini :

Aplikasi RecyclerView Sederhana Android Dijalankan di HP
Aplikasi RecyclerView Sederhana Android Dijalankan di HP

Data yang muncul adalah data statis, bisa diubah dinamis dengan cara mengganti kode program berikut ini pada event OnCreate menjadi mengambil data dari Database SQLite, atau dari WebService JSON :

simpleViewModelList.add(new SimpleViewModel("Tony Stark", "Avengers Tower"));
simpleViewModelList.add(new SimpleViewModel("T'Chala", "Wakanda"));
simpleViewModelList.add(new SimpleViewModel("Peter Quill", "Missisipi / Milano"));

8. Demo dan Download Source Code

Demo APK RecyclerView Sederhana Android bisa didownload disini. Sedangkan source code RecyclerView Sederhana Android
bisa didownload disini.

Leave a Reply

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