Android CardView With Image And Text Example Windows Tricks

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

In this example, we will list some car images with text in a recycler view using grid layout manager. Each recycler view item is implemented with a CardView. When you click the car image, a Snackbar will pop up at the 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 the project build.gradle file dependencies section.
```
compile 'com.android.support:cardview-v7:26.+'
compile 'com.android.support:recyclerview-v7:26.+'
```

Table of Contents

1. CardView Example Java File Structure.

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

./
├── app
│   ├── build.gradle
│   ├── proguard-rules.pro
│   └── src
│       ├── main
│       │   ├── AndroidManifest.xml
│       │   ├── java
│       │   │   └── com
│       │   │       └── dev2qa
│       │   │           └── example
│       │   │               ├── material_design
│       │   │               │   ├── cardview
│       │   │               │   │   ├── CarRecyclerViewDataAdapter.java
│       │   │               │   │   ├── CarRecyclerViewItem.java
│       │   │               │   │   ├── CarRecyclerViewItemHolder.java
│       │   │               │   │   └── CardViewActivity.java
│       │   ├── res
│       │   │   ├── layout
│       │   │   │   ├── activity_card_view.xml
│       │   │   │   ├── activity_card_view_item.xml

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 recycler view object.
        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.

The main layout XML file is saved in the 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 the below attributes.
app:cardCornerRadius : The card corner radius size.
app:cardElevation: The card elevation from the screen surface.

The layout XML file name is activity_card_view_item.xml, and it is saved in the 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>

Olimkhon

November 26, 2019 at 5:53 am

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

May 27, 2019 at 7:11 am

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

February 14, 2019 at 10:01 am

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

Saurav
August 9, 2019 at 2:12 am

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

Dogukan

July 14, 2018 at 5:55 pm

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
March 2, 2019 at 1:31 pm

Hi Dogukan, have you solved this problem?

Android CardView With Image And Text Example