How to Make Cardview in android with a dialog box

  • Post comments:0 Comments

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

cardView UI design example
CardView android

Now, run your app.

You can see the below image.

cardView in android  with dialog clicking on card
CardView Outputt

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.

Alert Dialog when Click on CardView
Display Dialog when Click on Card

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.

second activity in android
Open the second activity when clicking on “Learn More…”button

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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments