Adding drawable resource using Cordova

Question

I want to add a drawable resource to my cordova project. I did add the icon and splashscreen items just fine. They get copied to my platform/android/res/drawable just fine. The problem is when I try to add another resource. How do I do that? I can't find anything on cordova rather than icon and splashscreen

<platform name="android">
<icon src="xx.png" density="ldpi"/>
<icon src="xx.png" density="mdpi"/>
<icon src="xx.png" density="hdpi"/>
<icon src="xx.png" density="xhdpi"/>
<icon src="xx.png" density="xxhdpi"/>
<icon src="xx.png" density="xxxhdpi"/>
<splash src="xx.png" density="ldpi"/>
<splash src="xx.png" density="mdpi"/>
<splash src="xx.png" density="hdpi"/>
<splash src="xx.png" density="xhdpi"/>
<splash src="xx.png" density="xxhdpi"/>
<splash src="xx.png" density="xxxhdpi"/>

Can somebody help there? I don't see any option in the config.xml to add other drawable resources.

Can you answer your own question and describe the "hook" solution? I'm not sure how to implement that and have the same issue as your original post. — raider33, Jun 28 '16 at 01:27

jcesarmobile · Answer 1 · 2017-05-25T10:52:15.363

19

EDIT:

Since Cordova CLI 7.x.x, when using cordova-android 6.2.x or cordova-ios 4.4.x you can use the resource-file tag from config.xml as I explained for on my old answer for plugins. You have to put it inside the platform tag.

Example:

<platform name="android">
  <resource-file src="www/res/drawable-hdpi/yourImage.png" target="res/drawable-hdpi/yourImage.png" />
</platform>

src is where you have the image right now, could be in www as in my example or even in the root of the project if you don't want the file duplicated. target is the destination, it will be in yourProject/platforms/platform/target for the example it would be yourProject/platforms/android/res/drawable-hdpi/yourImage.png

OLD answer:

From the config.xml you can only add icons and launch images

If you want to add a resource you can create a plugin and use the resource-file tag

<resource-file src="src/android/res/drawable-hdpi/yourImage.png" target="res/drawable-hdpi/yourImage.png" />

Or you can use a hook that copies the image to wherever you want

edited May 25 '17 at 10:52

answered Feb 22 '16 at 15:08

jcesarmobile

51,328
11
132
176

I went for the hook option. looks cleaner and have all logic in gulpfile – Jose Granja Feb 28 '16 at 12:02
2

please give more explanations, it's too vague – Cedriga Feb 23 '17 at 14:25
for the plugin read https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#resource-file, for the hook, see sinedied answer – jcesarmobile Feb 23 '17 at 14:56
@jcesarmobile this works for me with Cordova CLI 6.5.0 and cordova-android 6.3.x :thumbsup: – joseglego Dec 26 '17 at 15:21
Ah, then maybe cordova-android 6.2.0 or greater is enough – jcesarmobile Dec 26 '17 at 15:24

score 4 · Answer 2 · answered Aug 04 '16 at 08:49

For the next people like me, here is my simple hook to do this, to put in hooks/before_build/020_copy_resources.js:

#!/usr/bin/env node

// Copy native resources
var rootdir = process.argv[2];
var exec = require('child_process').exec;

// Native resources to copy
var androidNativePath = 'native/android/';

// Android platform resource path
var androidResPath = 'platforms/android/res/';

function copyAndroidResources() {
  exec('cp -Rf ' + androidNativePath + '* ' + androidResPath);
  process.stdout.write('Copied android native resources');
}

if (rootdir) {
  copyAndroidResources();
}

Just put your android resources in native/android/ then and you're good to go.

This worked like a charm, but make sure you follow the sub-folder naming convention for the res folder for files in native/android/. — Joel Duckworth, Oct 24 '16 at 00:54

Adding drawable resource using Cordova

2 Answers2