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"/>
Related
I'm trying to change the default Cordova app icon for both ios and android using config.xml, but the build is using the Cordova logo as an icon and splash screen.
I don't have the Cordova iOS platform installed because I'm using PhoneGap build.
Here's the icon tag in config.xml
<icon src="res/icon.png" />
I put the icon inside www/res/icon.png
Is this a correct path?
The path should point to res/android/<DENSITY_TYPE>
Here is example from DOCs:
<platform name="android">
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
</platform>
The res folder should lay under your root project, not under www
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" />
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 Phonegap application which I want to publish on as many platforms as possible.
I've found some documentation on icons and splash screens on the phonegap site.
https://build.phonegap.com/docs/config-xml
http://wiki.phonegap.com/w/page/36905973/Icons%20and%20Splash%20Screens
But can't find a complete list for someone who wants to publish for all devices on IOS(including iPad3), Android, BlackBerry, and Windows phone.
Can someone post a complete list of icon sizes and splash screen dimensions for all devices on all Phonegap supported OSs?
EDIT:
Also include any data that must be attached in the config.xml or specific names.
e.g. gap:platform="ios"
https://github.com/phonegap/phonegap/wiki/App-Icon-Sizes
I found this link with some sizes
Hi Please find the size on Iphone6 or more
<icon src="res/icons/ios/Icon-83.5#2x.png" width="167" height="167" />
iPad and iPad mini
<icon src="res/icons/ios/Icon-76#2x.png" width="152" height="152" />
iPhone 6s, iPhone 6, iPhone 5, iPhone 4s
<icon src="res/icons/ios/Icon-60#2x.png" width="120" height="120" />
iOS 6
<icon src="res/icons/ios/icon#2x.png" width="114" height="114" />
iPad 2 and iPad mini
<icon src="res/icons/ios/Icon-76.png" width="76" height="76" />
Spotlight search
<icon src="res/icons/ios/Icon-60.png" width="60" height="60" />
iOS6
<icon src="res/icons/ios/icon.png" width="57" height="57" />
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.