9 patch images don't seem to work for Android splash screens in Phonegap Build. I've tried loads of combinations, but it seems to be ignored and the image is stretched. Splash screen is pretty much unusable for phone/tablet portrait/landscape.
- 3 Posts
- 0 Reply Likes
Posted 8 years ago
- 11 Posts
- 0 Reply Likes
Ryko,
I think your image is wrong. You have missed the right and bottom margin which should contain a large area for size of your logo you want to NOT STRETCH.
It's also the wrong size. It should the the main size PLUS a 1 pixel margin all the way around. In your case 222x222. I personally use a 202x202 for LDPI. This is why it's displaying the image as is.
I'm not sure on this but it also could be because you have all the background as transparent. Seeing as it's a splash image make the whole background solid except the 1 pixel border.
I have changed your image and attached for you to try.
Thanks
Glenn

I think your image is wrong. You have missed the right and bottom margin which should contain a large area for size of your logo you want to NOT STRETCH.
It's also the wrong size. It should the the main size PLUS a 1 pixel margin all the way around. In your case 222x222. I personally use a 202x202 for LDPI. This is why it's displaying the image as is.
I'm not sure on this but it also could be because you have all the background as transparent. Seeing as it's a splash image make the whole background solid except the 1 pixel border.
I have changed your image and attached for you to try.
Thanks
Glenn

- 10 Posts
- 0 Reply Likes
Thank you Glen.
This doesn't seem to match your earlier post where you just showed dots in the four corners. I followed the instructions at http://www.tidev.io/2014/02/12/androi... , which were quite clear and the only resource I found that dealt with splash screens rather than buttons. Maybe the transparent background was the trouble though. I just need to follow this with all the other pixel densities now.
Is there a way to actually view 9-patch images to test this short of actually deploying an app? I found several editors for creating images (all based on making buttons), but none that display them (without crashing).
This doesn't seem to match your earlier post where you just showed dots in the four corners. I followed the instructions at http://www.tidev.io/2014/02/12/androi... , which were quite clear and the only resource I found that dealt with splash screens rather than buttons. Maybe the transparent background was the trouble though. I just need to follow this with all the other pixel densities now.
Is there a way to actually view 9-patch images to test this short of actually deploying an app? I found several editors for creating images (all based on making buttons), but none that display them (without crashing).
- 11 Posts
- 0 Reply Likes
Hi Ryko, It does match my previous post, did you right click on the image and download to check? I know it looks like it has no black lines down the right and bottom when shown in the post but it does have them.
... and no unfortunately I had to add this to a test app and deploy to check it worked.
Thanks
Glenn
... and no unfortunately I had to add this to a test app and deploy to check it worked.
Thanks
Glenn
- 10 Posts
- 0 Reply Likes
I was able to create the other density splash screens using your example Glenn.
The only minor problem left is that my Nexus 10, with it's 2560x1600 resolution, is only selecting the hdpi image instead of xhdpi, which looks rather tiny. Annoying, but at least it isn't stretched though.
The only minor problem left is that my Nexus 10, with it's 2560x1600 resolution, is only selecting the hdpi image instead of xhdpi, which looks rather tiny. Annoying, but at least it isn't stretched though.
- 11 Posts
- 0 Reply Likes
Hi Tyko,
Well that's some good news at least. What I found was only a workaround that seemed to work. This still requires the official people to come back to this issue and resolve it properly so we can all be confident it will work on everything, especially with switching to landscape from portrait.
Well that's some good news at least. What I found was only a workaround that seemed to work. This still requires the official people to come back to this issue and resolve it properly so we can all be confident it will work on everything, especially with switching to landscape from portrait.
- 4 Posts
- 0 Reply Likes
Brett, OFFICIAL REP
- 547 Posts
- 54 Reply Likes
- 4 Posts
- 0 Reply Likes
- 11 Posts
- 0 Reply Likes
Bret, technically it hasn't 100%. Only doing what I've suggested gives some success. The issue of moving from portrait to landscape and stretching still exists unless you use a square image. It still requires work, hence why it was reopened.
Brett, OFFICIAL REP
- 547 Posts
- 54 Reply Likes
- 11 Posts
- 0 Reply Likes
Brett,
I'm sorry but I don't understand, the title of this thread is "Stretched 9 Patch Splash screens (Android)". This has only been partly fixed and was reopened a few weeks back to address.
I have done a lot to test this and help other people to do so, doing a search on Google brings people here, Why do you think this requires yet another thread?
I'm sorry but I don't understand, the title of this thread is "Stretched 9 Patch Splash screens (Android)". This has only been partly fixed and was reopened a few weeks back to address.
I have done a lot to test this and help other people to do so, doing a search on Google brings people here, Why do you think this requires yet another thread?
Brett, OFFICIAL REP
- 547 Posts
- 54 Reply Likes
hey glenn,
what app id are you using so i can troubleshoot? as 9-patch images have been supported since cordova 3.0.0.
also what device are you using to test.
what app id are you using so i can troubleshoot? as 9-patch images have been supported since cordova 3.0.0.
also what device are you using to test.
- 1 Post
- 0 Reply Likes
Same problem here; I'm using Cordova 3.4.0. Eclipse build works fine (9-patch image is loaded as expected). Here's my .png:
Referenced in config.xml as:
(Not sure if this is version-specific; I see other people doing it differently.)
Referenced in config.xml as:
<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="5000" />
(Not sure if this is version-specific; I see other people doing it differently.)
Brett, OFFICIAL REP
- 547 Posts
- 54 Reply Likes
what device are you using? as your patch image is fine on a nexus-7 and assorted galaxies using the following application: https://github.com/phonegap-build/pgb...
what app ID is this application on phonegap build?
what app ID is this application on phonegap build?
- 2 Posts
- 0 Reply Likes
- 2 Posts
- 0 Reply Likes
Ok, here I go again:
I nearly went crazy yesterday with this. I am using Cordova (version 3.4.0), not exactly Phonegap, working with the CLI (so it should be pretty much the same).
I hope this can help someone anyways.
So, what I did was:
1 - Create my 9-patch pngs (1 for every ldpi-mdpi-hdpi-xhdpi).
2 - Place your 9-patch pngs as "screen.9.png" files in [projectfolder]/platforms/android/res/drawable*, where drawable* are drawable, drawable-ldpi, drawable-mdpi... and so on. It's important that the "extension" is .9.png
3 - In your general config.xml, add:
And that's it! I have it working! :)
P.D: The value for SplashScreenDelay can be any other, for SplashScreen it has to match with what is before ".9.png" in the splash images file name.
I nearly went crazy yesterday with this. I am using Cordova (version 3.4.0), not exactly Phonegap, working with the CLI (so it should be pretty much the same).
I hope this can help someone anyways.
So, what I did was:
1 - Create my 9-patch pngs (1 for every ldpi-mdpi-hdpi-xhdpi).
2 - Place your 9-patch pngs as "screen.9.png" files in [projectfolder]/platforms/android/res/drawable*, where drawable* are drawable, drawable-ldpi, drawable-mdpi... and so on. It's important that the "extension" is .9.png
3 - In your general config.xml, add:
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
And that's it! I have it working! :)
P.D: The value for SplashScreenDelay can be any other, for SplashScreen it has to match with what is before ".9.png" in the splash images file name.
- 1 Post
- 0 Reply Likes
Still doesn't work. I have upgraded to the latest version of the CLI and tried everything from using the .9.png extension to using the online Android Studios tool. It just doesn't work when running the app from the CLI.
John Weidner, Champion
- 435 Posts
- 80 Reply Likes
This was working for me a month ago with PhoneGapBuild. However, now it no longer seems to be working with PGB.
This month I was making a new app which was a copy of my app from last month but with some different data. When I built the new app, everything was fine except for the splash screen. I diff-ed the two projects and the splash images and the configuration for the splash images were identical. I reran the old app to confirm that it was still displaying the splash correctly. It was. Then I used PGB to build a new .apk file. The new .apk file does not display the 9 patch image correctly. The whole image gets stretched to fill the screen instead of just stretching the areas marked in the 9 patch image. I tried changing the phonegap-version specified in my config.xml from 3.1.0 and 3.3.0 but that did not seem to effect anything. I re-installed the original version of the app from Google Play to confirm that the problem wasn't caused by something that changed on the phone. The existing version of the app on Google Play works fine. But any rebuilt version does not. I highly suspect that something changed on build.phonegap.com to cause this to stop working.
This month I was making a new app which was a copy of my app from last month but with some different data. When I built the new app, everything was fine except for the splash screen. I diff-ed the two projects and the splash images and the configuration for the splash images were identical. I reran the old app to confirm that it was still displaying the splash correctly. It was. Then I used PGB to build a new .apk file. The new .apk file does not display the 9 patch image correctly. The whole image gets stretched to fill the screen instead of just stretching the areas marked in the 9 patch image. I tried changing the phonegap-version specified in my config.xml from 3.1.0 and 3.3.0 but that did not seem to effect anything. I re-installed the original version of the app from Google Play to confirm that the problem wasn't caused by something that changed on the phone. The existing version of the app on Google Play works fine. But any rebuilt version does not. I highly suspect that something changed on build.phonegap.com to cause this to stop working.
John Weidner, Champion
- 435 Posts
- 80 Reply Likes
Not sure why this seemed to be working previously, but what was causing my problem was that the 9 patch image was already wider than the view I was displaying it on. So the image was getting squashed in one direction before the 9 patch stretching could take place. I solved this by just making a narrower image to start with.
- 8261 Posts
- 263 Reply Likes
This conversation is no longer open for comments or replies.
This conversation is no longer open for comments or replies.
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers




