Android working with Card View and Recycler View

CardView is another major element introduced in Material Design. Using CardView you can represent the information in a card manner with a drop shadow (elevation) and corner radius which looks consistent across the platform. CardView extends the FrameLayout and it is supported way back to Android 2.x.

You can achieve good looking UI when CardView is combined with RecyclerView. In this article we are going to learn how to integrate CardView with RecyclerView by creating a beautiful music app that displays music albums with a cover image and title.

How to Add CardView?

Add the <android.support.v7.widget.CardView> widget to your layout and place other UI widgets like TextViews, ImageViews inside it. You can notice that the below CardView widget contains a single TextView.

4. Open build.gradle and add CardView, RecyclerView and Glide dependencies. RecyclerView is used to display the albums in grid manner. CardView is used to display single album item. Glide is used to display the album cover images.

6. We also need an xm layout to display the album card. Create an xml layout named album_card.xml under res ⇒ layout. Here you can notice that I have added <android.support.v7.widget.CardView> and added all the album properties like name, number of songs and cover image inside it. I also added a 3 dot icon which shows a popup menu on tapping it.

Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: ravi@androidhive.info

Related Posts

how to use recycler view with firebase to show images and text in a 2 column grid..plz help

Abdul Rehman

sir can u tell that when we click on one item and onclick a new detailed activty is open with larger image and full details of card views plz give any perfect tutorial link thanks to androidhive admins

Hello sir nice tutorial. I am using card layout and wanted to give some background color. It works for above level 21 but doesnt works fine for the below ones. I am using both properties android:background=”@color/ darkgreen” android:cardBackgroundColor=”@color/darkgreen”. Any help @Ravi Tamada? Thanks.

If it’s not working, place another layout (Ex: LinearLayout) inside cardview and give background color to that layout. If you want to get the ripple effect on the card, use android:foreground="?attr:selectableItemBackground" for the layout added.

Nitish Sharma

hello Ravi..
Can you let me know how to add Click Listener on Image which are showing using cardview and recycleview..

ok ..but where you define cardView = view.findViewById(R.id.card_view in your activity file and
in void onCardSelected(int position, ImageView thumbnail how we know that which image is clicked and what action should be perform on that..

mattia rogledi

Hi Ravi! thank you for the tutorial, but my scrolling isn’t smooth, can i ask why?

hi sir and so much thanks for this great material design tutorial
i have a question and that is how can we show a spicific folder contents in card views?
for example folder named pictures in sd card
any help wil greatly appreciated

no no i want what i wanted before show contents from a folder (for example pictures,etc) in card view
as im a begginer so i couldnt done what you told about listing contents in a activity and pass the folder path
can you show me with code?
ps; i though we have to define the path using string that’s because i said about strings

Mukul Bagre

Hi Ravi. I wanted to know a way to make each card completely fill the horizontal space rather than two cards sharing the space. How can that be done? Thanks in advance.

In the MainActivity, GridLayoutManager(this, 2) is used as Layout Manager. Here 2 is number of columns. You can make it 1 or use LinearLayout manager instead. You also need to adjust your ImageView aspect ratio.

Samsung VS Iphone

sir hum tabbed activity k sath kese jin kr skte hain isko.

Keima

How can i get to another activity if i click for example the item in onMenuItemClickListener? Thanks

You can do it in both ways. The click listener assigned in adapter when you want to detect click on different elements. Ex: text, image etc., But if you want to detect the just the row click, writing the listener in main activity is good choice.

Arwen Ghafur

hello @ravi8x:disqus when i run the app it said that card view has stoped why ???!!!1

The way you are doing currently is correct. Normally all the click events will launch the same activity by passing necessary data via intents. In this case, an id or name (some unique identification of each card) will be sent to next activity. You need to take appropriate action depending on the id.

The way you are thinking (creating new activity for each card) is wrong as you shouldn’t create 100 activities if there are 100 cards.

RK RJ studio

Thanks for replying .
Actually I sorted it out yesterday only by using switch statements cases to open activities.
But the way using id will save more data in app.
It was great tutorial and anyways.
I’ll try to post my code here which worked perfectly for me.

Ok done, but I can not play different songs, Just one song is playing when I select any card? How Can I play different songs from Different Cards?

FAIL CODE

Sorry to say , your code is so messed up, i keep having the error :
Attempt to invoke virtual method ‘void android.support.design.widget.CollapsingToolbarLayout.setTitle(java.lang.CharSequence)’ on a null object reference

Why u wanna make the toolbar so complex ? any messed up with everything, i tried to change the toolbar, try to remove it, it just cant work. Please next time check ur code before upload it up !

SORRY BRO

Sorry its works now , my fault , my stupid mistakes, thanks alot for your code, im so sorry, i apologize , you done a great job !!!

Hi, Thank you for all the tutorials.
I tried to use what’s in this to to update my recyclerview. It worked, but i want to change number of items per row. How to do that, as you give for example “2” as spancount to the GridLayoutManager ? Thanks again

What do you meant by into app? If you kept them inside drawables, they will be inside app only.

Pourya Mohammadpoor

i want to use this sample and load gallery images into recyclerview not from drawable folder

Aminos Waray

Hello again, Thank you for this tutorial. I have a problem with the elevation and radius not working for the cardview. It’s like the attributes add no effect. Dont know i tried many things but yet not solved. Thanks again.

sir.,
today i asked one doubt in your comment box.,
kindly shares your valuable codes.,
thanks in advance.,
im a new comer in android developing so when you help this time its may useful to me of all time.,
thanking you..

Hi Ravi!Tnq for tutorial!in my app there are multiple Recyclerview that fill from server Dynamically!Now ,I’ve put a separate array list for each Recyclerview !my question is How to i use one array list for all Recyclerview!
like horizantal Recyclerview googleplay! 🙂

No, you have to maintain multiple array lists. Each fragment will have its own RecyclerView and an array list. From the screenshot, top Games section will be a Fragment with RecyclerView and array list. Likewise the You might like section. The inflated layout used in adapter class is same for all the RecyclerVIews.

mani ortan

Hello sir.,
im a beginner for android app development.,
i learn a lot from your projects.,
now i want to know one doubt.,
How to add setOnClickListener for each item in CardView
and i want to add webview for this project when one card clicked it will pass the given url link and shows what its get.,
almost i create the code for this url links on javascript.,
now i want to know How to add setOnClickListener for each item in CardView and how can i pass url links in each cards while click the cards.,
each links are different also.,
kindly clear my doubt.,
and if u send the code for it.,it’ll very useful to me.,
thanking you..

Are you able to detect the click even using the code (in the featured comment) provided?

mani ortan

yeah but i cant understand how to put webview content in this code.,
when i did it.,it doesnt shows any error in logcat but the app stoped its working and didnt work properly.,
thats why i asking to u.,
last code teach me how works click listener in cards.,but as a beginner i want to know to add onclicklistener for each cards.,and how can i put URL link for each cards.,thats all sir.,hope u understand my position..

thank u for your responsible reply sir.,
but my app will be like hybrid.,which was added with java script file too.,so when i create an activity for each card how can i add a link while click the card.,this was my vision only when your way of solution (reply) is possible.,help me to find the suitable way.,my previous app also same as like this but the url link passed by navigation drawer so i handled it easy.,but this time i faced this cardview so i stand alone to face this sir.,

Hi Sir.,i want to ask one small question from this card view example.,that was how can i create 3 cards in a row.?almost two cards in your tutorials.,and i want to change my requirement on it.,help me to done it.,thanks in advance..

Vicky Salunkhe

hello,
you mentioned in your tutorial that two layouts are bring created when the project gets created
but in my case only one layout is present i.,e activity_main.xml
and content_main.xml is absent

i am using android studio 3.0.1

and one more query was

you have used collapsing toolbar

i that the layout which disappears as soon as we scroll to the bottom of the list

looking forward for your reply
thanks you very much for the tutorial

they helped me clear some concepts 😉

Awais ali

Nice article it worked for me thanks man. how can we add on click listener on cards.

The complete code of adapter can be found in the comment section. See the featured comment by me.

Nikhil Dhyani

Where are the images for this project?

Thomas

Great article but how can I do that with different CardView heights? For example, for a timetable where double lessons should be one CardView.
I’ve already tried StaggeredGridLayoutManager, but the order changed because of the different heights.