Building an Expandable Credit Card Information Card in Jetpack Compose

Creating an Interactive UI Component to Display Credit Card Details

Introduction:
In this article, we will explore how to create an expandable credit card information card using Jetpack Compose, a modern UI toolkit for building Android apps. We’ll go through the code and explain each part, allowing you to understand the implementation and customize it to suit your needs.

Animated Expandable Card

The CreditCardInfoCard function is responsible for rendering the credit card information card. It defines the UI components and behavior for displaying the card details.

We initialize a mutable state variable called expanded using the remember function. This variable keeps track of whether the card details section is expanded or not. It allows the UI to update and recompose based on the state changes.

Next, we create an instance of the CreditCardInfo data class, which holds the credit card information such as the card number, customer name, CVV, expiry date, and card type. For demonstration purposes, we have hardcoded sample values, but you can replace them with dynamic data.

data class CreditCardInfo(
    val cardNumber: String,
    val customerName: String,
    val cvv: String,
    val expiry: String,
    val cardType: String
)

We use the Card composable to create a rectangular card with a shadow and rounded corners. It acts as the container for the credit card information. The modifier parameter is used to apply various modifiers to the card, such as padding, width, and background color.

Inside the Card composable, we use a Column composable to arrange the child composables vertically. The modifier parameter is used to apply padding to the column, giving it spacing from the card's edges.

We apply the clickable modifier to the Column to make it respond to clicks. When the column is clicked, it triggers a lambda function that toggles the value of expanded. This allows the card details section to expand or collapse based on the current state.

Within the Column, we use the Text composable to display the card number. The cardInfo.cardNumber property is interpolated into the text using string template syntax.

To handle the expandable behavior, we use the AnimatedVisibility composable. It wraps the child composables that represent the expanded card details section. The visible parameter is bound to the value of expanded, which determines whether the details section should be visible or hidden.

The enter and exit parameters of AnimatedVisibility define the animations to be used when the card details section is shown or hidden. In this case, fade and vertical expansion/shrink animations are applied using predefined animation functions like fadeIn(), fadeOut(), expandVertically(), and shrinkVertically().

Inside the AnimatedVisibility composable, we have another Column composable representing the expanded card details section. The modifier parameter is used to add top padding to create spacing between the card number and the expanded details.

AnimatedVisibility(
    visible = expanded.value,
    enter = fadeIn() + expandVertically(),
    exit = fadeOut() + shrinkVertically()
) {
    // Content to be shown or hidden
    // ...
}

• The visible parameter of AnimatedVisibility is bound to the value of expanded. This means that when expanded is true, the content inside AnimatedVisibility will be visible, and when it's false, the content will be hidden.
• The enter parameter defines the animation that occurs when the content becomes visible. In this case, we combine the fadeIn() animation, which gradually fades in the content, with the expandVertically() animation, which expands the content vertically from its initial size to its final size.
• The exit parameter defines the animation that occurs when the content becomes hidden. Here, we combine the fadeOut() animation, which gradually fades out the content, with the shrinkVertically() animation, which shrinks the content vertically from its final size to its initial size.
• Inside the AnimatedVisibility composable, you can place the content that you want to show or hide based on the visible state. In the provided code, a Column composable is used to group and display the card details such as the customer name, CVV, expiry date, and card type.

Within the expanded Column, we use the Text composable to display the customer name, CVV, expiry date, and card type. The corresponding properties from cardInfo are interpolated into the text using string template syntax.

Completed Code —

CreditCardInfoCard.kt

By understanding the code and its explanation, you can customize and extend this composable to suit your specific requirements for displaying credit card information in an expandable card format.