Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit ec76b67f authored by sreevanis's avatar sreevanis Committed by David Friedman
Browse files

docs: New Image Asset Studo 1.5.1 

Change-Id: If567e6b2f2c5e1fd526d8e7491e7265e154b3f62
Bugfix: 25128284
parent f040254e

docs/html/images/tools/image-out.png

0 → 100644
+39.6 KiB
Loading image diff...

docs/html/images/tools/trim.png

0 → 100644
+21.4 KiB
Loading image diff...

docs/html/tools/help/image-asset-studio.jd

0 → 100644
+200 −0
Original line number Diff line number Diff line 
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> &gt; <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> &gt; <strong>Project

   Structure</strong> &gt; <strong>app</strong>  &gt; <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>

&lt;application android:name="ApplicationTitle"

    android:label="&#64;string/app_label"

    android:icon="&#64;mipmap/ic_launcher" &gt;</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>

docs/html/tools/help/index.jd

+7 −1
Original line number Diff line number Diff line
@@ -133,7 +133,13 @@ files after they have been signed.</dd> 
WYSIWYG editor. It also previews stretched versions of the image, and highlights the area in which

content is allowed.</dd>



<dt><a href="{@docRoot}tools/help/image-asset-studio.html">Image Asset Studio</a></dt>

    <dd>Helps you to generate custom icons for your Android applications from existing images, cliparts, or text.

     It generates a set of icons at the appropriate resolution for each generalized screen density that your app 

     supports.</dd>



<dt><a href="{@docRoot}tools/help/vector-asset-studio.html">Vector Asset Studio</a></dt>



    <dd>Helps you add material icons and import Scalable Vector Graphic (SVG) files into your

    Android Studio project as a drawable resource.</dd>

docs/html/tools/tools_toc.cs

+1 −0
Original line number Diff line number Diff line
@@ -194,6 +194,7 @@ class="en">Tools Help</span></a></div> 
       </li>

       <li><a href="<?cs var:toroot ?>tools/help/traceview.html">Traceview</a></li>

       <li><a href="<?cs var:toroot ?>tools/help/vector-asset-studio.html">Vector Asset Studio</a></li>

       <li><a href="<?cs var:toroot ?>tools/help/image-asset-studio.html">Image Asset Studio</a></li>

       <li><a href="<?cs var:toroot ?>tools/help/zipalign.html">zipalign</a></li>



    </ul>