am f096acd3: AI 148460: Misc changes for dev site.

</ul>

</li>

<li><b>Android Market Help Center</b> - A web-based discussion forum where you can ask questions or report issues relating to Android Market.

<li><b>Android Market Help Forum</b> - A web-based discussion forum where you can ask questions or report issues relating to Android Market.

<ul>

<li>URL:&nbsp;<a href="http://www.google.com/support/forum/p/Android+Market?hl=en">http://www.google.com/support/forum/p/Android+Market?hl=en</a></li>

</ul>

<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">Windows graphics file format</a></li>

<li><a href="#file">Widget graphics file format</a></li>

</ol>

<h2>See also</h2>

<ol>

<li>The <a href="{@docRoot}guide/topics/appwidgets/index.html">AppWidgets</a> section of the <em>Developer's Guide</em></li>

<li>Jeff Sharkey's <a href="http://android-developers.blogspot.com/2009/04/introducing-home-screen-widgets-and.html">AddWidgets</a> blog post</li>

<li><a href="{@docRoot}guide/topics/appwidgets/index.html">AppWidgets</a> topic in the <em>Dev Guide</em></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 new feature introduced in Android&trade; mobile technology platform 1.5 ("Cupcake"). A widget displays an application's most important or timely information at a glance, on a user's Home screen. The Android open source code includes several examples of widgets, including widgets for Calendar, Music, and other applications.</p>

<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>

<!-- could we include a link to that open source code? -->

<p>Users pick the widgets they want to display on their Home screens by touching

& holding an empty area of the Home screen, selecting Widgets from the menu,

and then selecting the widget they want.</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><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>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">AddWidgets</a> blog post.</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>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>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_sizes_portrait.png"

alt="Standard Widget Sizes in Portrait Orientation"></p>

<p>&nbsp;</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>

<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>

<ol>

<li><strong>Select a bounding box size for your widget.</strong></li>

<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>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>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>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>

<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>

<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><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>

<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>

<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>

<li><strong>If your widget includes buttons,  draw them in three states (default, pressed, and selected).</strong></li>

<li><strong>If your widget includes buttons,  draw them in three states

(default, pressed, and selected).</strong></li>

<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>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>

<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>

<li><strong>Finish drawing your artwork and then scale and align it to

fit.</strong></li>

<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>

<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>

<li><strong>Save your widget with the correct graphics file settings.</strong></li>

<li><strong>Save your widget with the correct graphics file

settings.</strong></li>

<p><a href="#file">Windows graphics file format</a> describes the correct settings for your widget graphics files.</p>

<p><a href="#file">Windows graphics file format</a> describes the correct

settings for your widget graphics files.</p>

</ol>

<h2 id="sizes">Standard widget sizes</h2>

<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>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>

<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>

<table>

<tr><th>Cells</th><th>Pixels</th></tr>

<tr><td>2 x 2</td><td>160 x 200</td></tr>

</table>

<p><img src="{@docRoot}images/widget_design/portrait_sizes.png" alt="Widget dimensions in portrait orientation"></p>

<p><img src="{@docRoot}images/widget_design/portrait_sizes.png" alt="Widget

dimensions in portrait orientation"></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>

<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>2 x 2</td><td>212 x 148</td></tr>

</table>

<p><img src="{@docRoot}images/widget_design/landscape_sizes.png" alt="Widget dimensions in landscape orientation"></p>

<p><img src="{@docRoot}images/widget_design/landscape_sizes.png" alt="Widget

dimensions in landscape orientation"></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>

<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>

<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><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><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/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><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><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><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><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><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><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>

<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>

<h2 id="shadows">Standard widget shadows</h2>

<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>

<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>

<p><img src="{@docRoot}images/widget_design/Layer_Style.png" alt="Layer Style settings for standard shadows"></p>

<p><img src="{@docRoot}images/widget_design/Layer_Style.png" alt="Layer Style

settings for standard shadows"></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.

<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.

<ul>

<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>

<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>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><img src="{@docRoot}images/widget_design/alignment.png" alt="Aligning widget graphics" ></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>

<li>To reduce banding when exporting a widget, apply the following Photoshop Add

Noise setting to your graphic.</li>

<p><img src="{@docRoot}images/widget_design/Add_Noise.png" alt="Add Noise settings for widget graphics" ></p>

<p><img src="{@docRoot}images/widget_design/Add_Noise.png" alt="Add Noise

settings for widget graphics" ></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>

<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>

<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>

<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>

<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>

<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>

<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>

<p><img src="{@docRoot}images/widget_design/file_format.png" alt="Widget graphics file format" ></p>

            </intent-filter>

            <intent-filter . . . >

                <action android:name="com.example.project.BOUNCE" />

                <data android:type="image/jpeg" />

                <data android:mimeType="image/jpeg" />

                <category android:name="android.intent.category.DEFAULT" />

            </intent-filter>

        </activity>

like images, audio, video, text strings, layouts, themes, etc. Every Android application contains 

a directory for resources (<code>res/</code>) and a directory for assets (<code>assets/</code>). 

Assets are used less often, because their applications are far fewer. You only need to save data

as an asset when you need to read the raw bites. 

The directories for resources and assets both reside at the top of your project directory, alongside your source code directory 

as an asset when you need to read the raw bytes. The directories for resources and assets both 

reside at the top of an Android project tree, at the same level as your source code directory 

(<code>src/</code>).</p>

<p>The difference between "resources" and "assets" isn't much on the surface, but in general, 

<td width="5%"><nobr>Android 1.1</nobr></td>

<td  width="5%">2</td>

<td  width="5%"><nobr><a href="{@docRoot}sdk/android-1.1.html">Version Notes</a></nobr></td>

<td>Includes a compliant Android 1.1 library and system image with a set of development applications. Also includes the Maps external library (due to legacy build system issues).</a>

external library. </td>

<td>Includes a compliant Android 1.1 library and system image with a set of development applications. Also includes the Maps external library (due to legacy build system issues).</td>

</tr>

</table>