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>
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();
}
}
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>
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]);
}
}
}
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>
//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);
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.
