Cara Menampilkan Data SQLite pada RecyclerView


Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial sebelumnya, kita sudah membahas Cara Menampilkan data dari Database SQLite kedalam ListView, karena ListView sudah tergantikan oleh RecyclerView, jadi pada pembahasan kali ini, kita akan belajar Cara Menampilkan Data SQLite kedalam RecyclerView, dengan menggunakan RecyclerView, kita dapat mengtur layout design pada setiap item/listnya.

Cara Menampilkan Data SQLite pada RecyclerView

Seperti biasa, kita akan melanjutkan project pada tutorial sebelumnya, agar lebih mudah, saya sarankan kalian sudah mengikuti panduan-panduan yang saya berikan beserta project yang sudah kalian buat pada tutorial sebelumnya.

Cara Menampilkan Data SQLite pada RecyclerView

Seperti pada tutorial sebelumnya, untuk mengamblil data dari SQLite Database, kita dapat menggunakan suatu Class bernama Cursor, Cursor di implementasikan sebagai Pointer atau petunjuk, yang memungkinkan kita untuk mengambil data dari Rows (Baris) pada sebuah kolom didalam SQLite Database.

1) Pertama, kalian masukan beberapa library berikut ini, pada dependencies didalam file build.gradle (didalam direktori app).

compile 'com.android.support:appcompat-v7:27.0.2'
compile 'com.android.support:design:27.0.2'
compile 'com.android.support:recyclerview-v7:27.0.2'
compile 'com.android.support:support-v4:27.0.2'

2) Pertama, yang perlu kita lakukan yaitu membuat design layout untuk setiap item didalam RecyclerView, caranya buat layout baru, berinama "view_design", pada layout tersebut kita akan menggunakan beberapa view seperti TextView dan ImageView.

<?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/image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:srcCompat="@drawable/unpi" />

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

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

        <TextView
            android:id="@+id/NIM"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:text="NIM"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/jurusan"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:text="Jurusan"
            android:textSize="14sp" />
    </LinearLayout>

</RelativeLayout>

View:

Screenshot_Design Layout RecyclerView

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.

package android.cianjur.developer.net.sqliteexample;

import android.annotation.SuppressLint;
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;

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

    private ArrayList namaList; //Digunakan untuk Nama
    private ArrayList jurusanList; //Digunakan untuk Jurusan
    private ArrayList nimList; //Digunakan untuk Jurusan

    //Membuat Konstruktor pada Class RecyclerViewAdapter
    RecyclerViewAdapter(ArrayList namaList, ArrayList jurusanList, ArrayList nimList){
        this.namaList = namaList;
        this.jurusanList = jurusanList;
        this.nimList = nimList;
    }

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

        private TextView Nama, Jurusan, Nim;

        ViewHolder(View itemView) {
            super(itemView);
            //Menginisialisasi View-View untuk kita gunakan pada RecyclerView
            Nama = itemView.findViewById(R.id.name);
            Jurusan = itemView.findViewById(R.id.jurusan);
            Nim = itemView.findViewById(R.id.NIM);
        }
    }

    @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);
        return new ViewHolder(V);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, @SuppressLint("RecyclerView") final int position) {
        //Memanggil Nilai/Value Pada View-View Yang Telah Dibuat pada Posisi Tertentu
        final String Nama = namaList.get(position);//Mengambil data (Nama) sesuai dengan posisi yang telah ditentukan
        final String Jurusan = jurusanList.get(position);//Mengambil data (Jurusan) sesuai dengan posisi yang telah ditentukan
        final String NIM = nimList.get(position);//Mengambil data (NIM) sesuai dengan posisi yang telah ditentukan
        holder.Nama.setText(Nama);
        holder.Jurusan.setText(Jurusan);
        holder.Nim.setText(NIM);
    }

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

}

4) Klik kanan pada direkotri, pilih New > Drawable resource file, bernimana "line", file ini digunakan untuk membuat Underline pada setiap list item didalam RecyclerView.

<?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>

5) Selanjutnya pada activity_view_data, kalian ganti Tambahkan atau ganti ListView tersebut dengn RecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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.sqliteexample.ViewData">

    <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>

6) Buka file ViewData.java, untuk source codenya, kalian bisa membuatnya seperti berikut ini:

package android.cianjur.developer.net.sqliteexample;

import android.annotation.SuppressLint;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

public class ViewData extends AppCompatActivity {
    private DBMahasiswa MyDatabase;

    private RecyclerView recyclerView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    private ArrayList NamaList;
    private ArrayList JurusanList;
    private ArrayList NIMList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_data);
        getSupportActionBar().setTitle("Daftar Mahasiswa");
        NamaList = new ArrayList<>();
        JurusanList = new ArrayList<>();
        NIMList = new ArrayList<>();
        MyDatabase = new DBMahasiswa(getBaseContext());
        recyclerView = findViewById(R.id.recycler);
        getData();
        //Menggunakan Layout Manager, Dan Membuat List Secara Vertical
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(true);
        adapter = new RecyclerViewAdapter(NamaList, JurusanList, NIMList);
        //Memasang Adapter pada RecyclerView
        recyclerView.setAdapter(adapter);
        //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);
    }

    //Berisi Statement-Statement Untuk Mengambi Data dari Database
    @SuppressLint("Recycle")
    protected void getData(){
        //Mengambil Repository dengan Mode Membaca
        SQLiteDatabase ReadData = MyDatabase.getReadableDatabase();
        Cursor cursor = ReadData.rawQuery("SELECT * FROM "+ DBMahasiswa.MyColumns.NamaTabel,null);

        cursor.moveToFirst();//Memulai Cursor pada Posisi Awal

        //Melooping Sesuai Dengan Jumlan Data (Count) pada cursor
        for(int count=0; count < cursor.getCount(); count++){

            cursor.moveToPosition(count);//Berpindah Posisi dari no index 0 hingga no index terakhir

            NIMList.add(cursor.getString(0));//Menambil Data Dari Kolom 0 (NIM)
            NamaList.add(cursor.getString(1));//Menambil Data Dari Kolom 1 (Nama)
            JurusanList.add(cursor.getString(2));//Menambil Data Dari Kolom 2 (Jurusan)
        }
    }
}

Demo:

Screenshot_SQLite Database dengan RecyclerView Example

Projectnya Bisa Kalian Download di Github Saya.

Terimakasih atas kunjungannya, pada tutorial berikutnya, kita akan belajar Cara Menghapus dan Mengupdate data dari SQLite Database. Semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Menampilkan Data SQLite pada RecyclerView"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel