I have a complex dialog with multiple scrollable sections. The left panel should remain non-scrollable until the right panel is fully scrolled to the bottom. Once the right panel reaches the bottom, both panels should scroll together, and the bottom content should then appear. How can I implement this behavior?

Here is code example:

@Composable
fun DialogScreen(
    // params
) {
    // ...
    val subscriptionCardsScrollState = rememberScrollState()

    Box {

        Column(
            modifier = Modifier
                .verticalScroll(state = subscriptionCardsScrollState),
        ) {
            Row {
                RightPanel(
                    modifier = Modifier
                        .scrollable(
                            enabled = false,
                            state = subscriptionCardsScrollState,
                            orientation = Orientation.Vertical,
                        ),
                )

                LeftPanel(
                    modifier = Modifier,
                )
            }

            // bottom content
        }
    }
}

Here is a picture that illustrates an example of how the screen looks:

I have a complex dialog with multiple scrollable sections. The left panel should remain non-scrollable until the right panel is fully scrolled to the bottom. Once the right panel reaches the bottom, both panels should scroll together, and the bottom content should then appear. How can I implement this behavior?

Here is code example:

@Composable
fun DialogScreen(
    // params
) {
    // ...
    val subscriptionCardsScrollState = rememberScrollState()

    Box {

        Column(
            modifier = Modifier
                .verticalScroll(state = subscriptionCardsScrollState),
        ) {
            Row {
                RightPanel(
                    modifier = Modifier
                        .scrollable(
                            enabled = false,
                            state = subscriptionCardsScrollState,
                            orientation = Orientation.Vertical,
                        ),
                )

                LeftPanel(
                    modifier = Modifier,
                )
            }

            // bottom content
        }
    }
}

Here is a picture that illustrates an example of how the screen looks:

• android-jetpack-compose

1 Answer 1

You can make use of the canScrollForward boolean of the ScrolLState. Please try the following code:

@Composable
fun DialogScreen(
) {
    val subscriptionCardsScrollState = rememberScrollState()

    Box {

        Column(
            modifier = Modifier
                .verticalScroll(
                    enabled = !subscriptionCardsScrollState.canScrollForward,
                    state = rememberScrollState()
                ),
        ) {
            Row {
                Column(
                    modifier = Modifier,
                ) {
                    repeat(25) {
                        Text("LEFT ITEM $it")
                    }
                }
                Column(
                    modifier = Modifier
                        .height(250.dp)
                        .verticalScroll(
                            enabled = subscriptionCardsScrollState.canScrollForward,
                            state = subscriptionCardsScrollState
                        ),
                ) {
                    repeat(45) {
                        Text("RIGHT ITEM $it")
                    }
                }
            }

            if (!subscriptionCardsScrollState.canScrollForward) {
                Text("BOTTOM CONTENT")
            }
        }
    }
}

Note that you can't have two vertically scrolling Composables nested while both are using fillMaxHeight. You need to set a fixed height on the inner scrollable Composable.