I created custom icons and splash screens for my phonegap android application. I created the phonegap application by using 'phonegap create' and I replaced all the stock icons and splash screens with custom made icons and splash screens.
Below is my folder structure of the images and splash after executing 'phonegap create' command
-myproject
--www
---icon.png
---res
----icon
-----android
------icon-36-ldpi.png
------icon-48-mdpi.png
------icon-72-hdpi.png
------icon-96-xhdpi.png
----screen
-----android
------screen-hdpi-landscape.png
------screen-hdpi-portrait.png
------screen-ldpi-landscape.png
------screen-ldpi-portrait.png
------screen-mdpi-landscape.png
------screen-mdpi-portrait.png
------screen-xhdpi-landscape.png
------screen-xhdpi-portrait.png
Below is the config.xml
<icon src="www/icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
Now I execute the 'phonegap build android' I dont see all the icons and splash screens are not copied to platforms\android\res folder. I only see the stock phonegap icons and splash screens.
I dont want to manually copy the icons and splash screens for each platform. It should happen automatically while building the phonegap for a target platoform. How should I do that.
Problem solved after moving the config.xml inside www folder and removed all www/ references in config.xml.
I.e,. the image paths should be relative where the config.xml exists.
Other way (works for me) using gap:density="ldpi" without moving any file
<icon gap:platform="android" gap:qualifier="ldpi" gap:density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" gap:density="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" gap:density="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" gap:density="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
Related
I am working on an android app with phonegap. I have tried all sorts of stuff to get my icon on the app, but have been unsuccessful. The android bot icon appears on the app when installed from apk.
I have this in config.xml:
<icon density="ldpi" src="www/res/icon/android/ldpi.png" />
<icon density="mdpi" src="www/res/icon/android/mdpi.png" />
<icon density="hdpi" src="www/res/icon/android/hdpi.png" />
<icon density="xhdpi" src="www/res/icon/android/xhdpi.png" />
<icon density="xxhdpi" src="www/res/icon/android/xxhdpi.png" />
I read http://devgirl.org/2013/09/12/phonegap-icons-and-splash-screens-help/
and the steps given here are already happening.
In my /platforms/android/res/ the desired icons and screens appear in the right drawable folder.
I dont know what i am doing wrong. cant just get the icon to show up.
I am not using the phonegap desktop app
Use the same filename (ic_launcher.png is the default and most common one) for all icons, while they are in different folders, and change your icons call in the config.xml file to this:
<icon src="folder-hdpi/ic_launcher.png"
gap:platform="android"
gap:density="hdpi"/>
<icon src="folder-mdpi/ic_launcher.png"
gap:platform="android"
gap:density="mdpi"/>
<icon src="folder-xhdpi/ic_launcher.png"
gap:platform="android"
gap:density="xhdpi"/>
<icon src="folder-xxhdpi/ic_launcher.png"
gap:platform="android"
gap:density="xxhdpi"/>
<icon src="folder-xxxhdpi/ic_launcher.png"
gap:platform="android"
gap:density="xxxhdpi"/>
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've tried:
changing the file at myapp/platforms/android/res/drawable/icon.png
editing the tag in www/config.xml
minor sacrifices
thanks!
If you have correctly updated your icon files in platforms/ios/YourAppName/Resources/icons and you still can't see the change then make sure you:
Completely remove the app from your device
In Xcode go to Product > Clean and then re run your app.
You need to replace all icon files in res folder.
Once you done, just clean your eclipse project and run.
although you accepted a different answer, that did not help me so for some of you reading this please note the following:
the accepted answer will work most probably only if u build ur
app locally
u do not need to overwrite the default platform icons
... phonegap lets you overwrite everything from the config.xmlfile
you need to use something like this in you config.xml:
<icon src="icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="img/icons/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="img/icons/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="img/icons/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="img/icons/android/icon-96-xhdpi.png" />
<icon gap:platform="ios" height="57" src="img/icons/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="img/icons/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="img/icons/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="img/icons/ios/icon-72-2x.png" width="144" />
<icon gap:platform="winphone" src="img/icons/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="img/icons/windows-phone/icon-173-tile.png" />
please note that the path is img/bla-bla-bla ... it can be whatever
you want ... BUT ... that path it is relative to you www folder ...
so it will actually map to www/img/bla-bla-bla
hope this helps someone ... i found it the hard way :)
Rares
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.