RecyclerView Android Studio Example tutorial welcomes you.
This RecyclerView Android tutorial guide you to make RecyclerView with CardView and Custom Adapter.
You will learn how to get click position of RecyclerView in this RecyclerView Android Studio Example.
You will also learn to implement onClick, onItemClickListener, onItemTouchListener of RecyclerView.
We will use material design to implement RecyclerView and CardView.
Also read useful tutorials,
First, check the output of RecyclerView Android tutorial then follow all the steps.
Download Source Code for RecyclerView Android example
[sociallocker]Download Recyclerview_cardview [/sociallocker]
Step 1: Create a new project in Android Studio.
Make a new android studio project with empty activity.
Step 2: Updating build.gradle(Module:app) file
Add below source code into dependencies{}
compile 'com.android.support:recyclerview-v7:23.4.0' compile 'com.android.support:cardview-v7:23.3.+'
Step 3. Downloading Images
Now Click here to download images and copy them into the drawable folder.
You can learn here how to put items in drawable folder in the step 2 of android circular progressbar example. (No need to create xml file in drawable, just copy and paste images in drawable).
Step 4: Coding cardview.xml
Create a new file into drawable folder and name it cardview.xml
Add below source code into it.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
<gradient android:startColor="#1cb73b" android:endColor="#29ba48" android:angle="270" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp"/>
</shape>
</item>
<item android:state_focused="false"
>
<shape android:shape="rectangle">
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
<gradient android:startColor="#1cb724" android:endColor="#29ba41" android:angle="270" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
</selector>
Step 5: Making rv_item.xml
Create a new layout resource file named rv_item.xml
Copy following source code into it
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="0dp"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/tv"
android:height="40dp"
android:background="@drawable/cardview"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Image"
android:textColor="#fff"
android:textStyle="bold"
android:textSize="18sp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:id="@+id/iv"
android:layout_marginLeft="10dp"
android:src="@drawable/bike"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Step 6: Making Model class
Create a new JAVA class named Model.java and paste below
/**
* Created by Parsania Hardik on 28-Jun-17.
*/
public class Model {
private String name;
private int image_drawable;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getImage_drawable() {
return image_drawable;
}
public void setImage_drawable(int image_drawable) {
this.image_drawable = image_drawable;
}
}
Step 7: Code for Adapter.java
Let’s create Custom Adapter for RecyclerView.
Make a new JAVA class named Adapter.java and add below
import android.content.Context;
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.TextView;
import java.util.ArrayList;
/**
* Created by Parsania Hardik on 26-Jun-17.
*/
public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> {
private LayoutInflater inflater;
private ArrayList<Model> imageModelArrayList;
public Adapter(Context ctx, ArrayList<Model> imageModelArrayList){
inflater = LayoutInflater.from(ctx);
this.imageModelArrayList = imageModelArrayList;
}
@Override
public Adapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = inflater.inflate(R.layout.rv_item, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(Adapter.MyViewHolder holder, int position) {
holder.iv.setImageResource(imageModelArrayList.get(position).getImage_drawable());
holder.time.setText(imageModelArrayList.get(position).getName());
}
@Override
public int getItemCount() {
return imageModelArrayList.size();
}
class MyViewHolder extends RecyclerView.ViewHolder{
TextView time;
ImageView iv;
public MyViewHolder(View itemView) {
super(itemView);
time = (TextView) itemView.findViewById(R.id.tv);
iv = (ImageView) itemView.findViewById(R.id.iv);
}
}
}
Step 8: Finally Update activity_main.xml and MainActivity.java
Updating activity_main.xml
Add following into activity_main.xml
<LinearLayout 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"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"/>
</LinearLayout>
Updating MainActivity.java
Copy folowing into MainActivity.java
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private ArrayList<Model> imageModelArrayList;
private Adapter adapter;
private int[] myImageList = new int[]{R.drawable.benz, R.drawable.bike,
R.drawable.car,R.drawable.carrera
,R.drawable.ferrari,R.drawable.harly,
R.drawable.lamborghini,R.drawable.silver};
private String[] myImageNameList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.recycler);
imageModelArrayList = populateList();
Log.d("hjhjh", imageModelArrayList.size() + "");
adapter = new Adapter(this,imageModelArrayList);
recyclerView.setAdapter(adapter);
recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(), LinearLayoutManager.VERTICAL, false));
recyclerView.addOnItemTouchListener(new RecyclerTouchListener(getApplicationContext(), recyclerView, new ClickListener() {
@Override
public void onClick(View view, int position) {
Toast.makeText(MainActivity.this, imageModelArrayList.get(position).getName(), Toast.LENGTH_SHORT).show();
}
@Override
public void onLongClick(View view, int position) {
}
}));
}
private ArrayList<Model> populateList(){
ArrayList<Model> list = new ArrayList<>();
for(int i = 0; i < 8; i++){
Model imageModel = new Model();
imageModel.setName(myImageNameList[i]);
imageModel.setImage_drawable(myImageList[i]);
list.add(imageModel);
}
return list;
}
public interface ClickListener {
void onClick(View view, int position);
void onLongClick(View view, int position);
}
static class RecyclerTouchListener implements RecyclerView.OnItemTouchListener {
private GestureDetector gestureDetector;
private ClickListener clickListener;
public RecyclerTouchListener(Context context, final RecyclerView recyclerView, final ClickListener clickListener) {
this.clickListener = clickListener;
gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}
@Override
public void onLongPress(MotionEvent e) {
View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null) {
clickListener.onLongClick(child, recyclerView.getChildPosition(child));
}
}
});
}
@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
View child = rv.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null && gestureDetector.onTouchEvent(e)) {
clickListener.onClick(child, rv.getChildPosition(child));
}
return false;
}
@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}
@Override
public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
}
}
}
Describing MainActivity.java
Following source code will give you click position of RecyclerView
recyclerView.addOnItemTouchListener(new RecyclerTouchListener(getApplicationContext(), recyclerView, new ClickListener() {
@Override
public void onClick(View view, int position) {
Toast.makeText(MainActivity.this, imageModelArrayList.get(position).getName(), Toast.LENGTH_SHORT).show();
}
@Override
public void onLongClick(View view, int position) {
}
}));
You just need to create an interface named “ClickListener”
public interface ClickListener {
void onClick(View view, int position);
void onLongClick(View view, int position);
}
And
a class named “RecyclerTouchListener”
static class RecyclerTouchListener implements RecyclerView.OnItemTouchListener {
private GestureDetector gestureDetector;
private ClickListener clickListener;
public RecyclerTouchListener(Context context, final RecyclerView recyclerView, final ClickListener clickListener) {
this.clickListener = clickListener;
gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}
@Override
public void onLongPress(MotionEvent e) {
View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null) {
clickListener.onLongClick(child, recyclerView.getChildPosition(child));
}
}
});
}
@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
View child = rv.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null && gestureDetector.onTouchEvent(e)) {
clickListener.onClick(child, rv.getChildPosition(child));
}
return false;
}
@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}
@Override
public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
}
}
So that is all for RecyclerView Android tutorial.
If you have any questions or feedback regarding this tutorial then feel great to use comment section.
We will answer you soon.
Thank you š