Update Widget Design guidelines for ICS

Change-Id: I1b7b8f9c091d38ec1400ce3d8b06e644803544de

1 files changed, 240 insertions, 186 deletions

diff --git a/docs/html/guide/practices/ui_guidelines/widget_design.jd b/docs/html/guide/practices/ui_guidelines/widget_design.jd
index 49aa498..f111394 100644
--- a/docs/html/guide/practices/ui_guidelines/widget_design.jd
+++ b/docs/html/guide/practices/ui_guidelines/widget_design.jd
@@ -9,268 +9,322 @@ parent.link=index.html
 <h2>Quickview</h2>
 
 <ul>
-<li>Widgets have six standard sizes on the Home screen</li>
-<li>Widgets have standards for size, frames, shadows, and file format, which you can copy</li>
-<li>A few tricks make it easier to design widgets that fit graphically on the Home screen</li>
+  <li>App Widget layouts should be flexible, resizing to fit their parent container</li>
+  <li>As of Android 3.0, app widgets can depict collections of items and provide a representative
+    preview image for the widget gallery</li>
+  <li>As of Android 3.1, app widgets can be resizable horizontally and/or vertically</li>
+  <li>As of Android 4.0, app widgets have margins automatically applied</li>
 </ul>
 
 <h2>In this document</h2>
 
 <ol>
-<li><a href="#anatomy">Standard widget anatomy</a></li>
-<li><a href="#design">Designing a widget</a></li>
-<li><a href="#sizes">Standard widget sizes</a></li>
-<li><a href="#frames">Standard widget frames</a></li>
-<li><a href="#shadows">Standard widget shadows</a></li>
-<li><a href="#tricks">Widget graphics tips and tricks</a></li>
-<li><a href="#file">Widget graphics file format</a></li>
+<li><a href="#anatomy">Standard Widget Anatomy</a></li>
+<li><a href="#design">Designing Widget Layouts and Background Graphics</a></li>
+<li><a href="#templates">Using the App Widget Templates Pack</a></li>
+</ol>
+
+<h2>Downloads</h2>
+
+<ol>
+<li><a href="{@docRoot}shareables/app_widget_templates-v4.0.zip">App Widget Templates Pack,
+  v4.0 &raquo;</a></li>
 </ol>
 
 <h2>See also</h2>
 
 <ol>
 <li><a href="{@docRoot}guide/topics/appwidgets/index.html">App Widgets</a></li>
-<li><a href="http://android-developers.blogspot.com/2009/04/introducing-home-screen-widgets-and.html">AppWidgets blog post</a></li>
+<li>
+  <a href="http://android-developers.blogspot.com/2009/04/introducing-home-screen-widgets-and.html">
+    AppWidgets blog post</a></li>
 </ol>
 
 </div>
 </div>
 
 
-<p>Widgets are a feature introduced in Android 1.5. A widget displays an
-application's most important or timely information at a glance, on a user's Home
-screen. The standard Android system image includes several examples of widgets,
-including widgets for Analog Clock, Music, and other applications.</p>
-
-<p>Users pick the widgets they want to display on their Home screens by touching
-&amp; holding an empty area of the Home screen, selecting Widgets from the menu,
-and then selecting the widget they want.</p>
-
-<p><img src="{@docRoot}images/widget_design/widget_examples.png" alt="Example
-Widgets"></p>
-
-<p>This document describes how to design a widget so it fits graphically with
-other widgets and with the other elements of the Android Home screen. It also
-describes some standards for widget artwork and some widget graphics tips and
-tricks from the Android team.<p>
-
-<p>For information about developing widgets, see the <a
-href="{@docRoot}guide/topics/appwidgets/index.html">AppWidgets</a> section of
-the <em>Developer's Guide</em> and the <a
-href="http://android-developers.blogspot.com/2009/04/introducing-home-screen-widgets-and.html">AppWidgets</a> blog post.</p>
-
-
-<h2 id="anatomy">Standard widget anatomy</h2>
+<p>App widgets (sometimes just "widgets") are a feature introduced in Android 1.5 and vastly
+improved in Android 3.0 and 3.1. A widget can display an application's most timely or otherwise
+relevant information at a glance, on a user's Home screen. The standard Android system image
+includes several widgets, including a widget for the Analog Clock, Music, and other
+applications.</p>
 
-<p>Typical Android widgets have three main components: A bounding box, a frame,
-and the widget's graphical controls and other elements. Well-designed widgets
-leave some padding between the edges of the bounding box and the frame, and
-between the inner edges of the frame and the widget's controls. Widgets designed
-to fit visually with other widgets on the Home screen take cues from the other
-elements on the Home screen for alignment; they also use standard shading
-effects. All of these details are described in this document.
 
-<p><strong>Standard Widget Sizes in Portrait Orientation</strong><br/>
-<img src="{@docRoot}images/widget_design/widget_sizes_portrait.png"
-alt="Standard Widget Sizes in Portrait Orientation"></p>
+<img src="{@docRoot}images/widget_design/widget_examples.png"
+  alt="Example app widgets in Android 4.0" id="widget_examples">
 
-<p>&nbsp;</p>
+<p class="img-caption"><strong>Figure 1.</strong> Example app widgets in Android 4.0.</p>
 
-<p><strong>Standard Widget Sizes in Landscape Orientation</strong><br/>
-<img src="{@docRoot}images/widget_design/widget_sizes_landscape.png"
-alt="Standard Widget Sizes in Landscape Orientation"></p>
 
-  
-<h2 id="design">Designing a widget</h2>
+<p>This document describes how to design a widget so that it fits graphically with other widgets and
+with the other elements of the Android Home screen such as launcher icons and shortcuts. It also
+describes some standards for widget artwork and some widget graphics tips and tricks.<p>
 
-<ol>
-<li><strong>Select a bounding box size for your widget.</strong></li>
+<p>For information about developing widgets, see the <a
+href="{@docRoot}guide/topics/appwidgets/index.html">App Widgets</a> section of the <em>Developer's
+Guide</em>.</p>
+
+
+<h2 id="anatomy">Standard Widget Anatomy</h2>
+
+<p>Typical Android app widgets have three main components: A bounding box, a frame, and the widget's
+graphical controls and other elements. App widgets can contain a subset of the View widgets in
+Android; supported controls include text labels, buttons, and images. For a full list of available
+Views, see the <a href="{@docRoot}guide/topics/appwidgets/index.html#CreatingLayout">Creating the
+App Widget Layout</a> section in the <em>Developer's Guide</em>. Well-designed widgets leave some
+margins between the edges of the bounding box and the frame, and padding between the inner edges of
+the frame and the widget's controls.</p>
+
+
+<img src="{@docRoot}images/widget_design/widget_terms.png"
+  alt="Widgets generally have margins and padding between bounding box, frame, and controls"
+  id="widget_terms">
+
+<p class="img-caption"><strong>Figure 2.</strong> Widgets generally have margins between the
+bounding box and frame, and padding between the frame and widget controls.</p>
+
+
+<p class="note"><strong>Note: </strong> As of Android 4.0, app widgets are automatically given
+margins between the widget frame and the app widget's bounding box to provide better alignment with
+other widgets and icons on the user's home screen. To take advantage of this strongly recommended
+behavior, set your application's <a
+href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">targetSdkVersion</a> to 14 or
+greater.</p>
+
+<p>Widgets designed to fit visually with other widgets on the Home screen take cues from the other
+elements on the Home screen for alignment; they also use standard shading effects. All of these
+details are described in this document.</p>
+
+
+<h3 id="anatomy_determining_size">Determining a size for your widget</h3>
+
+<p>Each widget must define a <code>minWidth</code> and <code>minHeight</code>, indicating the
+minimum amount of space it should consume by default. When users add a widget to their Home screen,
+it will generally occupy more than the minimum width and height you specify. Android Home screens
+offer users a grid of available spaces into which they can place widgets and icons. This grid can
+vary by device; for example, many handsets offer a 4x4 grid, and tablets can offer a larger, 8x7
+grid. <strong>When your widget is added, it will be stretched to occupy the minimum number of cells,
+horizontally and vertically, required to satisfy its <code>minWidth</code> and
+<code>minHeight</code> constraints.</strong> As we discuss in <a href="#design">Designing Widget
+Layouts and Background Graphics</a> below, using nine-patch backgrounds and flexible layouts for app
+widgets will allow your widget to gracefully adapt to the device's Home screen grid and remain
+usable and aesthetically awesome.</p>
+
+<p>While the width and height of a cell&mdash;as well as the amount of automatic margins applied to
+widgets&mdash;may vary across devices, you can use the table below to roughly estimate your widget's
+minimum dimensions, given the desired number of occupied grid cells:</p>
+
+<table id="cellstable">
+  <thead>
+    <tr>
+      <th># of Cells<br><small style="font-weight:normal">(Columns or Rows)</small></th>
+      <th>Available Size (dp)<br><small style="font-weight:normal">(<code>minWidth</code> or
+        <code>minHeight</code>)</small></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>40dp</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>110dp</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>180dp</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>250dp</td>
+    </tr>
+    <tr>
+      <td>&hellip;</td>
+      <td>&hellip;</td>
+    </tr>
+    <tr>
+      <td><em>n</em></td>
+      <td>70 &times; <em>n</em> &minus; 30</td>
+    </tr>
+  </tbody>
+</table>
 
-<p>The most effective widgets display your application's most useful or timely
-data in the smallest widget size. Users will weigh the usefulness or your widget
-against the portion of the Home screen it covers, so the smaller the better.</p>
+<p>It is a good practice to be conservative with <code>minWidth</code> and <code>minHeight</code>,
+specifying the minimum size that renders the widget in a good default state. For an example of how
+to provide a <code>minWidth</code> and <code>minHeight</code>, suppose you have a music player
+widget that shows the currently playing song artist and title (vertically stacked), a
+<strong>Play</strong> button, and a <strong>Next</strong> button:</p>
 
-<p>All widgets must fit within the bounding box of one of the six supported
-widget sizes, or better yet, within a pair of portrait and landscape orientation
-sizes, so your widget looks good when the user switches screen
-orientations.</p> 
 
-<p><a href="#sizes">Standard widget sizes</a> illustrates the bounding
-dimensions of the six widget sizes (three in portrait and three in landscape
-orientation).</p>
+<img src="{@docRoot}images/widget_design/music_example.png"
+  alt="An example music player widget" id="music_example">
 
+<p class="img-caption"><strong>Figure 3.</strong> An example music player widget.</p>
 
-<li><strong>Select a matching frame.</strong></li>
 
-<p><a href="#frames">Standard widget frames</a> illustrates the standard frames
-for the six widget sizes, with links so you can download copies for your own
-use. You don't have to use these frames for your widget, but if you do, your
-widgets are more likely to fit visually with other widgets.</p>
+<p>Your minimum height should be the height of your two TextViews for the artist and title, plus
+some text margins. Your minimum width should be the minimum usable widths of the
+<strong>Play</strong> and <strong>Next</strong> buttons, plus the minimum text width (say, the width
+of 10 characters), plus any horizontal text margins.</p>
 
-<li><strong>Apply standard shadow effect to your graphics.</strong></li>
 
-<p>Again, you don't have to use this effect, but <a href="#shadows">Standard
-widget shadows</a> shows the Photoshop settings used for standard widgets.</p>
+<img src="{@docRoot}images/widget_design/music_example_redline.png"
+alt="Example sizes and margins for minimum width/height calculations" id="music_example_redline">
 
-<li><strong>If your widget includes buttons,  draw them in three states
-(default, pressed, and selected).</strong></li>
+<p class="img-caption"><strong>Figure 4.</strong> Example sizes and margins for
+<code>minWidth</code>/<code>minHeight</code> calculations. We chose 144dp as an example good minimum
+width for the text labels.</p>
 
-<p>You can <a
-href="{@docRoot}images/widget_design/Music_widget_button_states.psd">download a
-Photoshop file that contains the three states of the Play button</a>, taken from
-the Music widget, to analyze the Photoshop settings used for the three standard
-button effects.</p>
 
-<p><a href="{@docRoot}images/widget_design/Music_widget_button_states.psd"> <img
-src="{@docRoot}images/widget_design/buttons.png" alt="Click to download
-Photoshop template"></a></p>
- 
-<li><strong>Finish drawing your artwork and then scale and align it to
-fit.</strong></li>
+<p>Example calculations are below:</p>
 
-<p><a href="#tricks">Widget alignment tips and tricks</a> describes some
-techniques for aligning your widget's graphics inside the standard frames, along
-with a few other widget graphics tricks.</p>
+<ul>
+  <li><code>minWidth</code> = 144dp + (2 &times; 8dp) + (2 &times; 56dp) =
+    <strong>272dp</strong></li>
+  <li><code>minHeight</code> = 48dp + (2 &times; 4dp) = <strong>56dp</strong></li>
+</ul>
 
-<li><strong>Save your widget with the correct graphics file
-settings.</strong></li>
+<p>If there is any inherent content padding in your widget background nine-patch, you should add to
+<code>minWidth</code> and <code>minHeight</code> accordingly.</p>
 
-<p><a href="#file">Windows graphics file format</a> describes the correct
-settings for your widget graphics files.</p>
 
-</ol>
+<h3 id="anatomy_resizable_widgets">Resizable widgets</h3>
 
+<p>Widgets can be resized horizontally and/or vertically as of Android 3.1, meaning that
+<code>minWidth</code> and <code>minHeight</code> effectively become the <em>default</em> size for
+the widget. You can specify the minimum widget size using <code>minResizeWidth</code> and
+<code>minResizeHeight</code>; these values should specify the size below which the widget would be
+illegible or otherwise unusable.</p>
 
-<h2 id="sizes">Standard widget sizes</h2>
+<p>This is generally a preferred feature for collection widgets such as those based on {@link
+android.widget.ListView} or {@link android.widget.GridView}.</p>
 
-<p>There are six standard widget sizes, based on a Home screen grid of 4 x 4
-(portrait) or 4 x 4 (landscape) cells. These dimensions are the bounding boxes
-for the six standard widget sizes. The contents of typical widgets don't draw to
-the edge of these dimensions, but fit inside a frame withing the bounding box,
-as described in <a href="#design">Designing a widget</a>.</p>
 
-<p>In portrait orientation, each cell is 80 pixels wide by 100 pixels tall (the
-diagram shows a cell in portrait orientation). The three supported widget sizes
-in portrait orientation are:<p>
+<h3 id="anatomy_adding_margins">Adding margins to your app widget</h3>
 
-<table>
-<tr><th>Cells</th><th>Pixels</th></tr>
-<tr><td>4 x 1</td><td>320 x 100</td></tr>
-<tr><td>3 x 3</td><td>240 x 300</td></tr>
-<tr><td>2 x 2</td><td>160 x 200</td></tr>
-</table>
+<p>As previously mentioned, Android 4.0 will automatically add small, standard margins to each edge
+of widgets on the Home screen, for applications that specify a <code>targetSdkVersion</code> of 14
+or greater. This helps to visually balance the Home screen, and thus <strong>we recommend that you
+do not add any extra margins outside of your app widget's background shape in Android
+4.0</strong>.</p>
 
-<p><img src="{@docRoot}images/widget_design/portrait_sizes.png" alt="Widget
-dimensions in portrait orientation"></p>
+<p>It's easy to write a single layout that has custom margins applied for earlier versions of the
+platform, and has no extra margins for Android 4.0 and greater. See <a
+href="{@docRoot}guide/topics/appwidgets/index.html#AddingMargins">Adding Margins to App Widgets</a>
+in the <em>Developer's Guide</em> for information on how to achieve this with layout XML.</p>
 
-<p>In landscape orientation, each cell is 106 pixels wide by 74 pixels tall. The
-three supported widget sizes in landscape orientation are:</p>
 
-<table>
-<tr><th>Cells</th><th>Pixels</th></tr>
-<tr><td>4 x 1</td><td>424 x 74</td></tr>
-<tr><td>3 x 3</td><td>318 x 222</td></tr>
-<tr><td>2 x 2</td><td>212 x 148</td></tr>
-</table>
+<h2 id="design">Designing Widget Layouts and Background Graphics</h2>
 
-<p><img src="{@docRoot}images/widget_design/landscape_sizes.png" alt="Widget
-dimensions in landscape orientation"></p>
+<p>Most widgets will have a solid background rectangle or rounded rectangle shape. It is a best
+practice to define this shape using nine patches; one for each screen density (see <a
+href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple Screens</a> for details).
+Nine-patches can be created with the <a
+href="{@docRoot}guide/developing/tools/draw9patch.html">draw9patch</a> tool, or simply with a
+graphics editing program such as Adobe&reg; Photoshop. This will allow the widget background shape
+to take up the entire available space. The nine-patch should be edge-to-edge with no transparent
+pixels providing extra margins, save for perhaps a few border pixels for <strong>subtle</strong>
+drop shadows or other subtle effects.</p>
 
+<p class="note"><strong>Note: </strong> Just like with controls in activities, you should ensure
+that interactive controls have distinct visual focused and pressed states using <a
+href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">state list
+drawables</a>.</p>
 
-<h2 id="frames">Standard widget frames</h2>
 
-<p>For each of the six standard widget sizes there is a standard frame. You can
-click the images of the frames in this section to download a Photoshop file for
-that frame, which you can use for your own widgets.<p>
+<img src="{@docRoot}images/ninepatch_raw.png" alt="Nine-patch border pixels" id="ninepatch_raw">
 
-<p><a href="{@docRoot}images/widget_design/4x1_Widget_Frame_Portrait.psd"> <img
-src="{@docRoot}images/widget_design/4x1_Widget_Frame_Portrait.png" alt="Click to
-download"></a><br>4x1_Widget_Frame_Portrait.psd</p>
+<p class="img-caption"><strong>Figure 5.</strong> Nine-patch border pixels indicating stretchable
+regions and content padding.</p>
 
-<p><a href="{@docRoot}images/widget_design/3x3_Widget_Frame_Portrait.psd"> <img
-src="{@docRoot}images/widget_design/3x3_Widget_Frame_Portrait.png" alt="Click to
-download"></a><br>3x3_Widget_Frame_Portrait.psd</p>
 
-<p><a href="{@docRoot}images/widget_design/2x2_Widget_Frame_Portrait.psd"> <img
-src="{@docRoot}images/widget_design/2x2_Widget_Frame_Portrait.png" alt="Click to
-download"></a><br>2x2_Widget_Frame_Portrait.psd</p>
+<p>Some app widgets, such as those using a {@link android.widget.StackView}, have a transparent
+background. For this case, each individual item in the StackView should use a nine-patch background
+that is edge-to-edge with little or no border transparent pixels for margins.</p>
 
-<p><a href="{@docRoot}images/widget_design/4x1_Widget_Frame_Landscape.psd"> <img
-src="{@docRoot}images/widget_design/4x1_Widget_Frame_Landscape.png" alt="Click
-to download"></a><br>4x1_Widget_Frame_Landscape.psd</p>
+<p>For the contents of the widget, you should use flexible layouts such as {@link
+android.widget.RelativeLayout}, {@link android.widget.LinearLayout}, or {@link
+android.widget.FrameLayout}. Just as your activity layouts must adapt to different physical screen
+sizes, widget layouts must adapt to different Home screen grid cell sizes.</p>
 
-<p><a href="{@docRoot}images/widget_design/3x3_Widget_Frame_Landscape.psd"> <img
-src="{@docRoot}images/widget_design/3x3_Widget_Frame_Landscape.png" alt="Click
-to download"></a><br>3x3_Widget_Frame_Landscape.psd</p>
+<p>Below is an example layout that a music widget showing text information and two buttons can use.
+It builds upon the previous discussion of adding margins depending on OS version.</p>
 
-<p><a href="{@docRoot}images/widget_design/2x2_Widget_Frame_Landscape.psd"> <img
-src="{@docRoot}images/widget_design/2x2_Widget_Frame_Landscape.png" alt="Click
-to download"></a><br>2x2_Widget_Frame_Landscape.psd</p>
+<pre>
+&lt;FrameLayout
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:layout_margin="@dimen/widget_margin"&gt;
 
+  &lt;LinearLayout
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="horizontal"
+    android:background="@drawable/my_widget_background"&gt;
 
-<h2 id="shadows">Standard widget shadows</h2>
+    &lt;TextView
+      android:id="@+id/song_info"
+      android:layout_width="0dp"
+      android:layout_height="match_parent"
+      android:layout_weight="1" /&gt;
 
-<p>You can apply a shadow effect to your widget's artwork, so it matches other
-standard Android widgets, using the following settings in the Photoshop Layer
-Style dialog box.</p>
+    &lt;Button
+      android:id="@+id/play_button"
+      android:layout_width="@dimen/my_button_width"
+      android:layout_height="match_parent" /&gt;
 
-<p><img src="{@docRoot}images/widget_design/Layer_Style.png" alt="Layer Style
-settings for standard shadows"></p>
+    &lt;Button
+      android:id="@+id/skip_button"
+      android:layout_width="@dimen/my_button_width"
+      android:layout_height="match_parent" /&gt;
+  &lt;/LinearLayout&gt;
+&lt;/FrameLayout&gt;
+</pre>
 
+<p>If you now take a look at the example music widget from the previous section, you can begin to
+use flexible layouts attributes like so:</p>
 
-<h2 id="tricks">Widget graphics tips and tricks</h2>
 
-<p>The Android team has developed a few tricks for aligning widget artwork
-within standard widget bounding boxes and frames, so the widget aligns visually
-with other widgets and the other elements of the Home screen, as well as other
-techniques for creating widgets.
+<img src="{@docRoot}images/widget_design/music_example_layouts.png"
+  alt="Excerpt flexible layouts and attributes for an example music widget"
+  id="music_example_layouts">
 
-<ul>
+<p class="img-caption"><strong>Figure 6.</strong> Excerpt flexible layouts and attributes.</p>
 
-<li>Use a screen shot from the Android SDK emulator to align both the shapes and
-shadows of your widget controls with the Search widget and with other elements
-on the Home screen.</li>
 
-<p>Cut the widget artwork asset" based on the full size of a cell, including any
-padding you want. (That is, for a 4 x 1 widget, cut the asset at 320 by 100
-pixels.)</p>
+<p>When a user adds the widget to their home screen, on an example Android 4.0 device where each
+grid cell is 80dp &times; 100dp in size and 16dp of margins are automatically applied on all sizes,
+the widget will be stretched, like so:</p>
 
-<p><img src="{@docRoot}images/widget_design/alignment.png" alt="Aligning widget
-graphics" ></p>
 
-<li>To reduce banding when exporting a widget, apply the following Photoshop Add
-Noise setting to your graphic.</li>
+<img src="{@docRoot}images/widget_design/music_example_stretched.png"
+  alt="Music widget sitting on an example 80dp x 100dp grid with 16dp of automatic margins
+  added by the system" id="music_example_stretched">
 
-<p><img src="{@docRoot}images/widget_design/Add_Noise.png" alt="Add Noise
-settings for widget graphics" ></p>
+<p class="img-caption"><strong>Figure 7.</strong> Music widget sitting on an example 80dp x 100dp
+grid with 16dp of automatic margins added by the system.</p>
 
-<li>Apply 9-patch techniques to shrink the graphic and set the padding of the
-content area. (<a href="{@docRoot}guide/developing/tools/draw9patch.html">See
-the detailed guide here.</a>)</li>
 
-<p><strong>Note:</strong> The current Android widget templates were designed
-using a custom gradient angle, which means the 9-patch techniques can't be used
-to optimize the size of the asset. However, 9-patch techniques were used to set
-the content area padding.</p>
+<h2 id="templates">Using the App Widget Templates Pack</h2>
 
-<li>In some cases, devices have low pixel depths that can cause visual banding
-and dithering issues. To solve this, application developers should pass assets
-through a "proxy" drawable defined as <code>XML:<nine-patch
-android:src="@drawable/background" android:dither="true" /></code>. This
-technique references the original artwork, in this case
-<code>"background.9.png"</code>, and instructs the device to dither it as
-needed.</li>
-
-</ul>
+<p>When starting to design a new widget, or updating an existing widget, it's a good idea to first
+look at the widget design templates below. The downloadable package below includes nine-patch
+background graphics, XML, and source Adobe&reg; Photoshop files for multiple screen densities, OS
+version widget styles, and widget colors. The template package also contains graphics useful for
+making your entire widget or parts of your widget (e.g. buttons) interactive.</p>
 
-<h2 id="file">Widget graphics file format</h2>
 
-<p>Save your widget artwork using the appropriate bounding box size in PNG-24
-format on a transparent background and in 8-bit color.</p>
+<img src="{@docRoot}images/widget_design/widget_template_excerpts.png"
+  alt="Widget template excerpts" id="widget_template_excerpts">
 
-<p><img src="{@docRoot}images/widget_design/file_format.png" alt="Widget graphics file format" ></p>
+<p class="img-caption"><strong>Figure 8.</strong> Excerpts from the App Widget Templates Pack
+(medium-density, dark, Android 4.0/previous styles, default/focused/pressed states).</p>
 
 
-  
+<p>You can obtain the latest App Widget Templates Pack archive using the link below:</p>
 
+<p style="margin-left:2em"><a href="{@docRoot}shareables/app_widget_templates-v4.0.zip">
+  Download the App Widget Templates Pack for Android 4.0 &raquo;</a></p>