In this article, we will look into what is recycler view in android , how to implement click listener in recyclerview, how we can design the layout using it and finally understand how to define each single item elements using a recyclerview example.
RecyclerView :
RecyclerView is an advanced version of ListView and GridView with improved performance and other benefits.It is more flexible and efficient than ListView and GridView .
RecyclerView is a ViewGroup, which is used to display both vertical and horizontal scrolling list of elements based on large set of data items. RecyclerView is a widget of android support-v7 version.
RecyclerView provides three kinds of Layout Manager to change their view very efficiently :
- LinearLayoutManager which shows items in a vertical or horizontal scrolling list.
- GridLayoutManager which shows items in a grid.
- StaggeredGridLayoutManager which shows items in a staggered grid .
1. Create a new project
Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from templates to implement recycler view in android using android studio.
2. Implement Support Library
Implement RecyclerView library and Picasso library inside your project build.gradle file .
implementation 'com.android.support:recyclerview-v7:28.0.0-rc01'
implementation 'com.squareup.picasso:picasso:2.5.2'Try to add the latest version of the RecyclerView and Picasso library. Once that’s done, save the file and perform a Gradle sync.
3. Add RecyclerView to your activity_main.xml or main layout
Add RecyclerView to your main layout.
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:padding="2dp"/>Now open res -> layout -> activity_main.xml file and just implement the following xml code .
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:padding="2dp"/>
</RelativeLayout>4. Create a Layout Resource file
Now create a Layout Resource file, which renders the view of a single row named it as recyclerview_layout.xml to implement recyclerview in android.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="2dp"
android:elevation="6dp"
android:background="@android:color/background_light"
android:orientation="horizontal">
<ImageView
android:id="@+id/imgcar"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:layout_gravity="center"
android:src="@drawable/icon1" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_margin="2dp"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Title Here"
android:textColor="@android:color/holo_orange_light"
android:textSize="40sp"
android:textStyle="bold" />
<TextView
android:id="@+id/subtitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Subtitle here"
android:layout_margin="4dp"
android:textColor="@android:color/darker_gray"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>5. Create Custom Adapter class
Now create a custom adapter class to find the view of a row, set it into recycler view adapter and add recyclerview onclicklistener .
package net.technxt.recyclerviewtesting;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.squareup.picasso.Picasso;
import androidx.recyclerview.widget.RecyclerView;
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {
private Context mContext;
private Integer[] mImage;
private String[] mTitle;
private String[] msubTitle;
public static class MyViewHolder extends RecyclerView.ViewHolder {
TextView title;
TextView subtitle;
ImageView imgView;
public MyViewHolder(View itemView) {
super(itemView);
this.title = (TextView) itemView.findViewById(R.id.title);
this.subtitle = (TextView) itemView.findViewById(R.id.subtitle);
this.imgView = (ImageView) itemView.findViewById(R.id.imgcar);
}
}
public CustomAdapter(Context mContext, Integer[] image,String[] title,String[] subTitle) {
this.mContext = mContext;
this.mImage = image;
this.mTitle = title;
this.msubTitle = subTitle;
}
@Override
public MyViewHolder onCreateViewHolder(final ViewGroup parent,
final int viewType) {
final View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recyclerview_layout, parent, false);
MyViewHolder myViewHolder = new MyViewHolder(view);
return myViewHolder;
}
@Override
public void onBindViewHolder(final MyViewHolder holder, final int i) {
holder.title.setText(mTitle[i]);
holder.subtitle.setText(msubTitle[i]);
Picasso.with(mContext).load(mImage[i]).into(holder.imgView);
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext,"Position : "+i,Toast.LENGTH_LONG).show();
}
});
}
@Override
public int getItemCount() {
return mTitle.length;
}
}
6. Now open your MainActivity.java and add following code
Now create an instance of CustomAdapter and setAdapter( ) to RecyclerView or just implement the following code .
package net.technxt.recyclerviewtesting;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
RecyclerView rv;
Integer[] drawableArray = {R.drawable.icon1, R.drawable.icon2, R.drawable.icon1,
R.drawable.icon2, R.drawable.icon1,R.drawable.icon2, R.drawable.icon1, R.drawable.icon2,
R.drawable.icon1, R.drawable.icon2};
String[] titleArray = {"Title1","Title2","Title3","Title4","Title5","Title6","Title7","Title8","Title9","Title10"};
String[] subtitleArray = {"subtitle1","subtitle2","subtitle3","subtitle4","subtitle5","subtitle6","subtitle7","subtitle8","subtitle9","subtitle10"};
CustomAdapter ad;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rv = (RecyclerView)findViewById(R.id.rv);
ad = new CustomAdapter(MainActivity.this,drawableArray,titleArray,subtitleArray);
rv.setLayoutManager(new LinearLayoutManager(this));
rv.setHasFixedSize(true);
rv.setAdapter(ad);
}
}Now run the project/app to test Click listener for RecyclerView in android app through android device or any Emulator .
