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 Glenn Townsend

Glenn Townsend

  • 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

Photo of Ryko Solutions

Ryko Solutions

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

Glenn Townsend

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

Ryko Solutions

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

Glenn Townsend

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

Scott Saunders

  • 4 Posts
  • 0 Reply Likes
wow - this issue has actually been open for a year?
Photo of Brett

Brett, OFFICIAL REP

  • 547 Posts
  • 54 Reply Likes
yep and it's been fixed for 9 months.
Photo of Scott Saunders

Scott Saunders

  • 4 Posts
  • 0 Reply Likes
clearly there are people here that think otherwise.
Photo of Glenn Townsend

Glenn Townsend

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

Brett, OFFICIAL REP

  • 547 Posts
  • 54 Reply Likes
please start a new thread with the existing problem and we can check it out.
Photo of Glenn Townsend

Glenn Townsend

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

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

Joe Joe Johnson

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

<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="5000" />


(Not sure if this is version-specific; I see other people doing it differently.)
Photo of Brett

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?
Photo of Juan Bernárdez

Juan Bernárdez

  • 2 Posts
  • 0 Reply Likes
I edited my comment, thought that it was working but it wasn't :(
Photo of Juan Bernárdez

Juan Bernárdez

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

<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.
Photo of Carlos Rymer

Carlos Rymer

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

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

Brett, OFFICIAL REP

  • 547 Posts
  • 54 Reply Likes
what's the app id?
Photo of John Weidner

John Weidner, Champion

  • 435 Posts
  • 80 Reply Likes
895121
Photo of John Weidner

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.
Photo of Amir

Amir

  • 8261 Posts
  • 263 Reply Likes

This conversation is no longer open for comments or replies.