Apache Cordova
  1. Apache Cordova
  2. CB-1263

Android SplashScreen: landscape + portrait

    Details

    • Type: Improvement Improvement
    • Status: Resolved
    • Priority: Minor Minor
    • Resolution: Not A Problem
    • Affects Version/s: 2.0.0
    • Fix Version/s: None
    • Component/s: Android
    • Labels:

      Description

      When you start your application helding your device in landscape mode the splash screen image appears stretched.

      Would be nice to be able to set two images to be used as splash screen for portrait and landscape mode. Example:
      super.setIntegerProperty("splashscreen-landscape", R.drawable.splash_l);
      super.setIntegerProperty("splashscreen-portrait", R.drawable.splash_p);
      super.loadUrl("file:///android_asset/www/index.html", 5000);

      Just like you can do in iOS Xcode.

      BTW: got screenshot instruction from http://simonmacdonald.blogspot.it/2012/04/phonegap-android-splashscreen-just-got.html but I couldn't find same information on official phonegap/cordova documentation.

      1. splashscreenType-2.2.0.patch
        4 kB
        Fabrizio Bottino
      2. splashscreenType.patch
        4 kB
        Fabrizio Bottino
      3. splash_p.png
        122 kB
        Fabrizio Bottino
      4. splash_l.png
        187 kB
        Fabrizio Bottino

        Activity

        Fabrizio Bottino created issue -
        Hide
        Simon MacDonald added a comment -

        Sorry, we won't be fixing this problem. The proper way to support portrait and landscape for an Android splash screen is to use a 9-patch image. Here are the instructions from Android developer site:

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

        Show
        Simon MacDonald added a comment - Sorry, we won't be fixing this problem. The proper way to support portrait and landscape for an Android splash screen is to use a 9-patch image. Here are the instructions from Android developer site: https://developer.android.com/tools/help/draw9patch.html
        Simon MacDonald made changes -
        Field Original Value New Value
        Status Open [ 1 ] Resolved [ 5 ]
        Assignee Joe Bowser [ bowserj ] Simon MacDonald [ macdonst ]
        Resolution Won't Fix [ 2 ]
        Fabrizio Bottino made changes -
        Attachment splash_l.png [ 12541584 ]
        Attachment splash_p.png [ 12541585 ]
        Fabrizio Bottino made changes -
        Comment [ I have attached example images.
        Let's forgive about they gray gradient, and think about a simple logo on white background: I need logo to not stretch or at least to scale keeping proportions (still ugly because of pixelation, but better than pure stretch).
        I cannot find a way with 9 patch images to keep the CENTER part unaltered.

        In iOS I simply put those two images as landscape and portrait splash screens and everything works perfectly!
        I understand there could be a lot of work to implement it, but 9 patch images is simply not the universal answer. ]
        Hide
        Fabrizio Bottino added a comment -

        I have attached example images.
        Let's forgive about they gray gradient, and think about a simple logo on white background: I need logo to not stretch or at least to scale keeping proportions (still ugly because of pixelation, but better than pure stretch).
        I cannot find a way with 9 patch images to keep the CENTER part unaltered.

        In iOS I simply put those two images as landscape and portrait splash screens and everything works perfectly!
        I understand there could be a lot of work to implement it, but 9 patch images is simply not the universal answer.

        Show
        Fabrizio Bottino added a comment - I have attached example images. Let's forgive about they gray gradient, and think about a simple logo on white background: I need logo to not stretch or at least to scale keeping proportions (still ugly because of pixelation, but better than pure stretch). I cannot find a way with 9 patch images to keep the CENTER part unaltered. In iOS I simply put those two images as landscape and portrait splash screens and everything works perfectly! I understand there could be a lot of work to implement it, but 9 patch images is simply not the universal answer.
        Fabrizio Bottino made changes -
        Resolution Won't Fix [ 2 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Simon MacDonald added a comment -

        @Fabrizio Bottino

        Yes, and that is exactly what a 9-patch is as you can specify a non-stretchable area. Typically the center where your logo would be.

        https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

        Did you really think I would steer you wrong?

        Show
        Simon MacDonald added a comment - @Fabrizio Bottino Yes, and that is exactly what a 9-patch is as you can specify a non-stretchable area. Typically the center where your logo would be. https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch Did you really think I would steer you wrong?
        Simon MacDonald made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Won't Fix [ 2 ]
        Hide
        Fabrizio Bottino added a comment -

        Silly me, I did try a lot with 9patch images but I didn't try to not mark center area pixel.
        Now I marked only corner pixel (white background) and it works.
        Still there are some issues because the image can't be resized so in landscape there is far more white space around logo than in portrait.

        I am doing a small patch do DroidGap class to allow the use of background image as logo image resized and centered with ImageView ontop of LinearLayout.
        Can it be useful to post here?

        Show
        Fabrizio Bottino added a comment - Silly me, I did try a lot with 9patch images but I didn't try to not mark center area pixel. Now I marked only corner pixel (white background) and it works. Still there are some issues because the image can't be resized so in landscape there is far more white space around logo than in portrait. I am doing a small patch do DroidGap class to allow the use of background image as logo image resized and centered with ImageView ontop of LinearLayout. Can it be useful to post here?
        Hide
        Simon MacDonald added a comment -

        @Fabrizio Bottino

        Sure, I'll take a look at it.

        Show
        Simon MacDonald added a comment - @Fabrizio Bottino Sure, I'll take a look at it.
        Hide
        Fabrizio Bottino added a comment -

        See attached patch.

        class affected:
        DroidGap

        new parameters:
        splashscreenType
        splashscreenResize

        example new code:
        super.setIntegerProperty("backgroundColor", Color.WHITE);
        super.setIntegerProperty("splashscreenType", DroidGap.SPLASHSCREEN_CENTERED);
        super.setDoubleProperty("splashscreenResize", 0.9);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///android_asset/www/index.html", 15000);

        How it works:
        it takes splashscreen defined in usual splashscreen property and checks for splashscreenType. Default is SPLASHSCREEN_FULLSCREEN which takes classic behaviour (this means: patch is backward compatible)
        If splashscreenType equals SPLASHSCREEN_CENTERED then it adds a new ImageView on top of splashDialog and resizes it to fit it by splashscreenResize %.
        Background color is untouched from previous code, so you have to set property backgroundColor to have a background different from black.
        On device rotation during splashscreen it recalculates resize % with new width and height to always achieve same proportion on screen.

        Show
        Fabrizio Bottino added a comment - See attached patch. class affected: DroidGap new parameters: splashscreenType splashscreenResize example new code: super.setIntegerProperty("backgroundColor", Color.WHITE); super.setIntegerProperty("splashscreenType", DroidGap.SPLASHSCREEN_CENTERED); super.setDoubleProperty("splashscreenResize", 0.9); super.setIntegerProperty("splashscreen", R.drawable.splash); super.loadUrl("file:///android_asset/www/index.html", 15000); How it works: it takes splashscreen defined in usual splashscreen property and checks for splashscreenType . Default is SPLASHSCREEN_FULLSCREEN which takes classic behaviour (this means: patch is backward compatible) If splashscreenType equals SPLASHSCREEN_CENTERED then it adds a new ImageView on top of splashDialog and resizes it to fit it by splashscreenResize %. Background color is untouched from previous code, so you have to set property backgroundColor to have a background different from black. On device rotation during splashscreen it recalculates resize % with new width and height to always achieve same proportion on screen.
        Fabrizio Bottino made changes -
        Attachment splashscreenType.patch [ 12541670 ]
        Hide
        Fabrizio Bottino added a comment -

        I have written a patch and posted it here.
        Even opened a pull request from GIT:
        https://github.com/apache/incubator-cordova-android/pull/44

        Can someone look at it, please?

        Show
        Fabrizio Bottino added a comment - I have written a patch and posted it here. Even opened a pull request from GIT: https://github.com/apache/incubator-cordova-android/pull/44 Can someone look at it, please?
        Fabrizio Bottino made changes -
        Resolution Won't Fix [ 2 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Joe Bowser added a comment -

        @Fabrizio: Why does your patch say it was authored by me? Can you clean this up and send the patch again?

        Show
        Joe Bowser added a comment - @Fabrizio: Why does your patch say it was authored by me? Can you clean this up and send the patch again?
        Hide
        Fabrizio Bottino added a comment -

        Patched again against master and sent pull request. This time should be clean.

        I have added 2.2.0 patch file here which is the patch I use on my production project against 2.2.0 release

        Show
        Fabrizio Bottino added a comment - Patched again against master and sent pull request. This time should be clean. I have added 2.2.0 patch file here which is the patch I use on my production project against 2.2.0 release
        Fabrizio Bottino made changes -
        Attachment splashscreenType-2.2.0.patch [ 12552271 ]
        Hide
        Fabrizio Bottino added a comment -

        Any news on this?

        Show
        Fabrizio Bottino added a comment - Any news on this?
        Joe Bowser made changes -
        Assignee Simon MacDonald [ macdonst ] Joe Bowser [ bowserj ]
        Hide
        Joe Bowser added a comment -

        This is counter to how Android handles multiple assets. You can have a landscape splashscreen in a drawable-land folder (or drawable-land-xhdpi), and a portrait splashscreen in drawable-port folder (or drawable-port-xhdpi). I still recommend that a 9-patch image be used.

        Show
        Joe Bowser added a comment - This is counter to how Android handles multiple assets. You can have a landscape splashscreen in a drawable-land folder (or drawable-land-xhdpi), and a portrait splashscreen in drawable-port folder (or drawable-port-xhdpi). I still recommend that a 9-patch image be used.
        Joe Bowser made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Not A Problem [ 8 ]
        Transition Time In Source Status Execution Times Last Executer Last Execution Date
        Open Open Resolved Resolved
        39m 36s 1 Simon MacDonald 20/Aug/12 11:59
        Resolved Resolved Reopened Reopened
        10d 57m 2 Fabrizio Bottino 30/Aug/12 13:20
        Reopened Reopened Resolved Resolved
        230d 10h 23m 2 Joe Bowser 17/Apr/13 23:21

          People

          • Assignee:
            Joe Bowser
            Reporter:
            Fabrizio Bottino
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development