androidwear-oswearables

Wear OS show image with horizontal scroll


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

enter image description here

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


Solution

  • 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