Home » Android » android – App loads with white screen for 3 secs before showing proper UI – using fragments (no webview)

android – App loads with white screen for 3 secs before showing proper UI – using fragments (no webview)

Posted by: admin June 15, 2020 Leave a comment

Questions:

I’ve made a brand new Android project using the new project wizard in Eclipse:

Step 1: new project properties

  • Min API: 16
  • Max API: 19
  • Theme: Holo Dark
  • Create Activity -> Navigation type: Action Bar Tabs (with ViewPager)

Step 2: update /res/activity_main.xml to show a black background !

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.testedsg.MainActivity"
    android:background="@android:color/black" />

Step 3: DEPLOY !

result: why do I see the title bar with the white area underneath whilst the app is loading?? Crazyness!
It’s actually incredibly annoying because the first activity that shows up has some animation on it and the white space hides the initial part of the animation.

Additionally, the more complicated the fragments, the longer the app takes to load and the longer I see the white area 🙁

Question

Is there anything that can be done to get rid of the white whilst the app loads ? I want the user to see the app UI ASAP and I especially don’t want the white to hide the initial part of the UI animation.

Screenshot to illustrate the problem…
annoying white area during app loading

Screenshot of what I want to see ASAP…
after loading

How to&Answers:

To fix this nasty problem, update the /res/values/styles.xml to include

  • <item name="android:windowDisablePreview">true</item>

or

  • <item name="android:windowBackground">@android:color/black</item>

for example :

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="android:windowDisablePreview">true</item>
    <!-- <item name="android:windowBackground">@android:color/black</item> -->
</style>

Note: my entire app uses the AppTheme style (defined in the manifest). If you have a different theme just use either windowDisablePreview or windowBackground depending on the effect you prefer.