65
Build beer Android apps, with vector assets @LukeSleeman (Itty Bitty Apps) @MarcEdwards (Bjango)
Build better Android apps,with vector assets
@LukeSleeman (Itty Bitty Apps)
@MarcEdwards(Bjango)
OutlineWhat are vector assets?
Creating and exporting SVGs
Converting SVGs to VectorDrawables
Using VectorDrawables in your apps
The Marc and Luke 4 step plan
Questions?
What are vector assets?Vector Bitmap
What are the benefits of vector assets?Smaller files and faster loading.
One file for all pixel densities.
Dynamic colours, and other dynamic drawing.
Did we mention smaller files?
Smaller files!*
What are the drawbacks?Vector assets can have performance issues.
Can use a lot of memory while rendering.
Can only be used for certain things.
Choose wisely!
What are SVGs?Scalable Vector Graphics files.
XML files, containing shapes, paths and styling data.
Initially released in 2001, but increasingly popular.
SVG 2.0 is in flux right now.
Pronounced with a hard G.
What are Vector Drawables?Android specific vector format.
Subset of SVG:Supports group, path, clipPath, and transforms.
Quicker and easier to render than SVG.
This image is pretty ugly and blurry. If its quick and easy to do re-draw it, otherwise we will just live with it
Example Vector Drawable
Example Vector Drawable
Example Vector Drawable
Example Vector Drawable
When should you use vector assets?
Yes! Maybe? 🤔 No way.
223.1 MB
Creating vector assets
Illustrator Photoshop Sketch Affinity Designer
Best practices for creating vector assetsCreate using a 1dp grid.
“Flatten” or combine boolean operations.
If you use text, outline it.
Remove redundant points.
Create using a 1dp grid
“Flatten” or combine boolean operations
“Flatten” or combine boolean operations
Outline text
Remove redundant points
Remove redundant points
😲
Exporting SVGsAs automated as possible.
Faster, and less mistakes.
Less effort to make changes.
iStat Menus prefs app export document
Exporting SVGs from IllustratorCreate artwork on artboards.
Export with Export for Screens.
100 artboard limit? 1000 artboards!
Exporting SVGs from PhotoshopCreate artwork on artboards or in groups.
Export with Export As or Generator.
Don’t use Photoshop? Or use Photoshop + PaintCode!
Exporting SVGs from SketchCreate artwork on artboards or in groups.
Export with Make Exportable.
Slices are good!
Exporting SVGs from AffinityCreate artwork on artboards or in groups.
Export with Export Persona.
Slices are good!
We have ✨SVG’s✨
🤔
Now how to get VectorDrawables?
Converting SVGs to VectorDrawables
What do you mean ‘complex’?Features that cause problems:
clip paths
Inner and outer strokes
gradient fill (7.0, SDK 24+)
fill rule - evenodd, etc (7.0 SDK 24+)
transforms
<defs>
It would be nice if we could somehow visually show what these things are. I think it may be a bit to much work to draw up examples of each of them though
4 Ways of converting1. Android Studio import
2. http://inloop.github.io/svg2android/
3. http://a-student.github.io/SvgToVectorDrawableConverter.Web/
4. PaintCode
#1 - Android Studio
#3 - SvgToVectorDrawableConverter.Web
http://a-student.github.io/SvgToVectorDrawableConverter.Web/
#4 - PaintCode
If you have a more relevant screenshot of paint code go for it - this was just from their website
Lets put them to the test!
TransformFill ruleGradientInner strokeClip paths
<Defs>
This turned out to be a lot of work …
The results!
Recommendation:
PaintCode SVG2Android a close second
also Keep checking Android Studio for updates: https://
issuetracker.google.com/issues/37092389
Now to use them in the app
Easy right? 😅
Again - lots of options!1. Native vector drawable generation
2. Native for 5.0 and up, PNG generation through gradle for backwards compatibility
3. support-vector-drawable library
Native Vector Drawable supportAdd your vector drawable xml file to res/drawable/
Reference it like any other drawable
API 21 (Android 5.0) has native support
API 24 (Android 7) has better support - Fill types (even-odd), gradient fill
Other misc bugs in android 5.0 and 6.0
Cool feature - can reference colours.xml
Vectors aren’t always sharp 😳
100dp
100dp
Native SVG - PNG Generation
Set minSdkVersion < 21, eg below android 5.0
No build changes required at all - just drop in Vector Drawable to project!
Only supports limited set of elements
Cant reference colours.xml from xml
PNG GenerationAPK contents:
PNG GenerationAPK contents:
PNG GenerationAPK contents:
Backwards compatibility library support-vector-drawable
Backwards compatibility library which extends Drawable to create VectorDrawableCompat
Uses VectorDrawableCompat when running below API 24 (Android 7). API 24+ it uses native implementation
Allows you to get vector drawable features only supported in API 24
Vectors are Sharp on all API levels!
Can use colors.xml values
Backwards compatibility library support-vector-drawable - gradle changes
Backwards compatibility library support-vector-drawable - gradle changes
Backwards compatibility library support-vector-drawable - gradle changes
Backwards compatibility library support-vector-drawable - Code changes
Backwards compatibility library support-vector-drawable - Code changes
The magical setting to turn on
Recommendation:
support-vector-drawable
Perhaps native if your are targeting API 23 (Android 6.0) and up
The Marc and Luke 4 step plan1. Create clean artwork
2. Export like this
3. Converting to VectorDrawable
4. Displaying VectorDrawables
1. Create clean artworkCreate using a 1dp grid.
“Flatten” or combine boolean operations.
If you use text, outline it.
Remove redundant points.
2. Export like thisIllustrator, using artboards and Export for Screens
Sketch, using Make Exportable
Affinity Designer, using Slices
Photoshop, by importing into PaintCode
3. Converting to VectorDrawable Use PaintCode
If you cant use that - try SVG2Andoid
Keep checking for those Android Studio updates …
4. Displaying VectorDrawablesUse support-vector-drawable
If you are only supporting the latest versions of Android, perhaps native will work
Questions?
@MarcEdwards(Bjango)
@LukeSleeman (Itty Bitty Apps)
