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.

android cardview with text and image example

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;

/**
 * Created by Jerry on 3/17/2018.
 */

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;

/**
 * Created by Jerry on 3/17/2018.
 */

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;

/**
 * Created by Jerry on 3/17/2018.
 */

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.

READ :   Android Collapsing Toolbar With Image And RecyclerView Example

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>

6 Comments


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

    Reply

    1. Hi Dogukan, have you solved this problem?

      Reply

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

    Reply

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

      Reply

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

    Reply

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

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