Iconos publicacion - CGastrell/phonegap GitHub Wiki
Si bien esta parte ya corresponde a un diseñador grafico, nosotros tenemos que poder instruir a la aplicacion para usar los iconos que tengamos.
Como todos saben no tengo una Mac, pero el proceso es el mismo en ambos casos. Vamos a ver como configurar los tag icon en el archivo config.xml para que utilice los nuestros.
Iconos
Prepare un set de iconos. En cada uno agregue al nombre la dimension en pixels que tiene, como son cuadrados solo agregue un numero, ej: icon-48-mdpi.png es un icono de 48x48 pixels.
Como soy un genio hice un icono blanco con fondo transparente, asi que no se va a apreciar bien en esta pagina.
Descarguen cada icono y guardenlos en el directorio www/res/icon/android/
ldpi - 36x36
mdpi - 48x48
hdpi - 72x72
xhdpi - 96x96
xxhdpi - 144x144
config.xml
En nuestro config tenemos una seccion para los iconos que se ve asi:
<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" />
<icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />
<icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />
<icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />
Esta seccion, para nosotros, esta mal. Esta seccion esta configurada para que funcione unicamente con el servicio de Adobe PhonegapBuild.
Para corregir esta seccion vamos a cambiar solo los iconos de Android, el resto los dejaremos igual:
- la propiedad
gap:platformpasa a ser soloplatform - la propiedad
gap:qualifieres una referencia vieja y propietaria de Adobe, hay que cambiarla pordensity
Finalmente la seccion de iconos de Android queda asi:
<icon src="icon.png" />
<icon platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon platform="android" density="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon platform="android" density="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon platform="android" density="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
<icon platform="android" density="xxhdpi" src="www/res/icon/android/icon-144-xxhdpi.png" />
Noten que dejamos el tag icon que no tiene propiedades de plataforma ni densidad, este es un icono que Phonegap usara por defecto si no encuentra algun otro o si ninguno coincide con las necesidades del dispositivo.
Antes de probar la aplicacion vamos a hacer un paso extra, volver a copiar los archivos del proyecto:
phonegap prepare android
phonegap run android
El compilador guarda en un cache todos los archivos e intenta no copiarlos nuevamente. Lamentablemente no es muy astuto y no se da cuenta que los cambiamos, entonces forzamos este proceso con el comando antes mencionado.
Ahora a los splashes, que tienen una vuelta de rosca mas.
Ref: