 |
| Gambar 1 : RecyclerView Android |
Mari kita mulai penerapannya, hal pertama yang harus dilakukan adalah menambakan library RecyclerView ke dalam file build.gradle (Module: app) :
implementation 'androidx.recyclerview:recyclerview:1.1.0'Cara yang lebih praktis dalam menambahkan library adalah melalui Design Editor XML layout, hanya perlu klik ikon download seperti contoh gambar dibawah ini yang ditandai dengan lingkaran warna merah, sekaligus memperlihatkan nama-nama seluruh folder dan file yang dipakai dalam tutorial ini :
 |
| Gambar 2 : Folder-folder dan file-file yang dipakai. |
Disini kita akan menggunakan 2 buah layout yakni activity_main.xml sebagai layout aktivitasnya dan item_recyclerview.xml sebagai custom layout untuk RecyclerView. Lalu 3 java class yakni MainActivity.java sebagai konteks atau aktivitasnya, DataItem.java sebagai konstruktor dan setter dan getter dari item-item yang ada pada RecyclerView. Terakhir RecyclerViewAdapter.java sebagai adapter atau penghubung seluruh class java yang ada.
Berikut isi dari kedua layout xml yang disebutkan diatas.
activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:padding="10dp"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorAccent"
android:layout_marginBottom="20dp"
android:paddingStart="5dp"
android:paddingEnd="0dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:text="RecyclerView"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:textStyle="bold"
android:fontFamily="serif"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
item_recyclerview.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/itemLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F6DBDB"
android:orientation="horizontal"
android:gravity="center_vertical"
android:padding="5dp"
android:layout_margin="5dp">
<ImageView
android:id="@+id/imageItem"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@string/app_name"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="15dp">
<TextView
android:id="@+id/textItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="25sp"
android:fontFamily="serif"/>
<TextView
android:id="@+id/textItemDeskripsi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#393434"
android:textSize="18sp"
android:fontFamily="serif"/>
</LinearLayout>
</LinearLayout>
Untuk urusan koding, kurang lebih sama dengan cara penerapan pada Listview ataupun Gridview, sedikit perbedaan hanya pada adapter. Berikut isi dari ketiga file java yang disebutkan diatas.
DataItem.java :
package com.gwnbs.recyclerview;
public class DataItem {
private int gambar;
private String teks, teksDeskripsi;
public DataItem(int gambar, String teks, String teksDeskripsi) {
this.gambar = gambar;
this.teks = teks;
this.teksDeskripsi = teksDeskripsi;
}
public int getGambar() {
return gambar;
}
public String getTeks() {
return teks;
}
public String getTeksDeskripsi() {
return teksDeskripsi;
}
}
RecyclerViewAdapter.java :
package com.gwnbs.recyclerview;
import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.KategoriViewHolder> {
private List<DataItem> dataItem;
Context context;
public RecyclerViewAdapter(List<DataItem> dataItem, Context context) {
this.dataItem = dataItem;
this.context = context;
}
@NonNull
@Override
public KategoriViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new KategoriViewHolder(
LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recyclerview, parent, false)
);
}
@Override
public void onBindViewHolder(@NonNull final KategoriViewHolder holder, final int position) {
DataItem dItem = dataItem.get(position);
holder.textItem.setText(dItem.getTeks());
holder.textItemDeskripsi.setText(dItem.getTeksDeskripsi());
holder.imageItem.setImageResource(dItem.getGambar());
holder.itemLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast t = Toast.makeText(context, "Item no " + position, Toast.LENGTH_SHORT);
t.setGravity(Gravity.CENTER,0,0);
t.show();
}
});
}
@Override
public int getItemCount() {
return dataItem.size();
}
public static class KategoriViewHolder extends RecyclerView.ViewHolder {
TextView textItem, textItemDeskripsi;
ImageView imageItem;
LinearLayout itemLayout;
KategoriViewHolder(@NonNull View itemView) {
super(itemView);
textItem = itemView.findViewById(R.id.textItem);
textItemDeskripsi = itemView.findViewById(R.id.textItemDeskripsi);
imageItem = itemView.findViewById(R.id.imageItem);
itemLayout = itemView.findViewById(R.id.itemLayout);
}
}
}
MainActivity.java :
package com.gwnbs.recyclerview;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;
RecyclerViewAdapter recyclerViewAdapter;
ArrayList<DataItem> dataItems;
static String deskripsi1 = "Keterangan mengenai Flash Drive...";
static String deskripsi2 = "Keterangan mengenai Handphone...";
static String deskripsi3 = "Keterangan mengenai Kamera...";
static String deskripsi4 = "Keterangan mengenai Keyboard...";
static String deskripsi5 = "Keterangan mengenai Laptop...";
static String deskripsi6 = "Keterangan mengenai Printer...";
static String deskripsi7 = "Keterangan mengenai Radio...";
static String deskripsi8 = "Keterangan mengenai Video Game...";
static String deskripsi9 = "Keterangan mengenai Video Camera...";
static String deskripsi10 = "Keterangan mengenai Wifi...";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recyclerView);
dataItems = new ArrayList<>();
recyclerViewAdapter = new RecyclerViewAdapter(dataItems, this);
dataItems.add(new DataItem(R.drawable.ic_flashdisk, "Flash Drive", deskripsi1));
dataItems.add(new DataItem(R.drawable.ic_hp, "Handphone", deskripsi2));
dataItems.add(new DataItem(R.drawable.ic_kamera, "Kamera", deskripsi3));
dataItems.add(new DataItem(R.drawable.ic_keyboard, "Keyboard", deskripsi4));
dataItems.add(new DataItem(R.drawable.ic_laptop, "Laptop", deskripsi5));
dataItems.add(new DataItem(R.drawable.ic_printer, "Printer", deskripsi6));
dataItems.add(new DataItem(R.drawable.ic_radio, "Radio", deskripsi7));
dataItems.add(new DataItem(R.drawable.ic_game, "Video Game", deskripsi8));
dataItems.add(new DataItem(R.drawable.ic_video, "Video Camera", deskripsi9));
dataItems.add(new DataItem(R.drawable.ic_wifi, "Wifi", deskripsi10));
recyclerView.setAdapter(recyclerViewAdapter);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
}
}
0 comments:
Post a Comment