refactor(ui): Optimize card component style and color management#1381
refactor(ui): Optimize card component style and color management#1381matsuzaka-yuki wants to merge 1 commit intobmax121:mainfrom
Conversation
matsuzaka-yuki
commented
Jan 31, 2026
matsuzaka-yuki
commented
- Replace ElevatedCard with Card component to unify card styling
- Dynamically set card background color and content color based on state to improve readability
- Use surfaceColorAtElevation to enhance depth and color expression
- Standardize card corner radius to 20dp to improve visual consistency
- Replace ElevatedCard with Card component to unify card styling - Dynamically set card background color and content color based on state to improve readability - Use surfaceColorAtElevation to enhance depth and color expression - Standardize card corner radius to 20dp to improve visual consistency
|
|
||
| else -> { | ||
| MaterialTheme.colorScheme.secondaryContainer | ||
| MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp) to MaterialTheme.colorScheme.onSurface |
There was a problem hiding this comment.
What do you want to do
I think you should read Android's UI design documents first Click There
You can see from this document, card colors use surfaceContainer,
we already have surface surfaceContainerLowest surfaceContainerLow surfaceContainer surfaceContainerHigh surfaceContainerHighest 6 elevation colors in theme, why manually calc that?
I think manually calc elevation colors is unnecessary, and will cause more rendering time, because you are do math calc internally rather than directly using data calculated at application startup!
| } | ||
|
|
||
| ElevatedCard( | ||
| Card( |
There was a problem hiding this comment.
I just want to notice to you, you no need to switch to Card, because ElevatedCard basically is an alias of Card itself
@Composable
fun ElevatedCard(
modifier: Modifier = Modifier,
shape: Shape = CardDefaults.elevatedShape,
colors: CardColors = CardDefaults.elevatedCardColors(),
elevation: CardElevation = CardDefaults.elevatedCardElevation(),
content: @Composable ColumnScope.() -> Unit,
) =
Card(
modifier = modifier,
shape = shape,
border = null,
elevation = elevation,
colors = colors,
content = content,
)This is a code snippet of material3-android library, as you can see, ElevatedCard is an card without border, that is all
You no need change that if you just want change contentColor, and btw, you lost elevation set
And if you want unify, you should package your own Card control, NOT CHANGE EVERYWHERE TO WASTE, THAT IS A NIGHTMARE
3 participants
