9

I've used the primary variant color as the background of the whole app, but still, I see a white screen while the UI is loading initially. Is there any way around it?

EDIT: I've created a new empty project and applied the bellow suggestion by @Philip Dukhov. Still the same result. The white screen appears first and stays at least two seconds on the screen before the Surface starts to load.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SOIssueReproduceTheme {
                Surface(
                    color = MaterialTheme.colors.primaryVariant,
                    modifier = Modifier.fillMaxSize()
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Thanks for your help!

Raw Hasan
  • 1,096
  • 1
  • 9
  • 25
  • 1
    The loading time between android starting and composing loading is, probably, what you're seeing. I'd look at things before Compose starts, like the Activity etc. – mmm111mmm Aug 25 '21 at 16:46
  • See this answer I posted https://stackoverflow.com/a/71152787/1530504 – asok Buzz Feb 17 '22 at 05:09

2 Answers2

10

I have found a solution to the issue. We can avoid this flicker of white by adding a background color to the window from the theme like this:

res/values/themes/themes.xml

<style name="Theme.OfflineCaching" 
    parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        ...
        <item name="android:windowBackground">@color/purple_700</item>
</style>

Set this on both theme files for the light and dark theme.

Raw Hasan
  • 1,096
  • 1
  • 9
  • 25
  • Wow, that works for me. Set windowBackground corresponding to current dark/light mode just before caling onStart of the ComponentActivity will solve that flickering. thank you. – kotoMJ Apr 20 '22 at 12:41
-1

No can do. This is the time Android takes to render it's UI. No matter what you do, it will be shown. Now, there are a couple of things that may help.

Use best practices to develop your app, lazy initialisation, delegation, and so on.

Eventually, further improvements may be added from the backend, reduction reducing render time

Devices with greater RAM take less time to load.

Usually, it is your inefficient code that causes the issue, just follow the best practices, and you should be good. It is because if your app is efficient, the user will not complain of slow render time, because users with high end devices will not face the problem, and users with low end devices will face the problem with every app so they will know that the problem is with their device.

Richard Onslow Roper
  • 5,477
  • 2
  • 11
  • 42
  • 1
    Thanks for your answer! I've just created a new empty project and applied the color to the Surface, as I've updated my initial question. Still, the result is the same. So the best practices, backend, inefficient code, etc. seem pretty baseless. – Raw Hasan Aug 26 '21 at 14:38