488 lines
27 KiB
Plaintext
488 lines
27 KiB
Plaintext
|
page.title=Vector Asset Studio
|
|||
|
parent.title=Tools
|
|||
|
parent.link=index.html
|
|||
|
page.tags=vector
|
|||
|
@jd:body
|
|||
|
|
|||
|
<div id="qv-wrapper">
|
|||
|
<div id="qv">
|
|||
|
<h2>In this document</h2>
|
|||
|
<ol>
|
|||
|
<li><a href="#about">About Vector Asset Studio</a></li>
|
|||
|
<li><a href="#running">Running Vector Asset Studio</a></li>
|
|||
|
<li><a href="#importing">Importing a Vector Graphic</a></li>
|
|||
|
<li><a href="#layout">Adding a Vector Drawable to a Layout</a></li>
|
|||
|
<li><a href="#referring">Referring to a Vector Drawable in Code</a></li>
|
|||
|
<li><a href="#code">Modifying XML Code Generated by Vector Asset Studio</a></li>
|
|||
|
<li><a href="#delete">Deleting a Vector Asset from a Project</a></li>
|
|||
|
<li><a href="#apk">Delivering an App Containing Vector Drawables</a></li>
|
|||
|
</ol>
|
|||
|
|
|||
|
<h2>See also</h2>
|
|||
|
<ol>
|
|||
|
<li><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Create Vector Drawables</a></li>
|
|||
|
<li><a href="http://www.google.com/design/icons" class="external-link">Material Icons</a></li>
|
|||
|
<li><a href="{@docRoot}reference/android/graphics/drawable/Drawable.html">Drawable Class</a></li>
|
|||
|
<li><a href="{@docRoot}reference/android/graphics/drawable/VectorDrawable.html">VectorDrawable Class</a></li>
|
|||
|
</ol>
|
|||
|
|
|||
|
<h2>Videos</h2>
|
|||
|
<ol>
|
|||
|
<li><a href="http://www.youtube.com/watch?t=126&v=wlFVIIstKmA" class="external-link">DevBytes: Android Vector Graphics</a></li>
|
|||
|
<li><a href="http://www.youtube.com/watch?v=8e3I-PYJNHg" class="external-link">Android Studio Support for Vector Graphics</a></li>
|
|||
|
</ol>
|
|||
|
|
|||
|
<h2>Dependencies and Prerequisites</h2>
|
|||
|
<ul>
|
|||
|
<li>Gradle 1.4.0 or higher</li>
|
|||
|
</ul>
|
|||
|
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
|
|||
|
<p>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. </p>
|
|||
|
|
|||
|
<h2 id="about">About Vector Asset Studio</h2>
|
|||
|
|
|||
|
<p>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.</p>
|
|||
|
|
|||
|
<p>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 <code>@drawable</code> in XML code; when
|
|||
|
your app runs, the corresponding vector or raster image displays automatically depending on the API
|
|||
|
level.</p>
|
|||
|
|
|||
|
|
|||
|
<h3 id="types">Supported vector graphic types</h3>
|
|||
|
|
|||
|
<p>The Google material design specification provides <a href="http://www.google.com/design/icons" class="external-link">material icons</a>
|
|||
|
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.</p>
|
|||
|
|
|||
|
<p>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.</p>
|
|||
|
|
|||
|
<h3 id="when">Considerations for SVG files</h3>
|
|||
|
|
|||
|
<p>A vector drawable is appropriate for simple icons. The
|
|||
|
<a href="http://www.google.com/design/icons" class="external-link">material icons</a> 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.</p>
|
|||
|
|
|||
|
<p>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.</p>
|
|||
|
|
|||
|
<p>Although vector drawables do support one or more colors, in many cases it makes sense to color
|
|||
|
icons black (<code>android:fillColor="#FF000000"</code>). Using this approach, you can add a
|
|||
|
<a href="{@docRoot}training/material/drawables.html#DrawableTint">tint</a> 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.</p>
|
|||
|
|
|||
|
<h3 id="apilevel">Vector drawable support at different API levels</h3>
|
|||
|
|
|||
|
<p>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)
|
|||
|
<a href="http://google.github.io/android-gradle-dsl/1.4/com.android.build.gradle.internal.dsl.ProductFlavor.html#com.android.build.gradle.internal.dsl.ProductFlavor:generatedDensities" class="external-link">generatedDensities</a> property
|
|||
|
in a <code>build.gradle</code> file. To generate PNGs, the build system requires Gradle 1.4.0 or higher.</p>
|
|||
|
|
|||
|
<p>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:</p>
|
|||
|
|
|||
|
<div class="wrap">
|
|||
|
<div class="cols">
|
|||
|
<div class="col-1of2">
|
|||
|
|
|||
|
<p><code><vector></code></p>
|
|||
|
<ul>
|
|||
|
<li><code>android:width</code></li>
|
|||
|
<li><code>android:height</code></li>
|
|||
|
<li><code>android:viewportWidth</code></li>
|
|||
|
<li><code>android:viewportHeight</code></li>
|
|||
|
<li><code>android:alpha</code></li>
|
|||
|
</ul>
|
|||
|
|
|||
|
</div>
|
|||
|
|
|||
|
|
|||
|
<div class="col-1of2">
|
|||
|
|
|||
|
<p><code><path></code></p>
|
|||
|
<ul>
|
|||
|
<li><code>android:pathData</code></li>
|
|||
|
<li><code>android:fillColor</code></li>
|
|||
|
<li><code>android:strokeColor</code></li>
|
|||
|
<li><code>android:strokeWidth</code></li>
|
|||
|
<li><code>android:strokeAlpha</code></li>
|
|||
|
<li><code>android:fillAlpha</code></li>
|
|||
|
</ul>
|
|||
|
|
|||
|
</div>
|
|||
|
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
|
|||
|
<p>Only Android 5.0 (API level 21) and higher supports dynamic attributes, for example, <code>android:fillColor="?android:attr/colorControlNormal"</code>.</p>
|
|||
|
|
|||
|
<p>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.</p>
|
|||
|
|
|||
|
<p>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
|
|||
|
<a href="{@docRoot}training/material/animations.html#AnimVector">Animating Vector Drawables</a>.</p>
|
|||
|
|
|||
|
<h2 id="running">Running Vector Asset Studio</h2>
|
|||
|
|
|||
|
<p>Follow these steps to start Vector Asset Studio:</p>
|
|||
|
|
|||
|
<ol>
|
|||
|
<li>In Android Studio, open an Android app project.</li>
|
|||
|
<li>In the <em>Project</em> window, select the
|
|||
|
<a href="{@docRoot}sdk/installing/create-project.html#ProjectView">Android view</a>.</li>
|
|||
|
<li>Right-click the <strong>res</strong> folder and select <strong>New</strong> >
|
|||
|
<strong>Vector Asset</strong>.</li>
|
|||
|
<p>Some other project views and folders have this menu item as well.</p>
|
|||
|
<p>Vector Asset Studio appears.</p>
|
|||
|
<img src="{@docRoot}images/tools/vas-materialicon.png" />
|
|||
|
<li>If a <em>Need newer Android plugin for Gradle</em> dialog appears instead, correct
|
|||
|
your Gradle version as follows.</li>
|
|||
|
<ol type="a">
|
|||
|
<li>Select <strong>File</strong> > <strong>Project Structure</strong>.</li>
|
|||
|
<li>In the <em>Project Structure</em> dialog, select <strong>Project</strong>.</li>
|
|||
|
<li>In the <strong>Android Plugin Version</strong> field, change the Gradle version to
|
|||
|
<strong>1.4.0</strong> or higher, and click <strong>OK</strong>.</li>
|
|||
|
<p>Gradle syncs the project.</p>
|
|||
|
<li>In the <a href="{@docRoot}sdk/installing/create-project.html#ProjectView">Android view</a>
|
|||
|
of the <em>Project</em> window, right-click the <strong>res</strong> folder and select
|
|||
|
<strong>New</strong> > <strong>Vector Asset</strong>.</li>
|
|||
|
<p>Vector Asset Studio appears.</p>
|
|||
|
</ol>
|
|||
|
<li>Continue with <a href="#importing">Importing a Vector Graphic</a>.</li>
|
|||
|
</ol>
|
|||
|
|
|||
|
<h2 id="importing">Importing a Vector Graphic</h2>
|
|||
|
|
|||
|
<p>Vector Asset Studio helps you to import a vector graphics file into your app project. Follow one
|
|||
|
of the following procedures:</p>
|
|||
|
<ul>
|
|||
|
<li><a href="#materialicon">Adding a material icon</a></li>
|
|||
|
<li><a href="#svg">Importing an SVG file</a></li>
|
|||
|
</ul>
|
|||
|
|
|||
|
<h3 id="materialicon">Adding a material icon</h3>
|
|||
|
|
|||
|
<p>After you <a href="#running">open Vector Asset Studio</a>, you can add a material icon as follows:</p>
|
|||
|
|
|||
|
<ol>
|
|||
|
<li>In Vector Asset Studio, select <strong>Material Icon</strong>.</li>
|
|||
|
<li>Click <strong>Choose</strong>.</li>
|
|||
|
<li>Select a material icon and click <strong>OK</strong>.</li>
|
|||
|
<p>The icon appears in the <strong>Vector Drawable Preview</strong>.</p>
|
|||
|
<li>Optionally change the resource name, size, opacity, and Right-To-Left (RTL) mirroring setting:
|
|||
|
<ul>
|
|||
|
<li><strong>Resource name</strong> - Type a new name if you don’t want to use the default name.
|
|||
|
Vector Asset Studio automatically creates a unique name (adds a number to the end of the name)
|
|||
|
if that resource name already exists in the project. The name can contain lowercase
|
|||
|
characters, underscores, and digits only.</li>
|
|||
|
<li><strong>Override default size from material design</strong> - Select this option if you
|
|||
|
want to adjust the size of the image. When you type a new size, the change appears in the
|
|||
|
preview area.</li>
|
|||
|
<p>The default is 24 x 24 dp, which is defined in the
|
|||
|
<a href="http://www.google.com/design/icons" class="external-link">material design</a>
|
|||
|
specification. Deselect the checkbox to return to the default.</p>
|
|||
|
<li><strong>Opacity</strong> - Use the slider to adjust the opacity of the image. The change
|
|||
|
appears in the preview area.</li>
|
|||
|
<li><strong>Enable auto mirroring for RTL layout</strong> - Select this option if you want a
|
|||
|
mirror image to display when the layout is right to left, instead of left to right. For
|
|||
|
example, some languages are read right to left; if you have an arrow icon, you might want to
|
|||
|
display a mirror image of it in this case. Note that if you’re working with an older project,
|
|||
|
you might also
|
|||
|
need to add <code>android:supportsRtl="true"</code> to your app manifest. Auto-mirroring is
|
|||
|
supported on Android 5.0 (API level 21) and higher only.</li>
|
|||
|
</ul>
|
|||
|
<li>Click <strong>Next</strong>.</li>
|
|||
|
<li>Optionally change the module and resource directory:</li>
|
|||
|
<ul>
|
|||
|
<li><strong>Target Module</strong> - Select a module in the project where you want to add the
|
|||
|
resource. For more information, see
|
|||
|
<a href="{@docRoot}sdk/installing/create-project.html#CreatingAModule">Creating an Android Module</a>.</li>
|
|||
|
<li><strong>Res Directory</strong> - Select the resource source set where you want to add the
|
|||
|
vector asset: <code>src/main/res</code>, <code>src/debug/res</code>, <code>src/release/res</code>,
|
|||
|
or a user-defined source set. The main source set applies to all build variants, including
|
|||
|
debug and release. The debug and release source sets override the main source set and apply
|
|||
|
to one version of a build. The debug source set is for debugging only. To define a new source
|
|||
|
set, select <strong>File</strong> > <strong>Project Structure</strong> > <strong>app</strong> >
|
|||
|
<strong>Build Types</strong>. For example, you could define a beta source set and create a
|
|||
|
version of an icon that includes the text "BETA” in the bottom right corner. For more information, see
|
|||
|
<a href="{@docRoot}tools/building/configuring-gradle.html#workBuildVariants">Working with Build Variants</a>.</li>
|
|||
|
</ul>
|
|||
|
<p>The <strong>Output Directories</strong> area displays the vector image and the directory
|
|||
|
where it will appear.</p>
|
|||
|
<li>Click <strong>Finish</strong>.</li>
|
|||
|
<p>Vector Asset Studio adds an XML file defining the vector drawable to the project in the
|
|||
|
<code>app/src/main/res/drawable/</code> folder. From the
|
|||
|
<a href="{@docRoot}sdk/installing/create-project.html#ProjectView">Android view</a> of the <em>Project</em>
|
|||
|
window, you can view the generated vector XML file in the <strong>drawable</strong> folder.</p>
|
|||
|
<li>Build the project.</li>
|
|||
|
<p>If the minimum API level is Android 4.4 (API level 20) and lower, Vector Asset Studio generates
|
|||
|
PNG files. From the <a href="{@docRoot}sdk/installing/create-project.html#ProjectView">Project view</a>
|
|||
|
of the <em>Project</em> window, you can view the generated PNG and XML files in the
|
|||
|
<code>app/build/generated/res/pngs/debug/</code> folder.</p>
|
|||
|
<p>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.</p>
|
|||
|
</ol>
|
|||
|
|
|||
|
<h3 id="svg">Importing a Scalable Vector Graphic (SVG)</h3>
|
|||
|
|
|||
|
<p>After you <a href="#running">open Vector Asset Studio</a>, you can import an SVG file as follows:</p>
|
|||
|
|
|||
|
<ol>
|
|||
|
<li>In Vector Asset Studio, select <strong>Local SVG file</strong>.</li>
|
|||
|
<p>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.</p>
|
|||
|
<li>Specify an <strong>Image file</strong> by clicking <strong>…</strong> .</li>
|
|||
|
<p>The image appears in the <strong>Vector Drawable Preview</strong>.</p>
|
|||
|
<p>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.</p>
|
|||
|
<img src="{@docRoot}images/tools/vas-svgerror.png" />
|
|||
|
<p>In this case, you can’t use Vector Asset Studio to add the graphics file. Click
|
|||
|
<strong>More</strong> to view the errors. For a list of supported elements, see
|
|||
|
<a href="#apilevel">Vector Drawable Support at Different API Levels</a>.</p>
|
|||
|
<li>Optionally change the resource name, size, opacity, and Right-To-Left (RTL) mirroring setting:</li>
|
|||
|
<ul>
|
|||
|
<li><strong>Resource name</strong> - Type a new name if you don’t want to use the default
|
|||
|
name. Vector Asset Studio automatically creates a unique name (adds a number to the end of the
|
|||
|
name) if that resource name already exists in the project. The name can contain lowercase
|
|||
|
characters, underscores, and digits only.</li>
|
|||
|
<li><strong>Override default size from material design</strong> - Select this option if you
|
|||
|
want to adjust the size of the image. After you select it, the size changes to the size of the
|
|||
|
image itself. Whenever you change the size, the change appears in the preview area.</li>
|
|||
|
<p>The default is 24 x 24 dp, which is defined in the
|
|||
|
<a href="http://www.google.com/design/icons" class="external-link">material design</a>
|
|||
|
specification. Deselect the checkbox to return to the default.</p>
|
|||
|
<li><strong>Opacity</strong> - Use the slider to adjust the opacity of the image. The change
|
|||
|
appears in the preview area.</li>
|
|||
|
<li><strong>Enable auto mirroring for RTL layout</strong> - Select this option if you want a
|
|||
|
mirror image to display when the layout is right to left, instead of left to right. For
|
|||
|
example, some languages are read right to left; if you have an arrow icon, you might want to
|
|||
|
display a mirror image of it in this case. Note that if you’re working with an older project,
|
|||
|
you might
|
|||
|
need to add <code>android:supportsRtl="true"</code> to your app manifest. Auto-mirroring is
|
|||
|
supported on Android 5.0 (API level 21) and higher only.</li>
|
|||
|
</ul>
|
|||
|
<li>Click <strong>Next</strong>.</li>
|
|||
|
<li>Optionally change the module and resource directory:</li>
|
|||
|
<ul>
|
|||
|
<li><strong>Target Module</strong> - Select a module in the project where you want to add the
|
|||
|
resource. For more information, see
|
|||
|
<a href="{@docRoot}sdk/installing/create-project.html#CreatingAModule">Creating an Android Module</a>.</li>
|
|||
|
<li><strong>Res Directory</strong> - Select the resource source set where you want to add the
|
|||
|
vector asset: <code>src/main/res</code>, <code>src/debug/res</code>, <code>src/release/res</code>,
|
|||
|
or a user-defined source set. The main source set applies to all build variants, including
|
|||
|
debug and release. The debug and release source sets override the main source set and apply
|
|||
|
to one version of a build. The debug source set is for debugging only. To define a new source
|
|||
|
set, select <strong>File</strong> > <strong>Project Structure</strong> > <strong>app</strong> >
|
|||
|
<strong>Build Types</strong>. For example, you could define a beta source set and create a
|
|||
|
version of an icon that includes the text "BETA” in the bottom right corner. For more information, see
|
|||
|
<a href="{@docRoot}tools/building/configuring-gradle.html#workBuildVariants">Working with Build Variants</a>.</li>
|
|||
|
</ul>
|
|||
|
<p>The <strong>Output Directories</strong> area displays the vector image and the directory
|
|||
|
where it will appear.</p>
|
|||
|
<li>Click <strong>Finish</strong>.</li>
|
|||
|
<p>Vector Asset Studio adds an XML file defining the vector drawable to the project in the
|
|||
|
<code>app/src/main/res/drawable/</code> folder. From the
|
|||
|
<a href="{@docRoot}sdk/installing/create-project.html#ProjectView">Android view</a> of the <em>Project</em>
|
|||
|
window, you can view the generated vector XML file in the <strong>drawable</strong> folder.</p>
|
|||
|
<li>Build the project.</li>
|
|||
|
<p>If the minimum API level is Android 4.4 (API level 20) and lower, Vector Asset Studio generates
|
|||
|
PNG files. From the <a href="{@docRoot}sdk/installing/create-project.html#ProjectView">Project view</a>
|
|||
|
of the <em>Project</em> window, you can view the generated PNG and XML files in the
|
|||
|
<code>app/build/generated/res/pngs/debug/</code> folder.</p>
|
|||
|
<p>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.</p>
|
|||
|
</ol>
|
|||
|
|
|||
|
<h2 id="layout">Adding a Vector Drawable to a Layout</h2>
|
|||
|
|
|||
|
<p>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:</p>
|
|||
|
|
|||
|
<img src="{@docRoot}images/tools/vas-layout.png" />
|
|||
|
|
|||
|
<p>Follow these steps to display a vector asset on a widget, as shown in the figure:</p>
|
|||
|
|
|||
|
<ol>
|
|||
|
<li>Open a project and <a href="#running">import a vector asset</a>.</li>
|
|||
|
<li>In the <a href="{@docRoot}sdk/installing/create-project.html#ProjectView">Android view</a> of
|
|||
|
the <em>Project</em> window, double-click a layout XML file, such as <code>content_main.xml</code>.</li>
|
|||
|
<li>Click the <strong>Design</strong> tab to display the
|
|||
|
<a href="{@docRoot}sdk/installing/studio-layout.html">Layout Editor</a>.</li>
|
|||
|
<li>Drag the {@link
|
|||
|
android.widget.ImageButton} widget from the <em>Palette</em> window onto the Layout Editor.</li>
|
|||
|
<li>In the <em>Properties</em> window, locate the <strong>src</strong> property of the
|
|||
|
<code>ImageButton</code> instance and click <strong>…</strong> .</li>
|
|||
|
<li>In the <em>Resources</em> dialog, select the <strong>Project</strong> tab, navigate to the
|
|||
|
<strong>Drawable</strong> folder, and select a vector asset. Click <strong>OK</strong>.</li>
|
|||
|
<p>The vector asset appears on the <code>ImageButton</code> in the layout.</p>
|
|||
|
<li>To change the color of the image to the accent color defined in the theme, locate the
|
|||
|
<strong>tint</strong> property in the <em>Properties</em> window and click <strong>…</strong> .</li>
|
|||
|
<li>In the <em>Resources</em> dialog, select the <strong>Project</strong> tab, navigate to the
|
|||
|
<strong>Color</strong> folder, and select <strong>colorAccent</strong>. Click <strong>OK</strong>.</li>
|
|||
|
<p>The color of the image changes to the accent color in the layout.</p>
|
|||
|
</ol>
|
|||
|
|
|||
|
<p>The <code>ImageButton</code> code should be similar to the following:</p>
|
|||
|
|
|||
|
<pre>
|
|||
|
<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" />
|
|||
|
</pre>
|
|||
|
|
|||
|
<h2 id="referring">Referring to a Vector Drawable in Code</h2>
|
|||
|
|
|||
|
<p>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:</p>
|
|||
|
|
|||
|
<ul>
|
|||
|
<li>In most cases, you can refer to vector assets as <code>@drawable</code> in XML code or
|
|||
|
{@link android.graphics.drawable.Drawable} in Java code. </li>
|
|||
|
<p>For example, the following layout XML code applies the image to a view:</p>
|
|||
|
<pre>
|
|||
|
<ImageView
|
|||
|
android:layout_height="wrap_content"
|
|||
|
android:layout_width="wrap_content"
|
|||
|
android:src="@drawable/myimage" />
|
|||
|
</pre>
|
|||
|
<p>The following Java code retrieves the image as a {@link android.graphics.drawable.Drawable}:</p>
|
|||
|
<pre>
|
|||
|
Resources res = {@link android.content.Context#getResources()};
|
|||
|
Drawable drawable = res.{@link android.content.res.Resources#getDrawable(int) getDrawable}(R.drawable.myimage);
|
|||
|
</pre>
|
|||
|
<li>Occasionally, you might need to typecast the drawable resource to its exact class, such as
|
|||
|
when you need to use specific features of the {@link android.graphics.drawable.VectorDrawable}
|
|||
|
class. To do so, you could use Java code such as the following:</li>
|
|||
|
<pre>
|
|||
|
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
|
|||
|
VectorDrawable vectorDrawable = (VectorDrawable) drawable;
|
|||
|
} else {
|
|||
|
BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
|
|||
|
}
|
|||
|
</pre>
|
|||
|
</ul>
|
|||
|
|
|||
|
|
|||
|
<h2 id="code">Modifying XML Code Generated by Vector Asset Studio</h2>
|
|||
|
|
|||
|
<p>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
|
|||
|
<a href="#apilevel">not supported</a> 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.</p>
|
|||
|
|
|||
|
<p>Follow these steps to modify the vector XML file:</p>
|
|||
|
|
|||
|
<ol>
|
|||
|
<li>In the <em>Project</em> window, double-click the generated vector XML file in the
|
|||
|
<strong>drawable</strong> folder.</li>
|
|||
|
<p>The XML file appears in the editor and <em>Preview</em> windows.</p>
|
|||
|
|
|||
|
<img src="{@docRoot}images/tools/vas-codepreview.png" />
|
|||
|
|
|||
|
<li>Edit the XML code based on what’s supported by the minimum API level:</li>
|
|||
|
<ul>
|
|||
|
<li>Android 5.0 (API level 21) and higher - Vector Asset Studio supports all of the
|
|||
|
{@link android.graphics.drawable.Drawable} and
|
|||
|
{@link android.graphics.drawable.VectorDrawable} elements. You can add XML elements and
|
|||
|
change values.</li>
|
|||
|
<li>Android 4.4 (API level 20) and lower - Vector Asset Studio supports all of the
|
|||
|
{@link android.graphics.drawable.Drawable} elements and a subset of the
|
|||
|
{@link android.graphics.drawable.VectorDrawable} elements. See
|
|||
|
<a href="#apilevel">Support at Different API Levels</a> for a list. You can change values in
|
|||
|
the generated code and add XML elements that are supported. Dynamic attributes aren't
|
|||
|
supported.</li>
|
|||
|
</ul>
|
|||
|
<p>For example, if you didn’t select the RTL option in Vector Asset Studio but realize you now
|
|||
|
need it, you can add the <a href="{@docRoot}reference/android/R.attr.html#autoMirrored">autoMirrored</a>
|
|||
|
attribute later. To view the RTL version, select <strong>Preview Right-to-Left Layout</strong> in
|
|||
|
the <img src="{@docRoot}images/tools/vas-rtlmenu.png" style="vertical-align:sub;margin:0;height:17px" alt="" />
|
|||
|
menu of the <em>Preview</em> window. (Select <strong>None</strong> to remove the RTL preview.)</p>
|
|||
|
<img src="{@docRoot}images/tools/vas-rtl.png" />
|
|||
|
<p class="note"><strong>Note:</strong> If you’re working with an older project, you might need to
|
|||
|
add <code>android:supportsRtl="true"</code> to your app manifest. Also, because
|
|||
|
<code>autoMirrored</code> is a dynamic attribute, it's supported on Android 5.0 (API level 21) and
|
|||
|
higher only.</p>
|
|||
|
<li>Build the project and check that the vector and raster images look the same.</li>
|
|||
|
<p>Remember that the generated PNGs could display differently in the <em>Preview</em> 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
|
|||
|
<a href="{@docRoot}sdk/installing/create-project.html#ProjectView">Project view</a> of the <em>Project</em>
|
|||
|
window; the left margin of the code editor also displays the PNG image when your code refers to
|
|||
|
the drawable.</p>
|
|||
|
<img src="{@docRoot}images/tools/vas-imageincode.png" />
|
|||
|
</ol>
|
|||
|
|
|||
|
|
|||
|
<h2 id="delete">Deleting a Vector Asset from a Project</h2>
|
|||
|
|
|||
|
<p>Follow these steps to remove a vector asset from a project:</p>
|
|||
|
|
|||
|
<ol>
|
|||
|
<li>In the <em>Project</em> window, delete the generated vector XML file by selecting the file and
|
|||
|
pressing the <strong>Delete</strong> key (or select <strong>Edit</strong> > <strong>Delete</strong>).</li>
|
|||
|
<p>The <em>Safe Delete</em> dialog appears.</p>
|
|||
|
<li>Optionally select options to find where the file is used in the project, and click
|
|||
|
<strong>OK</strong>.</li>
|
|||
|
<p>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.</p>
|
|||
|
<li>Select <strong>Build</strong> > <strong>Clean Project</strong>.</li>
|
|||
|
<p>Any auto-generated PNG and XML files corresponding to the deleted vector
|
|||
|
asset are removed from the project and the drive.</p>
|
|||
|
</ol>
|
|||
|
|
|||
|
<h2 id="apk">Delivering an App Containing Vector Drawables</h2>
|
|||
|
|
|||
|
<p>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:</p>
|
|||
|
|
|||
|
<ul>
|
|||
|
<li>Create one APK that includes both the vector images and the corresponding raster
|
|||
|
representations. This is the easiest solution.</li>
|
|||
|
<li>Create separate APKs for different API levels. When you don’t include the corresponding
|
|||
|
raster images in the APK for Android 5.0 (API level 21) and higher, the APK can be much smaller in
|
|||
|
size. For more information, see <a href="{@docRoot}google/play/publishing/multiple-apks.html">Multiple APK Support</a>.</li>
|
|||
|
</ul>
|