The Android CardView

NOTE: This tutorial is for later versions of Android Studio.

In Android, a CardView is a special container that allows you to have a kind of popup screen with rounded corners and drop shadows to create the illusion of depth. In this lesson, we'll create a popup card when a button is tapped. The card will have an image and some text underneath it. We'll use the project from the previous lessons for this.

Drag another button underneath your Show Activity Two button. You can add the constraints, just like you did for the first button. For the text, type Show CardView. Now open your MainActivity.java file again. Add the following method below your displaySecondActivity method:

public void displayThirdActivity(View view) {
}

We're going to start another activity, so we need an Intent. Add this line to your new method:

Intent cardIntent = new Intent(this, CardViewActivity.class);

The only other line we need is one that starts an activity. Add this:

startActivity(cardIntent);

You'll get red highlighted for CardViewActivity. This is because CardViewActivity is a class we haven't created yet. But your code should look like this:

Java code to start an Android Activity

We can now create that CardViewActivity class and its XML file. Just like you did in the previous lesson, right click the java folder in the project area on the left. Select New > Activity > Empty Activity from the menu that appears. In the Configure Activity dialog box, type CardViewActivity as the Activity Name. Click Finish. You should have a new Java file in your project area, along with an XML file in your res > layout folder called activity_card_view.xml:

A class and a XML file highlighted in Android Studio

Just before we get on to the design of the XML file, go back to your activity_main.xml file. In Design view, click on your Show CardView button to highlight it. In the Common Attributes section on the right, locate the onClick attribute. From the dropdown list, select the method you have just created, displayThirdActivity:

Setting an onClick event in Android Studio

Now let's design the layout for this activity.

Double-click the activity_card_view.xml to open it up. Make sure you're in Design view and not Text view. In the Containers section of the Palette, locate the CardView item:

The CardView in The Android Studio Palette

Drag one onto your white canvas in the middle. Click the wand in the toolbar to add constraints:

The contraints icon

A CardView is a container that holds other views, like images and text boxes. You typically place these images in Linear Layouts. To see what this means, drag a vertical Linear Layout from the Layout section of the Palette onto the CardView in the Component Tree:

Dragging a CardView onto the Component Tree

Now let's get an image for the ImageView. Right-click the following image and save it to your computer:

Open an explorer window and navigate to where on your computer you saved the above image. Press CTRL + C to copy the image. In Android Studio, click on your res > drawable folder in the project explorer on the left. Press CTRL + V to paste your image over. You should see this dialog box appear:

The Choose Destiniation Directory dialog box in Android Studio

Click OK to see another dialog box. This one:

Copying an image to the res > drawable folder

Click OK and the image should appear in your drawable folder:

An image copied to the res > drawable folder

Back in your Palette, click on the Common category (or the Widgets one) and locate the ImageView. Drag an ImageView onto your Layout in the Component Tree:

Dragging an ImageView onto the Component Tree

As soon as you let go of your left mouse button, you'll see the Resources dialog box appear:

The Resources dialog box in Android Studio

The image you pasted over to the drawable folder should be under the Project category. Click to select it and click OK. You should then see the image appear on your white canvas. Your Component Tree should look like this: (Don't worry about the warnings. And your ImageView probably won't have a 2 on the end.)

The Component Tree

We can add another Linear Layout to hold the text boxes.

Drag a second Linear Layout onto your Component Tree. Drag it just below the Image View. In the Palette, click on the Text category (or the Common one). Drag a TextView onto your second Linear Layout:

Dragging a TextView into the Component Tree

Repeat the process and drag a second Text View just below the first one. Your Component Tree will then look like this:

A layout for a CardView with an image

Your layout itself will then look like this:

Design View in Android Studio

Click on your first TextView to select it. As the text, add London Bridge. You can add the text as a string resource, just like you did in a previous lesson.

Click on the second TextView to select it. Copy and paste the following text as a string resource:

This is Tower Bridge in London. A lot of people get it confused with London Bridge, which is not one bridge but refers to different bridges that have spanned the river Thames between the City of London and Southwark (pronounced SU-thark). The old London bridge that stood for over 600 years was pulled down in the 19th century and replaced with a much more modern one designed by John Rennie. This bridge was then sold to Robert McCulloch, who had it shipped to Arizona where it still stands.

You can format the text to your liking. Try the textSize and textStyle attributes, under the Common Attributes section.

If you want some space between each view, locate and expand the layoutMargin attribute. You can set the layout_marginBottom to something like 8dp for the ImageView. Your layout should look something like this:

Layout with text added

Now let's do something with the CardView itself. We'll do that in the next lesson below.

Back to the Android Contents Page