RecyclerView with CardView in Android.

CardView is a material design concept which has all material design properties like has rounded corners elevation etc. We'll be using it for displaying out single row layout. Below you can see each row is displayed using a card view.

1. Add gradle dependency in Module build.gradle file for RecyclerView as well as CardView.

compile 'com.android.support:recyclerview-v7:25.0.1'
compile 'com.android.support:cardview-v7:23.3.+'

2. Go to xml file and add RecyclerView.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="eazy.recyclerviewexample.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rc1"></android.support.v7.widget.RecyclerView>
</RelativeLayout>

3. Go to MainActivity and initialize the recyclerview and LayoutManager which will decide how to draw a view in recyclerview using Gridlayout,LinearLayout or Staggered Grid,here we will take LinearLayout for RecyclerView.

public class MainActivity extends AppCompatActivity {


RecyclerView recyclerView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView= (RecyclerView) findViewById(R.id.rc1);


     
        RecyclerView.LayoutManager layoutManager=new LinearLayoutManager(MainActivity.this);
        recyclerView.setLayoutManager(layoutManager);
}
}

4. Now create a row xml like in the above image I need to display an ImageView with a TextView so we need to take both in the xml and along with that we need a CardView to hold both.

row.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="10dp"
    android:layout_margin="10dp"
    app:cardElevation="10dp"
    android:layout_height="100dp">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="80dp"
            android:id="@+id/img1"
            android:layout_height="80dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Text1"
            android:id="@+id/text1"/>

    </LinearLayout>
</android.support.v7.widget.CardView>

5. Now Create an Object class that will get and set data for our ImageView and TextView there are only two views so we will take int for ImageView and String for TextView.

public class GetSet {
    int img;
    String text;

    public GetSet(int img, String text) {
        this.img = img;
        this.text = text;
    }

    public int getImg() {
        return img;
    }

    public void setImg(int img) {
        this.img = img;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }
}

6. Now Create an Adapter Class

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    ArrayList arrayList;
    Context context;


    public MyAdapter(ArrayList arrayList, Context context) {
        this.arrayList = arrayList;
        this.context = context;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        //we call inflator over here...
        View v= LayoutInflater.from(parent.getContext()).inflate(R.layout.row,parent,false);

        return new MyViewHolder(v,context,arrayList);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {

        GetSet getSet= (GetSet) arrayList.get(position);
        holder.textView.setText(getSet.getText());
holder.img1.setImageResource(getSet.getImg());


    }

    @Override
    public int getItemCount() {

        //return the size of arraylist
        return arrayList.size();
    }

    public static class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{

        TextView textView;
        ImageView img1;
Context ctx;
ArrayList<GetSet> arrayList=new ArrayList();
        public MyViewHolder(View itemView,Context context,ArrayList al) {
            super(itemView);
            itemView.setOnClickListener(this);
            textView = (TextView) itemView.findViewById(R.id.text1);
            img1 = (ImageView) itemView.findViewById(R.id.img1);
            arrayList=al;
            ctx=context;
        }

        @Override
        public void onClick(View view) {
int position=getAdapterPosition();
            GetSet data=arrayList.get(position);
            Toast.makeText(ctx, ""+data.getText(), Toast.LENGTH_SHORT).show();



        }
    }
}

7. Set the data by initializing GetSet class in Activity and initialize the arraylist.

ArrayList<GetSet> al=new ArrayList();


GetSet g1=new GetSet(R.drawable.cupcake,"Cupcake");
GetSet g2=new GetSet(R.drawable.donut,"Donut");
GetSet g3=new GetSet(R.drawable.eclair,"Eclair");
GetSet g4=new GetSet(R.drawable.froyo,"Froyo");


al.add(g1);
al.add(g2);
al.add(g3);
al.add(g4);

8. At the end set the adapter in your Activity or Fragment and pass your data to adapter class.

MyAdapter myAdapter=new MyAdapter(al,MainActivity.this);
recyclerView.setAdapter(myAdapter);

Full Code for MainActivity.java

public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;


    ArrayList<GetSet> al=new ArrayList();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView= (RecyclerView) findViewById(R.id.rc1);


        GetSet g1=new GetSet(R.drawable.cupcake,"Cupcake");
        GetSet g2=new GetSet(R.drawable.donut,"Donut");
        GetSet g3=new GetSet(R.drawable.eclair,"Eclair");
        GetSet g4=new GetSet(R.drawable.froyo,"Froyo");


        al.add(g1);
        al.add(g2);
        al.add(g3);
        al.add(g4);



        RecyclerView.LayoutManager layoutManager=new LinearLayoutManager(MainActivity.this);
        recyclerView.setLayoutManager(layoutManager);

        MyAdapter myAdapter=new MyAdapter(al,MainActivity.this);
        recyclerView.setAdapter(myAdapter);




    }
}

Start With Android

Search This Blog