26 May 2017

Add name, icon and permissions to your phonegap app

You must have made html files including index.html file in it as shown in a previous post. Then you zip it, upload it and build it on build.phonegap.com, but the name and icon of yout app does not change. You must add config file to your app to change it. Let me show you how.

Step 1 :
The sample config.xml file can be found here. You can make changes according to your application. The config file for my app is shown below. I have included almost all the permissions for my app, but you can modify yours accordingly.
Also add the icon image (preferable png - for ios support) in the main directory (path mentioned in the config file as main directory)

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.phonegap.example"
    versionCode = "10"
    version     = "1.0.0" >

<!-- versionCode is optional and Android only -->

  <name>Stitch</name>

  <description>
     App to know hardware processes
  </description>

<preference name="Fullscreen" value="true"/>

<preference name="DisallowOverscroll" value="true"/>

<preference name="HideKeyboardFormAccessoryBar" value="false"/>

<access origin="*"/>
    <!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->
    <!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->
    <plugin name="cordova-plugin-whitelist" version="1" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />

    <platform name="android">
        <allow-intent href="market:*" />
    </platform>

    <plugin name="cordova-plugin-battery-status" />
    <plugin name="cordova-plugin-camera" />
    <plugin name="cordova-plugin-media-capture" />
    <plugin name="cordova-plugin-console" />
    <plugin name="cordova-plugin-contacts" />
    <plugin name="cordova-plugin-device" />
    <plugin name="cordova-plugin-device-motion" />
    <plugin name="cordova-plugin-device-orientation" />
    <plugin name="cordova-plugin-dialogs" />
    <plugin name="cordova-plugin-file" />
    <plugin name="cordova-plugin-file-transfer" />
    <plugin name="cordova-plugin-geolocation" />
    <plugin name="cordova-plugin-globalization" />
    <plugin name="cordova-plugin-inappbrowser" />
    <plugin name="cordova-plugin-media" />
    <plugin name="cordova-plugin-network-information" />
    <plugin name="cordova-plugin-splashscreen" />
    <plugin name="cordova-plugin-vibration" />

 
  <author href="https://build.phonegap.com" email="support@phonegap.com">
      Yatin Kode
  </author>
 
  <icon src="android.png" /> <!-- icon is saved in png format in the main directory-->

</widget>

Step 2 : Add the config.xml file in the main directory of our application folder.


Step 3 : Zip the folder, upload it on build.phonegap.com and build it as shown in a previous post. The icon will appear there after it builds successfully.
Phonegap app with custom icon
Stay Tuned with Made In Android

Next Page Home
Top