How To Edit AndroidManifest.xml, config.xml and Info.plist in Visual Studio

(This is a guest post by Iva Koevska, a technical writer on the Icenium team at Telerik.)

So far, so good. I installed the Icenium Extension for Visual Studio, created a new project, and started development. The simulator is working fine, code signing is already configured thanks to my previous work in Graphite, my app deploys on devices. My custom plugins are working as expected. Awesome.

Now, how do I set a new display name for my app, remove the gloss effect from the icons, use a custom URL scheme, or achieve some other advanced task available only through the configuration files?

In Graphite and Mist, it takes just a right-click to get to AndroidManifest.xml, Info.plist, and the Cordova config.xml files. But what about the Icenium Extension for Visual Studio? No sign of the context menus I already know from Graphite and Mist, no indication of the files in the file structure of the project either. Am I to resort back to the cumbersome workflow of building my app, unpacking it, editing the files, repacking and code signing the app manually?

The short answer is "No". The long answer is that modifying the configuration files turns out to be as easy as one, two, three.

One: Create the files on the local system

AndroidManifest.xml, Info.plist, and the Cordova config.xml files are all XML files. So, any not-so-simple text editor is sufficient to create four empty files named AndroidManifest.xml, Info.plist, config.xml, and, guess what, another config.xml. What's next is to copy and paste the following templates (already available in Graphite and Mist) and save the changes.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8" ?>
<manifest android:versionCode="$AndroidVersionCode$" android:versionName="$BundleVersion$" package="$AppIdentifier$" android:windowSoftInputMode="adjustPan" android:hardwareAccelerated="$AndroidHardwareAcceleration$" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:xlargeScreens="true" android:resizeable="true" android:anyDensity="true" />
    <application android:label="@string/app_name" android:icon="@drawable/icon" android:hardwareAccelerated="$AndroidHardwareAcceleration$">
        <activity android:label="@string/app_name" android:name=".TelerikCallbackActivity" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:launchMode="standard" android:theme="@android:style/Theme.Black.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="8" />
</manifest>

config.xml for Android

<?xml version="1.0" encoding="utf-8" ?>
<cordova>
    <access origin="http://127.0.0.1*" />
    <!-- allow local pages -->
    <access origin=".*" />
    <content src="index.html" />
    <log level="DEBUG" />
    <preference name="useBrowserHistory" value="true" />
    <preference name="exit-on-suspend" value="false" />
</cordova>

Info.plist

<?xml version="1.0" encoding="UTF-8" ?>
<plist version="1.0">
    <dict>
        <key>CFBundleDevelopmentRegion</key>
        <string>English</string>
        <key>CFBundleExecutable</key>
        <string>$BundleExecutable$</string>
        <key>CFBundleIconFile</key>
        <string>icon.png</string>
        <key>CFBundleIcons</key>
        <dict>
            <key>CFBundlePrimaryIcon</key>
            <dict>
                <key>CFBundleIconFiles</key>
                <array>
                    <string>Default.png</string>
                    <string>Default@2x.png</string>
                    <string>Default-568h@2x.png</string>
                    <string>Default-Landscape.png</string>
                    <string>Default-Landscape@2x.png</string>
                    <string>Default-Portrait.png</string>
                    <string>Default-Portrait@2x.png</string>
                    <string>icon.png</string>
                    <string>icon@2x.png</string>
                    <string>icon-40.png</string>
                    <string>icon-40@2x.png</string>
                    <string>icon-60.png</string>
                    <string>icon-60@2x.png</string>
                    <string>icon-72.png</string>
                    <string>icon-72@2x.png</string>
                    <string>icon-76.png</string>
                    <string>icon-76@2x.png</string>
                    <string>Icon-Small.png</string>
                    <string>Icon-Small@2x.png</string>
                    <string>Icon-Small-50.png</string>
                    <string>Icon-Small-50@2x.png</string>
                </array>
                <key>UIPrerenderedIcon</key>
                <true/>
            </dict>
        </dict>
        <key>CFBundleIdentifier</key>
        <string>$AppIdentifier$</string>
        <key>CFBundleName</key>
        <string>$ProjectName$</string>
        <key>CFBundleDisplayName</key>
        <string>$iOSDisplayName$</string>
        <key>CFBundleInfoDictionaryVersion</key>
        <string>6.0</string>
        <key>CFBundlePackageType</key>
        <string>APPL</string>
        <key>CFBundleSignature</key>
        <string>????</string>
        <key>CFBundleVersion</key>
        <string>$BundleVersion$</string>
        <key>LSRequiresIPhoneOS</key>
        <true/>
    </dict>
</plist>

config.xml for iOS

<?xml version="1.0" encoding="UTF-8" ?>
<widget>
    <preference name="AllowInlineMediaPlayback" value="false" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="BackupWebStorage" value="cloud" />
    <preference name="DisallowOverscroll" value="false" />
    <preference name="EnableLocation" value="false" />
    <!-- DEPRECATED -->
    <preference name="EnableViewportScale" value="false" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="FadeSplashScreenDuration" value=".25" />
    <preference name="HideKeyboardFormAccessoryBar" value="false" />
    <preference name="KeyboardDisplayRequiresUserAction" value="true" />
    <preference name="KeyboardShrinksView" value="false" />
    <preference name="MediaPlaybackRequiresUserAction" value="false" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <preference name="SuppressesIncrementalRendering" value="false" />
    <preference name="TopActivityIndicator" value="gray" />
    <!-- legacy preferences -->
    <!-- <preference name="UIWebViewBounce" value="true" />-->
    <content src="index.html" />
    <access origin="*" />
</widget>

Because Visual Studio is way more advanced in its code editing features, let's leave the editing for later.

Two: Drag and drop

Once the files are created, they need to go to their proper places in the file structure of the project. To avoid some tedious editing of the project file, drag-and-drop from Windows Explorer to the Solution Explorer does an excellent job.

• AndroidManifest.xml goes to App_Resources\Android.

• config.xml for Android goes to App_Resources\Android\xml. (You need to create the xml folder.)

• Info.plist goes to App_Resources\iOS.

• config.xml for iOS goes to App_Resources\iOS.

Here's how the App_Resources folder looks like after dragging and dropping the files in the Solution Explorer.

Three: Edit away

With the configuration files in place, what's left is the actual code editing. The markup in the configuration files contains a few placeholders (marked with a $ in front) which Icenium replaces with their correct values during the build process. Any settings configurable through the Project Properties dialog are also automatically added to the code during the build process. Same goes for the changes required by any custom plugins, as long as these changes are declared in plugin.xml.

For a quick reference what you can actually edit, check out the following resources.

• AndroidManifest.xml

• config.xml for Android

• Info.plist

• config.xml for iOS

The only catch is that to see what your changes to the markup actually do, you need to build and install the app on a physical device. Get your QR code scanners ready and start exploring what AndroidManifest.xml, Info.plist, and config.xml have to offer.

In a future release of the Icenium Extension for Visual Studio, you will be able to edit the configuration files out of the box. For a list of what you can and cannot do in this release, check out this quick overview of the Icenium Extension for Visual Studio.