Vector Graphics on Android

Uppercase vs. Lowercase Commands: Using Relative Path Commands

An upper-case command is positioned absolutely on the grid whereas a lower-case command is positioned relatively within the grid. This can be a bit confusing to understand at first but consider an example. You want to draw a 9×9 square in a 10×10 grid with one-pixel margin.

Starting from the upper-left-hand-side of a 10×10 grid, you perform a moveto command to start at the absolute coordinate: M1,1. For relative commands, each one will be based on the position of the previous point. For example, consider: l8,0. Since this is a relative lineto command, this would draw a line 8 points over on the x-axis from 1,1 resulting in a line to 9,1 in the grid. The next point in the grid would then be relative to this new point 9,1. So, to draw a vertical line down from 9,1 to 9,9 add the following to the path: l0,8. And finally, square the box at 1,9 by adding a lineto command of l-8,0. Close the path with a z: M1,1 l8,0 l0,8 l-8,0z.

That completes the 8×8 square. :]

See, not so bad!

All right, so these assets don’t look amazing but in the next section you will see how to use Android Studio’s Asset Studio to create a vector drawable that looks much better than drawing it by hand. And better yet you will now know exactly what you are looking at when Android Studio generates the path data for you. It is not typical that you would draw something like a vector by hand as this would be the job of your designer. The Asset Studio wizard would then allow you to import the exported SVG from the file. [:

Creating a VectorDrawable in Android Asset Studio

Creating a VectorDrawable using the Asset Studio is as easy as following the steps within the wizard to choose an icon, specify a color and select the width and height of the asset. As previously mention, Android comes out of the box with many assets, most of which can be found at the material.io website.

It is time to start adding these icons into your application. Since you will be creating a scene of baby emojis on a background image in this application, you will need a couple of icons: a save icon, a delete icon and a history icon.

To add an icon:

1. Right-click the drawable folder.
2. Follow the menu to New ‣ Vector Asset.

This will pull up the following window:

To select the icon, simply click the clipart button and search for save in the search box, select the icon and click OK.

Leave all other defaults and click Next, then Finish.

Repeat this for the search term delete, share and history and import these icons too.

Great! Now you have the icons you will be needing for the various UI elements you will be adding vector assets to.

Adding Vector Assets to UI Components

The Android framework supports adding vector assets to the following components:

• ImageView
• Button
• ImageButton
• FloatingActionButton
• TextView
• MenuItem
• CheckBox

Pretty much any widget that either inherits from ImageView or supports adding an image source supports the vector format.

Open up layout ‣ row_history.xml and paste the following line into the ImageButton with id historyShareImageButton:

app:srcCompat="@drawable/ic_share_black_24dp"

Here you have added your first vector drawable to an ImageButton.

Next, open up acitivty_main.xml and add the drawable to the button with the id deleteButton in the bottom bar near the bottom of the file:

app:icon="@drawable/ic_delete_black_24dp"

And then this drawable to the saveButton button:

app:icon="@drawable/ic_save_black_24dp"

Here you have:

1. Added the ic_delete_black_24dp icon.
2. Added the ic_save_black_24dp icon.

Rebuild and run the app, and you will see the icons displaying on the buttons in the bottom of the screen.

Next, add the following line to the menu ‣ main_menu.xml in the action_history item:

android:icon="@drawable/ic_history_black_24dp"

Here you have added the history icon to a MenuItem.

Rebuild and run the app, you will see the History text is now replaced with the icon in the Toolbar.

Tinting a VectorDrawable

With VectorDrawables you can also use one resource mutliple times and just alter its color with a tint. The vector tag in XML supports this through ther android:tint="" attribute where you can specify either a color code or a color resource.

Programmatically, you can get a reference to the VectorDrawable and call setTintList(ColorStateList tint) to change its color. The tint uses the BlendMode.SRC_IN by default but you can change this behavior as well in XML by using the android:tintMode="" attribute or programmatically by calling setTintBlendMode(BlendMode blendMode).

A powerful way to make use of the tint attribute on a vector in your app is by attaching a themed color resource to it in XML.

To do this, copy the following attribute onto the vector element in ic_share_black_24dp.xml file:

android:tint="?android:colorAccent">

Here you have applied the theme's accentColor to the vector drawable. Rebuild and run the app to see the results. By saving an image, and going to the history screen.

Do the same thing again, adding android:tint="?android:colorControlNormal" to ic_history_black_24dp.xml.

Scaling a VectorDrawable Programmatically

To scale your baby emojis, all you need to do is change the scaleX and scaleY properties of the ImageView. To do this, open the EmojiImageView.kt file and copy the code into the top of onScale() of the gesture detector on line 72. Use the kotlin.math.* import when prompted:

  // 1
  scaleFactor *= detector.scaleFactor
  // 2
  scaleFactor = max(0.1f, min(scaleFactor, 50f))
  // 3
  view.scaleX = scaleFactor
  view.scaleY = scaleFactor
  return true

Here you have:

1. Computed the scale factor
2. Reduced the scale factor to a value between 0.1f and 50f
3. Applied the scale factore to scaleX and scaleY of the view

Build and re-run the app, and you should now be able to move the baby-emojis around the screen and scale them. Cool! [:

Animated Vector Drawables

The AnimatedVectorDrawable class adds animation functionality to vector drawables. This means you can use them to change properties of a vector drawable using the property animations built into Android. Animating a vector drawable is done in two ways currently: Mutilple XML Files or a Single XML File.

You will work with the first approach here, but to read more about the single file approach you can go to the docs.

The multiple file apprach involves defining three things:

1. The vector drawable in XML.
2. The animations to run in XML.
3. The animated vector drawable in XML.

So what does this look like?