android-cardview-demo

Android Cardview tutorial with example

Introduction

In previous tutorials we learnt horizontal list and vertical list using recyclerview. This Android tutorial is to add cardview in apps with recyclerview. An example app has been developed to demonstrate the concepts of Android Cardview.

Cardview is a very powerful UI tool. You may add photo, texts, links etc in a card to give your user one nice representation of the information you want to share. By combining recyclerview and cardview, we can give our apps a beautiful representation. While, I am no UX designer, I will cover the necessary points for you to explore your own creativity. So, without further ado, let’s get started.

App Demo

Before we start with the development, let’s first take a look as to what we are going to create as part of this tutorial.

android-cardview-demo

android-cardview-demo

Tech Stack

We have used following tech stack in this app

 

Basic tasks for implementing cardview

Following are the  basic tasks while implementing cardview –

  1. Add the dependency for cardview and recyclerview.
  2. Write a model class for the information  you want to display in the cardview. In my case it’s grocery items
  3. Write a XML layout file to depict information visually on the card view/recycler view.
  4. Write a custom adapter to inflate the recyclerview.
  5. Modify the acitivity_main.xml to include recyclerview
  6. And finally harness these changes from MainActivity.java; populate data
  7. And that’s it. You just understood the basic skeleton of a cardview project.

Let’s get started!

Create an empty project

  • Launch Android Studio and click: File –> New –> New Project…
  • A “Create New Project” dialog box will open; we’ll provide the app name and company domain. I have entered following details, you can provide the name/domain as per your choice and preference.
    • Application Name:- ItcCardView
    • Company Domain:- iteritory.com
  • Click on Next button. In the next window, select the minimum SDK version; you can choose as per your preference. In this case, I have chosen API 16: Android 4.1 (Jelly Bean). Click Next button.
  • In the next window, select “Empty Activity“. Click Next button.
  • In the next window,  let’s keep the Activity Name and Layout Name to default. Click Finish button.
  • I’ll change the app name a bit here, traverse and open res–> values –> strings.xml. Find the line with app_name attribute. Change the value to “My CardView App”.

Add CardView dependency

Now, in order to use cardview in your app, we will add the dependencies for cardview, recyclerview in the app level build.gradle file. After adding the necessary dependencies, my build.gradle file looks like –

Add CardView to the layout file

Next, we will add the CardView widget in the layout file. Inside the CardView widget, we can use the container view like LinearLayout or RelativeLayout as the child. Inside the container view, we can add the other widgets to represent image, text, button etc. For now, let’s just create a simplest cardview app with a simple text. Open the activity_main.xml and modify it; add the cardview widget. After doing the necessary modification, my activity_main.xml looks like –

Now, fire up the app from android studio; the simple app will look like –

android-cardview-first-demo

android-cardview-first-demo

Cool!! so far so good. Now, we will do some coding to demonstrate the power of cardview widget. Here in this demo, we will create a list of products in an arbitrary e-commerce app.

Write a Model Class depicting Product

Now, we will write a model class depicting the grocery item. We’ll use following fields –

  • an image to display the picture of the grocery product
  • Product name
  • Price
  • Weight
  • Quantity

Create a new package inside com.iteritory.itccardview with the name model. Create Grocery.java model class inside this newly created package. The class looks like –

 

Write a Layout XML depicting Product

Now, we will write a layout file that will depict one grocery item in the list. Under the res -> layout folder, create a new file with name layout_product_card.xml. After the necessary updates, my layout looks as follows –

 

Write custom adapter for the recyclerview

Next, we will create a custom adapter class that will inflate the layout file layout_product_card.xml (that we created above). Create a new package called adapter inside com.iteritory.itccardview. Write the adapter class inside adapter package.

The custom adapter class extends RecyclerView.Adapter and overrides 3 methods –

  1. onCreateViewHolder() – inflates the layout_product_card.xml layout
  2. onBindViewHolder() – the data (product image, product name etc) is retrieved from the object and is set to each item/row in the list. We’ll also override imageView onClick method to display a toast saying which item is selected.
  3. getItemCount() – returns the numbers of items/rows in the list.

So folks, let’s crack some code.

Change activity_main.xml to add recyclerview

Now, we will make minor modification in the activity_main.xml file to add the recyclerview. Post change, the file content looks like –

Update MainActivity.java to add data and populate the cardview

Finally it’s time to update MainActivity.java file to harness all these activities that we did so far. Let’s take a look at the code –

GitHub Info

The project is checked in to GitHub link –> https://github.com/msadrud/ItcCardView

Feel free to take a look.

Reference

For the UI part, I referenced to another blog from http://www.tutorialsface.com. I have modified the UI layout a little bit to make it simpler.

However, I thank http://www.tutorialsface.com folks for the fantastic content in their site.

For icons and images; I have referred to google search; you can get the icon and images from github link shared above.

Conclusion

So folks that’s it! In this tutorial we learnt a bit about card view. Do let me know how you liked the tutorial should it have helped you anyway. 🙂

7

No Responses

Write a response

This site uses Akismet to reduce spam. Learn how your comment data is processed.