Fail splash screen aspect ratio [solved]

[Francesc_S_]

Hello everyone. (sorry for my Google translate English)

I am making an app for Android with Intel XDK html5. The problem I have with the about splash screens.
I've read many posts on this forum about splash screens.
I put the exact measurements for all images and icons, both horizontally and vertically.
I even used the http://romannurik.github.io/AndroidAssetStudio/nine-patches.html tool (which do not match those required by Intel XDK) and even have generated manually with PS.
But nothing, I always get disproportionate measures in devices that are not exactly the standard resolutions, such as:
480 x 854 pixels, 5.0 inches (Alcatel)
1280 x 800 pixels, 10.1 inches (huawei)

You can see this examples in the attachment, and the correct file image.

What I can do?

Do not use any plug-cordova, only html5 and jquery. The application works correctly. Are just the damn splash screens!

Thanks.

[Barry_Johnson]

You need to create a 9-patch image. This is an image format android uses to let an image dynamically scale (they use it with buttons as well).

You can make them yourself. They are actually just regular PNGs, but ones in which a single pixel thickness along all four edges contains indicator pixels to tell android how to shrink or grow your image (i.e. which parts can be shrunk or grown versus which parts should not be).

The XDK doesn't provide a tool to make them. There is an online tool (http://romannurik.github.io/AndroidAssetStudio/nine-patches.html), but my feeling is it is worth it to just download the android tools (you don't need the whole IDE). The android tool (draw9patch) has a handy previewer so you can see how it will resize under long/wide cases - makes it much, much easier to get the hang of it - especially if you splash screen might have a couple of sections (for example, a main logo you want mostly centered, and a copyright notice you want to float near the bottom).

This describes the process of using the draw9patch tool:

http://developer.android.com/tools/help/draw9patch.html

Edit: please note that your first step will be cutting down your original images by two pixels on both the vertical and horizontal dimensions - all the tools just add the indicator pixels to your image - so for example to make your 640x480 splash screen, you want to start with a 638x478 base image.

[K_shin]

The XDK doesn't yet support 9-patch images, Intel suggests that for now you create images that are at least the size mentioned while keeping a 16:9 aspect ration as that is most common among android phones.  

https://software.intel.com/en-us/xdk/docs/cordova-for-android-build-options ;

So I use these dimensions instead:

320 X 569
480 X 853
720 X 1280
and I keep the smallest odd size at 320 X 426

Cheers,
K'shin

[Francesc_S_]

Thanks for the replies.

The images have already been created with nine-patch, but anyway, now I will use Android Tools and you will comment.
Thank You.

[Barry_Johnson]

K'shin-  Just FYI - they seem to work with Crosswalk builds.

Francesc - For what it's worth, I had poor results creating nine-patches other than with the Android tool. Likely user error on my part, but apparently a user error I was protected from making with the stock android tool. I'll be interested to hear if it works for you. Also, my apologies for not observing you had already created nine-patches with the online tool. It didn't work for me either. I hope the draw9patch works for you.

[PaulF_IntelCorp]

I believe that doc is out of date, my recollection is that nine-patch images can now be used with the build system, but I haven't had a chance to check it out. I think John confirmed this works.

Regardless, they are hard to create and use. One thing to note is that the dimensions requested in the XDK are minimum required, not the only dimension. If you use fixed size images, a 16:9 or 16:10 ratio on the dimensions generally gives the best results for most devices.

[Francesc_S_]

Hallelujah! finally works!
I discovered my error. The problem was that line the edge of transparent pixels does not change and the edge portion of black pixels do adapt or stretched. I just did the opposite, like a rounded button.

As I do not understand English very well, I attach the correct image to leave intact the logo centered.
By the way, I used as a base image one created with the tool Android nine-patch.

measures: dpi 320 all images

Pixels:
drawable-ldpi: 362 * 482 px portrait and 482 * 362 px landscape
drawable-mdpi: 542 * 722 px portrait and 722 * 542 px landscape
drawable-hdpi:722 * 962 px ...
drawable-xhdpi:1082 * 1442 px ...

These measures were created by the tool online http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

Base image 720 * 960 px 320 dpi png

Thank you all for the tips.

[Barry_Johnson]

That was basically my problem as well. All the documentation I found online seemed misleading, but the live preview with the android 9patch tool made it much cleared to see what pixels were causing what transformations.

Glad you got it fixed..

[Anusha_M_Intel1]

There is a new sample (to be uploaded in a couple of days) and article on 9 patch that has been recently created: https://software.intel.com/en-us/xdk/articles/android-splash-screens-using-nine-patch-png

Hopefully this resolves any confusion about using 9-patch PNG for splash screens. 

Posting it for anyone else to who happens to stop by this thread. 

[Francesc_S_]

Wow, thank you very much, really is a very helpful article. It is understood, at last, everything perfectly.

Kind regards.

[Leon_B_]

• I use the "lazy mode" - assossiate a 1920x1080 for them all on android
• It's possible to NOT have a splash screen ? I was wondering to do it as first page in HTML, even with an animation

[Anusha_M_Intel1]

Yes Leon. You can not have a splashscreen as well though it is recommended for when loading resources in the background if it relies to heavy resources like google earth or games. 

[Anusha_M_Intel1]

I believe iOS requires what they call a "launch screen" -- so you should put together a splash screen, even if it is a simple black screen.

[Lucas_B_1]

Francesc S. wrote:

Hallelujah! finally works!
I discovered my error. The problem was that line the edge of transparent pixels does not change and the edge portion of black pixels do adapt or stretched. I just did the opposite, like a rounded button.

As I do not understand English very well, I attach the correct image to leave intact the logo centered.
By the way, I used as a base image one created with the tool Android nine-patch.

measures: dpi 320 all images

Pixels:
drawable-ldpi: 362 * 482 px portrait and 482 * 362 px landscape
drawable-mdpi: 542 * 722 px portrait and 722 * 542 px landscape
drawable-hdpi:722 * 962 px ...
drawable-xhdpi:1082 * 1442 px ...

These measures were created by the tool online http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

Base image 720 * 960 px 320 dpi png

Thank you all for the tips.

Thank you!

I fixed with: http://romannurik.github.io/AndroidAssetStudio/nine-patches.html