cordova - plugin - engine name android spec

¿Cómo agregar el ícono de la aplicación dentro de los proyectos de Phonegap? (13)

Creé un nuevo proyecto phonegap (v 3.0.0-0.14.0) con config.xml predeterminado y luego agregué plataformas iOS y Android.

La configuración contiene todas las rutas a todos los iconos de la plataforma.

He sobrescrito los iconos predeterminados para iOS y Android, por lo que la ruta y el nombre aún coinciden con esos png.

Cuando se ejecuta en simulador, los íconos no aparecen. Lo busqué en xCode, donde me dice que la carpeta de "Recursos" para los íconos aún contiene los íconos predeterminados del fajo telefónico. Lo mismo con Android.

¿Qué estoy haciendo mal?

¿Cómo puedo agregar iconos de aplicaciones personalizadas para iOS y Android con phonegap?

Gracias

mi config.xml

Preguntas frecuentes: PANTALLA ICON / SPLASH (Cordova 5.x / 2015)

Presento mi respuesta como preguntas frecuentes generales que pueden ayudarlo a resolver muchos problemas que he encontrado al tratar con iconos / pantallas de bienvenida. Puede descubrir como yo que la documentación no siempre es clara ni está actualizada. Esto probablemente irá a la documentación de cuando esté disponible.

Primero: respondiendo la pregunta

¿Cómo puedo agregar iconos de aplicaciones personalizadas para iOS y Android con phonegap?

En su versión de Cordova, la etiqueta del icon es inútil. Ni siquiera está documentado en Cordova 3.0.0. ¡Debería usar la versión de documentación que se adapta a la cli que está utilizando y no a la última!

La etiqueta de icono no funciona para Android antes de la versión 3.5.0 de acuerdo con lo que puedo ver en las diferentes versiones de la documentación. En 3.4.0 todavía aconsejan copiar manualmente los archivos

En versiones más nuevas : su config.xml ve mejor para las versiones más nuevas de Cordova. Sin embargo, todavía hay muchas cosas que tal vez quiera saber. Si decide actualizar aquí hay algunas cosas útiles para modificar:

No necesitas la gap: espacio de nombres
Necesitas <preference name="SplashScreen" value="screen" /> para Android

Aquí hay más detalles de las preguntas que puede hacerse al tratar con los iconos y la pantalla de bienvenida:

¿Puedo usar una versión anterior de Cordova / Phonegap?

No, la función de icono / pantalla de bienvenida no estaba en las versiones anteriores de Cordova, por lo que debe usar una versión reciente. En las versiones anteriores, solo Phonegap Build manejaba los íconos / pantalla de bienvenida, por lo que construir localmente y manejar íconos solo era posible con un gancho. No conozco la versión mínima para usar esta característica, pero con 5.1.1 funciona bien tanto en Cordova / Phonegap cli. Con Cordova 3.5 no funcionó para mí.

Editar : para Android debes usar al menos 3.5.0

¿Cómo puedo depurar el proceso de compilación sobre los iconos?

El cli usa un comando CP. Si proporciona una ruta de icono no válida, mostrará un error de cp :

sebastien@sebastien-xps:cordova (dev *+$%)$ cordova run android --device cp: no such file or directory: /home/sebastien/Desktop/Stample-react/cordova/res/www/stample_splash.png

Editar : tiene que usar cordova build <platform> --verbose para obtener registros del uso del comando cp para ver dónde se copian sus iconos

Los iconos deben ir en una carpeta de acuerdo con la configuración. Para mí va en muchas subcarpetas en: platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png

Luego puede encontrar el APK y abrirlo como un archivo zip para verificar que los iconos estén presentes. Deben estar en una carpeta res/drawable* porque es una carpeta especial para Android.

¿Dónde debería poner los iconos / pantallas de bienvenida en mi proyecto?

En muchos ejemplos, encontrará que los iconos / pantallas de presentación se declaran dentro de una carpeta de res . Esta res es una carpeta especial de Android en la salida APK, pero no significa que tenga que usar una carpeta de res en su proyecto.

Puedes poner tu ícono en cualquier lugar, pero la ruta que utilices debe ser relativa a la raíz del proyecto , y no a www así que ten cuidado! Esto está documentado, pero no claramente porque todos los ejemplos están usando res y no sabes dónde está esta carpeta :(

Quiero decir, si pones el ícono en www/icon.png , debes incluir www en tu camino.

Editar Mars 2016 : después de actualizar mis versiones, ahora parece que los iconos están relacionados con la carpeta www pero la documentación no se ha modificado ( issue )

¿Funciona `<icon src="icon.png"/>` ?

¡No, no lo hace! .

En Android, parece que solía funcionar antes (cuando el atributo de densidad no era compatible todavía?) Pero ya no. Vea este número de Cordova

En iOS, parece que usar esta declaración global puede anular declaraciones más específicas, así que ten cuidado y --verbose con --verbose para asegurarte de que todo funcione como se espera.

¿Puedo usar el mismo archivo de icono / pantalla de bienvenida para todas las densidades?

Sí tu puedes. Incluso puede usar el mismo archivo tanto para el icono como para la pantalla de presentación (¡solo para probar!). He utilizado un archivo de íconos "grande" de 65kb sin ningún problema.

¿Cuál es la diferencia cuando se usa la etiqueta de la plataforma frente al atributo de la plataforma?

<icon src="icon.png" platform="android" density="ldpi" />

es lo mismo que

<platform name="android"> <icon src="www/stample_icon.png" density="ldpi" /> </platform>

¿Debo usar la brecha: espacio de nombres si uso Phonegap?

En mi experiencia, las nuevas versiones de Phonegap o Cordova son capaces de entender las declaraciones de los iconos sin utilizar ningún gap: nombres gap: xml.

Sin embargo, todavía estoy esperando una respuesta válida aquí: cordova / phonegap plugin add VS config.xml

Por lo que yo entiendo, algunas características con el gap: espacio de nombres puede estar disponible antes en PhonegapBuild, luego en Phonegap y luego ser portado a Cordova (?)

¿Se `<preference name="SplashScreen" value="screen" />` ?

Al menos para Android, sí lo es. Abrí un problema con explicaciones adicionales.

¿Importa el orden de declaración del icono?

Sí lo hace! Puede que no tenga ningún impacto en Android pero sí en iOS según mis pruebas. Esto es un comportamiento inesperado e indocumentado, así que abrí otro problema .

¿Necesito `cordova-plugin-splashscreen` ?

Sí, esto es absolutamente necesario si desea que la pantalla de inicio funcione. La documentación no está clara ( issue ) y pensemos que el complemento es necesario solo para ofrecer una API de inicio de pantalla de bienvenida.

¿Cómo puedo cambiar el tamaño de las imágenes para todos los valores de ancho / alto / densidad rápidamente?

Hay herramientas para ayudarte a hacer eso. El mejor para mí es http://makeappicon.com/ pero requiere proporcionar una dirección de correo electrónico.

Otras posibles soluciones son:

¿Me puede dar una configuración de ejemplo?

Sí. Aquí está mi verdadero config.xml

<?xml version=''1.0'' encoding=''utf-8''?> <widget id="co.x" version="0.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0"> <name>x</name> <description> x </description> <author email="[email protected]" href="https://x.co"> x </author> <content src="index.html" /> <preference name="permissions" value="none" /> <preference name="webviewbounce" value="false" /> <preference name="StatusBarOverlaysWebView" value="false" /> <preference name="StatusBarBackgroundColor" value="#0177C6" /> <preference name="detect-data-types" value="true" /> <preference name="stay-in-webview" value="false" /> <preference name="android-minSdkVersion" value="14" /> <preference name="android-targetSdkVersion" value="22" /> <preference name="phonegap-version" value="cli-5.1.1" /> <preference name="SplashScreenDelay" value="10000" /> <preference name="SplashScreen" value="screen" /> <plugin name="cordova-plugin-device" spec="1.0.1" /> <plugin name="cordova-plugin-console" spec="1.0.1" /> <plugin name="cordova-plugin-whitelist" spec="1.1.0" /> <plugin name="cordova-plugin-crosswalk-webview" spec="1.2.0" /> <plugin name="cordova-plugin-statusbar" spec="1.0.1" /> <plugin name="cordova-plugin-screen-orientation" spec="1.3.6" /> <plugin name="cordova-plugin-splashscreen" spec="2.1.0" /> <access origin="http://*" /> <access origin="https://*" /> <access launch-external="yes" origin="tel:*" /> <access launch-external="yes" origin="geo:*" /> <access launch-external="yes" origin="mailto:*" /> <access launch-external="yes" origin="sms:*" /> <access launch-external="yes" origin="market:*" /> <platform name="android"> <icon src="www/stample_icon.png" density="ldpi" /> <icon src="www/stample_icon.png" density="mdpi" /> <icon src="www/stample_icon.png" density="hdpi" /> <icon src="www/stample_icon.png" density="xhdpi" /> <icon src="www/stample_icon.png" density="xxhdpi" /> <icon src="www/stample_icon.png" density="xxxhdpi" /> <splash src="www/stample_splash.png" density="land-hdpi"/> <splash src="www/stample_splash.png" density="land-ldpi"/> <splash src="www/stample_splash.png" density="land-mdpi"/> <splash src="www/stample_splash.png" density="land-xhdpi"/> <splash src="www/stample_splash.png" density="land-xhdpi"/> <splash src="www/stample_splash.png" density="land-xhdpi"/> <splash src="www/stample_splash.png" density="port-hdpi"/> <splash src="www/stample_splash.png" density="port-ldpi"/> <splash src="www/stample_splash.png" density="port-mdpi"/> <splash src="www/stample_splash.png" density="port-xhdpi"/> <splash src="www/stample_splash.png" density="port-xxhdpi"/> <splash src="www/stample_splash.png" density="port-xxxhdpi"/> </platform> <platform name="ios"> <icon src="www/stample_icon.png" width="180" height="180" /> <icon src="www/stample_icon.png" width="60" height="60" /> <icon src="www/stample_icon.png" width="120" height="120" /> <icon src="www/stample_icon.png" width="76" height="76" /> <icon src="www/stample_icon.png" width="152" height="152" /> <icon src="www/stample_icon.png" width="40" height="40" /> <icon src="www/stample_icon.png" width="80" height="80" /> <icon src="www/stample_icon.png" width="57" height="57" /> <icon src="www/stample_icon.png" width="114" height="114" /> <icon src="www/stample_icon.png" width="72" height="72" /> <icon src="www/stample_icon.png" width="144" height="144" /> <icon src="www/stample_icon.png" width="29" height="29" /> <icon src="www/stample_icon.png" width="58" height="58" /> <icon src="www/stample_icon.png" width="50" height="50" /> <icon src="www/stample_icon.png" width="100" height="100" /> <splash src="www/stample_splash.png" width="320" height="480"/> <splash src="www/stample_splash.png" width="640" height="960"/> <splash src="www/stample_splash.png" width="768" height="1024"/> <splash src="www/stample_splash.png" width="1536" height="2048"/> <splash src="www/stample_splash.png" width="1024" height="768"/> <splash src="www/stample_splash.png" width="2048" height="1536"/> <splash src="www/stample_splash.png" width="640" height="1136"/> <splash src="www/stample_splash.png" width="750" height="1334"/> <splash src="www/stample_splash.png" width="1242" height="2208"/> <splash src="www/stample_splash.png" width="2208" height="1242"/> </platform> <allow-intent href="*" /> <engine name="browser" spec="^3.6.0" /> <engine name="android" spec="^4.0.2" /> </widget>

Una buena fuente de ejemplos son los kits de inicio. Como phonegap-start o phonegap-start iónico

A partir de Cordova 3.5.0-0.2.6, el elemento <icon /> en config.xml funciona con las siguientes advertencias:

El atributo src es una ruta relativa a la carpeta raíz de su proyecto. El rastreador de problemas sobre este tema por lo que el cambio.
El elemento <icon src="..." /> sin resolución / dpi está documentado como el icono utilizado por todas las plataformas como icono predeterminado. Sin embargo, en las versiones de Android, el ícono predeterminado solo se copia en la carpeta dibujable de Android, sin establecer resoluciones específicas. Esto hace que el icono personalizado aparezca en la carpeta /res/drawable , y el icono predeterminado de cordova con resoluciones específicas existe en las otras carpetas dentro de la apk final (es decir, /res/drawable-ldpi ). Debe agregar un elemento de icono en config.xml para cada resolución en la plataforma de Android.

Por ejemplo, si su imagen de icono está en la ruta www/res/img/icon.png relación con su proyecto raíz, estas líneas en config.xml hacen que el icono de su aplicación en Android funcione:

 <icon src="www/res/img/icon.png" />  <icon src="www/res/img/icon.png" platform="android" density="ldpi" /> <icon src="www/res/img/icon.png" platform="android" density="mdpi" /> <icon src="www/res/img/icon.png" platform="android" density="hdpi" /> <icon src="www/res/img/icon.png" platform="android" density="xhdpi" />

Con esa configuración en su lugar, puede tener un ícono de imagen única para todas las resoluciones que sobrescriban el icono predeterminado de cordova y sin hoooks personalizados. Simplemente construir con cordova build android debería hacer el truco.

Afortunadamente, hay un poco en los documentos sobre las imágenes splash, que también me ponen en el camino para obtener la ubicación correcta para las imágenes de los íconos. Entonces aquí va.

Dónde se colocan los archivos Una vez que haya construido su proyecto utilizando la interfaz de línea de comandos "cordova build ios", debe tener una estructura de archivos completa para su aplicación iOS en la carpeta platforms/ios/ .

Dentro de esa carpeta hay una carpeta con el nombre de tu aplicación. Que a su vez contiene un directorio de resources/ donde encontrará los icons/ y splashscreen/ folders.

En la carpeta de iconos encontrará cuatro archivos de iconos (para 57px y 72 px, cada uno en versión regular y @ 2x). Estos son los íconos de marcador de posición de Phonegap que has estado viendo hasta ahora.

Qué hacer

Todo lo que tiene que hacer es guardar los archivos de iconos en esta carpeta. Así que eso es:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

Lo mismo para los archivos de pantalla de presentación.

Notas

Después de colocar los archivos allí, reconstruya el proyecto usando cordova build ios Y use el comando de menú ''Limpiar producto'' de xCode. Sin esto, seguirás viendo los marcadores de posición de Phonegap.
Lo mejor es cambiar el nombre de tus archivos a iOS / Apple (es decir, [email protected], etc.) en lugar de editar los nombres en info.plist o config.xml. Al menos eso funcionó para mí.
Y, por cierto, ignore la ruta extraña y el nombre de archivo raro dado para los iconos en config.xml (es decir, <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" /> ). Simplemente dejé esas definiciones allí, y los íconos aparecieron muy bien a pesar de que mi icono de 114px se llamaba [email protected] vez de icon-57-2x.png .
No use config.xml para evitar el efecto de brillo de Apple en el ícono. En su lugar, marque la casilla en xCode (haga clic en el título del proyecto en la columna de navegación de la izquierda, seleccione su aplicación debajo del encabezado de destino y desplácese hacia abajo a la sección de iconos).

Dado que la mayoría de las respuestas aquí están dirigidas a iOS aquí hay una solución para cambiar el ícono en Android.

Para Android:

Realice cambios en <project location> / platforms / android / ant-build / res y no <project location> / platforms / android / res

Para algunas personas hacer cambios en la última ubicación puede haber funcionado, pero habiendo notado la copia de Phonegap de / android / res en / android / ant-build / res, decidí verificar allí y encontré un conjunto separado de carpetas dibujables que contenían el predeterminado icono de teléfono.

Cambiando los que finalmente funcionó.

Como estoy compilando y ejecutando localmente y no usando Adobe PhoneGap Build, tampoco funcionó cambiar los iconos en <project location> / www / res / icon / android .

En cordova 3.3.1-0.1.2 el comportamiento esperado no está funcionando bien.

http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

indica claramente que debe colocarlos en su carpeta principal de www en una carpeta llamada res e íconos que siguen una convención de nomenclatura particular en lugar de la forma especificada de config.xml original personalizable (en la que señala un archivo de su elección, que fue / es mucho mejor). debería tomar desde allí para cada plataforma y ponerlas en las plataformas /? android? / res / drawable-? dpi / icon.png pero no tiene un comportamiento correcto en este momento ... error.

así que creo que tenemos que ponerlos manualmente allí para cada plataforma. por supuesto, necesitaría quitar eso de duplicarlo en la carpeta www nuevamente. para mí tuve que reemplazar totalmente los contenidos en la carpeta principal de www porque simplemente no funcionaba ni siquiera con hello world sin hackear un redirect index.html para encontrar allí una carpeta aleatoria extraña. Poner la carpeta de res al lado de www tiene más sentido, pero lo que parece ser para mí causado por esta serie de fallas / opciones de diseño en cascada y confusas.

Estoy ejecutando phonegap 3.1.0-0.15.0, ya que iOS7 cambió la resolución a 120x120px. Acabo de agregar un archivo con esas dimensiones al proyecto y luego cambié el archivo info.plist.

Agregue un archivo de 120x120 al proyecto, haciendo clic derecho en el archivo de proyecto en Xcode y seleccionando "Agregar archivos a" [Nombre de su proyecto] "...
Vaya al archivo info.plist en Xcode "Resources / [Your Project Name] -info.plist"
En "Archivos de icono (iOS 5) / Ícono principal / Íconos, cambie " Elemento 2 " a cualquier nombre de archivo que tenga su archivo (I call the" icon-120.png "que coloqué en la carpeta Project junto a todos los demás iconos , aunque esto no debería importar)

Puede encontrar más información aquí: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

Para arreglar la pantalla de bienvenida en iOS, simplemente pegué los archivos nuevos con las mismas dimensiones y los mismos nombres de archivo, sobrescribiendo los antiguos. Solo recuerde ir a Producto> Limpiar en la barra de menú en Xcode (acceso directo Mayús + Comando + K) y ¡debería funcionar bien! :)

Si desea una forma fácil de usar para agregar íconos automáticamente al construir localmente ( cordova emulate ios , cordova run android , etc.) eche un vistazo a esta esencia:

https://gist.github.com/LinusU/7515016

Esperemos que esto comience a funcionar de la caja en algún momento en el futuro, aquí está el informe de error relevante en el proyecto de Cordova:

https://issues.apache.org/jira/browse/CB-2606

Simplemente agregue este código en su archivo config.xml

<icon src="path to your icon image">

p.ej:

<icon src="icon.png">

De todas formas recuerda que necesitas usar la extensión .png

Solo notando que acabo de cambiar mi config.xml para que se vea como el ejemplo de Sebastian.

Algo que también es útil para depurar todo esto, especialmente si no hace compilaciones locales ... es descargar los archivos XAP / IPA / APK como compilados desde la nube de PhoneGap y crear carpetas para cada uno. Cambie el nombre de cada archivo por una extensión .ZIP y extraiga el contenido de cada uno en sus respectivas carpetas. Entonces, básicamente, ahora puede ver qué hay en el paquete que se enviará al teléfono.

Al hacer esto, puedo ver que para la plataforma de Microsoft Phone está ignorando en gran medida todos mis intentos de reemplazar el icono o la pantalla de bienvenida. Si luego reemplaza ApplicationIcon.png y SplashScreenImage.jpg, vuelva a comprimir el conjunto de carpetas y cámbiele el nombre de nuevo como un archivo .XAP, luego puede implementarlo en su teléfono y funcionará perfectamente. De alguna manera, hay una forma de obtener la compilación PhoneGap para convertir tu icon.png e icon.jpg en esos dos archivos. Tal vez la sugerencia de Masood es una posibilidad aquí y utilizar un script de gancho.

Hacer lo mismo para el archivo .IPA (iOS) da como resultado varios archivos como icon-something.png en el nivel principal anterior a www. Todos parecen estar en blanco.

Hacer lo mismo para el archivo .APK (Android) da como resultado un conjunto de carpetas res / drawable-something y parece tener mi icon.png en cada una. Es lo más cercano a un éxito que puedo reclamar en este momento.

También estoy en el medio de tratar de entender cómo se conecta todo esto.

Esto es lo que he encontrado hasta ahora en XCode, pero espero ser corregido o confirmado si mis suposiciones son correctas. No he encontrado una versión de fábrica de xcode de cordova que aplique correctamente los íconos. Al igual que usted, he actualizado todos los iconos que figuran en el config.xml pero no los dados.

Asi que...

En primer lugar, suelo actualizar el config.xml en la raíz del proyecto con el de mi carpeta "www" (esto lo hago por la incertidumbre de que www / config.xml tenga precedencia o incluso se aplique)

En segundo lugar, actualizo las "Fases de compilación" del proyecto. Expanda "Copiar recursos de paquete", ya ha notado todas las imágenes en "Recursos / iconos", "Recursos / salpicadura". Tu también puedes:

~~elimine todos estos para evitar sobrescribir sus imágenes O~~
~~actualice todas estas imágenes con la suya (renombrando el nombre de la imagen en la lista)~~

Mientras trabajaba en esto, es posible que apenas pueda actualizar las imágenes desde la pestaña "Resumen".

Arrastre y suelte sus imágenes desde sus carpetas de res a la imagen correspondiente en la pestaña "Resumen". (res / icon / ios -> iconos de aplicaciones y res / pantalla / ios -> iniciar imágenes). Lo hago solo para iPhone, ya que mi aplicación solo es para iPhone. Marque "pretratado" si no desea que aparezca el brillo.

A continuación, actualice el "icono.png" al que se hace referencia en el archivo plist del proyecto: PROJECT_NAME-Info.plist o en la pestaña "Información" al mirar el objetivo del proyecto. Cambie el nombre a "icon-57.png" (que ahora vive en la raíz del proyecto, esto se agregó automáticamente a la raíz cuando se hizo la función de arrastrar y soltar).

Diseña y deberías tener un icono de aplicación actualizado.

Tienes que crear un archivo config.xml en el que deberás poner el archivo de icono

<?xml version="1.0" encoding="ISO-8859-1" ?> <widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "example" version = "1.0.0"> <icon src="icon.png" /> </widget>

Verifique esto: https://build.phonegap.com/docs/config-xml

hay íconos específicos de iOS

Todo lo que hice fue agregar las siguientes líneas en config.xml <icon src="www/img/appIcon.png" />

Y funcionó totalmente bien

en algunos casos, los skripts internos de cordova no colocan los íconos en la carpeta correcta, por lo que puede ver el robot f *** cordova en lugar de su propio ícono.

Hacer uso de la secuencia de comandos hook .;)

three-hooks-your-cordovaphonegap-project-needs

Crea una carpeta "after_platform_add" en la carpeta hook y pon / cambia el último skript de devgirl.

No olvides establecer derechos ejecutivos para el guión, en Linux "chmod 777 <script>"

¡buena suerte!