Other graphics types

[tajnymag]

Could you please consider adding support for generating more than icon and splash resources?

As far as I know, right now, the only way to add an icon for the native parts of the app is to manually resize/convert it and to add it's each generated resource via tag to the config.xml

[imhoffd]

Do you have documentation I can refer to?

[tajnymag]

@dwieeb This seems to be official and includes the neccessary Android asset resolution information.

To be honest, I can't find anything official for iOS

[imhoffd]

Yeah it's weird, I can't seem to find any Cordova documentation on adding drawables at different densities for Android. How is this usually accomplished? It seems <resource-file doesn't work with densities. Is that correct?

Full android docs: https://developer.android.com/guide/topics/resources/providing-resources

[tajnymag]

It actually works pretty well. seems to work like a dumb copy function, so you generate the assets and then copy it in the native platforms res/ directory.

For example, here I provide Android with @drawable/material_search

<resource-file src="resources/android/material_search.xml" target="app/src/main/res/drawable/material_search.xml" />

(fully working on Ionic 4 with Cordova 9)

[imhoffd]

I'm assuming resources/android/material_search.xml is an xml file containing a single ImageView? Would you mind sharing it? I'm having difficulty finding examples that make use of the densities.

[tajnymag]

Contents of materia_search.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
        android:viewportWidth="24"
        android:viewportHeight="24"
        android:width="24dp"
        android:height="24dp">
    <path
            android:pathData="M15.5 14h-0.79l-0.28 -0.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09 -0.59 4.23 -1.57l0.27 0.28v0.79l5 4.99L20.49 19l-4.99 -5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
            android:fillColor="#000000" />
</vector>

[imhoffd]

But that's a vector. How can cordova-res help with that example?

[tajnymag]

Oh, sorry. The source svg:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

cordova-res could still copy vector to it's appropriate native location though.

[imhoffd]

I think I understand. Given a Source SVG, you want the following to happen:

1. Transform SVG to Android Vector in XML and place the file in an appropriate place (resources/android/xml/drawable/<file>.xml, for example)
2. Register the new resource in config.xml for use in the Cordova project

Is this correct?

[tajnymag]

Yes, it is correct.

[imhoffd]

I think that's reasonable!

But was there anything to be done for raster images? You mentioned resizing in the original post.

[tajnymag]

Also yes, raster images could be resized the same way icons and splash-screens are resized and put in the appropriate folders.

[imhoffd]

In that case I'm still missing what the resource-file looks like for a raster image and how it references each density. Do you have any examples or documentation I can refer to?

[tajnymag]

<resource-file> isn't aware of density. You have to add it with each density separately.

for example:

<resource-file src="resources/android/drawable-ldpi/material_search.png" target="app/src/main/res/drawable-ldpi/material_search.png" />
<resource-file src="resources/android/drawable-hdpi/material_search.png" target="app/src/main/res/drawable-hdpi/material_search.png" />

Drawable folder structure: https://developer.android.com/guide/topics/resources/providing-resources

[tajnymag]

I think I understand. Given a Source SVG, you want the following to happen:

1. Transform SVG to Android Vector in XML and place the file in an appropriate place (`resources/android/xml/drawable/<file>.xml`, for example)

2. Register the new resource in `config.xml` for use in the Cordova project

Is this correct?

Probably better to put it in a different folder than "resources/android/xml" as it feels like it isn't a config file. I'd expect VectorDrawable to be placed in fex. "resources/android/drawable". If it's an icon, it should be as usual in "resources/android/icon"

[imhoffd]

Ahhh, okay! I get it.

Yeah I think putting these in resources/android/drawable makes sense.

[trajano]

2. Register the new resource in config.xml for use in the Cordova project

Does this tool update config.xml? (I didn't glean that from the README.md, but it would be nice if it did, I can create a separate issue for it.)

[imhoffd]

Yes, it does. Perhaps it's worth mentioning in the README.

[tafelnl]

+1

[mlynch]

Is this relevant with Capacitor? We aren't supporting Cordova in the 1.0 release so not sure if this should be closed or also looked at

[tajnymag]

Is this relevant with Capacitor? We aren't supporting Cordova in the 1.0 release so not sure if this should be closed or also looked at

It might be. As long as the resources where copied to the appropriate native locations, we would have less work to do through Xcode and Android Studio.

[mlynch]

Thanks @Tajnymag, will take a look at this. I'm also going to be adding support for SVG image types assuming I don't hit any hurdles there as sharp supports them.

[michaelkariv]

I just wonder when the SVG support is going to arrive. I am using online conversion tools for android specifically right now

[mlynch]

SVG support is now in @capacitor/assets. Closing this for now until I have a better idea of whether this issue still applies with the new tool

[sandstrom]

@mlynch Great news! Is there any documentation on how to use this tool with an SVG source?

There isn't anything in the readme, only PNG/JPG is mentioned.

Also, you may be able to close these, they seem to be about SVG:

• https://github.com/ionic-team/capacitor-assets/issues/39
• https://github.com/ionic-team/capacitor-assets/issues/208