DEV Community

Cover image for CardView Vs MaterialCardView
K M Rejowan Ahmmed
K M Rejowan Ahmmed

Posted on

8 1

CardView Vs MaterialCardView

As we're focusing more on design, Material Design is a hot topic here. Google's Material Library ( com.google.android.material ) created a huge impact in this area. Today I'm going to discuss one of the most used elements in the design, the CardView.

Google has introduced a new version of CardView called MaterialCardView . Both CardView and MaterialCardView could be used in the same cases and they look pretty similar. But there is still a vast difference in both design and functionality.

Let's start with some background data about these twos-

CardView

Previously, CardView was provided by Android Support Library (android.support.v7.widget.CardView). But with the latest migration to Andoridx, now it is provided by Androidx (androidx.cardview.widget.CardView) Library. CardView is created by extending the FrameLayout.

MaterialCardView

This is introduced with Google Material Library (com.google.android.material). It is provided by Material Components Library ( com.google.android.material.card.MaterialCardView). MaterialCardView is created by extending the CardView.

Differences

MaterialCardView has all the elements of CardView with its extra features. Here is a list containing the differences-

  • Stroke Color and Stroke Width can be added to MaterialCardView which wasn't possible using CardView.
  • MaterialCardView is Checkable. Check icon, color, and position can be set in MaterialCardView. Check conditions can be called also. This will be really useful as CardView has a huge usage in lists and grids.
  • Ripple Color can be set to MaterialCardView which is not available in CardView.

Code Example

CardView

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor=""
app:cardCornerRadius=""
app:cardElevation=""
app:cardMaxElevation=""
app:cardPreventCornerOverlap=""
app:cardUseCompatPadding=""
app:contentPadding=""
app:contentPaddingBottom=""
app:contentPaddingLeft=""
app:contentPaddingRight=""
app:contentPaddingTop=""/>
view raw CardView.xml hosted with ❤ by GitHub

MaterialCardView
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:checkable=""
android:clickable=""
android:focusable=""
app:cardBackgroundColor=""
app:cardCornerRadius=""
app:cardElevation=""
app:cardMaxElevation=""
app:cardPreventCornerOverlap=""
app:cardUseCompatPadding=""
app:checkedIcon=""
app:checkedIconGravity=""
app:checkedIconSize=""
app:contentPadding=""
app:contentPaddingBottom=""
app:contentPaddingLeft=""
app:contentPaddingRight=""
app:contentPaddingTop=""
app:strokeColor=""
app:strokeWidth=""
app:shapeAppearance=""
app:cardForegroundColor=""
app:checkedIconMargin=""
app:checkedIconTint=""
app:rippleColor=""
app:shapeAppearanceOverlay=""
app:state_dragged="" />

Shots

CardView
CardView Example

MaterialCardView
MaterialCardView Example

Details

Thanks for reading. Have a good day.

Find me on - Github, Facebook

More- CuteLibs Projects, CuteDialog

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay