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>