RecyclerView & CardView not working properly in 2020? — Android App

How to use RecyclerView & CardView

you have looked through many tutorials implementing RecyclerView & CardView, and you are still thinking why your Android Application is still facing many problems that you dont know how to solve, then this post is for you!

First of all…

Does any of these seem familiar to you?

  1. When you are trying to create your CardView…. but you cant see its design properly….
Image for post
Image for post
This is what your Cardview looks like…this is wrong

Though in tutorials it looks nice like this

Image for post
Image for post
This is what you should see

2. When you are adding RecyclerView into your page layout but… it also looks similarly flawed… (one big dark grey background)

Image for post
Image for post
This is wrong too!

But this is what you see in tutorials & what you should expect to see!

Image for post
Image for post
The RecyclerView is displayed as Item0 to Item 9 by default, if it works correctly.

3. If you ignore the above, all the code does not have any pre-run errors and app seems to build fine. But when you run the app and go to the page that has the RecyclerView and CardView, your app crashes…

Image for post
Image for post
App crashing!

Also with tons of red errors in Logcat that you dont understand.

THEN this post is for you!

Because I have faced the same problems and can’t find any prevalent good answers on google/stackoverflow etc.

What happened?

It is all because of dependency and android version problems.

If you are viewing this in 2019 or 2020, then yes, you are probably already using the updated version of android (AndroidX or ‘Jetpack’) and the seemingly latest versions of RecyclerView and CardView is ‘not new enough’.

Image for post
Image for post
Grats you have migrated to AndroidX!

This is quite a recent upgrade in 2019 and 99% of tutorials and instructions regarding usage of RecyclerView and CardView is NOT on par with AndroidX.

And this even includes the official instructions from the official android developer website!

Image for post
Image for post
Taken from https://developer.android.com/guide/topics/ui/layout/recyclerview as of Nov 2019
Image for post
Image for post
Taken from https://developer.android.com/guide/topics/ui/layout/cardview as of Nov 2019

If you are following this, then and using AndroidX, then do not follow this anymore!

WHAT YOU SHOULD DO:

Long Story short, here are some quick fixes!

  1. Add dependencies that supports AndroidX for RecyclerView and CardView
dependencies{
// This is a big note that you are already using AndroidX
implementation 'androidx.appcompat:appcompat:1.0.2'
// Add these new versions in!
// Note that the naming does not specify api version anymore sdsdsd
// eg v7.28.0
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'androidx.cardview:cardview:1.0.0'
}

2. Replace the specifications for RecyclerView and CardView in your layouts.

Image for post
Image for post
If you see versions (eg v7), then this is wrong. One of the benefit of AndroidX is you dont have to be concerned with version compatibility problems for different api levels anymore.

Use this instead.

For RecyclerView:

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/open_orders_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />

note that it uses androidx and no stating of version! How easy is that!

For CardView:

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="15dp"
app:cardElevation="5dp">

YOU ARE DONE! TIME TO TEST!

You should be able to see all the correct behaviours that I have mentioned above

Image for post
Image for post
For CardView
Image for post
Image for post
For RecyclerView

Congratulations! Carry on designing your Android Application!

Hope I have helped you! Any questions feel free to reach out to me! :)

Cheers!

Next post coming up! Whats so cool about AndroidX?

Aspiring Software Engineer | Product Enthusiast https://www.linkedin.com/in/daryllwong/

Get the Medium app