diff --git a/docs/html/guide/topics/resources/drawable-resource.jd b/docs/html/guide/topics/resources/drawable-resource.jd index 74727fb4bbea8..f974a5fe59923 100644 --- a/docs/html/guide/topics/resources/drawable-resource.jd +++ b/docs/html/guide/topics/resources/drawable-resource.jd @@ -8,6 +8,7 @@ parent.link=available-resources.html

See also

  1. 2D Graphics
  2. +
  3. Vector Asset Studio
diff --git a/docs/html/images/tools/vas-codepreview.png b/docs/html/images/tools/vas-codepreview.png new file mode 100644 index 0000000000000..ea8482c180b76 Binary files /dev/null and b/docs/html/images/tools/vas-codepreview.png differ diff --git a/docs/html/images/tools/vas-imageincode.png b/docs/html/images/tools/vas-imageincode.png new file mode 100644 index 0000000000000..8295cfacfafb7 Binary files /dev/null and b/docs/html/images/tools/vas-imageincode.png differ diff --git a/docs/html/images/tools/vas-layout.png b/docs/html/images/tools/vas-layout.png new file mode 100644 index 0000000000000..f70461bcfac49 Binary files /dev/null and b/docs/html/images/tools/vas-layout.png differ diff --git a/docs/html/images/tools/vas-materialicon.png b/docs/html/images/tools/vas-materialicon.png new file mode 100644 index 0000000000000..d04a83150bde5 Binary files /dev/null and b/docs/html/images/tools/vas-materialicon.png differ diff --git a/docs/html/images/tools/vas-rtl.png b/docs/html/images/tools/vas-rtl.png new file mode 100644 index 0000000000000..0d45b943327ec Binary files /dev/null and b/docs/html/images/tools/vas-rtl.png differ diff --git a/docs/html/images/tools/vas-rtlmenu.png b/docs/html/images/tools/vas-rtlmenu.png new file mode 100644 index 0000000000000..aaf95deafc1b2 Binary files /dev/null and b/docs/html/images/tools/vas-rtlmenu.png differ diff --git a/docs/html/images/tools/vas-svgerror.png b/docs/html/images/tools/vas-svgerror.png new file mode 100644 index 0000000000000..8c85247a0fbb3 Binary files /dev/null and b/docs/html/images/tools/vas-svgerror.png differ diff --git a/docs/html/tools/help/index.jd b/docs/html/tools/help/index.jd index f90d0294c60d1..d49a27926690d 100644 --- a/docs/html/tools/help/index.jd +++ b/docs/html/tools/help/index.jd @@ -134,6 +134,10 @@ files after they have been signed. WYSIWYG editor. It also previews stretched versions of the image, and highlights the area in which content is allowed. +
Vector Asset Studio
+
Helps you add material icons and import Scalable Vector Graphic (SVG) files into your + Android Studio project as a drawable resource.
+
etc1tool
A command line utility that lets you encode PNG images to the ETC1 compression standard and decode ETC1 compressed images back to PNG.
diff --git a/docs/html/tools/help/vector-asset-studio.jd b/docs/html/tools/help/vector-asset-studio.jd new file mode 100644 index 0000000000000..58e53cc368dd1 --- /dev/null +++ b/docs/html/tools/help/vector-asset-studio.jd @@ -0,0 +1,487 @@ +page.title=Vector Asset Studio +parent.title=Tools +parent.link=index.html +page.tags=vector +@jd:body + +
+
+

In this document

+
    +
  1. About Vector Asset Studio
  2. +
  3. Running Vector Asset Studio
  4. +
  5. Importing a Vector Graphic
  6. +
  7. Adding a Vector Drawable to a Layout
  8. +
  9. Referring to a Vector Drawable in Code
  10. +
  11. Modifying XML Code Generated by Vector Asset Studio
  12. +
  13. Deleting a Vector Asset from a Project
  14. +
  15. Delivering an App Containing Vector Drawables
  16. +
+ +

See also

+
    +
  1. Create Vector Drawables
  2. +
  3. Material Icons
  4. +
  5. Drawable Class
  6. +
  7. VectorDrawable Class
  8. +
+ +

Videos

+
    +
  1. DevBytes: Android Vector Graphics
  2. +
  3. Android Studio Support for Vector Graphics
  4. +
+ +

Dependencies and Prerequisites

+ + +
+
+ +

Vector Asset Studio helps you add material icons +and import Scalable Vector Graphic (SVG) files into your app project as a drawable resource. +Compared to raster images, vector drawables can reduce the size of your app and be resized without +loss of image quality. They help you to more easily support different Android devices with varying +screen sizes and resolutions because you can display one vector drawable on all of them.

+ +

About Vector Asset Studio

+ +

Vector Asset Studio adds a vector graphic to the project as an XML file that describes the image. +Maintaining one XML file can be easier than updating multiple raster graphics at various resolutions.

+ +

Android 4.4 (API level 20) and lower doesn't support vector drawables. If your minimum API level +is set at one of these API levels, Vector Asset Studio also directs Gradle to generate raster images +of the vector drawable for backward-compatibility. You can refer to vector assets as +{@link android.graphics.drawable.Drawable} in Java code or @drawable in XML code; when +your app runs, the corresponding vector or raster image displays automatically depending on the API +level.

+ + +

Supported vector graphic types

+ +

The Google material design specification provides material icons +that you can use in your Android apps. Vector +Asset Studio helps you choose, import, and size material icons, as well as define opacity and the +Right-to-Left (RTL) mirroring setting.

+ +

Vector Asset Studio also helps you to import your own SVG files. SVG is an XML-based open +standard of the World Wide Web Consortium (W3C). Vector Asset Studio supports the essential +standard, but not all features. When you specify an SVG file, Vector Asset Studio gives immediate +feedback about whether the graphics code is supported or not. If the SVG code is supported, it +converts the file into an XML file containing {@link +android.graphics.drawable.VectorDrawable} code.

+ +

Considerations for SVG files

+ +

A vector drawable is appropriate for simple icons. The +material icons provide good +examples of the types +of images that work well as vector drawables in an app. In contrast, many app launch icons do have +many details, so they work better as raster images.

+ +

The initial loading of a vector graphic can cost more CPU cycles than the corresponding raster +image. Afterward, memory use and performance are similar between the two. We recommend that you +limit a vector image to a maximum of 200 x 200 dp; otherwise, it can take too long to draw.

+ +

Although vector drawables do support one or more colors, in many cases it makes sense to color +icons black (android:fillColor="#FF000000"). Using this approach, you can add a +tint to the vector drawable +that you placed in a layout, and the icon color changes to the tint color. If the icon color +isn't black, the icon color might instead blend with the tint color.

+ +

Vector drawable support at different API levels

+ +

Android 5.0 (API level 21) and higher provides vector drawable support. If your app has a +minimum API level that is lower, Vector Asset Studio adds the vector drawable file to your +project; also, at build time, Gradle creates Portable Network Graphic (PNG) raster images at various +resolutions. Gradle generates the PNG densities specified by the Domain Specific Language (DSL) +generatedDensities property +in a build.gradle file. To generate PNGs, the build system requires Gradle 1.4.0 or higher.

+ +

For Android 5.0 (API level 21) and higher, Vector Asset Studio supports all of the {@link +android.graphics.drawable.VectorDrawable} elements. For backward compatibility with Android 4.4 (API +level 20) and lower, Vector Asset Studio supports the following XML elements:

+ +
+
+
+ +

<vector>

+
    +
  • android:width
  • +
  • android:height
  • +
  • android:viewportWidth
  • +
  • android:viewportHeight
  • +
  • android:alpha
  • +
+ +
+ + +
+ +

<path>

+
    +
  • android:pathData
  • +
  • android:fillColor
  • +
  • android:strokeColor
  • +
  • android:strokeWidth
  • +
  • android:strokeAlpha
  • +
  • android:fillAlpha
  • +
+ +
+ +
+
+ +

Only Android 5.0 (API level 21) and higher supports dynamic attributes, for example, android:fillColor="?android:attr/colorControlNormal".

+ +

You can change the XML code that Vector Asset Studio generates, although it’s not a best practice. +Changing the values in the code should not cause any issues, as long as they’re valid and static. If +you want to add XML elements, you need to make sure that they’re supported based on your minimum API +level.

+ +

For Android 5.0 (API level 21) and higher, you can use the {@link +android.graphics.drawable.AnimatedVectorDrawable} class to animate the properties of {@link +android.graphics.drawable.VectorDrawable}. For more information, see +Animating Vector Drawables.

+ +

Running Vector Asset Studio

+ +

Follow these steps to start Vector Asset Studio:

+ +
    +
  1. In Android Studio, open an Android app project.
  2. +
  3. In the Project window, select the + Android view.
  4. +
  5. Right-click the res folder and select New > + Vector Asset.
  6. +

    Some other project views and folders have this menu item as well.

    +

    Vector Asset Studio appears.

    + +
  7. If a Need newer Android plugin for Gradle dialog appears instead, correct + your Gradle version as follows.
  8. +
      +
    1. Select File > Project Structure.
    2. +
    3. In the Project Structure dialog, select Project.
    4. +
    5. In the Android Plugin Version field, change the Gradle version to + 1.4.0 or higher, and click OK.
    6. +

      Gradle syncs the project.

      +
    7. In the Android view + of the Project window, right-click the res folder and select + New > Vector Asset.
    8. +

      Vector Asset Studio appears.

      +
    +
  9. Continue with Importing a Vector Graphic.
  10. +
+ +

Importing a Vector Graphic

+ +

Vector Asset Studio helps you to import a vector graphics file into your app project. Follow one + of the following procedures:

+ + +

Adding a material icon

+ +

After you open Vector Asset Studio, you can add a material icon as follows:

+ +
    +
  1. In Vector Asset Studio, select Material Icon.
  2. +
  3. Click Choose.
  4. +
  5. Select a material icon and click OK.
  6. +

    The icon appears in the Vector Drawable Preview.

    +
  7. Optionally change the resource name, size, opacity, and Right-To-Left (RTL) mirroring setting: + +
  8. Click Next.
  9. +
  10. Optionally change the module and resource directory:
  11. + +

    The Output Directories area displays the vector image and the directory + where it will appear.

    +
  12. Click Finish.
  13. +

    Vector Asset Studio adds an XML file defining the vector drawable to the project in the + app/src/main/res/drawable/ folder. From the + Android view of the Project + window, you can view the generated vector XML file in the drawable folder.

    +
  14. Build the project.
  15. +

    If the minimum API level is Android 4.4 (API level 20) and lower, Vector Asset Studio generates + PNG files. From the Project view + of the Project window, you can view the generated PNG and XML files in the + app/build/generated/res/pngs/debug/ folder.

    +

    You should not edit these generated raster files, but instead work with the vector XML file. The + build system regenerates the raster files automatically when needed so you don’t need to maintain + them.

    +
+ +

Importing a Scalable Vector Graphic (SVG)

+ +

After you open Vector Asset Studio, you can import an SVG file as follows:

+ +
    +
  1. In Vector Asset Studio, select Local SVG file.
  2. +

    The file must be on a local drive. If it’s located on the network, for example, you need to + download it to a local drive first.

    +
  3. Specify an Image file by clicking … .
  4. +

    The image appears in the Vector Drawable Preview.

    +

    However, if the SVG file contains unsupported features, an error appears at the bottom left of + Vector Asset Studio, as shown in the following figure.

    + +

    In this case, you can’t use Vector Asset Studio to add the graphics file. Click + More to view the errors. For a list of supported elements, see + Vector Drawable Support at Different API Levels.

    +
  5. Optionally change the resource name, size, opacity, and Right-To-Left (RTL) mirroring setting:
  6. + +
  7. Click Next.
  8. +
  9. Optionally change the module and resource directory:
  10. + +

    The Output Directories area displays the vector image and the directory + where it will appear.

    +
  11. Click Finish.
  12. +

    Vector Asset Studio adds an XML file defining the vector drawable to the project in the + app/src/main/res/drawable/ folder. From the + Android view of the Project + window, you can view the generated vector XML file in the drawable folder.

    +
  13. Build the project.
  14. +

    If the minimum API level is Android 4.4 (API level 20) and lower, Vector Asset Studio generates + PNG files. From the Project view + of the Project window, you can view the generated PNG and XML files in the + app/build/generated/res/pngs/debug/ folder.

    +

    You should not edit these generated raster files, but instead work with the vector XML file. The + build system regenerates the raster files automatically when needed so you don’t need to maintain + them.

    +
+ +

Adding a Vector Drawable to a Layout

+ +

In a layout file, you can set any icon-related widget, such as {@link android.widget.ImageButton}, +{@link android.widget.ImageView}, and so on, to point to a vector asset. For example, the following +layout shows a vector asset displayed on a button:

+ + + +

Follow these steps to display a vector asset on a widget, as shown in the figure:

+ +
    +
  1. Open a project and import a vector asset.
  2. +
  3. In the Android view of + the Project window, double-click a layout XML file, such as content_main.xml.
  4. +
  5. Click the Design tab to display the + Layout Editor.
  6. +
  7. Drag the {@link +android.widget.ImageButton} widget from the Palette window onto the Layout Editor.
  8. +
  9. In the Properties window, locate the src property of the + ImageButton instance and click … .
  10. +
  11. In the Resources dialog, select the Project tab, navigate to the + Drawable folder, and select a vector asset. Click OK.
  12. +

    The vector asset appears on the ImageButton in the layout.

    +
  13. To change the color of the image to the accent color defined in the theme, locate the + tint property in the Properties window and click … .
  14. +
  15. In the Resources dialog, select the Project tab, navigate to the + Color folder, and select colorAccent. Click OK.
  16. +

    The color of the image changes to the accent color in the layout.

    +
+ +

The ImageButton code should be similar to the following:

+ +
+<ImageButton
+  android:id="@+id/imageButton"
+  android:src="@drawable/ic_build_24dp"
+  android:tint="@color/colorAccent"
+  android:layout_width="wrap_content"
+  android:layout_height="wrap_content"
+  android:layout_below="@+id/textView2"
+  android:layout_marginTop="168dp" />
+
+ +

Referring to a Vector Drawable in Code

+ +

You can normally refer to a vector drawable resource in a generic way in your code, and when +your app runs, the corresponding vector or raster image displays automatically depending on the API +level:

+ + + + +

Modifying XML Code Generated by Vector Asset Studio

+ +

You can modify the vector asset XML code, but not the PNGs and corresponding XML code generated +at build time. However, we don't recommended it. Vector Asset Studio makes sure that the vector +drawable and the PNGs match, and that the manifest contains the proper code. If you add code that's +not supported on Android 4.4 (API level 20) and lower, your vector and PNG +images might differ. You also need to make sure that the manifest contains the code to support your +changes.

+ +

Follow these steps to modify the vector XML file:

+ +
    +
  1. In the Project window, double-click the generated vector XML file in the + drawable folder.
  2. +

    The XML file appears in the editor and Preview windows.

    + + + +
  3. Edit the XML code based on what’s supported by the minimum API level:
  4. + +

    For example, if you didn’t select the RTL option in Vector Asset Studio but realize you now + need it, you can add the autoMirrored + attribute later. To view the RTL version, select Preview Right-to-Left Layout in + the + menu of the Preview window. (Select None to remove the RTL preview.)

    + +

    Note: If you’re working with an older project, you might need to + add android:supportsRtl="true" to your app manifest. Also, because + autoMirrored is a dynamic attribute, it's supported on Android 5.0 (API level 21) and + higher only.

    +
  5. Build the project and check that the vector and raster images look the same.
  6. +

    Remember that the generated PNGs could display differently in the Preview window than + in the app due to different rendering engines and any changes made to the vector drawable before a + build. If you add code to the vector XML file created by Vector Asset Studio, any features + unsupported in Android 4.4 (API level 20) and lower don't appear in the generated PNG files. As a + result, when you add code, you should always check that the generated PNGs match the vector + drawable. To do so, you could double-click the PNG in the + Project view of the Project + window; the left margin of the code editor also displays the PNG image when your code refers to + the drawable.

    + +
+ + +

Deleting a Vector Asset from a Project

+ +

Follow these steps to remove a vector asset from a project:

+ +
    +
  1. In the Project window, delete the generated vector XML file by selecting the file and + pressing the Delete key (or select Edit > Delete).
  2. +

    The Safe Delete dialog appears.

    +
  3. Optionally select options to find where the file is used in the project, and click + OK.
  4. +

    Android Studio deletes the file from the project and the drive. However, if you chose to search + for places in the project where the file is used and some usages are found, you can view them and + decide whether to delete the file.

    +
  5. Select Build > Clean Project.
  6. +

    Any auto-generated PNG and XML files corresponding to the deleted vector + asset are removed from the project and the drive.

    +
+ +

Delivering an App Containing Vector Drawables

+ +

When your minimum API level includes Android 4.4 (API level 20) or lower, you have corresponding + vector and raster images in your project. In this case, you have two options for delivering your + APK files:

+ + diff --git a/docs/html/tools/tools_toc.cs b/docs/html/tools/tools_toc.cs index 969ca4ace39a8..d183f42bb3a1a 100644 --- a/docs/html/tools/tools_toc.cs +++ b/docs/html/tools/tools_toc.cs @@ -176,6 +176,7 @@ class="en">Tools Help
  • Systrace
  • Tracer for OpenGL ES
  • Traceview
  • +
  • Vector Asset Studio
  • zipalign
  • diff --git a/docs/html/training/material/drawables.jd b/docs/html/training/material/drawables.jd index c58075e621986..da8bea8bef366 100644 --- a/docs/html/training/material/drawables.jd +++ b/docs/html/training/material/drawables.jd @@ -14,6 +14,7 @@ page.title=Working with Drawables