Image item


On this page

Specifications references

Accessibility

Please follow accessibility criteria for development.

An image in an OdsImageItem should always be associated to a content description. This is the reason why the OdsImageItem.Image forces the developer to fill a content description parameter.

Implementation

Jetpack Compose

You can use the OdsImageItem composable like this:

OdsImageItem(
    image = OdsImageItem.Image(
        painterResource(id = R.drawable.placeholder),
        "Picture content description"
    ),
    modifier = modifier,
    legendAreaDisplayType = OdsImageItem.LegendAreaDisplayType.Below,
    title = "Component Image item",
    icon = OdsImageItem.IconToggleButton(
        uncheckedIcon = OdsIconButton.Icon(
            painterResource(id = R.drawable.ic_heart_outlined),
            "Add to favourites"
        ),
        checkedIcon = OdsIconButton.Icon(
            painterResource(id = R.drawable.ic_heart),
            "Remove from favourites"
        ),
        checked = false,
        onCheckedChange = { doSomething() },
    ),
    onClick = { doSomething() }
)
OdsImageItem API
Parameter Default value Description
image: OdsImageItem.Image   Image displayed into the item
legendAreaDisplayType: OdsImageItem.LegendAreaDisplayType   Controls how the title and the icon are displayed relatively to the image. If set to OdsImageItem.LegendAreaDisplayType.None, no legend area will be displayed.
modifier: Modifier Modifier Modifier applied to the image item
title: String? null Title displayed into the image item. It is linked to the image and displayed according to the legendAreaDisplayType value.
icon: OdsImageItem.IconToggleButton null Clickable icon displayed next to the title
onClick: (() -> Unit)? null Callback invoked on image item click