diff --git a/docs/html/images/tools/image-out.png b/docs/html/images/tools/image-out.png new file mode 100644 index 0000000000000..0373b16151356 Binary files /dev/null and b/docs/html/images/tools/image-out.png differ diff --git a/docs/html/images/tools/trim.png b/docs/html/images/tools/trim.png new file mode 100644 index 0000000000000..8420dd478f074 Binary files /dev/null and b/docs/html/images/tools/trim.png differ diff --git a/docs/html/tools/help/image-asset-studio.jd b/docs/html/tools/help/image-asset-studio.jd new file mode 100644 index 0000000000000..818b7442007f4 --- /dev/null +++ b/docs/html/tools/help/image-asset-studio.jd @@ -0,0 +1,200 @@ +page.title=Image Asset Studio +parent.title=Tools +parent.link=index.html +page.tags=image asset +@jd:body +
+
+

In this document

+
    +
  1. Accessing Image Asset Studio
    2. +
  2. Creating Icons
    3. +
  3. Customizing Icons
    4. +
  4. Saving Icons
    5. +
  5. Configuring Build Properties
    6. +
  6. Referring to an Image Resource in Code
    7. +
+
+
+ + +

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 generalized screen + density that your app supports. + The newly generated icons are placed in density-specific folders (for example, mipmap-mdpi/ + or drawable-xxxhdpi/), which + reside in the application’s res/ folder. At runtime, Android uses the appropriate + resource based on the screen density of the device your application is running on.

+ +

Image Asset Studio generates the following asset types:

+ + +

This guide shows how to generate these assets using Image Asset Studio.

+ +

Accessing Image Asset Studio

+

Follow these steps to access Image Asset Studio:

+
    +
  1. In Android Studio, open an Android app project.
    2. +
  2. In the project-view-pane + on the left side of the screen, select Android from the dropdown menu. The Android + project view appears in the pane. +
    3. +
  3. Right-click the res/folder and select New > Image +Asset. The Image Asset Studio window appears.
    4. +
+ + +

Creating Icons

+

You can generate icons from image, clipart +, or text-string resources. This section explains how to work with +each of these resources. +

+ + +

From an image resource

+
    +
  1. Open the Asset Type dropdown menu and select an icon type.
    2. +
  2. From the available Foreground options, select Image.
    3. +
  3. Specify the asset to use by entering a filename in the Image file 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. +

    The icon to be generated appears in the Preview pane, displayed at sizes corresponding + to different screen densities.

    + +

    The rest of the settings on this screen are optional. +To learn how to customize your icons using these options, + see Customizing Icons.

    4. +
  4. Save your icons to the project folder. +
    5. +
+ + +

From a clipart resource

+
    +
  1. Open the Asset Type dropdown menu and select an icon type.
    2. +
  2. From the available Foreground options, select Clipart. The +Choose button appears.
    3. +
  3. Click Choose. A window containing clipart resources appears.
    4. +
  4. Select a clipart resource. +

    The icon to be generated appears in the Preview pane, displayed at sizes corresponding +to different screen densities.

    +

    The rest of the settings on this screen are optional. + To learn how to customize your icons using these options, + see Customizing Icons.

    5. +
  5. Save your icons to the project folder. +
    6. +
+ + + +

From a text-string resource

+
    +
  1. Open the Asset Type dropdown menu and select an icon type.
    2. +
  2. From the available Foreground options, select Text.
    3. +
  3. Enter into the Text field the text you want to turn into an icon. +

    The icon to be generated appears in the Preview pane, displayed at sizes corresponding +to different screen densities.

    4. +
  4. To change the font, select a font from the Font dropdown menu. +

    The rest of the settings on this screen are optional. +To learn how to customize your icons using these options, +see Customizing Icons.

    5. +
  5. Save your icons to the project folder. +
    6. +
+ + +

Customizing Icons

+

Image Asset Studio lets you customize various visual effects for your icons. The following options +are of particular note.

+ + + + +

Saving Icons

+

This section explains how to save your icons to the res/ folder. Do so by following + these steps:

+
    +
  1. From the initial screen that appeared when you opened Image Asset Studio, click + Next. Image Asset Studio opens a new window.
    2. +
  2. 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 + enter your own values for them. +
    3. +
  3. Click Finish. The Image Asset Studio generates new icon files, in PNG format, + according to the options you have chosen. +
    4. +
+ +

Note: Launcher icon files reside in a different location from that + of other icons. They are located in the mipmap/ folder. All other icon files reside + in the drawable/ folder of your project.

+ + +

Configuring Build Properties

+

To change the module and resource directory, follow these steps:

+
    +
  1. In the Target Module field, select a module to add the resource to. +For more information, +see +Creating an Android Module. +
    2. +
  2. In the Res Directory field, select an option for where to place the image + asset: + +
+ + + + +

Referring to an Image Resource in Code

+ +

After you have an image resource in the res/directory of your project, you can + reference it from your Java code or your XML layout using its + + resource ID.

+ +

For example, the following XML references the ic_launcher icon in the +mipmap/ folder.

+
+<application android:name="ApplicationTitle"
+    android:label="@string/app_label"
+    android:icon="@mipmap/ic_launcher" >
+ +

The following Java code sets an +ImageView to use + the drawable/myimage.png resource:

+
ImageView imageView = (ImageView) findViewById(R.id.myimageview);
+imageView.setImageResource(R.drawable.myimage);
diff --git a/docs/html/tools/help/index.jd b/docs/html/tools/help/index.jd index f984f2e8ce653..86c10354c4089 100755 --- a/docs/html/tools/help/index.jd +++ b/docs/html/tools/help/index.jd @@ -133,7 +133,13 @@ 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
+
Image Asset Studio
+
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.
+ +
Vector Asset Studio
+
Helps you add material icons and import Scalable Vector Graphic (SVG) files into your Android Studio project as a drawable resource.
diff --git a/docs/html/tools/tools_toc.cs b/docs/html/tools/tools_toc.cs index f7431525f4fa5..a0dc5f76e4f1e 100644 --- a/docs/html/tools/tools_toc.cs +++ b/docs/html/tools/tools_toc.cs @@ -194,6 +194,7 @@ class="en">Tools Help
  • Traceview
  • Vector Asset Studio
    • +
  • Image Asset Studio
  • zipalign
    • diff --git a/docs/html/training/material/drawables.jd b/docs/html/training/material/drawables.jd index da8bea8bef366..eb9d2734ec81a 100644 --- a/docs/html/training/material/drawables.jd +++ b/docs/html/training/material/drawables.jd @@ -15,6 +15,7 @@ page.title=Working with Drawables
  • Material design specification
  • Material design on Android
  • Vector Asset Studio
    • +
  • Image Asset Studio