https://kotlinlang.org
Join Slack
I'm having issues with edge-to-edge and OS Dark Theme. I'm using `Modifier.safeDrawingPadding()` It ...
# compose
p
I'm having issues with edge-to-edge and OS Dark Theme. I'm using 
Modifier.safeDrawingPadding()
It is explained here. "_this ensures that interactable elements don't overlap with the system UI, it also means that none of the app will draw behind the system UI to achieve an edge-to-edge effect_". The issue is that it leaves white spaces top and bottom of the screen even in Dark Mode. I checked other apps of the OS like chrome, and these spaces are dark, not white. I can't find anywhere why this happens and how to solve it. Supposedly this is the correct function to add the minimum required padding to avoiding overlapping with top or bottom OS bars.
s
Put the color before this padding is applied
p
Hi, what do you mean? I'm not setting any color there. The app has his theme, generated with official material design theme generator, supporting dark theme and light theme.
I just apply the padding like google did, on the main composable of my app
everything turns dark theme but the top and bottom padding added by the that function to avoid overlapping OS components in status bar and bottom bar, which appears white
Copy code
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppTheme {
                App(modifier = Modifier.safeDrawingPadding())
            }
        }
    }
}
s
App at some point applies a color. Probably due to you using a Surface somewhere.
p
that is the main and single activity of my app, you can see how I initialize my App composable with AppTheme in those lines
to be more clear, this proces exactly the same issue:
Copy code
AppTheme {
    Box(modifier = Modifier.safeDrawingPadding().fillMaxSize().background(Color.Black))
}
In dark theme, the padding up and bottom is white
image.png
s
p
But Stylianos, what you mean?
I can't understand you
I don't put colours
I'm using a theme generated by official theme generator from material design 3, which supports dark theme
supposedly the colors are already being applied before the padding
when I embed the "Box" inside "AppTheme"
s
You do:
Copy code
Box(modifier = Modifier.safeDrawingPadding().fillMaxSize().background(Color.Black))
Do this instead
Copy code
Box(modifier = Modifier.fillMaxSize().background(Color.Black).safeDrawingPadding())
supposedly the colors are already being applied before the padding
Why do you think that?
AppTheme does not paint anything on the screen. Only sets up composition locals. If you do
Copy code
setContent {
 AppTheme {
 }
}
Do you expect it to paint black in dark mode and white in light mode?
p
let me explain better
I'm not painting any color in any part of the application
all the colors of all the components are specified on the theme
I'm not doing .background anywhere
so, how can I put 
.safeDrawingPadding()
after setting the colors if I'm not setting the colors anywhere?
that Box sample was not my app, was a sample but now I understand it's not a good one
on the other hand, doing what you tell me, 
.background(Color.Black).safeDrawingPadding()
the padding is black on that sample, but how can I do that with my real app if I'm not specifying colors anywhere?
App is the container of the screens, manages the navigation, this is the content of App:
Copy code
Box(modifier = modifier.fillMaxSize()) {
    NavigationSuiteScaffold(
I tryed moving the safeDrawingPadding function to inside App's Bos composable, but didn't work, the issue is the same:
Copy code
Box(modifier = modifier.fillMaxSize().safeDrawingPadding()) {
    NavigationSuiteScaffold(
s
I'm not doing .background anywhere
Do you have any surface anywhere in your app?
p
no, searched, and no
s
You should put a surface around your App composable, and after you set the theme. This will ensure the right background color is added, and that the right content color composition local is set.
p
great stylianos, thank you very much
that worked
how did you manage to find that solution?
after reading carefully a lot of documentation and doing a lot of research, didn't found anything related to this solution
on the other hand, you seem to have a lot of knowledge in this concept, maybe do you know why the splash screen added by the OS into our apps don't get black background when dark theme is ON? I'm not using any custom splash screen, it's simply the one added by the system withoud even adding the dependency for customizing it. That splash should be affected by OS/App dark theme, but instead of that, is always white too
s
https://developer.android.com/develop/ui/views/theming/darktheme#change-themes if you call 
UiModeManager#setApplicationNightMode
correctly the splash screen should also reflect the choice
how did you manage to find that solution?
Well, if the color is inseted by the modifier you put in there, it's quite straightforward I'd say to imagine that you just need the color to be set before that inset.
You should try searching in this slack channel old thread with questions like yours. This question regarding splash screen colors was discussed here too https://kotlinlang.slack.com/archives/CJLTWPH7S/p1725377765354019?thread_ts=1725345760.365989&cid=CJLTWPH7S
p
thanks, but that is not related to this issue. I'm not using Splash Api. My app is displaying the automated splash generated by the OS when app is starting. That splash shows the icon of the app, but the background doesn't paint black with night theme.
In that link, that developer is using splash api for developing a custom splash, and his app allows to customize light and dark separately from the system
so my case is completly different
as I'm not using splash api, OS should care of applying dark theme, but is not doing it
I wonder why and how to solve this
I'm using the AppTheme generated by official material design 3 app theme generator:
Copy code
@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit,
) {
    val colorScheme = when {
        darkTheme -> darkColorScheme
        else -> lightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content,
    )
}
so I'm not calling 
UiModeManager#setApplicationNightMode
anywhere because I'm not allowing user to customize it
s
I'm not using Splash Api. My app is displaying the automated splash generated by the OS when app is starting.
Then I don't know
8 Views
Open in Slack
PreviousNext
Powered by

kotlinlang

A modern programming language that makes developers happier.

Powered by