https://kotlinlang.org logo
Join Slack
Powered by
Has anyone seen an issue with edge to edge setup (...
# compose-ios
j
Has anyone seen an issue with edge to edge setup (using 
ignoresSafeArea
on iOS) where there's nested Scaffolds (outer one contains 
bottomBar
and inner one the 
topBar
)?
Seeing this additional padding above the 
topBar
in this scenario
a workaround seems to be to use following in the inner 
Scaffold
but still not sure why
Copy code
Modifier.consumeWindowInsets(WindowInsets.systemBars)
in which case I get following
One issue then is that there's too little padding in Android client that's consuming this code
a
Could you please provide a reproducer code here?
j
will take a look this evening at doing that
👍 1
@Andrei Salavei ok, created a repro in https://github.com/joreilly/PaddingIssueRepro
this is sum total of Compose code in the project
Copy code
fun App() {
    MaterialTheme {
        Scaffold(
            // have bottom bar here for example but same behaviour
            // regardless
        ) {
            // this padding here seems to cause the issue
            Column(Modifier.padding(it)) {

                // "nested" Scaffold with top app bar
                // (normally in some nexted composable)
                Scaffold(
                    topBar = { TopAppBar(title = { Text("Some title") }) }
                ) {
                    Column(Modifier.padding(it)) {
                        Text("Hi")
                        Text("there")
                    }
                }
            }
        }
    }
}
and this is what you see in iOS client (btw just pushed small (unrelated) fix to repo)
Not including it in this example but normally have bottom bar in that outer Scaffold and need that 
Column(Modifier.padding(it))
for that
a
@John O'Reilly, Sorry for the delay. In the sample the template project iOS app running with mode, similar to 
enableEdgeToEdge()
on Android. If you enable it, you will see that material3.Scaffold behaves identically on both platforms. There are many ways to fix it. For example, using 
modifier = Modifier.consumeWindowInsets(innerPadding)
.
j
I just pushed change to use 
edgeToEdge()
on Android.....I don't think you see same padding at top in this case?
a
It adds this gap to the size of the status bar. It seems that on iOS it's about 3 times bigger than on Android, so the gap will also be 3 times bigger.
Check it out:
j
btw I just pushed update to just bottom bar + some dummy list data to allow seeing padding more clearly
where do you suggest 
consumeWindowInsets
should be called to fix this?
also set different color for title bar to make clearer...
If I use single Scaffold with top/bottom bar then this is what I get....so definitely something strange with nested Scaffolds....
Copy code
fun App() {
    MaterialTheme {
        Scaffold(
            topBar = { CenterAlignedTopAppBar(
                title = { Text("Some title") },
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                )
            )},
            bottomBar = { BottomBar() }
        ) {
            Column(Modifier.padding(it)) {
                LazyColumn {
                    items(50) { index ->
                        Text(text = "Item: ${index+1}")
                    }
                }
            }
        }
    }
}
a
At the latest screenshot everything looks fine. iPhone has slightly bigger top and bottom safe areas, so it's kida expected to see such gaps.
j
in that latest screenshot it's using single Scaffold.....issues I see only seem to happen if using nested Scaffolds
a
Ha, sorry. I sill don't see issues with top bar behavior as they are identical on both platforms. I will check later the bottom bar to see if there is an issue.
j
I sill don't see issues with top bar behavior as they are identical on both platforms.
are you not seeing same as following there for that case....or is suggestion that this is expected still? You also mentioned about using 
consumeWindowInsets
...where would that be used?
a
or is suggestion that this is expected still?
Yes, the top bar behaviour that I see is the expected one. I have to mention that we're didn't change the Scaffold behavior on iOS - basically it shares the same code with Android. If you think there is a bug, you can file an issue in Google Issue Tracker.
You also mentioned about using 
consumeWindowInsets
...where would that be used?
That was from the Scaffold documentation, but it seems it does not work for inner Scaffold. After some tries I found the fix:
Copy code
Scaffold {
    Column(Modifier.padding(it)) {
        Scaffold(
            topBar = { TopAppBar(title = { Text("Some title") }, windowInsets = WindowInsets(0.dp)) },
            bottomBar = { BottomAppBar(windowInsets = WindowInsets(0.dp)) {  } }
        ) {
           ...
        }
    }
}
👍 1
j
hmm, I still think I'm seeing different behaviour on iOS.....anyway, will dig a bit deeper and see if I can use that workaround
in particular not clear that following should be expected....
I had tried, as mentioned at start of thread, to use 
consumeWindowInsets
as workaround but that seemed to remove too much padding on Android
I'll try the 
WindowInsets
approach as well
2 Views
Open in Slack
PreviousNext
Powered by