Display scrollable content in your Android app using CardView and ScrollView layouts

Card-based layouts are a great way of content in a stylistically consistent manner. For example, you could use card-based layouts to show the images in an image gallery or previews of news articles. In this tutorial, we will use card-based layouts to display a series of polaroid images that the user can scroll through.

The ScrollView layout

To allow the user to scroll through the list of polaroids, we will use a ScrollView layout. ScrollView layouts allow the user to scroll up and down if the layout's content is too large to fit in the screen. To create a new layout, navigate through Project > app > res then right-click the layout folder and select New > Layout resource file.

In the New Resource File window, set the file name to polaroids and the root element to ScrollView.

A file called polaroids.xml should then open in the editor. The layout should contain a solitary ScrollView widget that we will use to display the card-based layouts.

Creating individual cards that contain content

We can now begin to create our polaroids. You're welcome to use images of your own or the ones below.

The images will be added as described previously. In brief, drag and drop the images into the drawable folder (accessible by clicking Project > app > res > drawable) then press OK in the resulting dialogue window.

Next, create three new Layout Resource files in the usual way. Name them 'card_polaroid_1', 'card_polaroid_2' and 'card_polaroid_3', respectively, and use 'LinearLayout' as the root element each time.

Open the card_polaroid_1.xml file in the editor and drag an ImageView widget from the Palette into the layout.

When the Resources dialogue box opens, expand the Project dropdown menu and select the canyon image. Press OK to add the image to the layout.

Now drag a TextView object from the Palette and drop it below the image. This TextView object will form the polaroid caption.

We'll now make the layout look a little more attractive by editing the attributes of the image and caption. First, select the ImageView widget and open the Attributes panel. Search for the following attributes and edit them accordingly:

• layout_width = wrap_content;
• layout_height = 275dp

Next, edit the attributes of the TextView object as follows:

• textSize = 28sp
• layout_margin = 16dp
• text = Canyon adventure (NB you may need to resolve a hardcoded text warning as described previously)

Finally, set the padding for the LinearLayout to 15dp (note it may be easier to select the LinearLayout from the component tree). Once all the above has been applied, the layout should look like this:

Repeat the above steps almost identically for the card_polaroid_2.xml and card_polaroid_3.xml files. The only difference will be that you will use the lake image with a caption of 'Lake getaway' on card_polaroid_2.xml, and the river image with a caption of 'A scenic nature view' on card_polaroid_3.xml.

Using the CardView container to display content

We can now begin to create the card-based layout which will display the card's content. Switch back to the polaroids.xml file and drag a LinearLayout (vertical) object from the Palette and drop it below the ScrollView element of the Component Tree.

Now drag three CardView objects from the Containers category of the Palette and drop them below the LinearLayout (vertical) object in the component tree. If an Add Project Dependency pop-up window appears when you go to drop your CardView object, just press OK and Android Studio will reconfigure itself to support the CardView. Once you're finished the component tree should look like this:

Select each CardView object in the component tree one by one and edit their attributes as follows:

• layout_width = wrap_content
• layout_gravity = center
• layout_margin = 16dp
• cardCornerRadius = 10dp
• cardElevation = 2dp

The above attributes will work together to resize and position the cards, introduce a margin so the cards are suitably spaced out from one another, round their corners and elevate them ever so slightly to create a shadow effect.

We're now finally ready to integrate our content into the CardView objects. Switch the editor view in the polaroids.xml file to Code mode then locate the three CardView objects:

First, delete the / symbol which appears at the end of app:cardElevation="2dp" />. Then below each CardView object add the following closing tag: </androidx.cardview.widget.CardView> Finally, in between each CardView object and closing tag add the following 'include' statement: <include layout="@layout/card_polaroid_1" /> Remember to change the number at the end of card_polaroid_1 to '2' and '3' for the second and third CardView objects, respectively.

Altogether, the complete code for the polaroids.xml file should look like this:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="16dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <include layout="@layout/card_polaroid_1" />

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="16dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <include layout="@layout/card_polaroid_2" />

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="16dp"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <include layout="@layout/card_polaroid_3" />

        </androidx.cardview.widget.CardView>
    </LinearLayout>
</ScrollView>

And we're done! If you run the app now it should look like the screenshots below and allow you to scroll up and down to view the polaroids.

<<< Previous

Next >>>