11 Replies Latest reply on Sep 1, 2016 1:00 PM by luigip73824447

    Icons + phonegap build

    luigip73824447

      Hello, somebody can help me please?

       

      I am creatin a build for Android & IOS from "build.phonegap.com". I upload a zip file with all project files, but I never cant see icons in both versions.

       

      the icons images are build with ionic resources for splash and icons, here is some captures and info:

       

      - this is a capture of the content of my zip I've upload in the phonegap build.

      captura A.jpg

      - And this is the structure of my res folder

       

      captura B.jpg

      - and  fragment of my config.xml file

       

        <platform name="android">

          <icon src="res/icon/android/drawable-ldpi-icon.png" qualifier="ldpi"/>

          <icon src="res/icon/android/drawable-mdpi-icon.png" qualifier="mdpi"/>

          <icon src="res/icon/android/drawable-hdpi-icon.png" qualifier="hdpi"/>

          <icon src="res/icon/android/drawable-xhdpi-icon.png" qualifier="xhdpi"/>

          <icon src="res/icon/android/drawable-xxhdpi-icon.png" qualifier="xxhdpi"/>

          <icon src="res/icon/android/drawable-xxxhdpi-icon.png" qualifier="xxxhdpi"/>

          <splash src="res/screen/android/drawable-land-ldpi-screen.png" qualifier="land-ldpi"/>

          <splash src="res/screen/android/drawable-land-mdpi-screen.png" qualifier="land-mdpi"/>

          <splash src="res/screen/android/drawable-land-hdpi-screen.png" qualifier="land-hdpi"/>

          <splash src="res/screen/android/drawable-land-xhdpi-screen.png" qualifier="land-xhdpi"/>

          <splash src="res/screen/android/drawable-land-xxhdpi-screen.png" qualifier="land-xxhdpi"/>

          <splash src="res/screen/android/drawable-land-xxxhdpi-screen.png" qualifier="land-xxxhdpi"/>

          <splash src="res/screen/android/drawable-port-ldpi-screen.png" qualifier="port-ldpi"/>

          <splash src="res/screen/android/drawable-port-mdpi-screen.png" qualifier="port-mdpi"/>

          <splash src="res/screen/android/drawable-port-hdpi-screen.png" qualifier="port-hdpi"/>

          <splash src="res/screen/android/drawable-port-xhdpi-screen.png" qualifier="port-xhdpi"/>

          <splash src="res/screen/android/drawable-port-xxhdpi-screen.png" qualifier="port-xxhdpi"/>

          <splash src="res/screen/android/drawable-port-xxxhdpi-screen.png" qualifier="port-xxxhdpi"/>

        </platform>

        <platform name="ios">

          <icon src="res/icon/ios/icon.png" width="57" height="57"/>

          <icon src="res/icon/ios/icon@2x.png" width="114" height="114"/>

          <icon src="res/icon/ios/icon-40.png" width="40" height="40"/>

          <icon src="res/icon/ios/icon-40@2x.png" width="80" height="80"/>

          <icon src="res/icon/ios/icon-50.png" width="50" height="50"/>

          <icon src="res/icon/ios/icon-50@2x.png" width="100" height="100"/>

          <icon src="res/icon/ios/icon-60.png" width="60" height="60"/>

          <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120"/>

          <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180"/>

          <icon src="res/icon/ios/icon-72.png" width="72" height="72"/>

          <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144"/>

          <icon src="res/icon/ios/icon-76.png" width="76" height="76"/>

          <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152"/>

          <icon src="res/icon/ios/icon-small.png" width="29" height="29"/>

          <icon src="res/icon/ios/icon-small@2x.png" width="58" height="58"/>

          <icon src="res/icon/ios/icon-small@3x.png" width="87" height="87"/>

          <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>

          <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>

          <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>

          <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>

          <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>

          <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>

          <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>

          <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>

          <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>

          <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>

        </platform>

       

      thanks for your answers

        • 1. Re: Icons + phonegap build
          NeroWolf

          I've only had to use a couple of elements to get Android and iOS icons to pop-up both on PGB's app page and on the device and I remember something strange with using the '@' symbol in the path - but that's probably just me thinking its strange to use symbols in the path.

           

           

          Try using this:

           

              <platform name="ios">

                  <icon height="57" src="res/icon/ios/icon.57.iOS.png" width="57" />                             //these are the main iOS sizes

                  <icon height="72" src="res/icon/ios/icon.72.iOS.png" width="72" />

                  <icon height="114" src="res/icon/ios/icon.114.iOS.png" width="114" />

                  <icon height="120" src="res/icon/ios/icon.120.iOS.png" width="120" />

                  <icon height="144" src="res/icon/ios/icon.144.iOS.png" width="144" />

              </platform>

              <platform name="android">

                  <icon src="res/icon/icon.png" />                                                                                    //Only need one for Android

              </platform>

           

           

          I also use cordova-plugin-splashscreen so instead of having all those splash elements I just have

             

              <preference name="SplashScreen" value="splash.png" />

              <preference name="SplashScreenDelay" value="2000" />

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

          • 2. Re: Icons + phonegap build
            radedesign

            Hi all,

             

            I have a similar situation. My Splash screen doesn't show right on Android. It actually shows up when the app is loading but it looks skewed, it doesn't look right. It seems like it is not pulling the right image for my phone screen. Below is the fragment of my config page. Any ideas?

             

            <content src="index.html"/>

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

              <preference name="android-minSdkVersion" value="14"/>

              <preference name="show-splash-screen-spinner" value="true" />

            <preference name="auto-hide-splash-screen" value="true" />

            <preference name="SplashScreen" value="screen" />

            <preference name="SplashScreenDelay" value="1000" />

              <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1"/>

              <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1"/>

              <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0"/>

              <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2"/>

              <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1"/>

              <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1"/>

              <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0"/>

              <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2"/>

              <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0"/>

              <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1"/>

              <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0"/>

              <!--<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0"/>-->

              <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3"/>

              <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0"/>

              <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0"/>

              <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0"/>

              <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1"/>

              <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2"/>

              <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0"/>

              <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>

              <icon src="icon.png"/>

              <splash src="splash.png" />

              <platform name="android">

                <icon src="res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>

                <icon src="res/icon/android/drawable-mdpi-icon.png" density="mdpi"/>

                <icon src="res/icon/android/drawable-hdpi-icon.png" density="hdpi"/>

                <icon src="res/icon/android/drawable-xhdpi-icon.png" density="xhdpi"/>

                <icon src="res/icon/android/drawable-xxhdpi-icon.png" density="xxhdpi"/>

                <icon src="res/icon/android/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>

                <splash src="res/screen/android/drawable-land-ldpi-screen.png" density="land-ldpi"/>

                <splash src="res/screen/android/drawable-land-mdpi-screen.png" density="land-mdpi"/>

                <splash src="res/screen/android/drawable-land-hdpi-screen.png" density="land-hdpi"/>

                <splash src="res/screen/android/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>

                <splash src="res/screen/android/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>

                <splash src="res/screen/android/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>

                <splash src="res/screen/android/drawable-port-ldpi-screen.png" density="port-ldpi"/>

                <splash src="res/screen/android/drawable-port-mdpi-screen.png" density="port-mdpi"/>

                <splash src="res/screen/android/drawable-port-hdpi-screen.png" density="port-hdpi"/>

                <splash src="res/screen/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>

                <splash src="res/screen/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>

                <splash src="res/screen/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>

              </platform>

              <platform name="ios">

                <icon src="res/icon/ios/icon.png" platform="ios" width="57" height="57"/>

                <icon src="res/icon/ios/icon@2x.png" platform="ios" width="114" height="114"/>

                <icon src="res/icon/ios/icon-40.png" platform="ios" width="40" height="40"/>

                <icon src="res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80"/>

                <icon src="res/icon/ios/icon-50.png" platform="ios" width="50" height="50"/>

                <icon src="res/icon/ios/icon-50@2x.png" platform="ios" width="100" height="100"/>

                <icon src="res/icon/ios/icon-60.png" platform="ios" width="60" height="60"/>

                <icon src="res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120"/>

                <icon src="res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180"/>

                <icon src="res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/>

                <icon src="res/icon/ios/icon-72@2x.png" platform="ios" width="144" height="144"/>

                <icon src="res/icon/ios/icon-76.png" platform="ios" width="76" height="76"/>

                <icon src="res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152"/>

                <icon src="res/icon/ios/icon-small.png" platform="ios" width="29" height="29"/>

                <icon src="res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58"/>

                <icon src="res/icon/ios/icon-small@3x.png" platform="ios" width="87" height="87"/>

                <splash src="res/screen/ios/Default-568h@2x~iphone.png" platform="ios" width="640" height="1136"/>

                <splash src="res/screen/ios/Default-667h.png" platform="ios" width="750" height="1334"/>

                <splash src="res/screen/ios/Default-736h.png" platform="ios" width="1242" height="2208"/>

                <splash src="res/screen/ios/Default-Landscape-736h.png" platform="ios" width="2208" height="1242"/>

                <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536"/>

                <splash src="res/screen/ios/Default-Landscape~ipad.png" platform="ios" width="1024" height="768"/>

                <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048"/>

                <splash src="res/screen/ios/Default-Portrait~ipad.png" platform="ios" width="768" height="1024"/>

                <splash src="res/screen/ios/Default@2x~iphone.png" platform="ios" width="640" height="960"/>

                <splash src="res/screen/ios/Default~iphone.png" platform="ios" width="320" height="480"/>

              </platform>

              <platform name="wp8">

                <icon src="res/icon/wp8/ApplicationIcon.png" platform="wp8" width="99" height="99"/>

                <icon src="res/icon/wp8/Background.png" platform="wp8" width="159" height="159"/>

                <splash src="res/screen/wp8/screen-portrait.jpg" platform="wp8" width="768" height="1280"/>

              </platform>

              <platform name="windows">

                <icon src="res/icon/windows/Square150x150Logo.scale-100.png" platform="windows" width="150" height="150"/>

                <icon src="res/icon/windows/Square30x30Logo.scale-100.png" platform="windows" width="30" height="30"/>

                <icon src="res/icon/windows/StoreLogo.scale-100.png" platform="windows" width="50" height="50"/>

                <splash src="res/screen/windows/SplashScreen.scale-100.png" platform="windows" width="620" height="300"/>

                <icon src="res/icon/windows/StoreLogo.scale-240.png" platform="windows" width="120" height="120"/>

                <icon src="res/icon/windows/Square44x44Logo.scale-100.png" platform="windows" width="44" height="44"/>

                <icon src="res/icon/windows/Square44x44Logo.scale-240.png" platform="windows" width="106" height="106"/>

                <icon src="res/icon/windows/Square70x70Logo.scale-100.png" platform="windows" width="70" height="70"/>

                <icon src="res/icon/windows/Square71x71Logo.scale-100.png" platform="windows" width="71" height="71"/>

                <icon src="res/icon/windows/Square71x71Logo.scale-240.png" platform="windows" width="170" height="170"/>

                <icon src="res/icon/windows/Square150x150Logo.scale-240.png" platform="windows" width="360" height="360"/>

                <icon src="res/icon/windows/Square310x310Logo.scale-100.png" platform="windows" width="310" height="310"/>

                <icon src="res/icon/windows/Wide310x150Logo.scale-100.png" platform="windows" width="310" height="150"/>

                <icon src="res/icon/windows/Wide310x150Logo.scale-240.png" platform="windows" width="744" height="360"/>

                <splash src="res/screen/windows/SplashScreenPhone.scale-240.png" platform="windows" width="1152" height="1920"/>

              </platform>

            • 3. Re: Icons + phonegap build
              NeroWolf Level 1

              Possible work-around, I haven't tried using separate images per display and just use a single image

               

              Use a single image large enough for all screens and scale down

               

              <preference name="SplashScreen" value="splash.png" />Path to splash screen
              <preference name="SplashScreenDelay" value="2000" />How long it displays
              <preference name="SplashMaintainAspectRatio" value="false" />Keep the image's aspect ratio, true should prevent skewing
              • 4. Re: Icons + phonegap build
                VectorP Level 4

                You are using the 'density' attribute. Should be the 'qualifier' attribute.

                • 5. Re: Icons + phonegap build
                  NeroWolf Level 1

                  If its not supposed to be density, the README on github needs to be updatedhttps://github.com/apache/cordova-plugin-splashscreen

                  GitHub - apache/cordova-plugin-splashscreen: Mirror of Apache Cordova Plugin splashscreen

                   

                  It shows to use

                  <platform name="android">

                     <!-- you can use any density that exists in the Android project -->

                    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>

                    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>

                    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>

                    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

                   

                    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>

                    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>

                    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>

                    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>

                  </platform>

                  • 6. Re: Icons + phonegap build
                    radedesign Level 1

                    Thanks VectorP, changing it to qualifier solved the problem

                    • 7. Re: Icons + phonegap build
                      luigip73824447 Level 1

                      I tryed all of your comments but cant see icons and splash in both versions.

                       

                      can someone show me a zip with structure to use in phonegap build for Android & IOS compilation?

                       

                      thanks!

                      • 8. Re: Icons + phonegap build
                        VectorP Level 4

                        Sounds a bit like a strange request, because: why would someone else's structure be suitable for your desired structure, directory layout and features?

                        Is your zip file available online, somewhere? If so, please post its url. I'm sure someone at this forum will have a look and be able to point you in the right direction.

                        • 9. Re: Icons + phonegap build
                          luigip73824447 Level 1

                          yes sure, i make a demo with same config as my project

                           

                          https://dl.dropboxusercontent.com/u/91017223/www.zip

                          • 10. Re: Icons + phonegap build
                            VectorP Level 4

                            In the paths, you're using a backslash ("\"). Should be slash ("/").

                             

                            BTW: you should remove the deprecated

                            <feature name="StatusBar">

                                <param name="ios-package" value="CDVStatusBar" onload="true"/>

                              </feature>

                            1 person found this helpful
                            • 11. Re: Icons + phonegap build
                              luigip73824447 Level 1

                              OMG! the icons work now in both versions but not the splash.

                               

                              <preference name="SplashScreen" value="resources/splash.png"/>

                               

                              I tryed adding this but nothing