Build be tu er Android apps, with vector assets @LukeSleeman @ - - PowerPoint PPT Presentation

▶
build be tu er android apps with vector assets
SMART_READER_LITE
LIVE PREVIEW

Build be tu er Android apps, with vector assets @LukeSleeman @ - - PowerPoint PPT Presentation

Feb 16, 2023 175 likes •829 views

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

slide-1
SLIDE 1

Build betuer Android apps,
 with vector assets

@LukeSleeman
 (Itty Bitty Apps) @MarcEdwards
 (Bjango)

slide-2
SLIDE 2

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?

slide-3
SLIDE 3

What are vector assets?

Vector Bitmap

slide-4
SLIDE 4

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!*

slide-5
SLIDE 5

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!

slide-6
SLIDE 6

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.

slide-7
SLIDE 7

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,
  • therwise we will just live with it
slide-8
SLIDE 8

Example Vector Drawable

slide-9
SLIDE 9

Example Vector Drawable

slide-10
SLIDE 10

Example Vector Drawable

slide-11
SLIDE 11

Example Vector Drawable

slide-12
SLIDE 12

When should you use vector assets?

Yes! Maybe? 🤕 No way.

slide-13
SLIDE 13

223.1 MB

slide-14
SLIDE 14

Creating vector assets

Illustrator Photoshop Sketch Affinity Designer

slide-15
SLIDE 15

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.

slide-16
SLIDE 16

Create using a 1dp grid

slide-17
SLIDE 17

“Flatuen” or combine boolean operations

slide-18
SLIDE 18

“Flatuen” or combine boolean operations

slide-19
SLIDE 19

Outline text

slide-20
SLIDE 20

Remove redundant points

slide-21
SLIDE 21

Remove redundant points

😳

slide-22
SLIDE 22

Exporting SVGs

As automated as possible. Faster, and less mistakes. Less effort to make changes.

slide-23
SLIDE 23

iStat Menus prefs app export document

slide-24
SLIDE 24

Exporting SVGs from Illustrator

Create artwork on artboards. Export with Export for Screens. 100 artboard limit? 1000 artboards!

slide-25
SLIDE 25

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!

slide-26
SLIDE 26

Exporting SVGs from Sketch

Create artwork on artboards or in groups. Export with Make Exportable. Slices are good!

slide-27
SLIDE 27

Exporting SVGs from Affinity

Create artwork on artboards or in groups. Export with Export Persona. Slices are good!

slide-28
SLIDE 28
slide-29
SLIDE 29

We have ✨SVG’s✨ 🤕 Now how to get VectorDrawables?

Converting SVGs to VectorDrawables

slide-30
SLIDE 30

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
slide-31
SLIDE 31

4 Ways of converting

1. Android Studio import

  • 2. http://inloop.github.io/svg2android/
  • 3. http://a-student.github.io/

SvgToVectorDrawableConverter.Web/

  • 4. PaintCode
slide-32
SLIDE 32

#1 - Android Studio

slide-33
SLIDE 33

#2 - SVG2Android

http://inloop.github.io/svg2android/

slide-34
SLIDE 34

#3 - SvgToVectorDrawableConverter.Web

http://a-student.github.io/SvgToVectorDrawableConverter.Web/

slide-35
SLIDE 35

#4 - PaintCode

If you have a more relevant screenshot of paint code go for it - this was just from their website
slide-36
SLIDE 36

Lets put them to the test!

Transform Fill rule Gradient Inner stroke Clip paths <Defs>

slide-37
SLIDE 37

This turned out to be a lot of work …

slide-38
SLIDE 38

The results!

slide-39
SLIDE 39

Recommendation:

PaintCode

SVG2Android a close second also Keep checking Android Studio for updates: https:// issuetracker.google.com/issues/37092389

slide-40
SLIDE 40

Now to use them in the app Easy right? 😆

slide-41
SLIDE 41

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
slide-42
SLIDE 42

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

slide-43
SLIDE 43

Cool feature - can reference colours.xml

slide-44
SLIDE 44

Vectors aren’t always sharp 😴

slide-45
SLIDE 45
slide-46
SLIDE 46

100dp 100dp

slide-47
SLIDE 47
slide-48
SLIDE 48

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

slide-49
SLIDE 49

PNG Generation

APK contents:

slide-50
SLIDE 50

PNG Generation

APK contents:

slide-51
SLIDE 51

PNG Generation

APK contents:

slide-52
SLIDE 52

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

slide-53
SLIDE 53

Backwards compatibility library support-vector-drawable - gradle changes

slide-54
SLIDE 54

Backwards compatibility library support-vector-drawable - gradle changes

slide-55
SLIDE 55

Backwards compatibility library support-vector-drawable - gradle changes

slide-56
SLIDE 56

Backwards compatibility library support-vector-drawable - Code changes

slide-57
SLIDE 57

Backwards compatibility library support-vector-drawable - Code changes

slide-58
SLIDE 58

The magical setuing to turn on

slide-59
SLIDE 59

Recommendation:

support-vector-drawable

Perhaps native if your are targeting API 23 (Android 6.0) and up

slide-60
SLIDE 60

The Marc and Luke 4 step plan

  • 1. Create clean artwork
  • 2. Export like this
  • 3. Converting to VectorDrawable
  • 4. Displaying VectorDrawables
slide-61
SLIDE 61
  • 1. Create clean artwork

Create using a 1dp grid. “Flatten” or combine boolean operations. If you use text, outline it. Remove redundant points.

slide-62
SLIDE 62
  • 2. Export like this

Illustrator, using artboards and Export for Screens Sketch, using Make Exportable Affinity Designer, using Slices Photoshop, by importing into PaintCode

slide-63
SLIDE 63
  • 3. Converting to VectorDrawable

Use PaintCode If you cant use that - try SVG2Andoid Keep checking for those Android Studio updates …

slide-64
SLIDE 64
  • 4. Displaying VectorDrawables

Use support-vector-drawable If you are only supporting the latest versions of Android, perhaps native will work

slide-65
SLIDE 65

Questions?

@MarcEdwards
 (Bjango) @LukeSleeman
 (Itty Bitty Apps)