Modernizing List Views: A Guide to Android RecyclerView and CardView

Discover in our latest blog post the revolutionary world of Android RecyclerView and CardView. Learn how these powerful UI components are changing the way lists are created in Android apps. From modern design to dynamic customization - let our tips and tricks inspire you!

Android RecyclerView

Android RecyclerView is a more advanced, powerful, and flexible version of ListView. Unlike ListView, Android RecyclerView requires us to use the RecyclerView.ViewHolder class to hold the elements, which is not mandatory with ListView. As the name suggests, Android RecyclerView is used to recycle cells while scrolling up and down by reusing the elements in the list. Another enhancement in RecyclerView is that it allows us to dynamically set the LayoutManager at runtime, unlike ListView, which was only available in a vertical scroll list. RecyclerView allows us to set the following types of layouts at runtime:

• LinearLayoutManager: Supports both vertical and horizontal lists.
• StaggeredLayoutManager: Supports staggered lists.
• GridLayoutManager: Supports displaying grids as in GalleryView before.

Android RecyclerView Classes

• The RecyclerView.ItemAnimator class provides better support for animating views compared to ListViews.
• The RecyclerView.ItemDecorator class provides better support for adding borders and separators, giving us enormous control.

So, a RecyclerView is more customizable compared to ListView and gives users greater control. RecyclerView is available in the support library. Therefore, we need to change our Gradle script to add the following dependency:

dependencies {
       compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
}

Android CardView

The Android CardView UI component displays information in cards. This component is generally used to display contact information. This component is available in another support library, so we also need to add its dependency:

dependencies {
       compile 'com.android.support:cardview-v7:21.0.0-rc1'
       compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
}

The Android CardView widget allows us to control background color, shadow, corner radius, elevation, etc. To use custom attributes in XML, we need to add the following namespace declaration to the parent layout:

< android.support.v7.widget.CardView
        android:id="@+id/card_view"
        xmlns:card_view="https://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/grey_300"
        card_view:cardCornerRadius="10dp"
        card_view:cardElevation="5dp"
        card_view:cardUseCompatPadding="true"> 

In the sample project, we add a RecyclerView to display a list of CardViews containing Android versions and numbers, as well as a sample log. The CardView Onclick is programmed to remove this card from the list. We added a menu option in the ActionBar to re-add the removed cards in the correct order. Note: The logo images are randomly taken from Google, so the sizes may vary.

Android RecyclerView and CardView Example

The project consists of a MainActivity that displays the RecyclerView. The CardView is added to the RecyclerView from the CustomAdapter class. The DataModel is used to retrieve the data for each CardView through getters. The MyData class contains arrays of TextViews and Drawables along with their IDs.

Android RecyclerView and CardView Sample Code

The `activity_main.xml` contains the RecyclerView within a RelativeLayout:

<android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        /> 

The layout for the CardView is defined as follows:

<android.support.v7.widget.CardView
        android:id="@+id/card_view"
        xmlns:card_view="https://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/color_white"
        card_view:cardCornerRadius="10dp"
        card_view:cardElevation="5dp"
        card_view:cardUseCompatPadding="true"> 

The `MainActivity.java` class creates and manages the RecyclerView and interactions with the CardViews.

Conclusion

With this tutorial, you have a basic understanding of how to use Android RecyclerView and CardView to create appealing list views in your own Android apps. Keep experimenting and exploring the versatility of these powerful UI components.