Android CardView With Image And Text Example

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

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

1. CardView Example Java File Structure.

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

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

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

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

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

  1. The main layout XML file is saved in the app/res/layout folder.
  2. 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.

  1. android.support.v7.widget.CardView is the XML tag. It has the below attributes.
  2. app:cardCornerRadius : The card corner radius size.
  3. app:cardElevation: The card elevation from the screen surface.
  4. 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.

  1. 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 thoughts on “Android CardView With Image And Text Example”

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

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

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

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

Leave a Comment

Your email address will not be published.

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

Clicky