1page.title=Downloads 2page.tags=Icons,stencils,color swatches 3@jd:body 4 5 6<p>You may use these materials without restriction to facilitate your app design 7and implementation.</p> 8 9 10<h2 id="stencils">Phone & Tablet Stencils</h2> 11 12<div class="layout-content-row"> 13 <div class="layout-content-col span-5"> 14 15<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the 16rich typography, colors, interactive controls, and icons found throughout Android, along with 17phone and tablet outlines to frame your creations. Source files for icons and controls are also 18available.</p> 19 20 </div> 21 <div class="layout-content-col span-4"> 22 23 <img src="{@docRoot}design/media/downloads_stencils.png"> 24 25 </div> 26 <div class="layout-content-col span-4"> 27 28<p> 29 <!--<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Fireworks Stencil');" 30 href="{@docRoot}downloads/design/Android_Design_Fireworks_Stencil_20120814.png">Adobe® Fireworks® PNG Stencil</a> 31 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Illustrator Stencil');" 32 href="{@docRoot}downloads/design/Android_Design_Illustrator_Vectors_20120814.ai">Adobe® Illustrator® Stencil</a> 33 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'OmniGraffle Stencil');" 34 href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni® OmniGraffle® Stencil</a>--> 35 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');" 36 href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Photoshop® Stencils and Sources</a> 37</p> 38 39 </div> 40</div> 41 42 43 44 45 46 47<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2> 48 49<div class="layout-content-row"> 50 <div class="layout-content-col span-5"> 51 52<p>Action bar icons are graphic buttons that represent the most important actions people can take 53within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p> 54<p>The download package includes icons that are scaled for various screen densities and suitable for 55use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can 56modify to match your theme, plus source files.</p> 57 58 </div> 59 <div class="layout-content-col span-4"> 60 61 <img src="{@docRoot}design/media/iconography_actionbar_style.png"> 62 63 </div> 64 <div class="layout-content-col span-4"> 65 66<p> 67 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons');" 68 href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a> 69</p> 70 71 </div> 72</div> 73 74 75 76 77 78<h2 id="Wear">Android Wear Materials</h2> 79 80<div class="layout-content-row"> 81 <div class="layout-content-col span-5"> 82 <h4>UI toolkit</h4> 83<p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p> 84 85 </div> 86 <div class="layout-content-col span-4"> 87 88 <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220"> 89 90 </div> 91 <div class="layout-content-col span-4"> 92 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');" 93 href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe® Illustrator® Toolkit</a> 94 95 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit PDF');" 96 href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.pdf">PDF Toolkit</a> 97 </div> 98</div> 99 100 101<div class="layout-content-row"> 102 <div class="layout-content-col span-5"> 103 <h4>Sample user flow patterns</h4> 104<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. 105</p> 106 </div> 107 <div class="layout-content-col span-4"> 108 109 <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220"> 110 111 </div> 112 <div class="layout-content-col span-4"> 113 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');" 114 href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe® Illustrator® App Patterns</a> 115 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');" 116 href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.pdf">PDF App Patterns</a> 117 </div> 118</div> 119 120 121<div class="layout-content-row"> 122 <div class="layout-content-col span-5"> 123 <h4>Sample app design mocks</h4> 124<p>Stream cards and UI elements for some example apps in fully editable PSD format. 125</p> 126 127 </div> 128 <div class="layout-content-col span-4"> 129 130 <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220"> 131 132 </div> 133 <div class="layout-content-col span-4"> 134 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');" 135 href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe® Photoshop® mocks</a> 136 </div> 137</div> 138 139 140 141 142 143 144 145<h2 id="style">Style</h2> 146 147<div class="layout-content-row"> 148 <div class="layout-content-col span-5"> 149 150<h4 id="roboto">Roboto</h4> 151<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the 152requirements of UI and high-resolution screens.</p> 153<p>For Android Wear, Roboto Condensed is the system font and the Regular and Light variants should be used by all Wear apps.</p> 154<p><a href="{@docRoot}design/style/typography.html">More on Roboto</a></p> 155<p><a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto on Google Fonts</a></p> 156<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p> 157 158 </div> 159 <div class="layout-content-col span-4"> 160 161 <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png"> 162 163 </div> 164 <div class="layout-content-col span-4"> 165 166<p> 167 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" 168 href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a> 169 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specemin Book');" 170 href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a> 171</p> 172 173 </div> 174</div> 175 176<div class="layout-content-row"> 177 <div class="layout-content-col span-5"> 178 179<h4>Color</h4> 180<p>In Android's color palette, each color has a corresponding darker 181shade that can be used as a complement when needed.</p> 182<p><a href="{@docRoot}design/style/color.html">More on Color</a></p> 183 184 </div> 185 <div class="layout-content-col span-4"> 186 187 <img src="{@docRoot}design/media/downloads_color_swatches.png"> 188 189 </div> 190 <div class="layout-content-col span-4"> 191 192<p> 193 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');" 194 href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a> 195</p> 196 197 </div> 198</div> 199
