Search code examples
androidmaterial-uiandroid-jetpack-composesplash-screen

Logo position on splash screen on Android 12

I'm working on some logic for loading remote config for my app with a target SDK 31. we already have a splash screen following guidelines, and we need to add a progress bar beneath the logo. (AFAIK there is no way to add a progress view below the logo for a standard implementation of the screen/theme)
So I came up with an idea where we start loading remote config when the app is launched - then we show standard splash and then, with no animation, we add exactly the same view as we have for a splash, but with a progress bar.

This is what I'm looking for enter image description here

However, during development, I've realized that the logo in a splash screen is not in the middle of the screen enter image description here

Additionally, there is no way to find the position of the logo of a standard splash theme, and hence there is no way to align these screens because with each and every screen resolution and ratio position of the logo on a splash would be different and if you just set the logo in the middle of the screen both of the icons would not be aligned. For instance, this is how I managed to align these views on my test pixel 5 devices.

Box(
    modifier = Modifier.fillMaxSize()
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            // this value was manually found for pixel 5 
            // and doesn't work for any other device with different screen ratio
            .padding(bottom = 33.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // the same as we have on a splash screen theme 
        BrandLogo()
    }
    // spinner to show progress for loading some config
    Spinner(
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .padding(64.dp)
            .size(40.dp)
    )
}

What I'm looking for is a way to find a position of the logo and set it for my custom view to have pixel-to-pixel matching and smooth experience for our customers

Solution

  • After a few days of fighting with this problem I've realized that there is no problem with a native splash, but with my implementation.

    Only one difference in the theme for this view. it's enough to set a full-screen solution and problems would be solved. I would recommend this one

    I've tried to calculate status and navigation bar size and set padding accordingly. however, having splash full screen would solve a problem right away and my logic with padding from question would be redundant