Android Jetpack Compose Multiple Layer Navigation

Question

I have multiple destination,and some of the destinations also have subsidiary destinations represented by a Navigation component to interact with.

NavigationBar {
    page1 {
        NavigationBar {
            innerPager1
            innerPager2
            .....     
        }
    }
    page2 {....}
}

I want only the part excluding the navigationBar (innerPager1 & 2) switching not the entire page (page1) , is this possible with navController? if possible how to achieve?

Answer 1

I'm not sure if i fully understood your question but i would start from looking for the documents about Scaffold component. As you will see, you can integrate, among others, a BottomBar component that is the one you're looking for. To switch only the innerPage content you need to change the innerPadding content. This is a general schema:

@Composable
fun MyLayout() {
    Scaffold(
        bottomBar = { MyBottomBar() }
    ) { innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
    }
}

There are many possible approaches to change the BodyContent. I'm going to cite a couple of them:

• using State to switch the @Composable method called:

var selectedTab by rememberSaveable { mutableStateOf(BottomNavItemTab.TAB_1) }
...
...
innerPadding ->
        Box(modifier = Modifier.padding(0.dp, 0.dp, 0.dp, innerPadding.calculateBottomPadding())) {
when (selectedTab) {
                    BottomNavItemTab.TAB_1 -> Tab1_Screen()
                    BottomNavItemTab.TAB_2 -> Tab2_Screen()
                    BottomNavItemTab.TAB_3 -> Tab3_Screen()
                }
}

• using Navigation component. In this case i suggest you to read the official docs because they provide well detailed example.

Please keep in mind that you are not forced to use only one of these solutions but you can integrate both of them. I'm saying this because it's not trivial to achieve navigation for tabs with and without BottomBar together.