Splash screen generator creates slightly stretched logo

[David]

I just tested the "Icons and Splash Screen generator" and unfortunately the result (at least on my Android Moto X) is a slightly stretched logo.

I've attached the image that was used. It's a 2208w x 2208h PNG with a green background and a centered logo (600w x 388h). On my phone, the logo appears to be slightly stretched. I also tested a splash screen with a perfectly square logo in the center and had the same result.

Any thoughts?

Thanks,

David

[Ventsislav Georgiev]

Hello David,

Thank you for contacting us.

I am afraid we were not able to reproduce the issue. We used the splash screen you provided in a sample project and we inspected the generated images in the App_Resources's Android directory. The image generation didn't seem to stretch the image.

The Moto X device has a 720x1280 resolution, which means it has an xdpi density. Can you please check whether the xdpi generated image (under App_Resources\Android\drawable-xhdpi) has a resolution of 720x1280 and whether it is stretched. We tested the image generation behavior on several Android devices. Further, as we don't have a Moto X device available we tested on a Moto X virtual device (running the app on an Android emulator) and the splash screen appeared correctly on all of them.

Could you please see if you can reproduce the issue on other devices and provide us with a sample application where we can see the reported behavior. This way we can further investigate the case.

Alternatively, you can try using a NinePatch image which is resolution-independent and will not be stretched.

If you need any further assistance don't hesitate to contact us.

Regards,
Ventsislav Georgiev
Telerik

 

 

[David]

Thanks for the well-thought out response.

I did some more testing - and research. And it appears that even though the Moto X has a 720x1280 resolution, the usable area is actually less than that. The Android navbar and statusbar take up 146px, leaving 720x1134. Apparently this also occurs on the Moto G and Nexus devices - possibly others.

When I removed the statusbar, the stretching wasn't quite as bad, but was still present (navbar still took up some space), reinforcing this theory.

There is a preference in newer versions of the "splashscreen plugin" that would appear to solve the issue, but I wasn't able to get it to work. It's <preference name="SplashMaintainAspectRatio" value="true|false" />)

You may want to look further into this, since it could be problematic for quite a few users. I'll most likely just have to use a 9-Patch image to get around it.

 

Many thanks,

David

[Ventsislav Georgiev]

Hello David,

Thank you for sharing your findings.

I managed to reproduce the image stretching issue. As you mentioned the navbar and the statusbar take space from the screen and the cordova-plugin-splashscreen's default behavior for android devices is to stretch the image to fit the available space. Considering the different Android device screen sizes, this behavior could occur even if you hide the navbar and the statusbar.

Again from your findings the preference to crop the image rather than stretch it, is:

<preference name="SplashMaintainAspectRatio" value="true" />

but I was not able to make it work ether. There seems to have an issue with that option in Cordova, which you can follow for more information.

With this in mind, I wasn't able to find any issues with the Icons and Splash Screen generation in AppBuilder and until the plugin is updated to take into account the preference, it is better to use NinePatch.

Regards,
Ventsislav Georgiev
Telerik