Build be tu er Android apps, with vector assets @LukeSleeman @ MarcEdwards (Itty Bitty Apps) (Bjango)
Outline What 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? Maybe? 🤕 Yes! No way.
223.1 MB
Creating vector assets Illustrator Photoshop Sketch A ffi nity Designer
Best practices for creating vector assets Create using a 1dp grid. “Flatten” or combine boolean operations. If you use text, outline it. Remove redundant points.
Create using a 1dp grid
“Fla tu en” or combine boolean operations
“Fla tu en” or combine boolean operations
Outline text
Remove redundant points
Remove redundant points 😳
Exporting SVGs As automated as possible. Faster, and less mistakes. Less e ff ort to make changes.
iStat Menus prefs app export document
Exporting SVGs from Illustrator Create artwork on artboards. Export with Export for Screens. 100 artboard limit? 1000 artboards!
Exporting SVGs from Photoshop Create artwork on artboards or in groups. Export with Export As or Generator. Don’t use Photoshop? Or use Photoshop + PaintCode!
Exporting SVGs from Sketch Create artwork on artboards or in groups. Export with Make Exportable. Slices are good!
Exporting SVGs from A ffi nity Create artwork on artboards or in groups. Export with Export Persona. Slices are good!
Converting SVGs to VectorDrawables We have ✨ SVG’s ✨ 🤕 Now how to get VectorDrawables?
What do you mean ‘complex’? Features that cause problems: It would be nice if we could somehow clip paths 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 Inner and outer strokes gradient fill (7.0, SDK 24+) fill rule - evenodd, etc (7.0 SDK 24+) transforms <defs>
4 Ways of converting 1. Android Studio import 2. http://inloop.github.io/svg2android/ 3. http://a-student.github.io/ SvgToVectorDrawableConverter.Web/ 4. PaintCode
#1 - Android Studio
#2 - SVG2Android http://inloop.github.io/svg2android/
#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! Clip paths Inner stroke Gradient Fill rule Transform <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 support Add 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 Generation APK contents:
PNG Generation APK contents:
PNG Generation APK 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 se tu ing 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 plan 1. Create clean artwork 2. Export like this 3. Converting to VectorDrawable 4. Displaying VectorDrawables
1. Create clean artwork Create using a 1dp grid. “Flatten” or combine boolean operations. If you use text, outline it. Remove redundant points.
2. Export like this Illustrator, using artboards and Export for Screens Sketch, using Make Exportable A ffi nity 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 VectorDrawables Use support-vector-drawable If you are only supporting the latest versions of Android, perhaps native will work
Questions? @LukeSleeman @ MarcEdwards (Itty Bitty Apps) (Bjango)
Recommend
More recommend
