Skip to main content
Version: 12.10.0

OCHealthGoalCard Composable

The OCHealthGoalCard Composable is a component used in Android Jetpack Compose for creating health goal cards. These cards display information about health goals, including titles, progress bars, completion dates, and bonus points. The appearance of the card varies based on the state of health goal it represents.

Code Structure

The code for OCHealthGoalCard is organized as follows:

  • Function Signature: The Composable function is defined with parameters to customize the card's content and behavior.
  • Health Goal Configuration: The Composable uses a configuration object (OCHealthGoalCardConfiguration) to customize the content of the card, including text, icons, and progress values.
  • Conditional Display: Different elements like pills, progress bars, and bonus information are displayed conditionally based on the state of health goal.
  • Default Configuration: A function getDefaultHealthGoalCardConfig provides a default configuration for health goal cards.

Card Type:

  • Inactive
  • CheckPending
  • Completed
  • Failed
  • Progress
  • CompletedWithoutBonus
  • BonusTransfer
  • BonusCompleted

Usage

To use the OCHealthGoalCard Composable in your Compose project, you need to call it within your Composable hierarchy. You can customize the appearance and behavior of the card by passing appropriate parameters.


//To set the configuration as per the requirement
fun getOCHealthGoalCardConfig() : OCHealthGoalCardConfiguration{
return OCHealthGoalCardConfiguration(
teaserText = "Teaser text goes here",
pillTitleLeft = "1500 Punkte",
pillTitleRight = "1800 Punkte",
completionDate = "20-09-2023",
currentProgress = 2f,
totalProgress = 5f,
numberOfPoints = 10,
statusPillText = "Pill text",
pillLeftLeadIcon = R.drawable.icon_pill_left_right_placeholder,
pillRightLeadIcon = R.drawable.icon_pill_left_right_placeholder,

)
}


@Composable
fun OCHealthGoalCardBonusCompletedPreview() {
OCTheme {
OCHealthGoalCard(
title = "Testing",
imageComposable = {
Image(
painter = painterResource(id = R.drawable.healthgoalplaceholder),
contentDescription = null,
contentScale = ContentScale.FillBounds,
modifier = Modifier.fillMaxWidth()
)
},
healthGoalCardState = BonusCompleted,
healthGoalCardConfiguration = getOCHealthGoalCardConfig()
){
//handle card click here
}
}
}

Parameters:

  • imageComposable : Image dispalay on health goal card
  • title : Title of the health goal card
  • healthGoalCardConfiguration : Configuration for the card (optional)
  • modifier: An optional Modifier to customize the appearance of the card.
  • healthGoalCardState : State of the health goal card.
  • onCardClick : click of the card