docs/html/design/downloads/index.jd

page.title=Downloads
page.tags=Icons,stencils,color swatches
@jd:body


<p>You may use these materials without restriction to facilitate your app design
and implementation.</p>


<h2 id="stencils">Phone &amp; Tablet Stencils</h2>

<div class="cols">
  <div class="col-5">


<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the
rich typography, colors, interactive controls, and icons found throughout Android, along with
phone and tablet outlines to frame your creations. Source files for icons and controls are also
available.</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_stencils.png">

  </div>

  <div class="col-4">
    <a class="notice-designers-material"
      style="width:218px;"
      href="http://www.google.com/design/spec/resources/layout-templates.html">
      <div>
        <h3>Material Design</h3>
        <p>Layout Templates<p>
      </div>
    </a>
  </div>

  <div class="col-4">
    <a class="notice-designers-material"
      style="width:218px;"
      href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html">
      <div>
        <h3>Material Design</h3>
        <p>Sticker Sheets<p>
      </div>
    </a>
  </div>

  <div class="col-4">
<p>
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');"
    href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe&reg; Photoshop&reg; Stencils and Sources</a>
</p>

  </div>
</div>






<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>

<div class="cols">
  <div class="col-5">

<p>Action bar icons are graphic buttons that represent the most important actions people can take
within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p>
<p>The download package includes icons that are scaled for various screen densities and suitable for
use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
modify to match your theme, plus source files.</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/iconography_actionbar_style.png">

  </div>

  <div class="col-4">
    <a class="notice-designers-material"
      style="width:218px;"
      href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html">
      <div>
        <h3>Material Design</h3>
        <p>Sticker Sheets<p>
      </div>
    </a>
  </div>

  <div class="col-4">

<p>
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons');"
    href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a>
</p>

  </div>
</div>





<h2 id="Wear">Android Wear Materials</h2>

<div class="cols">
  <div class="col-5">
  <h4>UI toolkit</h4>
<p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');"
    href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe&reg; Illustrator&reg; Toolkit</a>

  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit PDF');"
    href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.pdf">PDF Toolkit</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Sample user flow patterns</h4>
<p>Examples of how to chain together simple Android Wear UI components into common user flow patterns, from simple notifications to complex interactions involving full screen activities.
</p>
  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');"
    href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe&reg; Illustrator&reg; App Patterns</a>
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');"
    href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.pdf">PDF App Patterns</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Sample app design mocks</h4>
<p>Stream cards and UI elements for some example apps in fully editable PSD format.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');"
    href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe&reg; Photoshop&reg; mocks</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Watch faces UI toolkit</h4>
<p>Detailed specifications and measurements for the the background canvas, notification cards, and
system indicators.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');"
    href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Slide watch face</h4>
<p>Example of a watch face design in AI format.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150"
         style="width:150px;margin:0 auto;display:block">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');"
    href="{@docRoot}downloads/design/Slide.ai">Adobe&reg; Illustrator&reg; Design</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Slide watch face specifications</h4>
<p>Design specifications for the Slide watch face in PSD format.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150"
         style="width:150px;margin:0 auto;display:block">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
    href="{@docRoot}downloads/design/Slide.psd">Adobe&reg; Photoshop&reg; Specifications</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Watch face icon example</h4>
<p>Template for creating watch face icons for the carousel on Android Wear devices.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150"
         style="width:150px;margin:0 auto;display:block">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
    href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe&reg; Photoshop&reg; Icon</a>
  </div>
</div>




<h2 id="style">Style</h2>

<div class="cols">
  <div class="col-5">

<h4 id="roboto">Roboto</h4>
<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
requirements of UI and high-resolution screens.</p>
<p>For Android Wear, Roboto Condensed is the system font and the Regular and Light variants should be used by all Wear apps.</p>
<p><a href="{@docRoot}design/style/typography.html">More on Roboto</a></p>
<p><a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto on Google Fonts</a></p>
<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png">

  </div>

  <div class="col-4">
    <a class="notice-designers-material"
      style="width:218px;"
      href="http://www.google.com/design/spec/resources/roboto-noto-fonts.html">
      <div>
        <h3>Material Design</h3>
        <p>Roboto Font<p>
      </div>
    </a>
  </div>

  <div class="col-4">

<p>
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"
    href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a>
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specemin Book');"
    href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a>
</p>

  </div>
</div>

<div class="cols">
  <div class="col-5">

<h4>Color</h4>
<p>In Android's color palette, each color has a corresponding darker
shade that can be used as a complement when needed.</p>
<p><a href="{@docRoot}design/style/color.html">More on Color</a></p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_color_swatches.png">

  </div>

  <div class="col-4">
    <a class="notice-designers-material"
      style="width:218px;"
      href="http://www.google.com/design/spec/resources/color-palettes.html">
      <div>
        <h3>Material Design</h3>
        <p>Color Palettes<p>
      </div>
    </a>
  </div>

  <div class="col-4">

<p>
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');"
    href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
</p>

  </div>
</div>