Bad splashscreen ratio with Android using CLI new feature

I just tried Image Generation from the CLI.
Upload works well and images generated have a good ratio and aspect.

However, running the app on my development devices:

  • the ratio is NOT respected in Android (Nexus 4), image is distorded
  • the ratio is respected in iOs (iPhone 4)

Here is my config.xml:

  <preference name="SplashScreen" value="screen"/> <!-- `splash` does not work -->
  <preference name="SplashScreenDelay" value="20000"/>
  <preference name="AutoHideSplashScreen" value="false"/>

I tried with these source images:

  • PNG file, 2362x2362
  • AI file (no size since vectorial, but ratio is 1:1 too)

Any idea?


Having the same issue on my Xperia Z3 Compact (720x1280). My image is stretched widthwise.

I tried 2 other 720x1280 phones in Genymotion but did not have the issue

1 Like

saving same issue on Nexus 5, Nexus 7 (2012)
walt, my config.xml is the same. it’s the only proper configuration

Any ideas on this Ionic team? I’m getting close to release and I can’t do so with a distorted slash screen :sunny:

I have the same problem on my Moto G 720x1280 mobile phone and using genymotion with a same resolution mobile emulator.
By the way, splash screen images was created well by the ionic resource tool. There is one splash screen with the 720x1280 resolution in my resources directory : drawable-port-xhdpi-screen.png

So I think I’ve found a much better solution. I use a solid colour image for my ionic/cordova splashscreen.

In run() I hide it immediately using the plugin, then for my first view/controller I display my real splashscreen via html (same background colour as the cordova one - so a seamless transition, and since it’s html I have complete control). Then in that first controller I do any init stuff that takes time (login, load remote assets). When done I show the nav-view/nav-header, and $state change to my next view/controller.

The additional benefit is better debugging in Safari/ios. Since I don’t do anything complex in run() anymore, I don’t have to worry about an error happening there that I can’t debug.

Your approach seems very interesting. Could you share some code to support your explanations? Thanks!

1 Like

I use ionic resources to create the splash screens from my solid red square template. My run() method has no blocking code and does a navigator.splashscreen.hide() immediately (so that I don’t show the plain red square too long), then loads my index.html and MainCtrl as follows:


<body ng-app="myapp" ng-controller="MainCtrl" ng-style="!showNav && {'background-color': 'red'}">

  <div ng-style="showNav && {'display': 'none'}" class='valign_parent' style="width:100%;height:100vh;;text-align:center">
    <div class='valign_child'>
      <div id='yo' class="animated infinite bounce">Put app name or logo here</div>

  <div ng-style="!showNav && {'display': 'none'}">
    <ion-nav-bar align-title="center">


The top of my MainCtrl

  $scope.showNav = false;

  $ionicPlatform.ready(function() {
    RegistrationService.register().then(function() {

      UtilService.isOpen().then(function(res) {

        if (!res.isopen) {
          $scope.showNav = true
          $timeout(function() {
          }, 200)

        } else {
          // here's where i should check to see if there's a live request
          $scope.showNav = true
          $timeout(function() {
          }, 200)
1 Like

I would say @techntrails’ solution is a workaround instead of a fix. But it is a useful technique. Using that, you could also animate a transition between your splash to a login or something. Like slide out the splash’s logo etc.

But ontopic: Did you try a PSD file as well as source input? I always use PSD and have had no troubles on different Android devices so far.

I just recently ran into this problem. It’s because on MotoG and Nexus 4 (and any phone without physical buttons) the screen size is actually smaller than 720x1280 (or whatever).

You lose vertical pixels to show the back, home and recent apps button.

If there were a way to disable the button bar during the splash screen, that would take care of the issue.

Anyone know how to do that?

ionic resources generate wrong splash screen for nexus 5 also. It’s squashed

Can confirm - there is an issue. Can we get this filed as a bug?

I also think that this is an issue

HI have the same issue here… any fixes?

On my Samsung Galaxy Nexus and the Nexus 7 tablet the splashscreen shows incorrect as well. My guess is the buttons at the bottom of the screen make the splashscreen show with the wrong aspect ratio.

I think we need resized and 9-patched splashscreens, and a CLI that do this. Here it is (^o^)/

junkoro/make-9patched-splash-ionic -

Please try this out!

1 Like

Yes sir you’re correct, that’s precisely what we need. And this looks promising! I’m about to try it out, cheers

Bravo! Excellent solution, working for me now.

Have you tested with Crosswalk? I think perhaps the duplicate .9 issue may still be resulting in Crosswalk build fails.

Yes, I’m using Crosswalk. Could you delete this folder and try again?


The problem is “$ ionic resources” produces not 9 patched images. If we use make-9patched-splash-ionic, we should not use “$ ionic resources”. But “ionic resources --icon” is OK.

I’m wondering the script should clean up debug folder automatically…

1 Like

Thanks. The issue I was noticing turned out to be a conflict of some sort with when using Crosswalk and Make-9Patched.

The solution was to remove the plugin, remove Android platform, remove Crosswalk, then add Android + Crosswalk again, remake icon resources, redo splash with Make-9Patched, and then rebuild (without including the Cordova Splashscreen plugin).

Works beautifully with Crosswalk now! Cheers