4

I have a 9-patch image (splash.9.png) I'd like to use as my Cordova (3.4.0) app splash screen. If I run the (Cordova) Android project from Eclipse, everything is as it's supposed to be, i.e. the splash screen appears and only the stretchable areas are stretched. However, if I run the app using the command line interface, the entire splash screen is stretched/deformed, as if Cordova doesn't see it as a 9-patch image, but as a regular .png. I have the following specified in my config.xml:

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

Is there anything else that needs to be set? Any other clues? Thanks in advance!

white_pawn
  • 205
  • 1
  • 4
  • 10
  • I found your question while searching for the same answer. My situation - identical. If I find an answer (heh, if - I will find an answer) I'll post it to your question. – Michael Mar 12 '14 at 23:40
  • Apparently this is a known issue. Find it here: https://github.com/phonegap/build/issues/20 – Michael Mar 12 '14 at 23:56
  • Did you ever find an answer for this? I am having the same issue! – M_Becker May 18 '14 at 01:44
  • @user2063032 No, not really. I'm forced to deploy my app through Eclipse whenever I want to have an undistorted splash screen. – white_pawn Jun 03 '14 at 14:12
  • I successfully built my app with remote Cordova 3.4.0 with 9-patch images. Note that extension should be `.9.png`, for example `mdpi.9.png` – Demiurg Jun 06 '14 at 09:14
  • 1
    @Demiurg I'm talking about a local Cordova instance. Plus, if you read the original problem description again, you'll also see the name (and extension) of my 9-patch image (in the very first sentence). – white_pawn Jun 12 '14 at 08:40

2 Answers2

4

OK, the answer has EVERYTHING to do with the stretchy areas of your 9patch image. I found the answer by pinging the github question. A user sent me to another discussion where someone had cracked it.

The main issue is that most 9patch tutorials explain how to stretch buttons, but none detail how to center an image.

Look for the green/blue/red image a little more than half way through the discussion.

http://community.phonegap.com/nitobi/topics/stretched_9_patch_splash_screens_android

Wayback copy: http://web.archive.org/web/20160405060404/http://community.phonegap.com/nitobi/topics/stretched_9_patch_splash_screens_android

The key for me was to look at the edges. It's really hard to see (for me at least), but you can barely make out the black marks along the edge that define the stretchy areas. top has 2 small areas (on the green), left has 2 small (on the green), bottom has one long (on the blue), right has one long (on the blue).

Additionally, some XML is provided to allow use of a single image in both vertical and horizontal orientations.

Consequently, I find this one image (as hard as it is to see the lines) a better instruction on how 9patch works than all of the tutorials I've watched.

Michael
  • 9,223
  • 3
  • 25
  • 23
  • As I said, my 9-patch .png is **working fine** (stretchy areas, non-stretchable logo and everything), when I run the app from Eclipse, so I'm pretty sure there's nothing wrong with the actual image (the draw9patch tool also suggests everything is OK). However, if I run it from the CLI, the splash screen is not treated as a 9-patch image at all (I can even see the black lines **on the phone's screen**, and the entire .png, including the logo, is stretched). – white_pawn Mar 14 '14 at 15:16
  • The links are 404s and sounds like they would have been helpful. I believe it's best practice to actually explain the solution instead of linking off... – Michael Sep 12 '16 at 14:05
  • WAYBACK MACHINE TO THE RESCUE! I'm updating the answer to reflect the wayback URL. Give me 30 seconds. – Michael Oct 13 '16 at 22:40
  • for me, the key was that the 9patch image needed to be SQUARE if you're only supplying one image per density - ie using density="hdpi" vs density="land-hdpi". Once I used square 9patch images, cordova no longer stretched the landscape ones. http://web.archive.org/web/20160405060404/http://community.phonegap.com/nitobi/topics/stretched_9_patch_splash_screens_android – Allan Nienhuis Apr 13 '18 at 22:12
3

It seems that you have to name image as splash.9.png (and do platform/android/cordova/clean before next build). That worked for me at least.

vbezhenar
  • 11,148
  • 9
  • 49
  • 63
  • It worked for me too. After a lot of searching around, this answer and http://community.phonegap.com/nitobi/topics/stretched_9_patch_splash_screens_android#reply_13888005 helped me to fix the splash. – Geordee Naliyath Apr 22 '15 at 12:09
  • 1
    CLI alias for clean is `cordova clean android` – daserge Dec 29 '15 at 09:32