Hi All,
A while back we landed initial support for VectorDrawable's (Bug 1309821
[1]).
VectorDrawable is an Android-specific XML based format that's largely
similar to SVG, with some limitations around gradients and other SVG
features. Using VectorDrawable's in place of png's should be helpful in
minimising APK size - I therefore encourage using them whenever possible.
This support isn't complete - VectorDrawable's aren't a drop-in
replacement for existing resources for a number of reasons, as detailed
below.
== How and where to use VectorDrawable's ==
VectorDrawable support on 4.X devices is provided by the support library
(Android framework only supports it on 5 and higher). It's still
possible to manually load VectorDrawable's in locations where support
isn't automatically provided, which means it's still be possible to use
them with a little bit of tweaking.
1. Support library and AppCompat code handles many cases
automatically.
2. ImageView: use the app:srcCompat attribute instead of android:src
(Under the hood: the support library replaces ImageView with
AppCompatImageView during layout inflation, i.e. AppCompatImageView
handles the VectorDrawable's too).
3. Menu resources, when using Support Library widgets (e.g.
NavigationView): support is automatic. (Support for the main
app menu has also been added manually, using {4}.)
4. Otherwise: manual loading - use:
ResourceDrawableUtils.getDrawable()
Using them in xml (e.g. as drawableLeft|Right|etc), as part of buttons,
TextView's etc., is not supported.
(In theory it's possible to completely override all resource loading, in
order to avoid any special VectorDrawable handling, by setting
AppCompatDelegate.setCompatVectorFromSourcesEnabled(true). However
this is reported to increase memory usage, and can break configuration
updates. We probably want to avoid that as far as possible, especially
given the special configuration handling code we have as part of our
multilocale support. I didn't have much success when testing this
locally either.)
== Generating VectorDrawable's ==
The best tool I've found so far is Android Studio's "Vector Asset
Studio", which is found under |File->New->Vector Asset| in AS. This
allows you to import (and preview) an existing SVG file.
If using the Vector Asset Studio:
1. Select "local SVG" on the first screen to import an SVG.
2. Select "../base/resources" as the |Res Directory| on the second
screen in order for it to land in the correct location.
== When not to use VectorDrawable ==
The official recommendation is to only use these for images up to 200 x
200dp, and also to avoid overly complicated images - all for performance
reasons [2]. (Vector Images are seemingly rendered to a local bitmap
buffer, before being used in the usual Android rendering
process.)
== Related APK size considerations: webp conversion ==
As of Android 4.0 it's possible to use webp for raster images. This
generally provides better compression than png, however webp conversion
can introduce artifacts (mostly visible along edges) so care is required
- tweaking the conversion/compression quality can result in acceptable
images. On Android 4.0 - 4.2.0 only non-transparent webp images are
supported, hence we need to avoid transparent images for now.
I've documented the conversion process on the wiki [3].
(Most of our larger images don't require a transparent background - one
possibility is setting a solid background and removing the alpha channel
to allow for webp conversion - this is all described on the
aforementioned wiki page).
== Summary ==
- Use VectorDrawable for all icons, and most smaller images.
- Use webp for most other images, unless they must contain transparency.
- Use png only as a last resort.
Cheers,
Andrzej
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1309821
[2] https://developer.android.com/studio/write/vector-asset-studio.html#when
[3] https://wiki.mozilla.org/Mobile/Fennec/Android/png_optimisation
_______________________________________________
mobile-firefox-dev mailing list
mobile-firefox-dev@mozilla.org
https://mail.mozilla.org/listinfo/mobile-firefox-dev
