In this tutorial, we will look into what card view in android is, how it is implemented, how we can design the layout using it and finally understand how to define each single item elements using a CardView example .

CardView is an User Interface definition that used to implement card layout effect. It is use to display a card based UI design. CardView is an android support widget. It’s a kind of FrameLayout with a rounded corner background and shadow. In order to use the CardView you need to add it to your layout file. Use it as a view group to contain other views. CardView is mostly used to provide a good looking UI .

In this tutorial we are going to learn how to integrate CardView with RecyclerView by creating a Test app that displays an image , title and a subtitle .

1. Create a New Project :

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from templates to implement card view with recyclerview in android using android studio.

2. Implement Android support library :

Implement CardView, RecyclerView and Picasso library inside your project build.gradle file .

implementation 'com.android.support:cardview-v7:28.0.0'
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 card view dependency or library, 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. 

<android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="2dp">

Now open res -> layout -> activity_main.xml  file and just implement the following xml code .

activity_main.xml :

<?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">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="2dp">

    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

4. Create a Layout Resource file :

Now create a Layout Resource file , which renders the card view of a single row named it as cardlayout.xml to implement card view design.

cardlayout.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"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="6dp"
    android:elevation="6dp"
    android:layout_margin="6dp"
    android:background="@android:color/holo_blue_dark">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:weightSum="2"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/imgcar"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:src="@drawable/user" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Title here"
                android:textColor="@color/colorAccent"
                android:textSize="36dp"
                android:textStyle="bold" />
            <TextView
                android:id="@+id/subtitle"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Subtitle here"
                android:textColor="@color/colorPrimaryDark"
                android:textStyle="bold" />

        </LinearLayout>
    </LinearLayout>

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

5. Create a Custom Adapter class :

Now we create a custom adapter class to find the view of a row and set it into recycler view adapter .

CustomAdapter.java :

package net.technxt.testapp;

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 com.squareup.picasso.Picasso;

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(ViewGroup parent,
                                           int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.cardlayout, 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);


    }

    @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 .

MainActivity.java :

package net.technxt.testapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    RecyclerView rv;

    Integer[] drawableArray = {R.drawable.user, R.drawable.user, R.drawable.user,
            R.drawable.user, R.drawable.user,R.drawable.user, R.drawable.user, R.drawable.user,
            R.drawable.user, R.drawable.user};
    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
    public 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.setAdapter(ad);
        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setHasFixedSize(true);

    }
}

Now run the project/app to test CarView with RecyclerView in android app through android device or any Emulator .

%d bloggers like this: