How to Add Files to the "res" Directory

Not too long ago I wrote about using jsHybugger to remote debug Android devices (specifically ones not yet running Android 4.4). jsHybugger requires a license (assuming you aren't using a trial) - and you have two ways to include it:

• Copy the license.xml file to your res/xml directory in your Android .apk file.
• When you start a debugging session in Chrome, you can browse to the license file when prompted.

At first, I was taking the second approach - but this got old very quickly! I asked our engineering team if it was possible for me to include my license.xml file as part of my Icenium project, and have it copied to the res/xml directory as part of the build. Turns out, it is possible. Here are the steps I took to make it happen:

1.) First – Push Your Project to External Git Repo

In my case, I was using the in-browser client/IDE for Icenium. To connect to a git repository (if you haven't already), use the "Version Control" menu at the top, and choose "Configure Remote Repository":

I want to connect this app to my "everloader-sample" repository on github:

After clicking "Connect", click "Done".

Next we need to commit and push our code to the newly connected repository. Use the "Version Control" menu again, and choose "Commit":

Then we enter a commit message and click "Commit":

Now that we've made a commit, we can push it to GitHub by using the "Version Control" menu and selecting "Push" (and entering your GitHub credentials if prompted to do so):

2.) Next – Clone the Repo

Use your favorite Git client. In my case, I'm opening a zsh prompt and cloning from the command line:

3.) Add the license.xml File

In order to target the res directory on an Android in our application, I need to add the assets to the App_Resources/Android directory, which can be seen towards the top of the directory structure below:

+-- ImageUploadUtility
    +-- App_Resources
    ¦   +-- Android
    ¦   +-- iOS
    +-- ImageUploadUtility.proj
    +-- Plugins
    ¦   +-- cordova-plugin-jshybugger
    +-- cordova.android.js
    +-- cordova.ios.js
    +-- index.html
    +-- kendo
    ¦   +-- js
    ¦   +-- styles
    +-- scripts
    ¦   +-- app
    ¦   +-- lib
    +-- styles
    ¦   +-- images
    ¦   +-- main.css
    +-- views
        +-- addImage.html

I want to add an xml directory, and include my license.xml file inside it. Once I've done so, my directory structure will look something like this (note license.xml towards the bottom):

+-- ImageUploadUtility
    +-- App_Resources
    ¦   +-- Android
    ¦   ¦   +-- AndroidManifest.xml
    ¦   ¦   +-- drawable-hdpi
    ¦   ¦   ¦   +-- icon.png
    ¦   ¦   +-- drawable-ldpi
    ¦   ¦   ¦   +-- icon.png
    ¦   ¦   +-- drawable-mdpi
    ¦   ¦   ¦   +-- icon.png
    ¦   ¦   +-- drawable-nodpi
    ¦   ¦   ¦   +-- splashscreen.9.png
    ¦   ¦   +-- xml
    ¦   ¦       +-- license.xml
    (more...)

4.) Commit and Push to GitHub

Now that we've added the directory & file, let's commit and push to GitHub:

5.) Pull the Changes into Icenium Client

Now that the GitHub repo has been updated, we can choose the "Pull" option on the "Version Control" menu in the Icenium browser client:

6.) Build & Verify

Finally! Using the "Run" menu, we select "Build" and choose to build for Android. While I could install the app and test if I can run a jsHybugger session without being prompted for a license, for the sake of proving that this actually worked, we're going to download the .apk installer and look inside:

Once we've downloaded the .apk we can rename the extension to .zip and then extract it like any archive. Below, I've browsed to the res directory at the root of the extracted .apk/.zip and am using a tree utility to print the directory structure:

There you have it! To add something to the res directory, you need to add it to the App_Resources/{Platform} directory (where {Platform} is either Android or iOS, depending on which one you're targeting).

What if I'm using Visual Studio?

If you're using the Visual Studio Extension for Icenium, you're in luck! The App_Resources folder is visible in Solution Explorer:

You can add folders & files to the target platform folder under App_Resources as you need and they will be included in the res directory of the installer package.

About the Author
Jim Cowart is an architect, developer, open source author, and overall web/hybrid mobile development geek. He is an active speaker and writer, with a passion for elevating developer knowledge of patterns and helpful frameworks. Jim works for Telerik as a Developer Advocate and is @ifandelse on Twitter.