-
Notifications
You must be signed in to change notification settings - Fork 650
refactor(ui): Optimize card component style and color management #1381
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
@matsuzaka-yuki
matsuzaka-yuki
commented
Jan 31, 2026
- 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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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