Громкие кнопки с помощью Jetpack Compose ⇐ Android

[Anonymous]

Как реализовать подобные кнопки с помощью Jetpack Compose?


Есть две тени: черная тень вверху и белая тень внизу.
Вот как эта кнопка описана в Figma:


Вот как я пытаюсь чтобы создать эту кнопку в коде:

Код: Выделить всё

@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,
)
}
}

Результат моего кода:
[img]https://i.sstatic. net/MFMjHypB.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/791 ... ck-compose