Stretched 9 Patch Splash screens (Android)

  • 20
  • Problem
  • Updated 6 years ago
  • Solved
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.
Photo of erik

erik

  • 3 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 20
Photo of Amir

Amir

  • 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
Photo of Philip

Philip

  • 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?
Photo of Per Quested Aronsson

Per Quested Aronsson

  • 23 Posts
  • 1 Reply Like
Any progress?
Photo of Rckt

Rckt

  • 5 Posts
  • 0 Reply Likes
Any progress?
Photo of Robert Hoffmann

Robert Hoffmann

  • 1 Post
  • 0 Reply Likes
Hi,

see http://stackoverflow.com/questions/92...

Don't forget to upvote ;-)

robert
Photo of Zack Rodgers

Zack Rodgers

  • 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.
Photo of Zack Rodgers

Zack Rodgers

  • 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.
Photo of Eric Fisk

Eric Fisk

  • 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.
Photo of Tin LE GALL

Tin LE GALL

  • 3 Posts
  • 0 Reply Likes
+1
As phonegap docs recommend to use 9-patch images here, at least for splashscreens, it would be great if phonegap.build supports these :) does it ?
Moreover, is it multiplatform ? May be you could use Tortuga at compile time for iOS ?
Best
Photo of kevinclough

kevinclough

  • 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.
Photo of Joe Meeks

Joe Meeks

  • 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...
Photo of rhnkurier

rhnkurier

  • 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?
Photo of Alex Pashley

Alex Pashley

  • 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?
Photo of Robert North

Robert North

  • 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.
Photo of Glenn Townsend

Glenn Townsend

  • 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.
Photo of Dave Johnson

Dave Johnson

  • 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.
Photo of Tin LE GALL

Tin LE GALL

  • 3 Posts
  • 0 Reply Likes
Hey cool ! Would be great to have this working :)
Photo of Brett

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.
Photo of Glenn Townsend

Glenn Townsend

  • 11 Posts
  • 0 Reply Likes
http://docs.build.phonegap.com/en_US/...

Shows no update to include 9-patch images.
Photo of Brett

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.
Photo of Glenn Townsend

Glenn Townsend

  • 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:-

<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
Photo of Brett

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.
Photo of Petra V.

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.
Photo of Glenn Townsend

Glenn Townsend

  • 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
Photo of Glenn Townsend

Glenn Townsend

  • 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:-

<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!

Photo of Petra V.

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!
Photo of Ryko Solutions

Ryko Solutions

  • 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:
<gap:splash src="res/android/splash-ldpi.9.png"  gap:platform="android" gap:density="ldpi" />

Photo of Brett

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.

This conversation is no longer open for comments or replies.