From 2b15c001fa1f80ac7be7e2ddec40253d0ce7b4fb Mon Sep 17 00:00:00 2001 From: Roman Nurik Date: Tue, 27 Sep 2011 18:28:46 -0700 Subject: Update Widget Design guidelines for ICS Change-Id: I1b7b8f9c091d38ec1400ce3d8b06e644803544de --- docs/html/guide/guide_toc.cs | 2 +- .../guide/practices/ui_guidelines/widget_design.jd | 426 ++++++++++++--------- docs/html/guide/topics/appwidgets/index.jd | 43 +++ .../widget_design/2x2_Widget_Frame_Landscape.png | Bin 3504 -> 0 bytes .../widget_design/2x2_Widget_Frame_Landscape.psd | Bin 84164 -> 0 bytes .../widget_design/2x2_Widget_Frame_Portrait.png | Bin 3765 -> 0 bytes .../widget_design/2x2_Widget_Frame_Portrait.psd | Bin 192054 -> 0 bytes .../widget_design/3x3_Widget_Frame_Landscape.png | Bin 4851 -> 0 bytes .../widget_design/3x3_Widget_Frame_Landscape.psd | Bin 356070 -> 0 bytes .../widget_design/3x3_Widget_Frame_Portrait.png | Bin 4943 -> 0 bytes .../widget_design/3x3_Widget_Frame_Portrait.psd | Bin 369054 -> 0 bytes .../widget_design/4x1_Widget_Frame_Landscape.png | Bin 3270 -> 0 bytes .../widget_design/4x1_Widget_Frame_Landscape.psd | Bin 114336 -> 0 bytes .../widget_design/4x1_Widget_Frame_Portrait.png | Bin 3403 -> 0 bytes .../widget_design/4x1_Widget_Frame_Portrait.psd | Bin 73853 -> 0 bytes docs/html/images/widget_design/Add_Noise.png | Bin 68306 -> 0 bytes docs/html/images/widget_design/Layer_Style.png | Bin 80200 -> 0 bytes .../widget_design/Music_widget_button_states.psd | Bin 948899 -> 0 bytes docs/html/images/widget_design/alignment.png | Bin 44231 -> 0 bytes docs/html/images/widget_design/buttons.png | Bin 6358 -> 0 bytes docs/html/images/widget_design/file_format.png | Bin 128651 -> 0 bytes docs/html/images/widget_design/landscape_sizes.png | Bin 88782 -> 0 bytes docs/html/images/widget_design/music_example.png | Bin 0 -> 6381 bytes .../images/widget_design/music_example_layouts.png | Bin 0 -> 33988 bytes .../images/widget_design/music_example_redline.png | Bin 0 -> 6055 bytes .../widget_design/music_example_stretched.png | Bin 0 -> 7688 bytes docs/html/images/widget_design/portrait_sizes.png | Bin 97525 -> 0 bytes docs/html/images/widget_design/widget_examples.png | Bin 126431 -> 50203 bytes .../widget_design/widget_sizes_landscape.png | Bin 113725 -> 0 bytes .../images/widget_design/widget_sizes_portrait.png | Bin 143836 -> 0 bytes .../widget_design/widget_template_excerpts.png | Bin 0 -> 5707 bytes docs/html/images/widget_design/widget_terms.png | Bin 0 -> 4830 bytes docs/html/shareables/app_widget_templates-v4.0.zip | Bin 0 -> 140221 bytes 33 files changed, 284 insertions(+), 187 deletions(-) delete mode 100644 docs/html/images/widget_design/2x2_Widget_Frame_Landscape.png delete mode 100644 docs/html/images/widget_design/2x2_Widget_Frame_Landscape.psd delete mode 100644 docs/html/images/widget_design/2x2_Widget_Frame_Portrait.png delete mode 100644 docs/html/images/widget_design/2x2_Widget_Frame_Portrait.psd delete mode 100644 docs/html/images/widget_design/3x3_Widget_Frame_Landscape.png delete mode 100644 docs/html/images/widget_design/3x3_Widget_Frame_Landscape.psd delete mode 100644 docs/html/images/widget_design/3x3_Widget_Frame_Portrait.png delete mode 100644 docs/html/images/widget_design/3x3_Widget_Frame_Portrait.psd delete mode 100644 docs/html/images/widget_design/4x1_Widget_Frame_Landscape.png delete mode 100644 docs/html/images/widget_design/4x1_Widget_Frame_Landscape.psd delete mode 100644 docs/html/images/widget_design/4x1_Widget_Frame_Portrait.png delete mode 100644 docs/html/images/widget_design/4x1_Widget_Frame_Portrait.psd delete mode 100644 docs/html/images/widget_design/Add_Noise.png delete mode 100644 docs/html/images/widget_design/Layer_Style.png delete mode 100644 docs/html/images/widget_design/Music_widget_button_states.psd delete mode 100644 docs/html/images/widget_design/alignment.png delete mode 100644 docs/html/images/widget_design/buttons.png delete mode 100644 docs/html/images/widget_design/file_format.png delete mode 100644 docs/html/images/widget_design/landscape_sizes.png create mode 100644 docs/html/images/widget_design/music_example.png create mode 100644 docs/html/images/widget_design/music_example_layouts.png create mode 100644 docs/html/images/widget_design/music_example_redline.png create mode 100644 docs/html/images/widget_design/music_example_stretched.png delete mode 100644 docs/html/images/widget_design/portrait_sizes.png delete mode 100644 docs/html/images/widget_design/widget_sizes_landscape.png delete mode 100644 docs/html/images/widget_design/widget_sizes_portrait.png create mode 100644 docs/html/images/widget_design/widget_template_excerpts.png create mode 100644 docs/html/images/widget_design/widget_terms.png create mode 100644 docs/html/shareables/app_widget_templates-v4.0.zip diff --git a/docs/html/guide/guide_toc.cs b/docs/html/guide/guide_toc.cs index 371658399495..5f74e50fcbc4 100644 --- a/docs/html/guide/guide_toc.cs +++ b/docs/html/guide/guide_toc.cs @@ -717,7 +717,7 @@
  • - App Widget Design + App Widget Design updated
  • Activity and Task Design diff --git a/docs/html/guide/practices/ui_guidelines/widget_design.jd b/docs/html/guide/practices/ui_guidelines/widget_design.jd index 49aa4981c581..f11139467e7b 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

    Quickview

      -
    • Widgets have six standard sizes on the Home screen
      • -
    • Widgets have standards for size, frames, shadows, and file format, which you can copy
      • -
    • A few tricks make it easier to design widgets that fit graphically on the Home screen
      • +
    • App Widget layouts should be flexible, resizing to fit their parent container
      • +
    • As of Android 3.0, app widgets can depict collections of items and provide a representative + preview image for the widget gallery
      • +
    • As of Android 3.1, app widgets can be resizable horizontally and/or vertically
      • +
    • As of Android 4.0, app widgets have margins automatically applied

    In this document

      -
    1. Standard widget anatomy
      2. -
    2. Designing a widget
      3. -
    3. Standard widget sizes
      4. -
    4. Standard widget frames
      5. -
    5. Standard widget shadows
      6. -
    6. Widget graphics tips and tricks
      7. -
    7. Widget graphics file format
      8. +
    8. Standard Widget Anatomy
      9. +
    9. Designing Widget Layouts and Background Graphics
      10. +
    10. Using the App Widget Templates Pack
      11. +
    + +

    Downloads

    + +
      +
    1. App Widget Templates Pack, + v4.0 »

    See also

    1. App Widgets
      2. -
    2. AppWidgets blog post
      3. +
    3. + + AppWidgets blog post
    -

    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.

    - -

    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.

    - -

    Example -Widgets

    - -

    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.

    - -

    For information about developing widgets, see the AppWidgets section of -the Developer's Guide and the AppWidgets blog post.

    - - -

    Standard widget anatomy

    +

    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.

    -

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

    Standard Widget Sizes in Portrait Orientation
    -

    +Example app widgets in Android 4.0 -

     

    +

    Figure 1. Example app widgets in Android 4.0.

    -

    Standard Widget Sizes in Landscape Orientation
    -

    - -

    Designing a widget

    +

    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.

    -

      -
    1. Select a bounding box size for your widget.
      2. +

      For information about developing widgets, see the App Widgets section of the Developer's +Guide.

      + + +

      Standard Widget Anatomy

      + +

      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 Creating the +App Widget Layout section in the Developer's Guide. 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.

      + + +Widgets generally have margins and padding between bounding box, frame, and controls + +

      Figure 2. Widgets generally have margins between the +bounding box and frame, and padding between the frame and widget controls.

      + + +

      Note: 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 targetSdkVersion to 14 or +greater.

      + +

      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.

      + + +

      Determining a size for your widget

      + +

      Each widget must define a minWidth and minHeight, 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. When your widget is added, it will be stretched to occupy the minimum number of cells, +horizontally and vertically, required to satisfy its minWidth and +minHeight constraints. As we discuss in Designing Widget +Layouts and Background Graphics 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.

      + +

      While the width and height of a cell—as well as the amount of automatic margins applied to +widgets—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:

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      # of Cells
      (Columns or Rows)      		Available Size (dp)
      (minWidth or + minHeight)
      140dp
      2110dp
      3180dp
      4250dp
      ……
      n70 × n − 30
      -

      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.

      +

      It is a good practice to be conservative with minWidth and minHeight, +specifying the minimum size that renders the widget in a good default state. For an example of how +to provide a minWidth and minHeight, suppose you have a music player +widget that shows the currently playing song artist and title (vertically stacked), a +Play button, and a Next button:

      -

      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.

      -

      Standard widget sizes illustrates the bounding -dimensions of the six widget sizes (three in portrait and three in landscape -orientation).

      +An example music player widget +

      Figure 3. An example music player widget.

      -
    2. Select a matching frame.
      3. -

      Standard widget frames 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.

      +

      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 +Play and Next buttons, plus the minimum text width (say, the width +of 10 characters), plus any horizontal text margins.

      -
    3. Apply standard shadow effect to your graphics.
      4. -

      Again, you don't have to use this effect, but Standard -widget shadows shows the Photoshop settings used for standard widgets.

      + -
    4. If your widget includes buttons, draw them in three states -(default, pressed, and selected).
      5. +

      Figure 4. Example sizes and margins for +minWidth/minHeight calculations. We chose 144dp as an example good minimum +width for the text labels.

      -

      You can download a -Photoshop file that contains the three states of the Play button, taken from -the Music widget, to analyze the Photoshop settings used for the three standard -button effects.

      -

      Click to download -Photoshop template

      - -
    5. Finish drawing your artwork and then scale and align it to -fit.
      6. +

      Example calculations are below:

      -

      Widget alignment tips and tricks describes some -techniques for aligning your widget's graphics inside the standard frames, along -with a few other widget graphics tricks.

      +
        +
      • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = + 272dp
        • +
      • minHeight = 48dp + (2 × 4dp) = 56dp
        • +
      -
    6. Save your widget with the correct graphics file -settings.
      7. +

      If there is any inherent content padding in your widget background nine-patch, you should add to +minWidth and minHeight accordingly.

      -

      Windows graphics file format describes the correct -settings for your widget graphics files.

      -
    +

    Resizable widgets

    +

    Widgets can be resized horizontally and/or vertically as of Android 3.1, meaning that +minWidth and minHeight effectively become the default size for +the widget. You can specify the minimum widget size using minResizeWidth and +minResizeHeight; these values should specify the size below which the widget would be +illegible or otherwise unusable.

    -

    Standard widget sizes

    +

    This is generally a preferred feature for collection widgets such as those based on {@link +android.widget.ListView} or {@link android.widget.GridView}.

    -

    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 Designing a widget.

    -

    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:

    +

    Adding margins to your app widget

    - - - - - -
    CellsPixels
    4 x 1320 x 100
    3 x 3240 x 300
    2 x 2160 x 200
    +

    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 targetSdkVersion of 14 +or greater. This helps to visually balance the Home screen, and thus we recommend that you +do not add any extra margins outside of your app widget's background shape in Android +4.0.

    -

    Widget -dimensions in portrait orientation

    +

    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 Adding Margins to App Widgets +in the Developer's Guide for information on how to achieve this with layout XML.

    -

    In landscape orientation, each cell is 106 pixels wide by 74 pixels tall. The -three supported widget sizes in landscape orientation are:

    - - - - - -
    CellsPixels
    4 x 1424 x 74
    3 x 3318 x 222
    2 x 2212 x 148
    +

    Designing Widget Layouts and Background Graphics

    -

    Widget -dimensions in landscape orientation

    +

    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 Supporting Multiple Screens for details). +Nine-patches can be created with the draw9patch tool, or simply with a +graphics editing program such as Adobe® 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 subtle +drop shadows or other subtle effects.

    +

    Note: Just like with controls in activities, you should ensure +that interactive controls have distinct visual focused and pressed states using state list +drawables.

    -

    Standard widget frames

    -

    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.

    +Nine-patch border pixels -

    Click to -download
    4x1_Widget_Frame_Portrait.psd

    +

    Figure 5. Nine-patch border pixels indicating stretchable +regions and content padding.

    -

    Click to -download
    3x3_Widget_Frame_Portrait.psd

    -

    Click to -download
    2x2_Widget_Frame_Portrait.psd

    +

    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.

    -

    Click -to download
    4x1_Widget_Frame_Landscape.psd

    +

    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.

    -

    Click -to download
    3x3_Widget_Frame_Landscape.psd

    +

    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.

    -

    Click -to download
    2x2_Widget_Frame_Landscape.psd

    +
    +<FrameLayout
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:layout_margin="@dimen/widget_margin">
 
+  <LinearLayout
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="horizontal"
+    android:background="@drawable/my_widget_background">
 
-
    Standard widget shadows
    
+    <TextView
+      android:id="@+id/song_info"
+      android:layout_width="0dp"
+      android:layout_height="match_parent"
+      android:layout_weight="1" />
 
-
    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.
    
+    <Button
+      android:id="@+id/play_button"
+      android:layout_width="@dimen/my_button_width"
+      android:layout_height="match_parent" />
 
-
    Layer Style
-settings for standard shadows
    
+    <Button
+      android:id="@+id/skip_button"
+      android:layout_width="@dimen/my_button_width"
+      android:layout_height="match_parent" />
+  </LinearLayout>
+</FrameLayout>
+
    +

    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:

    -

    Widget graphics tips and tricks

    -

    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. +Excerpt flexible layouts and attributes for an example music widget -

    +

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

    -

    Widget graphics file format

    -

    Save your widget artwork using the appropriate bounding box size in PNG-24 -format on a transparent background and in 8-bit color.

    +Widget template excerpts -

    Widget graphics file format

    +

    Figure 8. Excerpts from the App Widget Templates Pack +(medium-density, dark, Android 4.0/previous styles, default/focused/pressed states).

    - +

    You can obtain the latest App Widget Templates Pack archive using the link below:

    +

    + Download the App Widget Templates Pack for Android 4.0 »

    diff --git a/docs/html/guide/topics/appwidgets/index.jd b/docs/html/guide/topics/appwidgets/index.jd index 78b5b511b603..22283cdc306b 100644 --- a/docs/html/guide/topics/appwidgets/index.jd +++ b/docs/html/guide/topics/appwidgets/index.jd @@ -327,6 +327,49 @@ following layout classes:

    Descendants of these classes are not supported.

    +

    Adding margins to App Widgets

    + +

    Widgets should not generally extend to screen edges and should not visually be flush with other widgets, so you should add margins on all sides around your widget frame.

    + +

    As of Android 4.0, app widgets are automatically given padding 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 targetSdkVersion to 14 or greater.

    + +

    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:

    + +
      +
    1. Set your application's targetSdkVersion to 14 or greater.
      2. +
    2. Create a layout such as the one below, that references a dimension resource for its margins: + +
      +<FrameLayout
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:layout_margin="@dimen/widget_margin">
+
+  <LinearLayout
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="horizontal"
+    android:background="@drawable/my_widget_background">
+    …
+  </LinearLayout>
+
+</FrameLayout>
+
      + +
      3. +
    3. Create two dimensions resources, one in res/values/ to provide the pre-Android 4.0 custom margins, and one in res/values-v14/ to provide no extra padding for Android 4.0 widgets: + +

      res/values/dimens.xml:
      + 

      <dimen name="widget_margin">15dp</dimen>

      + +

      res/values-v14/dimens.xml:
      + 

      <dimen name="widget_margin">0dp</dimen>

      +
      4. +
    + +

    Another option is to simply build extra margins into your nine-patch background assets by default, and provide different nine-patches with no margins for API level 14 or later.

    + +

    Using the AppWidgetProvider Class

    diff --git a/docs/html/images/widget_design/2x2_Widget_Frame_Landscape.png b/docs/html/images/widget_design/2x2_Widget_Frame_Landscape.png deleted file mode 100644 index a73a09a61f8d..000000000000 Binary files a/docs/html/images/widget_design/2x2_Widget_Frame_Landscape.png and /dev/null differ diff --git a/docs/html/images/widget_design/2x2_Widget_Frame_Landscape.psd b/docs/html/images/widget_design/2x2_Widget_Frame_Landscape.psd deleted file mode 100644 index cd869b5861f3..000000000000 Binary files a/docs/html/images/widget_design/2x2_Widget_Frame_Landscape.psd and /dev/null differ diff --git a/docs/html/images/widget_design/2x2_Widget_Frame_Portrait.png b/docs/html/images/widget_design/2x2_Widget_Frame_Portrait.png deleted file mode 100644 index 95ac03118c42..000000000000 Binary files a/docs/html/images/widget_design/2x2_Widget_Frame_Portrait.png and /dev/null differ diff --git a/docs/html/images/widget_design/2x2_Widget_Frame_Portrait.psd b/docs/html/images/widget_design/2x2_Widget_Frame_Portrait.psd deleted file mode 100644 index 9f0a7b0cf3af..000000000000 Binary files a/docs/html/images/widget_design/2x2_Widget_Frame_Portrait.psd and /dev/null differ diff --git a/docs/html/images/widget_design/3x3_Widget_Frame_Landscape.png b/docs/html/images/widget_design/3x3_Widget_Frame_Landscape.png deleted file mode 100644 index 14013dc0973d..000000000000 Binary files a/docs/html/images/widget_design/3x3_Widget_Frame_Landscape.png and /dev/null differ diff --git a/docs/html/images/widget_design/3x3_Widget_Frame_Landscape.psd b/docs/html/images/widget_design/3x3_Widget_Frame_Landscape.psd deleted file mode 100644 index 50a2b8ca0808..000000000000 Binary files a/docs/html/images/widget_design/3x3_Widget_Frame_Landscape.psd and /dev/null differ diff --git a/docs/html/images/widget_design/3x3_Widget_Frame_Portrait.png b/docs/html/images/widget_design/3x3_Widget_Frame_Portrait.png deleted file mode 100644 index 22f99f8631b0..000000000000 Binary files a/docs/html/images/widget_design/3x3_Widget_Frame_Portrait.png and /dev/null differ diff --git a/docs/html/images/widget_design/3x3_Widget_Frame_Portrait.psd b/docs/html/images/widget_design/3x3_Widget_Frame_Portrait.psd deleted file mode 100644 index 591e963d6e02..000000000000 Binary files a/docs/html/images/widget_design/3x3_Widget_Frame_Portrait.psd and /dev/null differ diff --git a/docs/html/images/widget_design/4x1_Widget_Frame_Landscape.png b/docs/html/images/widget_design/4x1_Widget_Frame_Landscape.png deleted file mode 100644 index c6a3f7adea71..000000000000 Binary files a/docs/html/images/widget_design/4x1_Widget_Frame_Landscape.png and /dev/null differ diff --git a/docs/html/images/widget_design/4x1_Widget_Frame_Landscape.psd b/docs/html/images/widget_design/4x1_Widget_Frame_Landscape.psd deleted file mode 100644 index ec811798ba05..000000000000 Binary files a/docs/html/images/widget_design/4x1_Widget_Frame_Landscape.psd and /dev/null differ diff --git a/docs/html/images/widget_design/4x1_Widget_Frame_Portrait.png b/docs/html/images/widget_design/4x1_Widget_Frame_Portrait.png deleted file mode 100644 index 5cc8665cdb67..000000000000 Binary files a/docs/html/images/widget_design/4x1_Widget_Frame_Portrait.png and /dev/null differ diff --git a/docs/html/images/widget_design/4x1_Widget_Frame_Portrait.psd b/docs/html/images/widget_design/4x1_Widget_Frame_Portrait.psd deleted file mode 100644 index bad7ad126811..000000000000 Binary files a/docs/html/images/widget_design/4x1_Widget_Frame_Portrait.psd and /dev/null differ diff --git a/docs/html/images/widget_design/Add_Noise.png b/docs/html/images/widget_design/Add_Noise.png deleted file mode 100644 index c323bb490c36..000000000000 Binary files a/docs/html/images/widget_design/Add_Noise.png and /dev/null differ diff --git a/docs/html/images/widget_design/Layer_Style.png b/docs/html/images/widget_design/Layer_Style.png deleted file mode 100644 index 757780314244..000000000000 Binary files a/docs/html/images/widget_design/Layer_Style.png and /dev/null differ diff --git a/docs/html/images/widget_design/Music_widget_button_states.psd b/docs/html/images/widget_design/Music_widget_button_states.psd deleted file mode 100644 index 17f3573d5097..000000000000 Binary files a/docs/html/images/widget_design/Music_widget_button_states.psd and /dev/null differ diff --git a/docs/html/images/widget_design/alignment.png b/docs/html/images/widget_design/alignment.png deleted file mode 100644 index 2e794dde0ea0..000000000000 Binary files a/docs/html/images/widget_design/alignment.png and /dev/null differ diff --git a/docs/html/images/widget_design/buttons.png b/docs/html/images/widget_design/buttons.png deleted file mode 100644 index a6d1df275f99..000000000000 Binary files a/docs/html/images/widget_design/buttons.png and /dev/null differ diff --git a/docs/html/images/widget_design/file_format.png b/docs/html/images/widget_design/file_format.png deleted file mode 100644 index 26f0e562ab67..000000000000 Binary files a/docs/html/images/widget_design/file_format.png and /dev/null differ diff --git a/docs/html/images/widget_design/landscape_sizes.png b/docs/html/images/widget_design/landscape_sizes.png deleted file mode 100644 index 798bb159fd66..000000000000 Binary files a/docs/html/images/widget_design/landscape_sizes.png and /dev/null differ diff --git a/docs/html/images/widget_design/music_example.png b/docs/html/images/widget_design/music_example.png new file mode 100644 index 000000000000..885057e0a568 Binary files /dev/null and b/docs/html/images/widget_design/music_example.png differ diff --git a/docs/html/images/widget_design/music_example_layouts.png b/docs/html/images/widget_design/music_example_layouts.png new file mode 100644 index 000000000000..31601b94452c Binary files /dev/null and b/docs/html/images/widget_design/music_example_layouts.png differ diff --git a/docs/html/images/widget_design/music_example_redline.png b/docs/html/images/widget_design/music_example_redline.png new file mode 100644 index 000000000000..85794b8936b3 Binary files /dev/null and b/docs/html/images/widget_design/music_example_redline.png differ diff --git a/docs/html/images/widget_design/music_example_stretched.png b/docs/html/images/widget_design/music_example_stretched.png new file mode 100644 index 000000000000..28c2fb3cbfaf Binary files /dev/null and b/docs/html/images/widget_design/music_example_stretched.png differ diff --git a/docs/html/images/widget_design/portrait_sizes.png b/docs/html/images/widget_design/portrait_sizes.png deleted file mode 100644 index 9da252a4782c..000000000000 Binary files a/docs/html/images/widget_design/portrait_sizes.png and /dev/null differ diff --git a/docs/html/images/widget_design/widget_examples.png b/docs/html/images/widget_design/widget_examples.png index e27ffbb24cfe..277b69a8bd53 100644 Binary files a/docs/html/images/widget_design/widget_examples.png and b/docs/html/images/widget_design/widget_examples.png differ diff --git a/docs/html/images/widget_design/widget_sizes_landscape.png b/docs/html/images/widget_design/widget_sizes_landscape.png deleted file mode 100644 index 052e28e24925..000000000000 Binary files a/docs/html/images/widget_design/widget_sizes_landscape.png and /dev/null differ diff --git a/docs/html/images/widget_design/widget_sizes_portrait.png b/docs/html/images/widget_design/widget_sizes_portrait.png deleted file mode 100644 index 31a240c052c4..000000000000 Binary files a/docs/html/images/widget_design/widget_sizes_portrait.png and /dev/null differ diff --git a/docs/html/images/widget_design/widget_template_excerpts.png b/docs/html/images/widget_design/widget_template_excerpts.png new file mode 100644 index 000000000000..aba09e248cd7 Binary files /dev/null and b/docs/html/images/widget_design/widget_template_excerpts.png differ diff --git a/docs/html/images/widget_design/widget_terms.png b/docs/html/images/widget_design/widget_terms.png new file mode 100644 index 000000000000..5c4d09d6a24a Binary files /dev/null and b/docs/html/images/widget_design/widget_terms.png differ diff --git a/docs/html/shareables/app_widget_templates-v4.0.zip b/docs/html/shareables/app_widget_templates-v4.0.zip new file mode 100644 index 000000000000..b16ef127c204 Binary files /dev/null and b/docs/html/shareables/app_widget_templates-v4.0.zip differ -- cgit v1.2.3-59-g8ed1b