I'm having an issue in my compose app where the pa...

# compose-android

[Jetbrains Ttvna]

I'm having an issue in my compose app where the padding for the gesture bar of the system is applied in both vertical and horizontal orientation which is not what I wanted

[Jetbrains Ttvna]

This happens whenever I add the line:
"WindowCompat.setDecorFitsSystemWindows(window, false)" in my MainActivity in addition to the code in the HomeTab.kt:

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text(text = "Overload")},
            colors = TopAppBarDefaults.topAppBarColors (
                containerColor = MaterialTheme.colorScheme.onPrimaryContainer,
                titleContentColor = MaterialTheme.colorScheme.primaryContainer
            )
        )
    }
) { paddingValues ->
    Box(modifier = Modifier.fillMaxSize()) {
        Column(modifier = Modifier.padding(paddingValues)) {
            TabRow(
                selectedTabIndex = pagerState.currentPage,
                indicator = { tabPositions ->
                    if (pagerState.currentPage < tabPositions.size) {
                        TabRowDefaults.PrimaryIndicator(
                            modifier = Modifier
                                .tabIndicatorOffset(tabPositions[pagerState.currentPage]),
                            shape = RoundedCornerShape(
                                topStart = 3.dp,
                                topEnd = 3.dp,
                                bottomEnd = 0.dp,
                                bottomStart = 0.dp,
                            ),
                        )
                    }
                },
            ) {
                homeTabItems.forEachIndexed { index, item ->
                    Tab(
                        selected = pagerState.currentPage == index,
                        onClick = { coroutineScope.launch { pagerState.animateScrollToPage(index) } },
                        text = {
                            Text(
                                text = item.title,
                                maxLines = 1,
                                overflow = TextOverflow.Ellipsis,
                                color = MaterialTheme.colorScheme.onSurface,
                            )
                        }
                    )
                }
            }
            HorizontalPager(
                state = pagerState,
            ){
                homeTabItems[pagerState.currentPage].screen()
            }
        }
        BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
            FloatingActionButton(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .padding(16.dp),
                containerColor = MaterialTheme.colorScheme.tertiaryContainer,
                contentColor = MaterialTheme.colorScheme.onTertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Edit,
                    contentDescription = stringResource(id = R.string.edit),
                    modifier = Modifier.padding(18.dp)
                )
            }
        }
    }
}

https://github.com/pabloscloud/Reply

Anybody willing to help me out? Thanks!

[Jetbrains Ttvna]

These blue parts are what I described earlier.

[Jetbrains Ttvna]

If this is idk a stupid question I'd be happy if one were offering a hint in the right direction 😉

[Stylianos Gakis]

Where's the code that applies the bottom bar too?
What I feel like is happening here is that you put the bottom bar somewhere, but you're not consuming the bottom insets, meaning that then they're applied again somehow to your content, which I think the Scaffold may be doing by default if you don't provide a bottom nav tab to it

[Stylianos Gakis]

We for example do this https://github.com/HedvigInsurance/android/blob/develop/app/app/src/main/kotlin/com/hedvig/app/feature/loggedin/ui/LoggedInActivity.kt#L332 to say that we're consuming the insets if the navigation bar is open. Then inside the content if you do try to apply the same bottom insets you just get 0.dp for it.

[Jetbrains Ttvna]

Where's the code that applies the bottom bar too?

https://github.com/pabloscloud/Reply/blob/17881281eea9c1b889a923231c33469dafd3fef3[…]va/com/example/reply/ui/navigation/ReplyNavigationComponents.kt

That said, if I understood you correct now, I should add the bottom bar to the scaffold instead which then detects how much padding needs to be applied

[Stylianos Gakis]

I meant more like where is it called? 😄 But I found thanks.
Basically here https://github.com/pabloscloud/Reply/blob/17881281eea9c1b889a923231c33469dafd3fef3/app/src/main/java/com/example/reply/ui/ReplyApp.kt#L220-L224 you’re calling the bottom nav.
The content of the ReplyNavHost will receive bottom insets of as much as the system navigation bar is high. But in the situation where your bottom nav is showing, you don’t want that to happen, since your bottom nav is the one who’s already consuming those insets.

If in there you do what I am doing in the link I provided you, which is basically

ReplyNavHost(
  navController = navController,
  modifier = Modifier
    .weight(1f)
    .then(
      if(navigationType == ReplyNavigationType.BOTTOM_NAVIGATION) {
        Modifier.consumeWindowInsets(WindowInsets.systemBars.only(WindowInsetsSides.Bottom))
      } else {
        Modifier
      }
    ),
)

It should be fixed for you I think

[Jetbrains Ttvna]

omg, you just fixed it for me

[Jetbrains Ttvna]

amazing!!!!!!!

[Jetbrains Ttvna]

now I can continue with developing after a long pause 😄

[Stylianos Gakis]

You got it 🫵