Coders' Guidebook

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

Card-based layouts are a great way of presenting multiple pieces of information while keeping the style consistent. In this tutorial, we will use card-based layouts to display a series of polaroid images that the user of our app can scroll through.

The ScrollView layout

We are going to want our user to be able to scroll through the polaroids. To achieve this, we will need to create a ScrollView layout. Click 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 now open in the editor.

In this app, we want the polaroids.xml file to be the default layout when the app is loaded. This can be arranged by editing the code in the MainActivity.kt file. If the file is not already open then you can find it by clicking Project > app > java > folder for your project.

Edit the setContentView(R.layout.) part of the onCreate function so the word that comes after layout. is the name of our chosen layout (polaroids):

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.polaroids)
}

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.

Switch to 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.

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

The ScrollView layout

Creating individual cards that contain content

Using the CardView container to display content

<<< Previous

Next >>>