201 lines
8.9 KiB
Plaintext
201 lines
8.9 KiB
Plaintext
page.title=Image Asset Studio
|
||
parent.title=Tools
|
||
parent.link=index.html
|
||
page.tags=image asset
|
||
@jd:body
|
||
<div id="qv-wrapper">
|
||
<div id="qv">
|
||
<h2>In this document</h2>
|
||
<ol>
|
||
<li><a href="#access">Accessing Image Asset Studio</a></li>
|
||
<li><a href="#creating">Creating Icons</a></li>
|
||
<li><a href="#customizing">Customizing Icons</a></li>
|
||
<li><a href="#saving">Saving Icons</a></li>
|
||
<li><a href="#configure">Configuring Build Properties</a></li>
|
||
<li><a href="#referincode">Referring to an Image Resource in Code</a></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<p>Image Asset Studio helps you to generate custom icons for your Android applications from existing
|
||
image, clipart, or text-string resources. It generates a set of icons at the appropriate resolution
|
||
for each <a href ="{@docRoot}guide/practices/screens_support.html#range"> generalized screen
|
||
density</a> that your app supports.
|
||
The newly generated icons are placed in density-specific folders (for example, <code>mipmap-mdpi/
|
||
</code> or <code>drawable-xxxhdpi/</code>), which
|
||
reside in the application’s <code>res/</code> folder. At runtime, Android uses the appropriate
|
||
resource based on the screen density of the device your application is running on. </p>
|
||
|
||
<p>Image Asset Studio generates the following asset types:</p>
|
||
<ul>
|
||
<li>Launcher icons.</li>
|
||
<li>Action bar and tab icons.</li>
|
||
<li>Notification icons.</li>
|
||
</ul>
|
||
|
||
<p>This guide shows how to generate these assets using Image Asset Studio.</p>
|
||
|
||
<h2 id="access">Accessing Image Asset Studio</h2>
|
||
<p>Follow these steps to access Image Asset Studio:</p>
|
||
<ol>
|
||
<li>In Android Studio, open an Android app project.</li>
|
||
<li>In the <a href= "{@docRoot}sdk/installing/create-project.html#enable-view">project-view-pane</a>
|
||
on the left side of the screen, select <strong>Android</strong> from the dropdown menu. The Android
|
||
project view appears in the pane.
|
||
</li>
|
||
<li>Right-click the <code>res/</code>folder and select <strong>New</strong> > <strong>Image
|
||
Asset</strong>. The Image Asset Studio window appears.</li>
|
||
</ol>
|
||
|
||
|
||
<h2 id="creating">Creating Icons</h2>
|
||
<p>You can generate icons from <a href="#launch_image">image</a>, <a href="#launch_clipart">clipart
|
||
</a>, or <a href="#launch_text">text-string</a> resources. This section explains how to work with
|
||
each of these resources.
|
||
</p>
|
||
|
||
|
||
<h3 id="launch_image">From an image resource</h3>
|
||
<ol>
|
||
<li>Open the <em>Asset Type</em> dropdown menu and select an icon type.</li>
|
||
<li>From the available <em>Foreground</em> options, select <strong>Image</strong>.</li>
|
||
<li>Specify the asset to use by entering a filename in the <em>Image file</em> field or by
|
||
navigating to and selecting a file via the file browser. Image Asset Studio supports the following
|
||
file types, in descending order of desirability: PNG, JPG, and GIF.
|
||
<p>The icon to be generated appears in the <em>Preview</em> pane, displayed at sizes corresponding
|
||
to different screen densities.</p>
|
||
|
||
<p>The rest of the settings on this screen are optional.
|
||
To learn how to customize your icons using these options,
|
||
see <a href="#customizing">Customizing Icons</a>.</p></li>
|
||
<li><a href="#saving">Save your icons</a> to the project folder.
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
<h3 id="launch_clipart">From a clipart resource</h3>
|
||
<ol>
|
||
<li>Open the <em>Asset Type</em> dropdown menu and select an icon type.</li>
|
||
<li>From the available <em>Foreground</em> options, select <strong>Clipart</strong>. The <strong>
|
||
Choose</strong> button appears.</li>
|
||
<li>Click <strong>Choose</strong>. A window containing clipart resources appears.</li>
|
||
<li> Select a clipart resource.
|
||
<p>The icon to be generated appears in the <em>Preview</em> pane, displayed at sizes corresponding
|
||
to different screen densities.</p>
|
||
<p>The rest of the settings on this screen are optional.
|
||
To learn how to customize your icons using these options,
|
||
see <a href="#customizing">Customizing Icons</a>.</p></li>
|
||
<li><a href="#saving">Save your icons</a> to the project folder.
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
|
||
<h3 id="launch_text"> From a text-string resource</h3>
|
||
<ol>
|
||
<li>Open the <em>Asset Type</em> dropdown menu and select an icon type.</li>
|
||
<li>From the available <em>Foreground </em> options, select <strong>Text</strong>.</li>
|
||
<li>Enter into the <em>Text</em> field the text you want to turn into an icon.
|
||
<p>The icon to be generated appears in the <em> Preview</em> pane, displayed at sizes corresponding
|
||
to different screen densities.</p></li>
|
||
<li>To change the font, select a font from the <em>Font</em> dropdown menu.
|
||
<p>The rest of the settings on this screen are optional.
|
||
To learn how to customize your icons using these options,
|
||
see <a href="#customizing">Customizing Icons</a>.</p></li>
|
||
<li><a href="#saving">Save your icons</a> to the project folder.
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
<h2 id="customizing">Customizing Icons</h2>
|
||
<p>Image Asset Studio lets you customize various visual effects for your icons. The following options
|
||
are of particular note.</p>
|
||
|
||
<ul>
|
||
<li><em>Trim surrounding blank space</em>: This option allows you to adjust the margin between the
|
||
icon graphic and border.
|
||
<figure id="">
|
||
<img src="{@docRoot}images/tools/trim.png"
|
||
width="461">
|
||
<figcaption><strong>Figure 1</strong>: An icon before and after trimming.</figcaption>
|
||
</figure>
|
||
<li><em>Additional Padding</em>: This option allows you to adjust the icon's padding on all four
|
||
sides. Use the slider to select a value between 0 and 100 pixels. For example, for a 100px X 100px
|
||
image with padding of 25px, the resulting image is 150px X 150px.</li>
|
||
<li><em>Theme</em>: This option allows you to set a theme for your action bar and tab icons.
|
||
You can tint icons using the HOLO_DARK or HOLO_LIGHT theme or create
|
||
a custom theme using the color palette.</li>
|
||
<li><em>Resource name</em>: This option allows you to specify a resource name other than the
|
||
default one. If an asset with the specified resource name already exists, Image Asset Studio warns
|
||
you that it is going to overwrite the existing asset with this one.</li></ul>
|
||
|
||
|
||
<h2 id="saving">Saving Icons</h2>
|
||
<p>This section explains how to save your icons to the <code>res/</code> folder. Do so by following
|
||
these steps:</p>
|
||
<ol>
|
||
<li>From the initial screen that appeared when you opened Image Asset Studio, click
|
||
<strong>Next</strong>. Image Asset Studio opens a new window.</li>
|
||
<li>Confirm the target module and resource directory settings for the icon.
|
||
If you don't want to use the default target module or resource directory, you can
|
||
<a href="#configure">enter your own values</a> for them.
|
||
</li>
|
||
<li>Click <strong>Finish</strong>. The Image Asset Studio generates new icon files, in PNG format,
|
||
according to the options you have chosen.
|
||
</li>
|
||
</ol>
|
||
|
||
<p class="note"><strong>Note:</strong> Launcher icon files reside in a different location from that
|
||
of other icons. They are located in the <code>mipmap/</code> folder. All other icon files reside
|
||
in the <code>drawable/</code> folder of your project.</p>
|
||
|
||
|
||
<h2 id="configure">Configuring Build Properties</h2>
|
||
<p>To change the module and resource directory, follow these steps:</p>
|
||
<ol>
|
||
<li>In the <em>Target Module</em> field, select a module to add the resource to.
|
||
For more information,
|
||
see <a href="{@docRoot}sdk/installing/create-project.html#CreatingAModule">
|
||
Creating an Android Module</a>.
|
||
</li>
|
||
<li>In the <em>Res Directory</em> field, select an option for where to place the image
|
||
asset:
|
||
<ul>
|
||
<li><code>src/main/res</code>: This source set applies to all build variants, including debug
|
||
and release.</li>
|
||
<li><code>src/debug/res</code>, <code> src/release/res</code>: These source sets override the main
|
||
source set and apply to one version of a build. The debug source set is for debugging only.
|
||
</li>
|
||
<li>User-defined: To define your own 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">
|
||
Work with build variants</a>.</li>
|
||
</ul>
|
||
</ol>
|
||
|
||
|
||
|
||
|
||
<h2 id="referincode">Referring to an Image Resource in Code</h2>
|
||
|
||
<p>After you have an image resource in the <code>res/</code>directory of your project, you can
|
||
reference it from your Java code or your XML layout using its
|
||
<a href="{@docRoot}guide/topics/resources/accessing-resources.html#ResourcesFromCode">
|
||
resource ID</a>. </p>
|
||
|
||
<p> For example, the following XML references the <code>ic_launcher icon</code> in the
|
||
<code>mipmap/</code> folder.</p>
|
||
<pre>
|
||
<application android:name="ApplicationTitle"
|
||
android:label="@string/app_label"
|
||
android:icon="@mipmap/ic_launcher" ></pre>
|
||
|
||
<p>The following Java code sets an
|
||
<a href="{@docRoot}reference/android/widget/ImageView.html">ImageView</a> to use
|
||
the <code>drawable/myimage.png</code> resource:</p>
|
||
<pre>ImageView imageView = (ImageView) findViewById(R.id.myimageview);
|
||
imageView.setImageResource(R.drawable.myimage);</pre>
|