Phonegap (Android Build) - Intermediate Screen before Splash Screen

Question

When I first launched my app, built using build.phonegap.com and then distributed to my Nexus 7 (running Jelly Bean 4.3), I see a black screen with a gray title bar at the top. Is this normal, or is there a setting I need to enable/disable? I can say that this build was a debug build (I don't know why, but when I checked again the setting was checked).

I'll be glad to provide any insights needed to help, thanks! I can also link the github repo that houses my code if that is helpful.

There's an image:

EDIT2: This also happens after clearing the app from the apps running the in background.

This doesn't look normal. Are you seeing anything in `logcat`? Does it happen every time you first launch the app? Are you doing a lot of heavy lifting in your startup code? — MBillau, Sep 16 '13 at 20:27
Any luck on this, I seem to have the same issue as you and I can't figure out why it starts with a black screen. In my case, I have this black screen for maybe 2 or 3 sec, then my splash shows up, leaves, and my app starts... However this black at the start is really ugly... — Sephy, Oct 16 '13 at 18:27
I've tried both, and to delete and recreate but the result is the same... — Sephy, Oct 18 '13 at 12:25
@Sephy have u tried this:http://stackoverflow.com/a/14307263/1537036 i think it will work — Mumthezir VP, Oct 19 '13 at 10:46
This requires to modify the code of the Android application. I would like to find the "builder" way of solving this. I know that this issue doesn't really exist when you package the app on your own... — Sephy, Oct 20 '13 at 21:55
indeed it would solve the issue but I would have to build my app on my own. It seems there is no "builder" solution for my issue. Thus I don't know what answer to accept... — Sephy, Oct 23 '13 at 10:37
If none of the answers work, you don't HAVE to accept any of them. — Dom, Oct 23 '13 at 10:45

Dom · Answer 1 · 2013-10-24T11:04:11.250

Does your app eventually show or does it just stay blank? Cant really tell what is going on but a quick something came to mind. Are you using a splash screen? Take a look at the config.xml docs at the section about splash screen duration (Android only). The docs can be found here.

Splash Screen Duration

splash-screen-duration with a value in milliseconds
defaults to 5000 (5 seconds)
example: <preference name="splash-screen-duration" value="10000" />
for auto-hide behaviour call navigator.splashscreen.hide(); in the device-ready method
supported on PhoneGap 2.1.0 and above

Try setting the duration to 0 (<preference name="splash-screen-duration" value="0" />) and see what happens.

*On second thought, it probably isn't a splash screen issue but worth a shot. Post some code of what your app is doing (or share github as suggested) and I will see what I can do.

As explained in other comments, my app shows but with a great delay on this kind of blank screen which duration seems to vary between 1s to 6s then my splash and finally it starts. — Sephy, Oct 23 '13 at 10:43

score 5 · Accepted Answer · answered Oct 22 '13 at 05:24

5

This is an intermediate screen that Android shows while your process is being forked. The black screen is just your window background as defined by your theme. There is a great article here by Cyril Mottier, an Android Developer Expert, on this topic. You can customise this to look a little nicer as explained in the article (basically just change your window background, but be wary of overdraw)

answered Oct 22 '13 at 05:24

Bradley Campbell

9,298
6
37
47

Great! But how do we customise this through PhoneGap? – cronoklee Apr 20 '17 at 11:31
The question is specific about Phonegap. Sorry but this is a generic answer! – David Toledo Oct 11 '19 at 04:13

score 5 · Answer 3 · answered Apr 20 '17 at 16:27

In 2017, the answer to this problem is a lot simpler:

In config.xml add this line to your widget declaration (just below the bit that readsxmlns:gap="http://phonegap.com/ns/1.0"). This tells PhoneGap you want to add some stuff to the Android Manifest:

xmlns:android = "http://schemas.android.com/apk/res/android"

Then add the snippet below somewhere in the same file. Everything between the config tags will be appended to the Android manifest by PhoneGap when the APK is being generated. This little line will simply make your app background transparent so that the black loading screen is never seen.

<config-file platform="android" parent="/manifest" mode="merge">
    <application android:theme="@android:style/Theme.Translucent.NoTitleBar"></application>
</config-file>

I couldn't use `config-file` (received an error `Error parsing XML: unbound prefix`). Instead, I used a similar approach. Inside `` I included `` — Lucas Basquerotto, Jan 04 '18 at 13:06
I was looking for this solution for hours. thank you!!!!!!!!!!!!!!!!! — supercoolville, Oct 08 '20 at 23:46

score 2 · Answer 4 · answered Jul 09 '15 at 13:05

2

This can be solved by adding following lines to Phonegap's config.xml:

<gap:config-file platform="android" parent="/manifest">
    <application android:theme="@android:style/Theme.NoTitleBar"></application>
</gap:config-file>

answered Jul 09 '15 at 13:05

Bohdan

1,987
16
23

score 1 · Answer 5 · answered Oct 19 '13 at 04:59

1

Add to file config.xml:

<preference name="SplashScreenDelay" value="0"/>

I can't say for sure, my issue was more or less different, but solved for me.

answered Oct 19 '13 at 04:59

Marcos Zolnowski

2,751
1
24
29

This is weird indeed. I don't really see how this could help but I'll give it a shot and get back to you if it works. – Sephy Oct 20 '13 at 21:56

score 1 · Answer 6 · answered Oct 23 '13 at 01:25

This screen is the window of the android app that is wrapping your html, before the web view is loaded. The app's theme determines its layout.

But, currently, there is NO WAY you can change android theme through config.xml.

Here's the issue, opened 8 months ago, and here's the answer from phonegap build team:

We've added your request to the team's backlog. Due to high volumes, there may be a delay in addressing your request. Rest assured, we haven't lost track of your request. Your feedback is very valuable to us, so please keep it coming.

Note that in the community of phonegap build this request was also made here and here, but still the answers from developers are vague.

Well, I'm afraid that now all left to do is to wait for this feature to be released.

Until then, one workaround they say will at least shorten the length of that title screen is this:

<preference name="fullscreen" value="true" />

Hope I was of some help! ;)

Shame... I don't really see any improvement with or without the fullscreen flag... — Sephy, Oct 23 '13 at 07:34
It seems there is no "builder" solution for my issue. Thus I don't know what answer to accept... Although your explanation pointed me to the right issue... seems I'll just have to wait — Sephy, Oct 23 '13 at 10:41
Indeed, there is no *solution* for your *issue*. But certainly there can be many *answers* to your *question*. Which to accept it's up to you. The bounty is interesting, but whatever answer you pick, or no answer at all, we'll be fine. ;) Anyway, upvotes are always welcome as form of appreciation... ;) — PFROLIM, Oct 23 '13 at 13:40

score 1 · Answer 7 · answered Jan 16 '18 at 03:18

1

I found a solution that worked for me and is related to Bradley's answer, you could try.

In the "platforms\android" folder under your project, open the AndroidManifest.xml and search for android:theme inside the <activity> tag that contains android:name="MainActivity" and change the default value (that is android:theme="@android:style/Theme.DeviceDefault.NoActionBar") to android:theme="@android:style/Theme.Translucent". Save the file and build your project again, the grey screen should desapear.

answered Jan 16 '18 at 03:18

Pedro Carvalho

126
1
6

your answer is right. however after changing the theme when i launch the app it delays a little bit. The app should launch instantly. Can you find any solution for this? – Alauddin Ahmed Mar 22 '18 at 04:12
1

@AlauddinAhmed that "delay" is the Main Activity being load, before the theme changing it was filled by a grey screen from the Main Activity default theme ("Theme.DeviceDefault.NoActionBar"), but now the theme is transparent so it shows nothing when the Main Activity is loaded. In particular, this does not bother me much because the application from my bank has the same behavior... lol – Pedro Carvalho Mar 25 '18 at 04:51
1

@AlauddinAhmed what you can do is start using a splashscreen (if you're not) and make a personalized theme based on the default theme but changing the color of the activity to match the same as your splashscreen... – Pedro Carvalho Mar 25 '18 at 04:53
1

I am new at hybrid application development. So don't know that much about activity that is being build when i add android platform. And i'm using splash screen, which also come after the delay. I will work around about it. – Alauddin Ahmed Mar 25 '18 at 05:01
But thanks for your solution, i was stuck there for 1 month. – Alauddin Ahmed Mar 25 '18 at 05:02
1

@AlauddinAhmed if you want, i'm using a personalized translucent theme based on default ('cause that `"@android:style/Theme.Translucent"` is a theme from gingerbread, it is making my calendar pickups ugly af) for my app (https://1drv.ms/f/s!ArfH4lm-jzYYrpUnXrLcYHHVbISPRg), you could see if helps and you can find more info about themes on Android Documentation (https://developer.android.com/guide/topics/ui/look-and-feel/themes.html#CustomizeTheme)... – Pedro Carvalho Mar 25 '18 at 05:24
Thank you so much for you response, I will take a look, and will let you know if i can make it work. – Alauddin Ahmed Mar 25 '18 at 05:32

Phonegap (Android Build) - Intermediate Screen before Splash Screen

7 Answers7