Kotlin with Jetpack Compose — Cards

Cards are commonly used components in mobile development. Cards can hold the content we want inside them and give a better look for the UI. Cards have the elevation property that we can use to display a shadow effect. In Jetpack compose, we have the Card component for this.

Card with properties

@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
)

Simple usage

Card(){
  AnyComposableFunction()
}

Card with a border

You can define the border color and weight with BorderStroke which we can pass to the border param.

            Card(
                modifier = Modifier.padding(16.dp),
                shape = MaterialTheme.shapes.medium,
                elevation = 4.dp,
                border = BorderStroke(2.dp, Color.Black)
            ) {
                Column(
                    modifier = Modifier.padding(16.dp)
                ) {
                    Text(
                        text = "Card Title",
                        style = MaterialTheme.typography.h6,
                        modifier = Modifier.padding(bottom = 8.dp)
                    )
                    Text(
                        text = "This is some sample text for the card.",
                        style = MaterialTheme.typography.body1
                    )
                }
            }

Card with an image

            Card(
                modifier = Modifier.padding(16.dp),
                shape = MaterialTheme.shapes.medium,
                elevation = 8.dp,
            ) {
                Column(
                    modifier = Modifier.padding(16.dp)
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.image001),
                        contentDescription = "Image",
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(200.dp)
                    )
                    Spacer(modifier =…