I am using a Card
in-order create different buttons.
I want my card to look exactly like shown in the image, and I tried many solutions online but none of that worked.
Just want to change Card elevation color, but can't find a way to do it.
Card(
elevation = 4.dp,
backgroundColor = Color.White,
modifier = Modifier
.fillMaxSize()
.padding(10.dp)
) {
Column(modifier = Modifier.padding(10.dp)) {
Text("Subscription", fontWeight = FontWeight.W700, color = brc_red)
Card(
backgroundColor = Color(0xFFBDFCBB).compositeOver(brc_green_color),
elevation = 6.dp,
modifier = Modifier
.fillMaxWidth()
.padding(20.dp)
.clickable {
Toast
.makeText(context, "Suiiiii", Toast.LENGTH_SHORT)
.show()
}
.drawWithContent {
val paddingPx = with(density) { 5.dp.toPx() }
clipRect(
left = -paddingPx,
top = 0f,
right = size.width paddingPx,
bottom = size.height paddingPx,
) {
[email protected]()
}
}
// backgroundColor = Color(0xFF4CB849).compositeOver(brc_green_color)
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.padding(10.dp)
) {
Text(text = "Yearly")
Text(text = "$ 10 Per Year")
}
}
Card(
elevation = 6.dp,
backgroundColor = Color(0xFFFD6459).compositeOver(brc_green_color),
modifier = Modifier
.fillMaxWidth()
.padding(20.dp)
.clickable {
Toast
.makeText(context, "Duiii", Toast.LENGTH_SHORT)
.show()
}
.drawWithContent {
val paddingPx = with(density) { 5.dp.toPx() }
clipRect(
left = -paddingPx,
top = 0f,
right = size.width paddingPx,
bottom = size.height paddingPx,
) {
[email protected]()
}
},
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.padding(10.dp)
) {
Text(text = "Monthly")
Text(text = "$ 1 Per Month")
}
}
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxWidth()
) {
Text(text = "OR", fontWeight = FontWeight.Bold)
}
Card(
modifier = Modifier
.fillMaxWidth()
.clickable {
Toast
.makeText(context, "Nuiii", Toast.LENGTH_SHORT)
.show()
}
.padding(20.dp),
elevation = 4.dp,
backgroundColor = brc_green_color
// backgroundColor = Color(0xFF4CB849).compositeOver(brc_green_color)
) {
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier.padding(10.dp)
) {
Text(text = "Start your 30 days Free Trail", color = Color.White)
}
}
}
}