Kotlin Compose global footer view

Issue

I am trying to show an Ad banner at the bottom which is globally displayed. That means that I want to stick there when I navigate throughout the app. So far I've tried adding the NavHost and the AdView inside a Column, hoping that the navigation with the linked pages will just take the remaining space and the bottom view will stick there. However the NavHost takes the whole screen and the AdView has zero height. When I navigate the second view, the AdView is still inside the view hierarchy but still with zero height.

I've tried changing all kinds of setup, adding .weight(1f) to the Ad view, changing Column Arrangement, .fillMaxSize(), .fillMaxHeight(), .minHeight(), fixed height, etc.

I might need to look into different layout for achieving this result, but not sure in which direction to search. The Ad works well, I tried displaying without the column and is shown correctly in the center of the screen.

Another variant I've tried is to display it without column, add bottom spacing to the NavHost then position the AdView to the bottom somehow. With this variant I haven't been able to position it to bottom.

Any help would be appreciated!

Column() {
                val navController = rememberNavController()
                NavHost(
                    navController = navController,
                    startDestination = NavigationRoutes.Home
                ) {
                    composable(NavigationRoutes.Home) { HomeView(navController = navController) }
                    composable(
                        NavigationRoutes.Books,
                        arguments = listOf(navArgument("mode") { type = NavType.IntType })
                    ) { backStackEntry ->
                        val rawMode = backStackEntry.arguments?.getInt("mode") ?: 0
                        var mode: ContentMode = if (rawMode == 0) {
                            ContentMode.READING
                        } else {
                            ContentMode.QUIZ
                        }
                        BooksView(navController = navController, mode = mode)
                    }
                }
                AndroidView(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(IntrinsicSize.Max)
                        .weight(1f),
                    factory = { context ->
                        AdView(context).apply {
                            setAdSize(AdSize.BANNER)
                            adUnitId = AdIdentifiers.GlobalBanner.adID
                            loadAd(AdRequest.Builder().build())
                        }
                    }
                )
            }

Solution

It might be the issue of any child Composable of NavHost having Modifier.fillmaxSize(). You can set a Modifier for NavHost which let's you define how much space it will cover

Column(modifier = Modifier.fillMaxSize()){

   NavHost(modifier = Modifier.fillmaxWidth).weight(1f){}
   AdView(modifier = Modifier
                        .fillMaxWidth()
                        .height(IntrinsicSize.Max)
   )
           
}

Answered By - Thracian