I'm building a iOS and Android app (with ionic framework and Adobe Phonegap Build), but can't seem to get the splash screens showing up in Android here's my config.xml:
<gap:plugin name="org.apache.cordova.splashscreen" version="0.3.4" />
<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" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="icons/splashscreen/port-ldpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="icons/splashscreen/port-mdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="icons/splashscreen/port-hdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="icons/splashscreen/port-xhdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xxhdpi" src="icons/splashscreen/port-xxhdpi.png" />
The splash screen images are sizes like this:
port-ldpi.png = 240x320
port-mdpi.png = 320x480
port-hdpi.png = 480x800
port-xhdpi.png = 720x1280
port-xxhdpi.png = 1280x1920
The path to the images are correct. On iOS it working without any problems.
Any suggestions how to solve this problem? :S
You don't have the default splash tag which is
<gap:splash src="splash.png" />
It's in the documentation: http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens
You can look at my example demos.
https://github.com/jessemonroy650/Phonegap-Splashscreen-Test
It works for both Android and iOS. Implemenation notes are included.
NOTE: AndroidManifest.xml is NOT needed.
Also the splash image MUST be the correct size or at least the correct size ratio so it can stretch it.
Example:320x240 will work for 640x480, etc. Otherwise, you need to use a 9-patch image. I have not tested 9-patch.
Related
I'm using Cordova to build an app running on both iOS and Android.
Cordova version 7.0.1 - Platform Android version 6.2.3
I have a problem on Android about the splashscreen size. I have 6 different PNG size for each density as you can see in the config.xml below.
<!-- ANDROID SPLASH PREF -->
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="4000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<!-- ANDROID SPLASH PNG -->
<splash src="www/splashs/android/splash-land-hdpi.png" density="hdpi" />
<splash src="www/splashs/android/splash-land-ldpi.png" density="ldpi" />
<splash src="www/splashs/android/splash-land-mdpi.png" density="mdpi" />
<splash src="www/splashs/android/splash-land-xhdpi.png" density="xhdpi" />
<splash src="www/splashs/android/splash-land-xxhdpi.png" density="xxhdpi" />
<splash src="www/splashs/android/splash-land-xxxhdpi.png" density="xxxhdpi" />
Well, when I launch the app on my Lenovo tablet, which has a 800x1280 resolution, it display the wrong PNG file. The app decide to show the LDPI one, with a resolution of 400x240.
The result is of course really bad and very pixelated, I can't release my app like that.
I tried on a smartphone Galaxy J, everything works fine, the good PNG size is selected during the splashscreen.
I tried to remove all PNG file except the higher one (1920x1280 xxxhdpi). The app display it but the result is even worst. The image is really even more pixelated... really weird problem.
I didn't find any solution yet on the web. Any ideas?
And by "custom splash graphic" I just mean my own image. No matter what I try I it always just shows the little phonegap robot. Note that I'm only concerned with Android here. Here's what I've done:
installed the plugin via command line
ran my original image through this converter to get it as a collection of the appropriate Android sizes
replaced the files in these path with my own (yes, I renamed my own files to these names):
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/ldpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/mdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/hdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/xhdpi.png" />
replaced the files in these paths to my own even though it shouldn't have anything to do with splash image:
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/xhdpi.png" />
At this point I honestly don't even see where the default phonegap robot image file could be hiding in my project or what in config.xml is pointing to it.
Have you added the default splash screen location like so
<preference name="SplashScreen" value="screen"/>
also as per the new updated docs seen here http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens
the gap:splash is be deprecated and you are supposed to use just the splash tag
I have found that if you add the plugin using npm in phonegap buil it does not work so the following will not work
<plugin name="cordova-plugin-splashscreen" source="npm"/>
and so you have add the plugin the old way so the followin works
<plugin name="br.com.paveisitemas.splashscreen" spec="2.1.1" source="pgb" />
Please note that in the past splash screens were specified with the gap:splash element and the platform specified with gap:platform. This is still supported but we recommend moving to splash and platform.
In my case what I was seeing was, in fact, not the splash but rather the background image set in index.css. So while the app shows it loads the robot image... which is not the splash.
I'm trying to add custom icon and splashscreen for Android by following this guide but nothing works.
My steps:
Add icons
Change config.xml so the icons are there
Do phonegap build android
Copy apk and install in my android device
The icon is the same and no surprise I get no splashscreen, I can even know that there will be no effect before I install since \platforms\android\bin\res\drawable contains default icon instead of mine.
config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.coolapz.app"
versionCode="110"
version = "1.1">
<name>app name</name>
<description>app desc</description>
<icon src="icon.png" />
<gap:splash src="splash.png" />
<!-- ALSO TRIED THIS, DIDN'T DO ANYTHING -->
<!--
<icon src="icon.png" gap:platform="android" gap:density="ldpi" />
<icon src="icon.png" gap:platform="android" gap:density="mdpi" />
<icon src="icon.png" gap:platform="android" gap:density="hdpi" />
<icon src="icon.png" gap:platform="android" gap:density="xhdpi" />
-->
</widget>
Put all splash screen and icon under res/hdpi and other...
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html",5000);
And it works, but like this, result is:
Splash screen for 5 seconds
Black screen until the app is ready
index.html when app is ready
I'm playing around with trying to set a splash screen for phonegap using the config.xml to point to a png in my www folder.
Is this possible and if sure am I missing a step out? Do I need to put any javascript in my index.html to use this method.
I'm using phonegap build so I can't work out another way of easily putting on spalshscreen
Thanks
Sample config.xml
<gap:splash src="assets/www/img/Now_Loading.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="assets/www/img/Now_Loading.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="assets/www/img/Now_Loading.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="assets/www/img/Now_Loading.png" gap:platform="android" gap:density="xhdpi" />
By www folder do you mean your root folder? The same location where you index.html is located? If so, you can do the following:
<gap:splash src="ldpi.png" gap:platform="android" gap:density="ldpi" />
I would really recommend creating a folder for your splash screen images and doing something like so:
<gap:splash src="splashScreensFolder/ldpi.png" gap:platform="android" gap:density="ldpi" />
where your folder structure would look like:
-index.html
-splashScreensFolder
--ldpi.png
Additionally, you are going to want to create different resolution and size splashscreen's for the different resolutions you are specifying. Or, you can just use the below to reference one file for all resolutions/sizes:
<gap:splash src="splash.png" />
In this case though, the png file will need to be located in the root of your project (same location as your index.html.
I'm building a Sencha Touch + PhoneGap app for android and iOS (iPhone & iPad). I'm having major issues with PhoneGap choosing the correct icons and splash screens to display for the correct devices.
For example:
Android loads the correct main icon, however, it will load a splash screen that is very pixelated (I believe its loading one for the 320x460 iphone screen.)
iOS on both iPhone and iPad are showing the android icon and not loading the correct splash screens.
I'm really stuck on this and would appreciate any input on the matter, thanks in advance!
My code for config.xml is below:
<icon src="res/icons/icon.png" />
<icon src="res/icons/icon-blackberry-92.png" default="true" />
<icon src="res/icons/icon-blackberry-92-hover.png" hover="true" />
<icon src="res/icons/icon.png" width="57" height="57"/>
<icon src="res/icons/icon-72.png" width="72" height="72"/>
<icon src="res/icons/icon#2x.png" width="114" height="114"/>
<icon src="res/icons/icon-android-36.png" width="36" height="36"/>
<icon src="res/icons/icon-android-48.png" width="48" height="48"/>
<icon src="res/icons/icon-android-72.png" width="72" height="72"/>
<gap:splash src="res/splash/Default#2x.png" width="640" height="960" />
<gap:splash src="res/splash/Default.png" width="320" height="460" />
<gap:splash src="res/splash/splash-screen-ios-ipad.png" width="786" height="1024" />
<gap:splash src="res/splash/splash-screen-400x800.png" width="400" height="800" />
<gap:splash src="res/splash/Default.png" />
You need to specify the launch image file (UILaunchImageFile) property in your application's info.plist:
For example, if you set the value for the key UILaunchImageFile~ipad to iPad, your file names should be iPad-Portrait.png and iPad-Landscape.png. You could similarly change it for the iPhone, or use the default (Default.png) for iPhone.
This is defined in Information Property List Files.
In the newest Phonegap Xcode build, you can drag and drop the images you want to use as splashscreens or icons into the GUI area in XCode under Targets/Summary. That should allow you to add those in directly. What version of Xcode are you using ?? I can add in more specific details if I know what version it is.