Image item

On this page

Specifications references
Accessibility
Implementation
- Jetpack Compose
  - OdsImageItem API

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