Android RecyclerView, Android CardView Example Tutorial

Android RecyclerView and Android CardView got introduced in Android Lollipop with Material Design. For those who’re not aware of Material Design, its a comprehensive guide of UI Widgets introduced since Android 5.0 and it improves the visual appeal of the apps.

Android RecyclerView

Android RecyclerView is a more advanced, powerful and flexible version of the ListView. Android RecyclerView is similar to ListView except that it forces us to use RecyclerView.ViewHolder class to hold the elements which is not a compulsion in ListView.

As the name suggests, Android RecyclerView is used to reuse cells when scrolling up and down by recycling the items in the list. Another improvement in RecyclerView is that it allows us to set the LayoutManagers dynamically at runtime, unlike the ListView which was only available in a Vertical scrolling List. RecyclerView allows us to set the following types of Layouts at runtime.

  • LinearLayoutManager : it supports both vertical and horizontal lists
  • StaggeredLayoutManager : it supports staggered lists
  • GridLayoutManager : it supports displaying grids as seen in GalleryView earlier

Android RecyclerView Classes

  • The RecyclerView.ItemAnimator class provides better support to animating the views unlike the ListViews
  • The RecyclerView.ItemDecorator class provides better support when it comes to adding borders and dividers thereby giving huge control to us

Hence a RecyclerView is more customizable when compared to ListView and gives greater control to the users.
The RecyclerView is available in the support library. So we need to modify our gradle script to add the following dependency.

Android CardView

Android CardView UI component shows information inside cards. This component is generally used to show contact information. This component is available in another support library so we have to add its dependency too.

Android CardView widget allows us to control the background color, shadow, corner radius, elevation etc. For using the custom attributes in XML, we need to add the following namespace declaration to the parent layout. Following is the namespace declaration with some attributes from our project.

The important attributes used above are:

  • card_view:cardCornerRadius : Used to set the corner radius in our layouts
  • card_view:cardBackgroundColor : Used to set the background color of the view

In our example project, we’ll add a RecyclerView to display a list of CardViews that contains Android Version Names and Numbers along with a sample logo. The CardView onclick is programmed to remove that Card from the list. We’ve added a menu option in the ActionBar to add back the removed cards in order.

Note: The logo images are taken at random from Google. So sizes would vary.

Android RecyclerView and CardView Example

android-recyclerview-cardview-project-300x450

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 holds the arrays of textviews and drawables along with their ids.

Android RecyclerView and CardView Example Code

The activity_main.xml holds the RecyclerView inside a RelativeLayout as shown below.

activity_main.xml code:

Android CardView layout is defined below:

cards_layout.xml code:

Android CardView holds an ImageView along with two TextViews in a Nested Linear Layout. The menu_main.xml contains a single item to add back the cards removed.

menu_main.xml code:

The MainActivity.java class is defined below :

The removeItems() method is invoked from the listener method to remove the CardView clicked. Its respective id is stored in an array to retrieve later. To add the view later we’ve implemented another method named addRemovedItemToList(). In this method, we add that view at a predefined position in the list and remove its id from the removedItems array. The CustomAdapter is notified in both the cases.

The CustomeAdapter.java class is defined below :

In the above code, we’ve implemented our own ViewHolder by extending RecyclerView.ViewHolder. The view is inflated from the cards_layout.xml which we had defined in the layouts directory. The onClickListener in the MainActivity is attached to this view in the below snippet.

An ArrayList stores all the data in the form of a DataModel class object in an ArrayList and adds them to the respective cards in the list.

The DataModel.java and MyData.java class which contains the data specific to this application are given below :

Below is the output produced by our android RecyclerView and CardView example application.

android recyclerview, android cardview, android cardview example, android recyclerview example

As you can see the removed item is always added at the third index (fourth position in the list)

This brings an end to this tutorial about android RecyclerView and CardView. You can download the Android RecyclerView CardView Example Project from the below link.

By admin

Leave a Reply