Master Jetpack Compose Card View: From Simple to Stunning

Cards are a versatile UI element used for displaying information in a clear and organised way. Jetpack Compose provides a powerful Card composable for building beautiful and functional cards in your Android apps. This guide will take you on a journey, mastering Jetpack Compose cards, from their basic foundations to advanced customisation and functionality.

Customisation Options: Shaping Your Cards

Similar to buttons, Jetpack Compose cards offer various customization options to personalize their appearance:

• contentColor: Set the background color for the card content.

• elevation: Control the elevation (shadow effect) of the card for depth perception.
• modifier: Modify the card, here added padding.

Card(
    modifier = Modifier.padding(10.dp),
    elevation =  CardDefaults.cardElevation(defaultElevation = 10.dp),
    colors = CardDefaults.cardColors(
        containerColor = Color(0xFFF7F2F9),
    )
) {
    var expanded by rememberSaveable { mutableStateOf(false) }

    val smallString = "It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will transform your data into a UI hierarchy..."
    val expandedString = "It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will transform your data into a UI hierarchy. When the data changes or is updated then the framework automatically recalls these functions and updates the view for you.\n" +
            "\n" +
            "Composable Function is represented in code by using @Composable annotation to the function name. This function will let you define your app’s UI programmatically by describing its shape and data dependencies rather than focusing on the UI construction process. "

    Column(
        modifier = Modifier
            .padding(10.dp)
            .background(color = Color(0xFFF7F2F9))
    ) {
        Text(
            text = "Jetpack Compose",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
        )
        Text(
            text = "Modern UI toolkit  to build native Android UI", fontSize = 16.sp,
            modifier = Modifier.padding(top = 8.dp),
            fontWeight = FontWeight.Bold
        )

        Text(
            fontSize = 12.sp,
            modifier = Modifier.padding(top = 8.dp),
            text =  if (expanded) expandedString else smallString
        )

        ClickableText(
            modifier = Modifier.align(Alignment.End),
            text = if (expanded) AnnotatedString("Show less") else AnnotatedString("Show more"),
            onClick = {
                expanded = !expanded
            })
    }
}

Column: Card view can only have one child element. So Column is used to have multiple element in a vertical manner.

Text: To Display Text, Title, Subtitle and content.

ClickableText: To show customisation more or less text. used for clickable text, which has a boolean expanded and on click true or false valuse is updated.

RememberSaveable: This will save each state surviving configuration changes (such as rotations) and process death.

Conclusion: Mastering the Art of Cards

Jetpack Compose cards empower you to create informative and engaging UI elements. By grasping the fundamentals, exploring customization options, and venturing into advanced techniques like clickability, imagery, and animations, you can transform your cards into valuable tools for presenting information within your applications. Start crafting stunning cards that enhance user experience and take your Jetpack Compose skills to the next level!

Youtube Video of this article :: Jetpack Compose Card View Tutorial