Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

android

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

like image 224
Someone Somewhere Avatar asked Apr 26 '14 08:04

Someone Somewhere


1 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.

like image 123
Someone Somewhere Avatar answered Nov 02 '22 13:11

Someone Somewhere