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
- 8261 Posts
- 263 Reply Likes
HI Erik
We have an issue open for this and our engineer are still working to address this.
https://github.com/phonegap/build/iss...
Thanks
-Amir
We have an issue open for this and our engineer are still working to address this.
https://github.com/phonegap/build/iss...
Thanks
-Amir
- 1 Post
- 0 Reply Likes
Has there been a solution to this problem yet? Renaming my image to .9.png didn't seem to work, and I'd really like to use 9-patch splash screens.
And if not, what is my best alternative to have splash screens for my phone-gap application without them being badly stretched on some devices?
And if not, what is my best alternative to have splash screens for my phone-gap application without them being badly stretched on some devices?
- 1 Post
- 0 Reply Likes
- 5 Posts
- 1 Reply Like
It seems like your answer is meant only for phonegap, not phonegap build.
There is no "res/drawable/" for phonegap build projects.
There is no "res/drawable/" for phonegap build projects.
- 5 Posts
- 1 Reply Like
Is it really that hard to add to the config.xml processor PhoneGap Build???
There are dozens of fixes people have figured out, now all we need is for PhoneGap Build to integrate them into the build platform.
All we need is a way to tell PhoneGap Build that we are using a 9-image for the splash in the config.xml.
EX:
Missing this functionality is restricting PhoneGap Build users from creating professional quality applications. I went with the PhoneGap Build platform so I would not have to sync my 2 machines and leave my familiar ide (Dreamweaver CS6) that has PhoneGap Build, built in.
There are dozens of fixes people have figured out, now all we need is for PhoneGap Build to integrate them into the build platform.
All we need is a way to tell PhoneGap Build that we are using a 9-image for the splash in the config.xml.
EX:
Missing this functionality is restricting PhoneGap Build users from creating professional quality applications. I went with the PhoneGap Build platform so I would not have to sync my 2 machines and leave my familiar ide (Dreamweaver CS6) that has PhoneGap Build, built in.
- 2 Posts
- 0 Reply Likes
+1, I'm running into the same problem. Also, it seems crazy to me that there's not a published phonegap build hello world app that includes basic functionality like this.
- 3 Posts
- 0 Reply Likes
- 7 Posts
- 0 Reply Likes
+1 I was so psyched to use phonegap on this project, now this is preventing me from recommending it or being able to use it for my android development.
- 40 Posts
- 3 Reply Likes
I am having the same issue. The PhoneGap Build config.xml documentation reads as follows and I would assume the dimensions for ldpi, mdpi, hdpi, and xhdpi would be consistent with the Cordova 2.5.0 documentation for 9-patch images but the result is stretched and distorted splash screens. Should the image dimensions be different to prevent unproportional scaling of 9 patch regions?
We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.
https://build.phonegap.com/docs/confi...
http://docs.phonegap.com/en/2.5.0/cor...
We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.
https://build.phonegap.com/docs/confi...
http://docs.phonegap.com/en/2.5.0/cor...
- 6 Posts
- 0 Reply Likes
Hi, oh, doesn't phonegap.build support 9patch pngs?!? I tried to integrate a splash screen, but it is stretched in a wrong way. Maybe you can have a look on it: http://www.rhn.de/download/9patch.png
I want to stretch the blue area, not the logo. Is there something wrong with it or with the phonegap build?
I want to stretch the blue area, not the logo. Is there something wrong with it or with the phonegap build?
- 94 Posts
- 1 Reply Like
It seems to me that the phonegap build gets a lot less attention than the normal phonegap model...
10 months on is there still any guidance on how to create landscape android splash screens?
10 months on is there still any guidance on how to create landscape android splash screens?
- 5 Posts
- 0 Reply Likes
Is there an update on this? We're wanting to use Phonegap Build but having a skewed splash screen, or just some black nothing while the build loads is really not feasible.
This should be priority - the splash screen is close to the first impression people make of the app.
This should be priority - the splash screen is close to the first impression people make of the app.
- 11 Posts
- 0 Reply Likes
Well Amir (Official Rep) said 1 year ago:-
We have an issue open for this and our engineer are still working to address this.
https://github.com/phonegap/build/iss...
Well that's a croc as it was closed without any reason as to why, certainly without the issue being fixed in any way.
Phonegap Build is a non starter for any serious app and support for it seems like a joke.
We have an issue open for this and our engineer are still working to address this.
https://github.com/phonegap/build/iss...
Well that's a croc as it was closed without any reason as to why, certainly without the issue being fixed in any way.
Phonegap Build is a non starter for any serious app and support for it seems like a joke.
- 129 Posts
- 13 Reply Likes
Hi all, not sure why this issue was closed but it's been re-opened and we are having a look now. Sorry about the mixup here.
- 3 Posts
- 0 Reply Likes
Hey cool ! Would be great to have this working :)
Brett, OFFICIAL REP
- 547 Posts
- 54 Reply Likes
hey guys,
9-patch backgrounds should work out of the gate since 3.0.0. can someone please give me their app id # (if they are still having trouble) and i can troubleshoot, as i am/was able to successfully use a 9-patch splashscreen since 3.0.0 came out.
9-patch backgrounds should work out of the gate since 3.0.0. can someone please give me their app id # (if they are still having trouble) and i can troubleshoot, as i am/was able to successfully use a 9-patch splashscreen since 3.0.0 came out.
- 11 Posts
- 0 Reply Likes
Brett, OFFICIAL REP
- 547 Posts
- 54 Reply Likes
just add the *.9.png files as the splash(es) and it'll work. we will be updating the docs to reflect this soon, thanks for the heads up.
- 11 Posts
- 0 Reply Likes
Hi Brett,
If this indeed true it will be a relief to many who have tried and disappeared onto other things as it was neglected for over a year. I'm now really looking forward to testing this.
Can I just clarify something with you? The way the image is defined in the config should be as follows:-
Also has anything been done about using landscape images at all? Perhaps it has and that also isn't in the docs?
Thanks for getting back with this.
Glenn
If this indeed true it will be a relief to many who have tried and disappeared onto other things as it was neglected for over a year. I'm now really looking forward to testing this.
Can I just clarify something with you? The way the image is defined in the config should be as follows:-
<gap:splash src="res/screen/android/screen-xhdpi-portrait.9.png" gap:platform="android" gap:density="xhdpi" />
Also has anything been done about using landscape images at all? Perhaps it has and that also isn't in the docs?
Thanks for getting back with this.
Glenn
Brett, OFFICIAL REP
- 547 Posts
- 54 Reply Likes
yep that snippet is correct. as for orientation, the splash will rotate with the device, and obey the stretch parameters of the 9-patch file. but no, no updates AFAIK have been made to splashcreen support for orientations.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Hi Brett,
Would you please have a look at #742469?
For Android, I supplied .9-patch files for xhdpi and hdpi, normal png files for the smaller sizes. Testing on Asus Nexus 7" 800x1280.
I believe to have the splashes and the config right, but I am not 100% sure. The tablet takes a 9-patch image, but doesn't stretch at the proper places. Instead, it stretches the splash image as a whole.
Would you please have a look at #742469?
For Android, I supplied .9-patch files for xhdpi and hdpi, normal png files for the smaller sizes. Testing on Asus Nexus 7" 800x1280.
I believe to have the splashes and the config right, but I am not 100% sure. The tablet takes a 9-patch image, but doesn't stretch at the proper places. Instead, it stretches the splash image as a whole.
- 11 Posts
- 0 Reply Likes
Hi,
I now have 9-patch working perfectly whilst the device is portrait, i.e. tested on a few devices of varied screen sizes and it stretches as it should.
When turning the device to landscape however it messes up. I'm trying some more options so i'll report back if I have more success.
Thanks
Glenn
I now have 9-patch working perfectly whilst the device is portrait, i.e. tested on a few devices of varied screen sizes and it stretches as it should.
When turning the device to landscape however it messes up. I'm trying some more options so i'll report back if I have more success.
Thanks
Glenn
- 11 Posts
- 0 Reply Likes
I have both Portrait and Landscape now working correctly. For those who need to have a centred splash screen logo here's how to do it on PhoneGap Build!
Firstly about 9-patch. I've read so much about 9-patch but it all seems to talk about stretching buttons etc. and nothing about how to centre a logo. The online tools for creating 9-patch images also do not work for logos. You need 2 solid areas on the top and left margins for stretching and 1 large area left and bottom for the content area you wish to keep. The attached image is an example of how this is done.
Taking the size 480*800 or hdpi density as an example:-
I tried to get landscape working by adding the following without success:-
What I did was to add 1 image for both portrait and landscape:-
Making my "multi" image 480*480 and not 480*800 cured the problem of moving from portrait to landscape. When you add your 1 pixel all around for the 9-patch the actual dimensions become 482*482
The image attached shows the light green areas which will be stretched. The centre image will remain untouched. I hope this helps those who have struggled like me!

Firstly about 9-patch. I've read so much about 9-patch but it all seems to talk about stretching buttons etc. and nothing about how to centre a logo. The online tools for creating 9-patch images also do not work for logos. You need 2 solid areas on the top and left margins for stretching and 1 large area left and bottom for the content area you wish to keep. The attached image is an example of how this is done.
Taking the size 480*800 or hdpi density as an example:-
I tried to get landscape working by adding the following without success:-
<gap:splash src="res/screen/android/screen-hdpi-portrait.9.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/screen-hdpi-landscape.9.png" gap:platform="android" gap:density="hdpi" width="800" height="480" />
What I did was to add 1 image for both portrait and landscape:-
<gap:splash src="res/screen/android/screen-hdpi-multi.9.png" gap:platform="android" gap:density="hdpi" />
Making my "multi" image 480*480 and not 480*800 cured the problem of moving from portrait to landscape. When you add your 1 pixel all around for the 9-patch the actual dimensions become 482*482
The image attached shows the light green areas which will be stretched. The centre image will remain untouched. I hope this helps those who have struggled like me!

Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Thank you very much for your experiments and the clear way of describing a solution, Glenn. Good job!
- 10 Posts
- 0 Reply Likes
This still doesn't work for me. Using PhoneGap Build v3.3.0, files are named splash-ldpi.9.png (and the like), but the app is just showing the png image as is, including the dot markers.
Here's one of my splash screen files.
Referenced in config.xml as:
Here's one of my splash screen files.
Referenced in config.xml as:
<gap:splash src="res/android/splash-ldpi.9.png" gap:platform="android" gap:density="ldpi" />
Brett, OFFICIAL REP
- 547 Posts
- 54 Reply Likes
hey ryko,
i opened your image file in the nine patch editor and can't seem to find any patch markers for stretching etc. can you double check that the png is actually a nine patch formatted image.
i opened your image file in the nine patch editor and can't seem to find any patch markers for stretching etc. can you double check that the png is actually a nine patch formatted image.
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








