Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add border to card view with jetpack compose

I find the way Border(1.dp, Color.Black) can not work with the border property of Card view, what's the best way to work around of it?

like image 492
ccd Avatar asked Oct 22 '20 02:10

ccd


People also ask

What is side effect in Jetpack Compose?

Stay organized with collections Save and categorize content based on your preferences. A side-effect is a change to the state of the app that happens outside the scope of a composable function.

How do I screen size in Jetpack Compose?

How do you get the device width in jetpack compose? If you want to get the size in pixels: val screenDensity = configuration. densityDpi / 160f and multiply with dp, for example val screenHeight = configuration. screenHeightDp.

Is jetpack easier to compose?

Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android bringing your apps to life with less code, powerful tools, and intuitive Kotlin APIs. It makes building Android UI faster and easier.

What is spacer in Jetpack Compose?

In Jetpack Compose, a Spacer is a blank element that is used to create a Space between two UI elements.


2 Answers

You can use the border parameter to specify a BorderStroke to draw the border on top of the card:

Card(
        border = BorderStroke(2.dp,Color.Red),
        backgroundColor = Color.Yellow){

}

enter image description here

With Material3 you can use:

Card(
        border = BorderStroke(2.dp,Color.Red),
        colors = CardDefaults.cardColors(containerColor = Yellow)
)
like image 57
Gabriele Mariotti Avatar answered Oct 17 '22 10:10

Gabriele Mariotti


The border api of Card change to subtitle of Modifier, so it can add a border under below.

Card(modifier = Modifier.border(1.dp, Color.Black)) {...}
like image 24
ccd Avatar answered Oct 17 '22 11:10

ccd