Whats the difference between Surface and Card in Jetpack Compose?

5.8k views Asked by At

It's basically the same right? They have the same properties. I really don't know when I have to use each.

Technically Cards is for a Card view but Surface have the same properties like elevation and border

2

There are 2 answers

0
Mobin Yardim On BEST ANSWER

If you look at Card composable source you will understand that card is a surface with default elevation and, the background shape is MaterialTheme.shapes.medium

as the documentation "Cards are Surfaces that display content and actions on a single topic."

0
RaBaKa 78 On

It's all about Material Design Guidelines

When you read the Material Design documentation, you will understand that these two components are used for different purposes.

Surface is used when you want a surface for your UI, you can set the background color, shape etc.

Card on the other hand, have default elevation(Material Design Standard) and pretty much have every property as the surface.

It's All about following Material Design Guidelines