Home > front end >  Unable to change Elevation Color For Card in Jetpack Compose
Unable to change Elevation Color For Card in Jetpack Compose

Time:10-11

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

Colored Shadow

  • Related