How to implement a volumable buttons with Jetpack Compose like this?
There are two shadows: black shadow at top and white shadow at bottom.
This is how that button described in Figma:
This is how I try to create that button in code:
@Composable
fun GameCoinsView(
modifier: Modifier = Modifier,
coins: Int,
onClick: () -> Unit = {},
) {
Box(
modifier = modifier
.clip(shape = shape)
.width(IntrinsicSize.Min)
.height(IntrinsicSize.Min)
) {
Spacer(
modifier = Modifier
.align(Alignment.BottomCenter)
.fillMaxWidth()
.fillMaxHeight(fraction = 0.95f)
.shadow(
elevation = 2.dp,
shape = RoundedCornerShape(12.dp),
spotColor = Color.White.copy(alpha = 0.08f),
),
)
Spacer(
modifier = Modifier
.align(Alignment.TopCenter)
.fillMaxWidth()
.fillMaxHeight(fraction = 0.95f)
.shadow(
elevation = 2.dp,
shape = RoundedCornerShape(12.dp),
spotColor = Color.Black.copy(alpha = 0.28f),
),
)
Spacer(
modifier = Modifier
.fillMaxSize()
.background(color = Color.White.copy(alpha = 0.08f))
.blur(40.dp),
)
Text(
modifier = Modifier.padding(vertical = 8.dp, horizontal = 12.dp),
text = NumberFormat.getNumberInstance(ViewUtils.getDefaultLocaleCompose()).format(coins),
fontSize = 18.sp,
lineHeight = 23.4.sp,
fontWeight = FontWeight.W600,
)
}
}
The result of my code is:
You need to sign in to view this answers
Leave feedback about this