infocard
OCInformationCardView - A Custom Composable UI Component
The OCInformationCardView
composable is a customizable card view for displaying information. It can include a title, description, caption, button, and icons. The appearance of the card can be customized using different background colors and icon sizes.
CardBackground Color Options(Optional):
- CardInfoCardBackgroundBlue
- CardInfoCardBackgroundGreen
- CardInfoCardBackgroundSand
- CardInfoCardBackgroundRed
Features
- User can pass the desired information to show like title, description, caption.
- In onClick mathod, user can defined their click action for button
- In largeIconComposable and smallIconComposable you can pass Image, CoilImage, GlideImage, Icon etc.
How to use OCInformationCardView
-
Add the necessary imports:
import your.package.name.OCInformationCardView
-
Use the
OCInformationCardView
within your Composable:
OCInformationCardView
with small icon
OCInformationCardView(
title = "Title",
caption = "Bold Caption",
description = "Description",
smallIconComposable = {
Icon(
painter = painterResource(id = R.drawable.error_icon),
contentDescription = "Small icon description",
tint = OCColors.cardInfoCardOnBackgroundDefault,
modifier = Modifier.clearAndSetSemantics {
contentDescription = "Small icon description"
}
)
},
buttonText = "Button",
onClick = {}
)
OCInformationCardView
with large icon
OCInformationCardView(
title = "Title",
caption = "Bold Caption",
description = "Description",
cardBackgroundColor = CardInfoCardBackgroundBlue,
subCaptionsList = arrayListOf(
OCCaptionsListModel(caption = "Caption 1"),
OCCaptionsListModel(caption = "Caption 2"),
OCCaptionsListModel(caption = "Caption 3"),
OCCaptionsListModel(caption = "Caption 4")),
largeIconComposable = {
Image(
painter = painterResource(id = R.drawable.infocard_placeholder),
contentDescription = "Large icon description",
contentScale = ContentScale.None,
colorFilter = ColorFilter.tint(OCColors.cardInfoCardOnBackgroundDefault),
modifier = Modifier.clearAndSetSemantics {
contentDescription = "Large icon description"
}
)
},
buttonText = "Button",
onClick = {}
)
Parameters:
title
: Title of the informationdescription
: Description of the informationcaption
: Caption of the informationsubCaptionsList
: Captions list of the informationbuttonText
: Text for the button in infocardlargeIconComposable
: Large icon to show in infocardsmallIconComposable
: Small icon to show in infocardonClick
: Listener that observes click event of the button.cardBackgroundColor
: To set the background color of card.descriptionMaxLineCount
: To set the description line count.captionLineCount
: To set the caption line count.