Android CardView With Image And Text Example

Android CardView is a component that used to implement card layout effect. It is provided in appcompat-v7 library. Use CardView, you can add circle corner and shadow effect to the card frame.

In this example, we will list some car images with text in a recycler view use grid layout manager. Each recycler view item is implemented with a CardView. When you click the car image, a Snackbar will popup at screen bottom.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/wANU2z9b5kc

Before coding you should add below dependency library in project build gradle file dependencies section.

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

1. CardView Example Java File Structure.

There are four java files in this example. You can see the file structures in below picture.

cardview example java file structure

2. Main Activity.

CardViewActivity.java

package com.dev2qa.example.material_design.cardview;

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

import com.dev2qa.example.R;

import java.util.ArrayList;
import java.util.List;

public class CardViewActivity extends AppCompatActivity {

    private List<CarRecyclerViewItem> carItemList = null;

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

        setTitle("dev2qa.com - Android CardView Example.");

        initializeCarItemList();

        // Create the recyclerview.
        RecyclerView carRecyclerView = (RecyclerView)findViewById(R.id.card_view_recycler_list);
        // Create the grid layout manager with 2 columns.
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
        // Set layout manager.
        carRecyclerView.setLayoutManager(gridLayoutManager);

        // Create car recycler view data adapter with car item list.
        CarRecyclerViewDataAdapter carDataAdapter = new CarRecyclerViewDataAdapter(carItemList);
        // Set data adapter.
        carRecyclerView.setAdapter(carDataAdapter);

    }

    /* Initialise car items in list. */
    private void initializeCarItemList()
    {
        if(carItemList == null)
        {
            carItemList = new ArrayList<CarRecyclerViewItem>();
            carItemList.add(new CarRecyclerViewItem("Audi", R.drawable.car_audi));
            carItemList.add(new CarRecyclerViewItem("BMW", R.drawable.car_bmw));
            carItemList.add(new CarRecyclerViewItem("Benz", R.drawable.car_benz));
            carItemList.add(new CarRecyclerViewItem("Jeep", R.drawable.car_jeep));
            carItemList.add(new CarRecyclerViewItem("Land Rover", R.drawable.car_land_rover));
            carItemList.add(new CarRecyclerViewItem("Future", R.drawable.car_future));
        }
    }
}

3. Car RecyclerView Data Adapter.

CarRecyclerViewDataAdapter.java

package com.dev2qa.example.material_design.cardview;

import android.support.design.widget.Snackbar;
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.dev2qa.example.R;

import java.util.List;

public class CarRecyclerViewDataAdapter extends RecyclerView.Adapter<CarRecyclerViewItemHolder> {

    private List<CarRecyclerViewItem> carItemList;

    public CarRecyclerViewDataAdapter(List<CarRecyclerViewItem> carItemList) {
        this.carItemList = carItemList;
    }

    @Override
    public CarRecyclerViewItemHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // Get LayoutInflater object.
        LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
        // Inflate the RecyclerView item layout xml.
        View carItemView = layoutInflater.inflate(R.layout.activity_card_view_item, parent, false);

        // Get car title text view object.
        final TextView carTitleView = (TextView)carItemView.findViewById(R.id.card_view_image_title);
        // Get car image view object.
        final ImageView carImageView = (ImageView)carItemView.findViewById(R.id.card_view_image);
        // When click the image.
        carImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Get car title text.
                String carTitle = carTitleView.getText().toString();
                // Create a snackbar and show it.
                Snackbar snackbar = Snackbar.make(carImageView, "You click " + carTitle +" image", Snackbar.LENGTH_LONG);
                snackbar.show();
            }
        });

        // Create and return our custom Car Recycler View Item Holder object.
        CarRecyclerViewItemHolder ret = new CarRecyclerViewItemHolder(carItemView);
        return ret;
    }

    @Override
    public void onBindViewHolder(CarRecyclerViewItemHolder holder, int position) {
        if(carItemList!=null) {
            // Get car item dto in list.
            CarRecyclerViewItem carItem = carItemList.get(position);

            if(carItem != null) {
                // Set car item title.
                holder.getCarTitleText().setText(carItem.getCarName());
                // Set car image resource id.
                holder.getCarImageView().setImageResource(carItem.getCarImageId());
            }
        }
    }

    @Override
    public int getItemCount() {
        int ret = 0;
        if(carItemList!=null)
        {
            ret = carItemList.size();
        }
        return ret;
    }
}

4. Car RecyclerView Item DTO.

CarRecyclerViewItem.java

package com.dev2qa.example.material_design.cardview;

public class CarRecyclerViewItem {

    // Save car name.
    private String carName;

    // Save car image resource id.
    private int carImageId;

    public CarRecyclerViewItem(String carName, int carImageId) {
        this.carName = carName;
        this.carImageId = carImageId;
    }

    public String getCarName() {
        return carName;
    }

    public void setCarName(String carName) {
        this.carName = carName;
    }

    public int getCarImageId() {
        return carImageId;
    }

    public void setCarImageId(int carImageId) {
        this.carImageId = carImageId;
    }
}

5. Car RecyclerView Item Holder.

CarRecyclerViewItemHolder.java

package com.dev2qa.example.material_design.cardview;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.dev2qa.example.R;

public class CarRecyclerViewItemHolder extends RecyclerView.ViewHolder {

    private TextView carTitleText = null;

    private ImageView carImageView = null;

    public CarRecyclerViewItemHolder(View itemView) {
        super(itemView);

        if(itemView != null)
        {
            carTitleText = (TextView)itemView.findViewById(R.id.card_view_image_title);

            carImageView = (ImageView)itemView.findViewById(R.id.card_view_image);
        }
    }

    public TextView getCarTitleText() {
        return carTitleText;
    }

    public ImageView getCarImageView() {
        return carImageView;
    }
}

6. Main Layout Xml File.

Saved in app / res / layout folder.

activity_card_view.xml

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</android.support.design.widget.CoordinatorLayout>

7. RecyclerView Item Layout Xml File.

android.support.v7.widget.CardView is the xml tag. It has below attributes.

app:cardCornerRadius : The card corner radius size.

app:cardElevation: The card elevation from the screen surface.

activity_card_view_item.xml

Saved in app/res/layout folder.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/card_view_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>

        <TextView
            android:id="@+id/card_view_image_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_gravity="center_horizontal"
            android:textSize="20dp"/>


    </LinearLayout>

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

8. Android Manifest Xml File.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dev2qa.example">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <activity android:name=".material_design.cardview.CardViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

6 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Olimkhon
Olimkhon

Hi, I was rejected by this project as I write or order how each one will be unlocked by Activity.
if (position == 0) startActivity(1)
if (position == 1) startActivity(2)
if (position == 2) startActivity(3)
How do I order?
please help

Zoey
Zoey

Hi, Thanks for the great article. I have a weird problem. when I completely copied your code into a new project, it worked perfectly. But when I copied your code into my own project, It did not work.
I checked everything, all the resources all the same.
The only problem in my project is the image inside the card view does not have the round edge.

Afzal
Afzal

it does not get the current position how to get the current position

Saurav
Saurav
Reply to  Afzal

Sir,how I can add content inside the card view so that when a user clicks some description text will come with image.

Dogukan
Dogukan

I want to play audio with MediaPlayer when I click on any of the car pictures.

if(carTitleView.getText().toString()==”Audi”)
{
MediaPlayer medPlayer=MediaPlayer.create(getApplicationContext,R.raw.audisound);
medPlayer.start();
}

I tried this code but it did not work. Please help me.

Rodolfo
Rodolfo
Reply to  Dogukan

Hi Dogukan, have you solved this problem?

6
0
Would love your thoughts, please comment.x
()
x