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<div class="layout-content-row"> 141 <div class="layout-content-col span-5"> 142 <h4>Watch faces UI toolkit</h4> 143<p>Detailed specifications and measurements for the the background canvas, notification cards, and 144system indicators. 145</p> 146 147 </div> 148 <div class="layout-content-col span-4"> 149 150 <img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220"> 151 152 </div> 153 <div class="layout-content-col span-4"> 154 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');" 155 href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a> 156 </div> 157</div> 158 159 160<div class="layout-content-row"> 161 <div class="layout-content-col span-5"> 162 <h4>Slide watch face</h4> 163<p>Example of a watch face design in AI format. 164</p> 165 166 </div> 167 <div class="layout-content-col span-4"> 168 169 <img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150" 170 style="width:150px;margin:0 auto;display:block"> 171 172 </div> 173 <div class="layout-content-col span-4"> 174 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');" 175 href="{@docRoot}downloads/design/Slide.ai">Adobe® Illustrator® Design</a> 176 </div> 177</div> 178 179 180<div class="layout-content-row"> 181 <div class="layout-content-col span-5"> 182 <h4>Slide watch face specifications</h4> 183<p>Design specifications for the Slide watch face in PSD format. 184</p> 185 186 </div> 187 <div class="layout-content-col span-4"> 188 189 <img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150" 190 style="width:150px;margin:0 auto;display:block"> 191 192 </div> 193 <div class="layout-content-col span-4"> 194 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');" 195 href="{@docRoot}downloads/design/Slide.psd">Adobe® Photoshop® Specifications</a> 196 </div> 197</div> 198 199 200<div class="layout-content-row"> 201 <div class="layout-content-col span-5"> 202 <h4>Watch face icon example</h4> 203<p>Template for creating watch face icons for the carousel on Android Wear devices. 204</p> 205 206 </div> 207 <div class="layout-content-col span-4"> 208 209 <img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150" 210 style="width:150px;margin:0 auto;display:block"> 211 212 </div> 213 <div class="layout-content-col span-4"> 214 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');" 215 href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe® Photoshop® Icon</a> 216 </div> 217</div> 218 219 220 221 222<h2 id="style">Style</h2> 223 224<div class="layout-content-row"> 225 <div class="layout-content-col span-5"> 226 227<h4 id="roboto">Roboto</h4> 228<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the 229requirements of UI and high-resolution screens.</p> 230<p>For Android Wear, Roboto Condensed is the system font and the Regular and Light variants should be used by all Wear apps.</p> 231<p><a href="{@docRoot}design/style/typography.html">More on Roboto</a></p> 232<p><a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto on Google Fonts</a></p> 233<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p> 234 235 </div> 236 <div class="layout-content-col span-4"> 237 238 <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png"> 239 240 </div> 241 <div class="layout-content-col span-4"> 242 243<p> 244 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" 245 href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a> 246 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specemin Book');" 247 href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a> 248</p> 249 250 </div> 251</div> 252 253<div class="layout-content-row"> 254 <div class="layout-content-col span-5"> 255 256<h4>Color</h4> 257<p>In Android's color palette, each color has a corresponding darker 258shade that can be used as a complement when needed.</p> 259<p><a href="{@docRoot}design/style/color.html">More on Color</a></p> 260 261 </div> 262 <div class="layout-content-col span-4"> 263 264 <img src="{@docRoot}design/media/downloads_color_swatches.png"> 265 266 </div> 267 <div class="layout-content-col span-4"> 268 269<p> 270 <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');" 271 href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a> 272</p> 273 274 </div> 275</div> 276
