CODEWITHSUNDEEP
androidandroid-jetpack-compose
Luke Jones
Luke Jones

Reputation: 11

How to make handset navigation work in Jetpack Compose when the page is scrollable

I write application where a number of users exclusivly navigate using handset navigation. The application I am writing uses Jetpack Compose and I am having issues getting handset navigation to be consistent.

Basically I have a top bar that is ever present then various pages that are loaded in (the content). What I have found is if the content is vertically scrollable I can never get the handset to move off of the top bar. I've stripped the code back to work out where the issue happens and it is as soon as i add the vertical scroll to my column.

As an example here is some code for "Page 1". With page 1 I can happily navigate between the top bar and the content.

fun Page1() {
    Column ( modifier = Modifier.fillMaxHeight()){
        Spacer(modifier = Modifier.height(100.dp))
        Text(text = "This is page number 1", fontSize = 60.sp, color = Color.Black)
        FocusablePageDivider(number = 1)
        Spacer(modifier = Modifier.height(100.dp))
        FocusablePageDivider(number = 2)
    }
}

Now, in comparison page 2 has an extra item so therefore needs to scroll, however the handset focus will never move off of the top bar. Here is page 2's code

fun Page2() {
    Column ( modifier = Modifier.fillMaxHeight().verticalScroll(rememberScrollState())){
        Spacer(modifier = Modifier.height(100.dp))
        Text(text = "This is page number 2", fontSize = 60.sp, color = Color.Black)
        FocusablePageDivider(number = 1)
        Spacer(modifier = Modifier.height(100.dp))
        FocusablePageDivider(number = 2)
        Spacer(modifier = Modifier.height(100.dp))
        FocusablePageDivider(number = 3)
    }
}

The only difference is the verticalScroll on the column. I don't understand why this means the down key from the top bar menu suddenly just doesn't work at all.

Ohh, and I don't think I can use a scaffold, which would fix this, as when the content scrolls it needs to be visible under the top bar menu and from what i can see that can't be achieved using a scaffold.

Upvotes: 0

Views: 185

Answers (1)

Andy W
Andy W

Reputation: 1

Are you using androidx.compose.material3.Scaffold & androidx.navigation.compose.NavHost ?

Try putting the Column in a Box with Modifier.verticalScroll

Upvotes: -1

Related Questions