Setting up RecyclerView with OnClickListener in Android Studio (Easiest Way 2021)

Setting up RecyclerView with OnClickListener in Android Studio (Easiest Way 2021)

 



Introduction


In this post we will learn how to implement RecyclerView with OnClickListener in android studio.

So basically a RecyclerView have 4 parts in early learning stage.
  • Main activity layout
  • Model Class
  • Adapter
  • Dedicated single layout
RecyclerView is nothing but an advanced concept of list view. This is most efficient way to display number of items with excellent memory and performance efficiency.

So let's start with the coding part..

  • Paste these lines in build.gradle(app)
 implementation "androidx.recyclerview:recyclerview:1.1.0"
 implementation "androidx.cardview:cardview:1.0.0"

  • Paste this code in your Main Activity.xml

 <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/rv_sample"
        android:layout_height="match_parent"/>


  • Let's make the Model class now

 public class Model {
    String text1,text2;

    public Model(String text1, String text2) {
        this.text1 = text1;
        this.text2 = text2;
    }

    public String getText1() {
        return text1;
    }

    public String getText2() {
        return text2;
    }
}


Here you can take data types of your choice.


  • So now let's make the sample dedicated layout

<?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:padding="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        app:cardCornerRadius="10dp"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:background="#E3DDDD"
            android:padding="10dp"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="50dp"
                android:src="@drawable/watermark"
                android:adjustViewBounds="true"
                android:id="@+id/img_sample"
                android:layout_height="wrap_content"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_gravity="center"
                android:padding="5dp"
                android:id="@+id/tv_sample"
                android:textColor="@color/black"
                android:textSize="20sp"
                android:layout_marginLeft="10dp"
                android:text="This is sample title"
                android:layout_height="wrap_content"/>

        </LinearLayout>



    </androidx.cardview.widget.CardView>

</RelativeLayout>


  • So it's time to setup the adapter

public class Adapter extends RecyclerView.Adapter<Adapter.Holder> {

    ArrayList<Model> list;
    OnCLickListenerInterface listener;
    Context context;

    public Adapter(ArrayList<Model> list, OnCLickListenerInterface listener, Context context) {
        this.list = list;
        this.listener = listener;
        this.context = context;
    }

    @NonNull
    @Override
    public Holder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_sample,parent,false);
        return new Holder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull Holder holder, int position) {
        //holder.tv_sample.setText(list.get(position).getText1());           //in case of text and image binding
        //holder.img_sample.setImageResource(R.drawable.watermark);
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public class Holder extends RecyclerView.ViewHolder implements View.OnClickListener {


        private ImageView img_sample;
        private TextView tv_sample;


        public Holder(@NonNull View itemView) {
            super(itemView);

            img_sample = itemView.findViewById(R.id.img_sample);
            tv_sample = itemView.findViewById(R.id.tv_sample);
            itemView.setOnClickListener(this);

        }

        @Override
        public void onClick(View v) {
            listener.OnClick(getAdapterPosition());
        }
    }

    public interface OnCLickListenerInterface{
        public void OnClick(int pos);
    }
}



  • The final step is to add our value in our ArrayList and Set the adapter from main layout

public class MainActivity extends AppCompatActivity {

    RecyclerView rv_sample;
    ArrayList<Model> list = new ArrayList<>();
    Adapter.OnCLickListenerInterface listenerInterface;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rv_sample = findViewById(R.id.rv_sample);

        OnclickFn();

        //adding items in our list

        list.add(new Model("Hello there this is text 1",""));
        list.add(new Model("Hello there this is text 2",""));
        list.add(new Model("Hello there this is text 3",""));
        list.add(new Model("Hello there this is text 4",""));
        list.add(new Model("Hello there this is text 5",""));
        list.add(new Model("Hello there this is text 6",""));
        list.add(new Model("Hello there this is text 7",""));
        list.add(new Model("Hello there this is text 8",""));

        Adapter adapter = new Adapter(list,listenerInterface,this);
        rv_sample.setLayoutManager(new GridLayoutManager(this,1));
        rv_sample.setAdapter(adapter);


    }
    private void OnclickFn(){
        listenerInterface = new Adapter.OnCLickListenerInterface() {
            @Override
            public void OnClick(int pos) {
                Toast.makeText(MainActivity.this, "Position clicked : "+pos, Toast.LENGTH_SHORT).show();
            }
        };
    }
}



That's all we have successfully implemented our RecyclerView with OnClickListener..

Comment your doubts below  👇👇..

Post a Comment

3 Comments