CardView with RecyclerView in Android

Android CardView is a FrameLayout with a rounded corner background and shadow. CardView got introduced along with RecyclerView in Android Lollipop. CardView can be used as a single view or to display a list of items. In this tutorial, we will see how we can use RecyclerView and CardView to display a Pizza Menu. Below is the snapshot of the app we are going to develop.

cardview snapshot

Creating Project and Adding Dependencies

Create a new Project in Android Studio named “Card View Demo” with package name com.androiddeft.cardview. In Add an Activity step, choose Scrolling Activity as shown below:

CardView Tutorial - creating Project

Open build.gradle file and add the RecyclerView and CardView dependencies:

Add the below colors and strings to colors.xml and strings.xml:

Open activity_scrolling.xml and add an image view as highlighted below. Remove the FloatingActionButton since it is not required.

Open content_scrolling.xml and add a RecyclerView as shown below. This RecyclerView will house the grid of cards.

Create a new layout file in the drawable folder and name it pizza_card.xml. This will contain the CardView, which represent each item in the RecyclerView. Inside the CardView, we will have an ImageView to display the pizza image and couple of TextViews to display pizza name and price and another ImageView which is for the menu (3 dots).

Create a menu XML file in menu folder and name it menu_pizza.xml. This menu will have 2 menu items namely “Order Now” and “Add to Favourite”. This menu will be displayed whenever the menu icon in each pizza card is clicked.

Download the drawable folder and place them in the drawable folder. It contains images used in this project.

Now create a POJO for holding pizza properties such as name, image, price.

Create an adapter class for the RecyclerView and add the following code. In my previous tutorial, I have explained the Implementation of RecyclerView in detail.

In ScrollingActivity.java, initialize the RecyclerView and set the layout manager to a GridLayoutManager since we want to display the Pizza cards in grids.

You can see the working of the app in the below animation. In case of any doubts please write them down in the comments section.

Download Source CodeDownload APK

Cardview-demo-animation

 

Stay Connected

No spam guarantee.

Abhishek

Abhishek

Abhishek loves coding. His favorite is Android Development. Apart from coding he loves traveling and reading.
Abhishek

Leave a Reply

Your email address will not be published. Required fields are marked *