add design tips to iconography page.
Accounts for the removal of the previous UI guideline pages,
which is where most of this new content came from.
Also update figure to add xxhdpi and remove ldpi,
and include 2x version, because ya know, irony.
Change-Id: Ia37ef1a65bdf9c4173a323ae37fffe03b53a6fcf
diff --git a/docs/html/design/media/devices_displays_density.png b/docs/html/design/media/devices_displays_density.png
index 7ddad31..4e3cbf6 100644
--- a/docs/html/design/media/devices_displays_density.png
+++ b/docs/html/design/media/devices_displays_density.png
Binary files differ
diff --git a/docs/html/design/media/devices_displays_density@2x.png b/docs/html/design/media/devices_displays_density@2x.png
new file mode 100644
index 0000000..79a46b0
--- /dev/null
+++ b/docs/html/design/media/devices_displays_density@2x.png
Binary files differ
diff --git a/docs/html/design/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd
index 18550d9..a8f9d6f 100644
--- a/docs/html/design/style/devices-displays.jd
+++ b/docs/html/design/style/devices-displays.jd
@@ -32,7 +32,7 @@
</div>
</div>
- <img src="{@docRoot}design/media/devices_displays_density.png">
+ <img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
<h4>Strategies</h4>
<p>So where do you begin when designing for multiple screens? One approach is to work in the base
diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd
index 1475e5c..0d2cdbb 100644
--- a/docs/html/design/style/iconography.jd
+++ b/docs/html/design/style/iconography.jd
@@ -4,9 +4,37 @@
<img src="{@docRoot}design/media/iconography_overview.png">
+
<p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick,
intuitive representation of an action, a status, or an app.</p>
+<p>When you design icons for your app, it's important to keep in mind that your
+app may be installed on a variety of devices that offer a range of
+pixel densities, as mentioned in
+<a href="{@docRoot}design/style/devices-displays.html">Devices
+and Displays</a>. But you can make your icons look great on all devices
+by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of
+the device screen and loads the appropriate density-specific assets for your app. </p>
+
+<p>Because you will deliver each icon in multiple sizes to support different densities,
+the design guidelines below
+refer to the icon dimensions in <acronym title="density-independent pixels">dp</acronym>
+units, which are based on the pixel dimensions of a medium-density (MDPI) screen.</p>
+
+<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
+
+<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6 scaling
+ratio</strong> between the four primary densities (medium, high, x-high, and xx-high,
+respectively). For example, consider that the size for a launcher icon is specified to be
+48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the
+high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high
+density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p>
+
+<p class="note"><strong>Note:</strong> Android also supports low-density (LDPI) screens,
+but you normally don't need to create custom assets at this size because Android
+effectively down-scales your HDPI assets by 1/2 to match the expected size.</p>
+
+
<h2 id="launcher">Launcher</h2>
@@ -338,3 +366,165 @@
</div>
<!-- 2 free columns -->
</div>
+
+
+
+
+
+
+
+
+
+
+<h2 id="DesignTips">Design Tips</h2>
+
+<p>Here are some tips you might find useful as you create icons or other
+drawable assets for your application. These tips assume you are using
+Adobe® Photoshop® or a similar raster and vector image-editing program.</p>
+
+
+
+
+<h3>Use vector shapes where possible</h3>
+
+<p>Many image-editing programs such as Adobe® Photoshop® allow you to use a
+combination of vector shapes and raster layers and effects. When possible,
+use vector shapes so that if the need arises, assets can be scaled up without
+loss of detail and edge crispness.</p>
+
+<p>Using vectors also makes it easy to align edges and corners to pixel
+boundaries at smaller resolutions.</li>
+
+
+
+<h3>Start with large artboards</h3>
+
+<p>Because you will need to create assets for different screen densities,
+it is best to start your icon
+designs on large artboards with dimensions that are multiples of the target icon
+sizes. For example, launcher icons are 48, 72, 96, or 144 pixels wide,
+depending on screen density (mdpi, hdpi, xhdpi, and xxhdpi, respectively). If you
+initially draw launcher icons on an 864x864 artboard, it will be easier and
+cleaner to adjust the icons when you scale the artboard down to the target
+sizes for final asset creation.</p>
+
+
+
+<h3>When scaling, redraw bitmap layers as needed</h3>
+
+<p>If you scaled an image up from a bitmap layer, rather than from a vector
+layer, those layers will need to be redrawn manually to appear crisp at higher
+densities. For example if a 60x60 circle was painted as a bitmap for
+mdpi it will need to be repainted as a 90x90 circle for hdpi.</p>
+
+
+
+<h3>Use common naming conventions for icon assets</h3>
+
+<p>Try to name files so that related assets will group together inside a
+directory when they are sorted alphabetically. In particular, it helps to use a
+common prefix for each icon type. For example:</p>
+
+<table>
+<tr>
+<th>Asset Type</th>
+<th>Prefix</th>
+<th>Example</th>
+</tr>
+<tr>
+<td>Icons</td>
+<td><code>ic_</code></td>
+<td><code>ic_star.png</code></td>
+</tr>
+<tr>
+<td>Launcher icons</td>
+<td><code>ic_launcher</code></td>
+<td><code>ic_launcher_calendar.png</code></td>
+</tr>
+<tr>
+<td>Menu icons and Action Bar icons</td>
+<td><code>ic_menu</code></td>
+<td><code>ic_menu_archive.png</code></td>
+</tr>
+<tr>
+<td>Status bar icons</td>
+<td><code>ic_stat_notify</code></td>
+<td><code>ic_stat_notify_msg.png</code></td>
+</tr>
+<tr>
+<td>Tab icons</td>
+<td><code>ic_tab</code></td>
+<td><code>ic_tab_recent.png</code></td>
+</tr>
+<tr>
+<td>Dialog icons</td>
+<td><code>ic_dialog</code></td>
+<td><code>ic_dialog_info.png</code></td>
+</tr>
+</table>
+
+<p>Note that you are not required to use a shared prefix of any
+type—doing so is for your convenience only.</p>
+
+
+<h3>Set up a working space that organizes files by density</h3>
+
+<p>Supporting multiple screen densities means you must create multiple versions
+of the same icon. To help keep the multiple copies of files safe and easier to
+find, we recommend creating a directory structure in your working space that
+organizes asset files based on the target density. For example:</p>
+
+<pre>
+art/...
+ mdpi/...
+ _pre_production/...
+ <em>working_file</em>.psd
+ <em>finished_asset</em>.png
+ hdpi/...
+ _pre_production/...
+ <em>working_file</em>.psd
+ <em>finished_asset</em>.png
+ xhdpi/...
+ _pre_production/...
+ <em>working_file</em>.psd
+ <em>finished_asset</em>.png</pre>
+ xxhdpi/...
+ _pre_production/...
+ <em>working_file</em>.psd
+ <em>finished_asset</em>.png</pre>
+
+<p>Because the structure in your working space is similar to that of the application, you
+can quickly determine which assets should be copied to each
+resources directory. Separating assets by density also helps you detect any
+variances in filenames across densities, which is important because
+corresponding assets for different densities must share the same filename.</p>
+
+<p>For comparison, here's the resources directory structure of a typical
+application: </p>
+
+<pre>res/...
+ drawable-ldpi/...
+ <em>finished_asset</em>.png
+ drawable-mdpi/...
+ <em>finished_asset</em>.png
+ drawable-hdpi/...
+ <em>finished_asset</em>.png
+ drawable-xhdpi/...
+ <em>finished_asset</em>.png
+</pre>
+
+<p>For more information about how to save resources in the application project,
+see <a href="{@docRoot}guide/topics/resources/providing-resources.html">Providing Resources</a>.
+</p>
+
+
+<h3>Remove unnecessary metadata from final assets</h3>
+
+<p>Although the Android SDK tools will automatically compress PNGs when packaging
+application resources into the application binary, a good practice is to remove
+unnecessary headers and metadata from your PNG assets. Tools such as <a
+href="http://optipng.sourceforge.net/">OptiPNG</a> or <a
+href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this
+metadata is removed and that your image asset file sizes are optimized.</p>
+
+
diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd
index 3116ff6d..0a99a2f 100644
--- a/docs/html/design/style/metrics-grids.jd
+++ b/docs/html/design/style/metrics-grids.jd
@@ -4,15 +4,28 @@
<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per
inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as
-falling into a particular size bucket and density bucket. The size buckets are <em>handset</em> (smaller than
-600<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi
-screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp). The density buckets are <acronym
+falling into a particular size bucket and density bucket:</p>
+<ul>
+ <li>The size buckets are <em>handset</em> (smaller than
+600<acronym title="Density-independent pixels: One dp is one pixel on a 160 dpi (mdpi)
+screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp).</li>
+ <li>The density buckets are <acronym
title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160
-dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, and <acronym title
-="Extra-high density (320 dpi)">XHDPI</acronym>. Optimize your application's UI by designing
+dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, <acronym title
+="Extra-high density (320 dpi)">XHDPI</acronym>, and <acronym title
+="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>.</li>
+</ul>
+
+<p>Optimize your application's UI by designing
alternative layouts for some of the different size buckets, and provide alternative bitmap images
for different density buckets.</p>
+<p>Because it's important that you design and implement your layouts for multiple densities,
+the guidelines below and throught the documentation
+refer to layout dimensions with <acronym title="Density-independent pixels: One dp is one pixel
+on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</p>
+
+
<div class="layout-content-row">
<div class="layout-content-col span-8">
@@ -30,6 +43,7 @@
</div>
</div>
+
<h2 id="48dp-rhythm">48dp Rhythm</h2>
<p>Touchable UI components are generally laid out along 48dp units.</p>
