Bad splashscreen ratio with Android using CLI new feature

walt · January 22, 2015, 2:28am

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?

techntrails · January 25, 2015, 4:09pm

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

blablapolicja · January 26, 2015, 4:37pm

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

techntrails · February 3, 2015, 9:59am

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

ifrain · February 3, 2015, 12:25pm

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

techntrails · February 4, 2015, 1:18pm

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.

walt · February 4, 2015, 1:39pm

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

techntrails · February 4, 2015, 2:47pm

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:

Index.html

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

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

</body>

The top of my MainCtrl

  $scope.showNav = false;

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

      GoogService.load();
      NotificationService.register();
      UtilService.isOpen().then(function(res) {

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

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

Robin · February 5, 2015, 1:41pm

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.

thebosz · March 10, 2015, 9:14pm

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?

yurinondual · March 10, 2015, 11:48pm

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

ionic1 · April 22, 2015, 3:21am

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

brylli · April 24, 2015, 1:16pm

I also think that this is an issue

malaniz · April 27, 2015, 5:04pm

HI have the same issue here… any fixes?

osi · May 1, 2015, 9:54pm

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.

junkorochan · May 5, 2015, 7:38am

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

junkoro/make-9patched-splash-ionic - https://github.com/junkoro/make-9patched-splash-ionic

Please try this out!

sunylyons · May 20, 2015, 3:12am

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

sunylyons · May 20, 2015, 4:04am

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.

junkorochan · May 20, 2015, 5:35am

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

platforms/android/build/intermediates/res/armv7/debug

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…

sunylyons · May 20, 2015, 2:39pm

Thanks. The issue I was noticing turned out to be a conflict of some sort with https://github.com/apache/cordova-plugin-splashscreen 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