Material Design : RecyclerView

Hi Coders , Kali ini saya akan berbagi tentang cara membuat RecylerView. RecyclerView merupakan salah satu elemen dari Android Material Design yang menggantikan ListView dan GridView. RecyclerView sudah sangat terkenal, Sayangya saya baru mempelajarinya pekan ini

Tutorial Membuat Recyclerview

Sebelum kita belajar codenya, ada baiknya kita tahu keunggulan dari RecyclerView sehingga sekarang hampir semua aplikasi Android yang memiliki List menggunakan RecyclerView, bukan GridView atau ListView. Keunggulan RecyclerView ada dari sisi cara mengcoding-nya atau mengimplementasikannya yang lebih rapi dan terstruktur, sehingga performa dari RecyclerView akan lebih baik jika dibandingkan dengan ListView atau GridView.

RecyclerView juga mempunyai animasi default sesuai standar Google Material Design saat menambahkan atau menghapus elemen. Sedangkan untuk mengatur posisi item pada list, RecyclerView menggunakan LayoutManagers, dan ada beberapa jenis layout managers yang bisa digunakan.

Kemudian, RecyclerView menggunakan sebuah ViewHolder untuk menyimpan referensi dari view-view yang digunakan pada sebuah item di RecyclerView. ViewHolder adalah class static yang ada di dalam Adapter yang menyimpan view-view yang akan digunakan untuk menampilkan satu item data. Dengan menggunakan ViewHolder, initinya kalian bisa menghemat waktu dibandingkan memakai findViewById() saat ingin mengupdate list dengan data yang baru.

Elemen terakhir dari RecyclerView adalah Adapter. Adapter berguna untuk mengatur bagaimana data dari data model akan ditampilkan di RecyclerView sebagai sebuah single item. Adapter bisa menerima data dalam bentuk apa saja, tergantung model data yang dipakai. Namun biasanya data tersebut disimpan pada ArrayList.

Adapter juga akan menyiapkan layout yang akan digunakan untuk menampilkan data tersebut per item-nya. Layout dari Adapter kita sendiri yang tentukan, seperti apakah butuh gambar, atau mau ada berapa TextView kita bisa atur. Kemudian kita juga tentukan di Adapter view mana yang ingin diisi dengan data apa, untuk setiap item yang ada di RecyclerView. Misal TextView 1 akan diisi dengan data nama, dan sebagainya.

Enter The Code

Jika kalian sudah membuat sebuah project aplikasi Android baru di Android Studio, maka buka file build.gradle dan masukkan dependencies seperti berikut :

| apply plugin: 'com.android.application'

|

| android {

| compileSdkVersion 24

| buildToolsVersion '24.0.2'

| ...

| }

| dependencies {

| compile fileTree(include: ['*.jar'], dir: 'libs')

compile 'com.android.support:design:24.2.1'

compile 'com.android.support:support-v4:24.2.1'

compile 'com.android.support:appcompat-v7:24.2.1'

compile 'com.android.support:palette-v7:24.2.1'

compile 'com.android.support:cardview-v7:24.2.1'

compile 'com.android.support:recyclerview-v7:24.2.1'

}

Langkah berikutnya adalah membuat layout untuk RecyclerView Adapter. 
Kita akan mendesain sehingga sebuah entry item di RecyclerView akan 
nampak seperti gambar di atas. Caranya buatlah sebuah file xml baru di res/layout, kemudian isikan kode berikut, file-nya bernama
view_rv_item.xml

|<?xml version="1.0" encoding="utf-8"?>

|<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

|    android:layout_width="fill_parent"

|    android:layout_height="?android:attr/listPreferredItemHeight"

|    android:padding="10dip" >

|

|    <ImageView

|        android:id="@+id/icon"

|        android:layout_width="wrap_content"

       android:layout_height="fill_parent"

       android:layout_alignParentBottom="true"

       android:layout_alignParentTop="true"

       android:layout_marginRight="6dip"

       android:contentDescription="TODO"

       android:src="@mipmap/ic_launcher" /> 



   <TextView

       android:id="@+id/tv_subtitle"

       android:layout_width="fill_parent"

       android:layout_height="26dip"

       android:layout_alignParentBottom="true"

       android:layout_alignParentRight="true"

       android:layout_toRightOf="@id/icon"

       android:ellipsize="marquee"

       android:singleLine="true"

       android:textColor="@android:color/black"

       android:text="Description"

       android:textSize="12sp" />



   <TextView

       android:id="@+id/tv_title"

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:layout_above="@id/tv_subtitle"

       android:layout_alignParentRight="true"

       android:layout_alignParentTop="true"

       android:layout_alignWithParentIfMissing="true"

       android:layout_toRightOf="@id/icon"

       android:gravity="center_vertical"

       android:text="Example application"

       android:textColor="@android:color/black"

       android:textSize="16sp" />

  

</RelativeLayout>

Selanjutnya, kita juga akan membuat layout menambahkan elemen RecyclerView pada layout utama, biasanya bernama activity_main.xml, sehingga kodenya akan berubah seperti berikut :

|<?xml version="1.0" encoding="utf-8"?>

|<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

|    android:orientation="vertical" android:layout_width="match_parent"

|    android:layout_height="match_parent">

| 

|    <android.support.v7.widget.RecyclerView

|        android:id="@+id/rv_main"

|        android:layout_width="match_parent"

|        android:layout_height="match_parent"

       android:scrollbars="vertical" />



</LinearLayout>

Setelah itu, kita akan membuat sebuah Adapter untuk RecyclerView, fungsi
 Adapter adalah seperti yang sudah dijelaskan di atas. Caranya, buatlah 
sebuah file .java baru bernama RecyclerViewAdapter.java dan copy pastekan kode berikut :

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

|

| /**

  * Created by User on 15.09.16.

*/

public class RecyclerViewAdapter extends 13|RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {



   private ArrayList<String> rvData;



   public RecyclerViewAdapter(ArrayList<String> inputData) {

      rvData = inputData;

   }



   public class ViewHolder extends RecyclerView.ViewHolder {



       // di tutorial ini kita hanya menggunakan data String untuk tiap item

       public TextView tvTitle;

       public TextView tvSubtitle;



       public ViewHolder(View v) {

           super(v);

           tvTitle = (TextView) v.findViewById(R.id.tv_title);

           tvSubtitle = (TextView) v.findViewById(R.id.tv_subtitle);

       }

   }



   @Override

   public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

       // membuat view baru

       View v = 38|LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_item, parent, 39|false);

       // mengeset ukuran view, margin, padding, dan parameter layout lainnya

       ViewHolder vh = new ViewHolder(v);

       return vh;

   }



   @Override

   public void onBindViewHolder(ViewHolder holder, int position) {

       // - mengambil elemen dari dataset (ArrayList) pada posisi tertentu

       // - mengeset isi view dengan elemen dari dataset tersebut

       final String name = rvData.get(position);

       holder.tvTitle.setText(rvData.get(position));

       holder.tvSubtitle.setText("Frau " + position);

   }



   @Override

   public int getItemCount() {

       // menghitung ukuran dataset / jumlah data yang ditampilkan di 57|RecyclerView

       return rvData.size();

   }

}

Untuk keterangannya, bisa dibaca pada komentar yang sudah saya tambahkan pada baris kode di atas ya :).

Yang terakhir, kita akan tambahkan kode pada MainActivity.java, yang 
akan mensuplai Adapter dengan inputan data yang diinginkan, copy 
pastekan kode berikut pada file MainActivity.java :

|import android.os.Bundle;

|import android.support.annotation.Nullable;

|import android.support.v7.app.AppCompatActivity;

|import android.support.v7.widget.LinearLayoutManager;

|import android.support.v7.widget.RecyclerView;

| 

|import java.util.ArrayList;

| 

|/**

* Created by User on 15.09.16.

*/

public class MainActivity extends AppCompatActivity {



  private RecyclerView rvView;

  private RecyclerView.Adapter adapter;

   private RecyclerView.LayoutManager layoutManager;

   private ArrayList<String> dataSet;



   @Override

   protected void onCreate(@Nullable Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.activity_recyclerview);

       dataSet = new ArrayList<>();

       initDataset();



       rvView = (RecyclerView) findViewById(R.id.rv_main);

       rvView.setHasFixedSize(true);

  

       /**

        * Kita menggunakan LinearLayoutManager untuk list standar

        * yang hanya berisi daftar item

        * disusun dari atas ke bawah

        */

       layoutManager = new LinearLayoutManager(this);

       rvView.setLayoutManager(layoutManager);



      adapter = new RecyclerViewAdapter(dataSet);

       rvView.setAdapter(adapter);



   }



   private void initDataset(){



       /**

        * Tambahkan item ke dataset

        * dalam prakteknya bisa bermacam2

        * tidak hanya String seperti di kasus ini

        */

       dataSet.add("Abzuxz");

       dataSet.add("Abdullah");

       dataSet.add("Ahya");

       dataSet.add("Sidqi");

       dataSet.add("Afiq");

       dataSet.add("Ali");

       dataSet.add("Ammar");

       dataSet.add("Zein");

       dataSet.add("Khasali");

       dataSet.add("Aqhdaq");



   }

}

Gampang kan??, saya saja menyesal karena baru mempelajarinya pekan ini.untuk tampilan yang lebih bagus bisa ditambahkan card view di view_rv_item.xml nya untuk hasilnya bisa di running sendiri karena jika saya running saya takut laptop saya lelah karena beratnya Virtual Device bawaan Android Studio

Thanks udah mau baca artikel CodesGram. Semoga membantu Coders yang ingin belajar tentang RecyclerView. Salam Coders

Make You'r own code

Material Design : RecyclerView

Tutorial Membuat Recyclerview

Enter The Code

Tidak ada komentar:

Ads

Random Posts

Tags

Recent Posts