The viewportWidth is the size of the canvas that we are going to draw upon in pixels. In other words, if you set the width to 24dp and then place it in a ImageView which has android:layout_width="wrap_content" then, following the layout pass, the ImageView will have a size of 24dp. The width is the intrinsic width of the Drawable – the width it will return if an external component wants to know the Drawable‘s preferred size.
I’ll cover the width in this explanation, but height is exactly the same, just the other dimension. Having independent control over these is really useful, so it’s worth a quick explanation of what they both are. We’ve created a parent element which contains the width and height specifications, but we actually do this twice – for each dimension we define both the size and the viewport size (i.e. For those wanting to understand the path data specification then please refer to the SVG Path Specification, but that’s not essential because we can simply take these path specifications as they are and use them within our VectorDrawables. The fill attribute of each defines the fill colour (and we can see that all of these are green except for the two eyes which are both white), followed by a d attribute which contains the path data. It consists of 6 elements which define the head left eye right eye left arm body & legs right arm components of the image respectively.
#Android studio vector code android#
Then there is another (group) element with the id “androd” (sic) which is the Android logo itself – this is the real bit that we need. While this looks pretty scary, we can lift the bit out that we need without having to understand the inner workings! There are some attributes in the parent element which define the canvas and view port sizes as being 500x500px, then there’s a (group) element which defines a border which we’ll ignore.
SVG paths are analogous with the APIs but are defined as a string which we can use within our VectorDrawable. The key components which we can use are the SVG path definitions. However, VectorDrawable supports a subset of the SVG specification so we can take some elements from the SVG file and use them in our VectorDrawable. But SVG is not the same as a VectorDrawable, so we can’t use it directly. This file is 2265 bytes as an SVG graphic, but if we render it at a bitmap of 500×500 pixels and save as a PNG it is 13272 bytes – and we’d have to use multiple bitmaps for different pixel densities whereas we only require a single vector graphic. To demonstrate this, let’s take the following SVG file (which I found in a library for displaying SVG graphics in Android): This means that for graphical elements which are well suited to vector representation we can replace mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi bitmap versions of a specific drawable with a single VectorDrawable which will be a fraction of the size of even the mdpi bitmap version. In Android, they have been implemented using the new VectorDrawable class which has been introduced in Lollipop (although there is a third-party back-port of VectorDrawable named MrVector which I have not tried myself, but this library does not currently include support for AnimatedVectorDrawable which we’ll be covering later in this series, although it is on the roadmap). They do, however, come with a computational overhead at run time which may be an issue for more complex graphical elements. They are also usually much smaller than the bitmap version of the same graphic. The big advantage of using vector graphics (where appropriate) is that they are rendered at run time, so will automatically be rendered at the pixel density of the device on which they are being rendered – thereby giving smooth graphics irrespective of device capabilities. Bitmap graphics, on the other hand, define the colour value for each pixel and are particularly well suited to photographic images. They are particularly well suited to graphical elements created in packages such as Adobe Illustrator or Inkscape where simple geometric shapes may be combined in to much more complex elements. Simply explained, vector graphics are a way of describing graphical elements using geometric shapes. However, I felt a brief explanation was necessary for anyone with feeling of déjà vu – this really is covering a different subject than those earlier posts. These actually covered Shape Drawables and have since been renamed accordingly.
#Android studio vector code series#
When Styling Android first started in February 2011 the inaugural post was entitled Vector Drawables, and there has subsequently been a follow up series to this.
0 kommentar(er)
