Cardview android example
Overview
We’ll make CardView with dialog.
When the user clicks on the card, will show a popup alert dialog.
In the dialog, there used two buttons, one is “cancel” and another “Learn more…“
When you click on Learn More… button then opened new activity which card you clicked.
For example, you press on the android card then the alert dialog offer you to “learn more…” about android.
What is Android studio cardview
Also Read: How to make TimePicker with AM or PM
Card view is an XML widget. Using this widget we make rounded corner background with shadow
how to create cardview in android?
Now, start to make a card view in android step by step in android.
Step 1:
Open your Android Studio by double clicking on the Android icon.
Step 2:
configure a new project.
Step :3
Click on Gradle Scripts -> build.gradle.
Add below dependency.
Implementation ‘androidx.cardview:cardview:1.0.0’
Implementation’com.adnroid.support:cardview-v7:30.0.0’
The new android studio uses the only material dependency.
implementation 'com.google.android.material:material:1.3.0'
Now, sync your project.
Step 4:
Now, we’ll be starting to create a card layout XML layout file.
App -> -> res -> layout -> activity_main.xml
First of all, we change the Layout.
We’ll use a Relative layout.
After changing the layout, we’ll use some components.
We’ll use TextView for the heading.
Below code, we’ll use in TextView.
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Card View Demo"
android:textSize="30dp"
android:textStyle="bold" />
Now, we’ll use GridLayout for displaying cards in columns and rows.
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/title"
android:background="#f1f1d9"
android:columnCount="2"
android:rowCount="3">
Under Gridlayout we’ll use cardview.
cardview widget
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
Under cardview we’ll use LinearLayout.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
Under linearLayout we’ll use imageview and textview for displaying text and image.
<ImageView
android:id="@+id/img1"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/que" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/que" />
Your one cardView is ready.
Now, the same process continually repeats, as many cards as you want to make.
Here, made 6 cards, two columns and 3 rows.
In card view we used string value in Stirng.xml.
Src -> -> res -> values -> string.xml
String.xml
<resources>
<string name="app_name">CardView</string>
<string name="que">Start Learning</string>
<string name="java">Java</string>
<string name="os">OS</string>
<string name="csharp">C#</string>
<string name="cpp">C++</string>
<string name="android">Android</string>
</resources>
Cardview android full example code
The below given full example of cardview
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Card View Demo"
android:textSize="30dp"
android:textStyle="bold" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/title"
android:background="#f1f1d9"
android:columnCount="2"
android:rowCount="3">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img1"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/que" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/que" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img2"
android:layout_width="120dp"
android:layout_height="116dp"
android:src="@drawable/java" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/java" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img3"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/os" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/os" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img4"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/like" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/csharp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img5"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/cpp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cpp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img6"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/android" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/android" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</RelativeLayout>
Note: Replace Images or Icons
That is shown in the below image
Now, run your app.
You can see the below image.
How to use the dialog box in cardview?
Now, we’ll use a dialog box when clicking on cardview.
We’ll use a two-button one is “cancel” and another is “Learn More…”
All are making in java code.
Also Read: Pick an Image From Camera or Gallery
open MainActivity.java class file.
App -> java -> com.package.name -> MainActivity.java
We’ll use the image id attribute that popup dialog when clicked the particular image on cardview.
There are multiple cards in a single activity, so We’ll use the override onClick listener event handler method in the class.
First of all, finding the id of all images in cardview.
After, assign “this” instance.
Below code, you can see
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView1 = findViewById(R.id.img1);
imageView2 = findViewById(R.id.img2);
imageView3 = findViewById(R.id.img3);
imageView4 = findViewById(R.id.img4);
imageView5 = findViewById(R.id.img5);
imageView6 = findViewById(R.id.img6);
imageView1.setOnClickListener(this);
imageView2.setOnClickListener(this);
imageView3.setOnClickListener(this);
imageView4.setOnClickListener(this);
imageView5.setOnClickListener(this);
imageView6.setOnClickListener(this);
}
Implement class
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
hover the mouse above the line and implement methods or click on the red bulb.
we’ll use more onclick event show we’ll use “switch case” to identify which image is clicked.
In “switch case” we’ll use dialog.
We learned previously about AlertDialog Box with a two-button.
Below code shown a single switch case example in android.
case R.id.img1:
AlertDialog.Builder alertDialog = new AlertDialog.Builder(this);
alertDialog.setTitle("Lear programming language");
alertDialog.setIcon(R.drawable.que);
alertDialog.setMessage("what you want to learn?")
.setCancelable(false)
.setPositiveButton("Learn More...", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//go to activity
}
});
alertDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
alertDialog.create().show();
break;
We take 6 images to show we’ll make 6 “switch cases” and implement a dialog box.
You can see below the full example Dialog box in CardView.
MainAcvity.java
package com.pd.cardview;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.app.Dialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
ImageView imageView1, imageView2, imageView3, imageView4, imageView5, imageView6;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView1 = findViewById(R.id.img1);
imageView2 = findViewById(R.id.img2);
imageView3 = findViewById(R.id.img3);
imageView4 = findViewById(R.id.img4);
imageView5 = findViewById(R.id.img5);
imageView6 = findViewById(R.id.img6);
imageView1.setOnClickListener(this);
imageView2.setOnClickListener(this);
imageView3.setOnClickListener(this);
imageView4.setOnClickListener(this);
imageView5.setOnClickListener(this);
imageView6.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.img1:
AlertDialog.Builder alertDialog = new AlertDialog.Builder(this);
alertDialog.setTitle("Lear programming language");
alertDialog.setIcon(R.drawable.que);
alertDialog.setMessage("what you want to learn?")
.setCancelable(false)
.setPositiveButton("Learn More...", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//go to activity
}
});
alertDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
alertDialog.create().show();
break;
case R.id.img2:
AlertDialog.Builder java = new AlertDialog.Builder(this);
java.setTitle("Java");
java.setIcon(R.drawable.java);
java.setMessage("Java is high-level, class-based,object-oriented programming language")
.setCancelable(false)
.setPositiveButton("Lean More...", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//go to activity
}
});
java.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
java.create().show();
break;
case R.id.img3:
AlertDialog.Builder os = new AlertDialog.Builder(this);
os.setTitle("OS(Operating system)");
os.setIcon(R.drawable.os);
os.setMessage("OS is system software\nOs manage computer hardware\n software resource")
.setCancelable(false)
.setPositiveButton("Learn More...", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//go to activity
}
});
os.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
os.create().show();
break;
case R.id.img4:
AlertDialog.Builder csharp = new AlertDialog.Builder(this);
csharp.setTitle("C#");
csharp.setIcon(R.drawable.like);
csharp.setMessage("C-sharp programming language\n developed by Microsoft \n C-sharp used to develop web app\n desktop app \n mobile app \n and more...")
.setCancelable(false)
.setPositiveButton("Learn more...", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
});
csharp.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//go to activity
}
});
csharp.create().show();
break;
case R.id.img5:
AlertDialog.Builder cpp = new AlertDialog.Builder(this);
cpp.setTitle("C++");
cpp.setIcon(R.drawable.cpp);
cpp.setMessage("C++ is a popular programing\n language\n C++ programming language created by \n Bjarne Stroustrup")
.setCancelable(false)
.setPositiveButton("Learn More...", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//go to activity
}
});
cpp.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
cpp.create().show();
break;
case R.id.img6:
AlertDialog.Builder android = new AlertDialog.Builder(this);
android.setTitle("What is Android");
android.setIcon(R.drawable.android);
android.setMessage("Android is a mobile\n operating system\n that is linux kernel open source \ndesign for smart device ")
.setCancelable(false)
.setPositiveButton("Learn More...", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//go to activity
Intent intent = new Intent(MainActivity.this, MainActivity2.class);
startActivity(intent);
}
});
android.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
android.create().show();
break;
}
}
}
When clicking on the “cancel” button dialog disappears but when clicking on “Learn More…” will open another activity.
That is shown in the below image.
So now, we will create a new empty activity.
File -> new -> Activity -> empty activity
In the main XML Activity 2, we’ll show you whatever text messages you want.
Below code.
Activity_main2.xml.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/android"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.473" />
<TextView
android:textSize="30dp"
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="288dp"
android:text="Welcome to Android"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
When clicking on “Learn More…” open this activity.
Below shown as second activity_main2 Image.
Now, your app is ready.
Conclusion
In this tutorial, we learned card view with a dialog box.
We saw output that when clicking on each image saw dialog with two-button “cancel” and “learn More…” button.
When clicked on the “cancel” button remain same activity but when clicked on the “learn more…” button redirects the second activity.
Using this method you can make such an app that suggests short info before more info.
Cardview demo on YouTube, Watch now live example.
