Wear OS show image with horizontal scroll

Question

I need to show long image like this on Galaxy 5 watch

Where can I find code examples for this job? Or which component I can use?

Answer 1

Use Coil to render the image.

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = null
)

You can use a horizontally scrollable Row in Compose.

Row(
    modifier = Modifier.horizontalScroll(scrollState)
) {
        // ...
}

https://developer.android.com/jetpack/compose/lists

You can make it scroll horizontally with RSB/Bezel with

public fun Modifier.scrollableRow(
    focusRequester: FocusRequester,
    scrollableState: ScrollableState
): Modifier = composed {
    val coroutineScope = rememberCoroutineScope()

    onPreRotaryScrollEvent {
        coroutineScope.launch {
            // events are vertical, but apply horizontally
            scrollableState.scrollBy(it.verticalScrollPixels)
            scrollableState.animateScrollBy(0f)
        }
        true
    }
        .focusRequester(focusRequester)
        .focusable()
}

Here is full code example https://github.com/enginer/wear-os-horizontal-scroll-image