Compose Component

Lazy Items Card Component

This can be used in any layout, but i created this for the LazyColumn to show diffrent types of flowers, you can copy the code below, the compposable can be easily modified to suit your preference.

@Composable fun CardItems( painter: Painter, title: String, description: String, containerColor: Color, onClick: () -> Unit = {} ) { Card( modifier = Modifier .fillMaxWidth() .height(135.dp) .padding(horizontal = 10.dp, vertical = 4.dp) .clickable(enabled = true, onClick = onClick), colors = CardDefaults.cardColors(containerColor = containerColor), shape = RoundedCornerShape(5.dp) ) { Row( modifier = Modifier.fillMaxSize(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { Image( painter = painter, contentDescription = "star-icon", contentScale = ContentScale.Crop, modifier = Modifier .fillMaxHeight() .fillMaxWidth(0.3f) ) Column( modifier = Modifier .fillMaxSize() .padding(10.dp), verticalArrangement = Arrangement.Top, ) { Text( text = title, style = TextStyle(fontWeight = FontWeight.Bold, fontSize = 18.sp), maxLines = 1, overflow = TextOverflow.Ellipsis, modifier = Modifier.fillMaxWidth(0.9f) ) Spacer(modifier = Modifier.height(5.dp)) Text( text = description, style = TextStyle( fontSize = 16.sp, fontWeight = FontWeight.Light, fontStyle = FontStyle.Italic, ), overflow = TextOverflow.Ellipsis, maxLines = 5, ) } } } }