Скачать или смотреть Shapes in Jetpack compose android

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram:   / ky.emrah  

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!Shapes in Jetpack compose android

I'm trying to create a custom card in Jetpack Compose that has a specific shape. I want the card to resemble a particular shape (as shown in the image below) with rounded corners and a custom contour.
I've started with the code below, but I'm unsure how to adjust the curves and the shape to match the image exactly. Here’s the target card shape image:



How can I make a background similar to the picture?
Here is my code, I have tried but couldn't achieve similar shape.
@Composable
fun CustomCard(
modifier: Modifier = Modifier,
content: @Composable () - Unit,
) {
val radius = with(LocalDensity.current) { 19.dp.toPx() }
val cornerRadiusDp = 80.dp
val cornerRadius = with(LocalDensity.current) { cornerRadiusDp.toPx() }

val padding = 10.dp

// Create a custom shape
val shape = remember {
GenericShape { size, _ -
val width = size.width
val height = size.height

moveTo(0f, radius)
quadraticTo(0f, 0f, radius, 0f)
lineTo(width - cornerRadius - radius, 0f)
quadraticTo(width - cornerRadius, 0f, width - cornerRadius, radius)

quadraticTo(width - 1.1f*cornerRadius, 1.1f*cornerRadius, width - radius, cornerRadius)

quadraticTo(width, cornerRadius, width, cornerRadius + radius)

lineTo(width, height - radius)
quadraticTo(width, height, width - radius, height)

lineTo(radius, height)
quadraticTo(0f, height, 0f, height - radius)

lineTo(0f, radius)
}
}

Box(modifier = modifier) {
Card(
modifier = Modifier.fillMaxSize(),
shape = shape,
colors = CardDefaults.cardColors(
containerColor = Color(0xFFBFE8FB)
)
) {
content()
}

Box(
modifier = Modifier
.size(cornerRadiusDp - padding)
.align(Alignment.TopEnd)
.background(
color = Color.Blue,
shape = CircleShape
)
){
Text(
text = "1",
color = Color.White,
modifier = Modifier.align(Alignment.Center)
)
}
}
}

@Preview
@Composable
fun ContextCardPreview() {
Column(modifier = Modifier.background(Color.Red)){
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
CustomCard(modifier = Modifier
.width(200.dp)
.height(180.dp)
) {

val price = buildAnnotatedString {
withStyle(SpanStyle(color = Color.Green)) { append("$") }
append("0.00")
}

val labelStyle = remember {
TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Light)
}

val priceStyle = remember {
TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Bold)
}

Column(
modifier = Modifier.padding(10.dp)
) {
Text(text = "Text", fontSize = 18.sp)
//Text(text = price, style = priceStyle)

Spacer(modifier = Modifier.weight(0.8f))

Text(text = "Text", style = labelStyle)

Source of the question:
https://stackoverflow.com/questions/7...

Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/