Contoh RecyclerView List Android

Kelas RecyclerView memperluas kelas ViewGroup dan mengimplementasikan antarmuka ScrollingView. Hal ini diperkenalkan di Marshmallow. Ini adalah versi lanjutan dari ListView dengan peningkatan kinerja dan manfaat lainnya. RecyclerView sebagian besar digunakan untuk merancang antarmuka pengguna dengan kontrol butiran halus atas daftar dan grid aplikasi android.

Dalam tutorial ini, kita akan membuat daftar item dengan ImageView (untuk ikon) dan TextView (untuk deskripsi) menggunakan RecyclerView dan melakukan pendengar klik pada item daftarnya.

Contoh RecyclerView List Android

Buat proyek Android, dan tambahkan pustaka dukungan RecyclerView pada build.gradle

com.android.support:recyclerview-v7:23.1.0

atau di atas versi ini di file .

Dalam file activity_main.xml dalam direktori layout, tambahkan widget RecyclerView.

File : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>  
<android.support.v7.widget.RecyclerView  
        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:scrollbars="vertical"  
        android:id="@+id/recyclerView"  
        tools:context="example.android.com.recyclerviewlist.MainActivity">  
 
</android.support.v7.widget.RecyclerView>  

Buat file dimens.xml di direktori values, dan tambahkan kode berikut.

File : Dimens.xml

<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <dimen name="activity_horizontal_margin">16dp</dimen>  
    <dimen name="activity_vertical_margin">16dp</dimen>  
    <dimen name="ic_clear_margin">56dp</dimen>  
</resources>  

Membuat layout kustom list_item.xml file dengan kode berikut.

File : list_item.xml

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/relativeLayout"  
    android:layout_width="match_parent"  
    android:layout_height="?android:attr/listPreferredItemHeightLarge"  
    android:background="@drawable/border">  
 
    <ImageView  
        android:id="@+id/imageView"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerVertical="true"  
        android:layout_alignParentStart="true"  
        android:layout_alignParentLeft="true"  
        android:layout_marginStart="@dimen/activity_horizontal_margin"  
        android:layout_marginEnd="@dimen/activity_horizontal_margin"  
        android:contentDescription="Icon" />  
 
    <TextView  
        android:id="@+id/textView"  
        android:layout_width="wrap_content"  
        android:layout_height="match_parent"  
        android:layout_toEndOf="@id/imageView"  
        android:layout_toRightOf="@id/imageView"  
        android:gravity="center_vertical"  
        android:textSize="16sp"/>  
 
</RelativeLayout>  

Membuat berkas border.xml di direktori drawable yang digunakan untuk menghias perbatasan RecyclerView item.

File : border.xml

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  
    <solid android:color="#FFFFFF" />  
    <stroke  
        android:width="1dp"  
        android:color="#CCCCCC" />  
</shape>  

Buat kelas MyListData.java dengan kode berikut. Kelas ini digunakan sebagai (POJO) kelas yang menetapkan properti item.

File : MyListData.java

package example.android.com.recyclerviewlist;  
public class MyListData{  
    private String description;  
    private int imgId;  
    public MyListData(String description, int imgId) {  
        this.description = description;  
        this.imgId = imgId;  
    }  
    public String getDescription() {  
        return description;  
    }  
    public void setDescription(String description) {  
        this.description = description;  
    }  
    public int getImgId() {  
        return imgId;  
    }  
    public void setImgId(int imgId) {  
        this.imgId = imgId;  
    }  
}  

Buat kelas MyListAdapter.java dan tambahkan kode berikut. Kelas ini memperluas kelas RecyclerView.Adapter dan menimpa metode yang tidak dilaksanakan. Metode onCreateViewHolder() mengembang list_item.xml. Dalam metode onBindViewHolder() setiap item data diatur ke setiap baris.

File : MyListAdapter.java

package example.android.com.recyclerviewlist;  
 
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 android.widget.Toast;  
 
 
public class MyListAdapter extends RecyclerView.Adapter<MyListAdapter.ViewHolder>{  
    private MyListData[] listdata;  
 
   // RecyclerView recyclerView;  
    public MyListAdapter(MyListData[] listdata) {  
        this.listdata = listdata;  
    }  
    @Override  
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
        LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());  
        View listItem= layoutInflater.inflate(R.layout.list_item, parent, false);  
        ViewHolder viewHolder = new ViewHolder(listItem);  
        return viewHolder;  
    }  
 
    @Override  
    public void onBindViewHolder(ViewHolder holder, int position) {  
        final MyListData myListData = listdata[position];  
        holder.textView.setText(listdata[position].getDescription());  
        holder.imageView.setImageResource(listdata[position].getImgId());  
        holder.relativeLayout.setOnClickListener(new View.OnClickListener() {  
            @Override  
            public void onClick(View view) {  
                Toast.makeText(view.getContext(),"click on item: "+myListData.getDescription(),Toast.LENGTH_LONG).show();  
            }  
        });  
    }  
 
 
    @Override  
    public int getItemCount() {  
        return listdata.length;  
    }  
 
    public static class ViewHolder extends RecyclerView.ViewHolder {  
        public ImageView imageView;  
        public TextView textView;  
        public RelativeLayout relativeLayout;  
        public ViewHolder(View itemView) {  
            super(itemView);  
            this.imageView = (ImageView) itemView.findViewById(R.id.imageView);  
            this.textView = (TextView) itemView.findViewById(R.id.textView);  
            relativeLayout = (RelativeLayout)itemView.findViewById(R.id.relativeLayout);  
        }  
    }  
}  

Terakhir, di kelas MainActivity.java, tambahkan kode berikut. Kelas ini membuat array item untuk kelas MyListData dan mengatur kelas adaptor untuk RecyclerView.

File : MainActivity.java

package example.android.com.recyclerviewlist;  
 
import android.support.v7.app.AppCompatActivity;  
import android.os.Bundle;  
import android.support.v7.widget.LinearLayoutManager;  
import android.support.v7.widget.RecyclerView;  
 
public class MainActivity extends AppCompatActivity {  
 
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        MyListData[] myListData = new MyListData[] {  
                new MyListData("Email", android.R.drawable.ic_dialog_email),  
                new MyListData("Info", android.R.drawable.ic_dialog_info),  
                new MyListData("Delete", android.R.drawable.ic_delete),  
                new MyListData("Dialer", android.R.drawable.ic_dialog_dialer),  
                new MyListData("Alert", android.R.drawable.ic_dialog_alert),  
                new MyListData("Map", android.R.drawable.ic_dialog_map),  
                new MyListData("Email", android.R.drawable.ic_dialog_email),  
                new MyListData("Info", android.R.drawable.ic_dialog_info),  
                new MyListData("Delete", android.R.drawable.ic_delete),  
                new MyListData("Dialer", android.R.drawable.ic_dialog_dialer),  
                new MyListData("Alert", android.R.drawable.ic_dialog_alert),  
                new MyListData("Map", android.R.drawable.ic_dialog_map),  
        };  
 
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);  
        MyListAdapter adapter = new MyListAdapter(myListData);  
        recyclerView.setHasFixedSize(true);  
        recyclerView.setLayoutManager(new LinearLayoutManager(this));  
        recyclerView.setAdapter(adapter);  
    }  
}  

Output :

Share this post