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 cardtitle
: Title of the health goal cardhealthGoalCardConfiguration
: 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