Resolve merge conflicts of a5060ee to nyc-dev
This undoes the automerger skip which occured in
commit e740c84dc32180214a7fd157105d6c18d30408ee and
replays it as a standard (NOT -s ours) merge.
Change-Id: If5a47be26f73d6a0735c425cd66310a3e2a89086
diff --git a/docs/html/design/_book.yaml b/docs/html/design/_book.yaml
new file mode 100644
index 0000000..4575475
--- /dev/null
+++ b/docs/html/design/_book.yaml
@@ -0,0 +1,111 @@
+toc:
+- title: Creative Vision
+ path: /design/get-started/creative-vision.html
+ section:
+ - title: Design Principles
+ path: /design/get-started/principles.html
+ custom_link_attributes:
+ - es-lang="Principios de diseño para Android"
+ - ja-lang="Android デザイン指針"
+ - ko-lang="Android 디자인 원칙"
+ - pt-br-lang="Princípios de projeto para Android"
+ - ru-lang="Принципы проектирования Android"
+ - zh-cn-lang="Android 设计原则"
+ - zh-tw-lang="Android 設計原則"
+ - title: New in Android
+ path: /design/patterns/new.html
+
+- title: Material for Android
+ path: /design/material/index.html
+ custom_link_attributes:
+ - ja-lang="マテリアル デザイン"
+ - ko-lang="머티어리얼 디자인"
+ - zh-cn-lang="材料设计"
+ - zh-tw-lang="材料設計"
+
+- title: Devices
+ path: /design/devices.html
+ section:
+ - title: Phones & Tablets
+ path: /design/handhelds/index.html
+ - title: Wear
+ path: /design/wear/index.html
+ section:
+ - title: Creative Vision
+ path: /design/wear/creative-vision.html
+ - title: Design Principles
+ path: /design/wear/principles.html
+ - title: App Structure
+ path: /design/wear/structure.html
+ - title: Context Awareness
+ path: /design/wear/context.html
+ - title: UI Patterns
+ path: /design/wear/patterns.html
+ - title: Style
+ path: /design/wear/style.html
+ - title: Watch Faces
+ path: /design/wear/watchfaces.html
+ - title: TV
+ path: /design/tv/index.html
+ section:
+ - title: Creative Vision
+ path: /design/tv/principles.html
+ - title: UI Patterns
+ path: /design/tv/patterns.html
+ - title: Style
+ path: /design/tv/style.html
+ - title: Auto
+ path: /design/auto/index.html
+
+- title: Pure Android
+ path: /design/patterns/index.html
+ section:
+ - title: Devices and Displays
+ path: /design/style/devices-displays.html
+ - title: Navigation
+ path: /design/patterns/navigation.html
+ custom_link_attributes:
+ - es-lang="Navegación con los botones Back y Up"
+ - ja-lang="Back と Up を使用したナビゲーション"
+ - ko-lang="뒤로 및 위로 탐색 기능이 포함된 탐색"
+ - pt-br-lang="Navegação com Voltar e Para cima"
+ - ru-lang="Навигация с помощью кнопок \"Назад\" и \"Вверх\""
+ - zh-cn-lang="使用返回和向上导航"
+ - zh-tw-lang="使用 [返回] 及 [上一層] 導覽"
+ - title: Notifications
+ path: /design/patterns/notifications.html
+ custom_link_attributes:
+ - es-lang="Notificaciones"
+ - ja-lang="通知"
+ - ko-lang="알림"
+ - pt-br-lang="Notificações"
+ - ru-lang="Уведомления"
+ - zh-cn-lang="通知"
+ - zh-tw-lang="通知"
+ - title: Widgets
+ path: /design/patterns/widgets.html
+ - title: Swipe Views
+ path: /design/patterns/swipe-views.html
+ - title: Full Screen
+ path: /design/patterns/fullscreen.html
+ - title: Confirming & Acknowledging
+ path: /design/patterns/confirming-acknowledging.html
+ custom_link_attributes:
+ - es-lang="Confirmación y reconocimiento"
+ - ja-lang="確認と通知"
+ - ko-lang="확인 및 승인하기"
+ - pt-br-lang="Confirmação e reconhecimento"
+ - ru-lang="Подтверждение и уведомление"
+ - zh-cn-lang="确认和确知"
+ - zh-tw-lang="確認及確認完成"
+ - title: Pure Android
+ path: /design/patterns/pure-android.html
+ - title: Compatibility
+ path: /design/patterns/compatibility.html
+ - title: Accessibility
+ path: /design/patterns/accessibility.html
+ - title: Help
+ path: /design/patterns/help.html
+
+- title: Downloads
+ path: /design/downloads/index.html
diff --git a/docs/html/design/auto/index.jd b/docs/html/design/auto/index.jd
index 49bd221..117ce63 100644
--- a/docs/html/design/auto/index.jd
+++ b/docs/html/design/auto/index.jd
@@ -2,13 +2,6 @@
page.tags="design","Auto"
@jd:body
-<a class="notice-developers" href="{@docRoot}training/auto/index.html">
- <div>
- <h3>Developer Docs</h3>
- <p>Building Apps for Auto</p>
- </div>
-</a>
-
<div class="sidebox-wrapper">
<div class="sidebox">
<h2><strong>UI Guidelines</strong></h2>
@@ -26,6 +19,22 @@
</div>
</div>
+<a class="notice-developers" href="{@docRoot}training/auto/index.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Building Apps for Auto</p>
+ </div>
+</a>
+
+<a href="http://www.youtube.com/watch?v=vG9c5egwEYY"
+ class="notice-developers-video">
+<div>
+ <h3>Video</h3>
+ <p>Designing For Drivers</p>
+</div>
+</a>
+
+
<p>Android Auto provide a standardized user interface and user interaction
model that works across vehicles. As a designer, you do not
need to worry about vehicle-specific hardware differences. This page
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
index 477eb23..a837a04 100644
--- a/docs/html/design/design_toc.cs
+++ b/docs/html/design/design_toc.cs
@@ -18,13 +18,11 @@
<li class="nav-section">
<div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/material/index.html"
- es-lang="Material Design"
ja-lang="マテリアル デザイン"
ko-lang="머티어리얼 디자인"
- pt-br-lang="Material Design"
- ru-lang="Material Design"
zh-cn-lang="材料设计"
- zh-tw-lang="材料設計">
+ zh-tw-lang="材料設計"
+ >
Material for Android</a></div>
</li>
@@ -59,10 +57,9 @@
</li>
<li class="nav-section">
- <div class="nav-section-header"><a href="<?cs var:toroot ?>design/style/index.html">Pure Android</a></div>
+ <div class="nav-section-header"><a href="<?cs var:toroot ?>design/patterns/index.html">Pure Android</a></div>
<ul>
<li><a href="<?cs var:toroot ?>design/style/devices-displays.html">Devices and Displays</a></li>
- <li><a href="<?cs var:toroot ?>design/patterns/app-structure.html">App Structure</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/navigation.html"
es-lang="Navegación con los botones Back y Up"
ja-lang="Back と Up を使用したナビゲーション"
@@ -85,7 +82,6 @@
<li><a href="<?cs var:toroot ?>design/patterns/widgets.html">Widgets</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/fullscreen.html">Full Screen</a></li>
-
<li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html"
es-lang="Confirmación y reconocimiento"
ja-lang="確認と通知"
@@ -95,7 +91,6 @@
zh-cn-lang="确认和确知"
zh-tw-lang="確認及確認完成">
Confirming & Acknowledging</a></li>
-
<li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/accessibility.html">Accessibility</a></li>
diff --git a/docs/html/design/devices.jd b/docs/html/design/devices.jd
index 3d23d07..4616836 100644
--- a/docs/html/design/devices.jd
+++ b/docs/html/design/devices.jd
@@ -1,7 +1,5 @@
page.title=Android devices
-page.viewport_width=970
section.landing=true
-header.hide=1
footer.hide=1
page.image=images/cards/android-devices_2x.jpg
@jd:body
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd
index 089a4af..788c7c1 100644
--- a/docs/html/design/downloads/index.jd
+++ b/docs/html/design/downloads/index.jd
@@ -1,8 +1,11 @@
page.title=Downloads
-page.tags=Icons,stencils,color swatches
+page.tags="icons","stencils","colors,"swatches"
+meta.tags="downloads, design, tools"
+section.landing=true
+footer.hide=true
+nonavpage=true
+forcelocalnav=true
@jd:body
-
-
<p>For icons, sticker sheets, and other downloadable resources, visit the
<a href="http://www.google.com/design">Design site</a> or use the links below. </p>
@@ -28,10 +31,10 @@
</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® Illustrator® Toolkit</a>
+ href="{@docRoot}downloads/design/Android_Wear_Toolkit_371.ai">Adobe® Illustrator® 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>
+ href="{@docRoot}downloads/design/Android_Wear_Toolkit_371.pdf">PDF Toolkit</a>
</div>
</div>
@@ -105,7 +108,7 @@
<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">
+ style="width:150px;margin:0 auto 15px;display:block">
</div>
<div class="col-4">
@@ -125,7 +128,7 @@
<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">
+ style="width:150px;margin:0 auto 15px;display:block">
</div>
<div class="col-4">
@@ -145,11 +148,35 @@
<div class="col-4">
<img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150"
- style="width:150px;margin:0 auto;display:block">
+ style="width:150px;margin:0 auto 20px;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® Photoshop® Icon</a>
</div>
+</div>
+
+<div class="cols">
+ <div class="col-5">
+ <h4>Hardware technical drawings</h4>
+<p>Technical drawings and specifications for the latest Android Wear devices.
+</p>
+
+ </div>
+ <div class="col-4">
+
+ <img src="{@docRoot}design/media/nemo_preview.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', 'Hardware Technical Drawings');"
+ href="{@docRoot}downloads/design/AndroidWear_AllGear_TechDrawings&Spec_20151101_square.png">
+PNG Toolkit (Square)</a>
+
+ <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Hardware Technical Drawings');"
+ href="{@docRoot}downloads/design/AndroidWear_AllGear_TechDrawings&Spec_20151101_round.png">
+PNG Toolkit (Round)</a>
+ </div>
</div>
\ No newline at end of file
diff --git a/docs/html/design/get-started/creative-vision.jd b/docs/html/design/get-started/creative-vision.jd
index 974d5d0..26bc1b2 100644
--- a/docs/html/design/get-started/creative-vision.jd
+++ b/docs/html/design/get-started/creative-vision.jd
@@ -1,8 +1,11 @@
page.title=Creative Vision
+section.landing=true
+footer.hide=1
page.image=images/cards/design-creative-vision_2x.jpg
+
@jd:body
-<img src="{@docRoot}design/media/creative_vision_main.png">
+<img src="{@docRoot}design/media/creative_vision_main.png" style="width:100%;margin-top:">
<div class="vspace size-1"> </div>
@@ -15,7 +18,7 @@
<div class="vspace size-1"> </div>
<div class="cols">
- <div class="col-4">
+ <div class="col-1of3">
<h4>Enchant me</h4>
<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels.
@@ -24,7 +27,7 @@
simplicity and purpose to create a magical experience that is effortless and powerful.</p>
</div>
- <div class="col-5">
+ <div class="col-1of3">
<h4>Simplify my life</h4>
<p>Android apps make life easier and are easy to understand. When people use your app for the first
@@ -35,7 +38,7 @@
irrelevant flash.</p>
</div>
- <div class="col-4">
+ <div class="col-1of3">
<h4>Make me amazing</h4>
<p>It's not enough to make an app that is easy to use. Android apps empower people to try new things
diff --git a/docs/html/design/get-started/principles.jd b/docs/html/design/get-started/principles.jd
index 172a4e4..9e8a371 100644
--- a/docs/html/design/get-started/principles.jd
+++ b/docs/html/design/get-started/principles.jd
@@ -15,7 +15,7 @@
<h2 id="enchant-me">Enchant Me</h2>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="delight-me">Delight me in surprising ways</h4>
<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
@@ -23,7 +23,7 @@
force is at hand.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_delight.png">
@@ -33,14 +33,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4>
<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
needed to perform a task while making it more emotionally satisfying.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_real_objects.png">
@@ -50,7 +50,7 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="make-it-mine">Let me make it mine</h4>
<p>People love to add personal touches because it helps them feel at home and in control. Provide
@@ -58,7 +58,7 @@
primary tasks.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_make_it_mine.png">
@@ -68,14 +68,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="get-to-know-me">Get to know me</h4>
<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
over, place previous choices within easy reach.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_get_to_know_me.png">
@@ -85,13 +85,13 @@
<h2 id="simplify-my-life">Simplify My Life</h2>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="keep-it-brief">Keep it brief</h4>
<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_keep_it_brief.png">
@@ -101,14 +101,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="pictures-faster-than-words">Pictures are faster than words</h4>
<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
than words.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_pictures.png">
@@ -118,14 +118,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="decide-for-me">Decide for me but let me have the final say</h4>
<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
unhappy. Just in case you get it wrong, allow for 'undo'.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_decide_for_me.png">
@@ -135,14 +135,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4>
<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_information_when_need_it.png">
@@ -152,14 +152,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="always-know-where-i-am">I should always know where I am</h4>
<p>Give people confidence that they know their way around. Make places in your app look distinct and
use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_navigation.png">
@@ -169,7 +169,7 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="never-lose-my-stuff">Never lose my stuff</h4>
<p>Save what people took time to create and let them access it from anywhere. Remember settings,
@@ -177,7 +177,7 @@
easiest thing in the world.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_never_lose_stuff.png">
@@ -187,14 +187,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4>
<p>Help people discern functional differences by making them visually distinct rather than subtle.
Avoid modes, which are places that look similar but act differently on the same input.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_looks_same.png">
@@ -204,14 +204,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4>
<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_important_interruption.png">
@@ -221,7 +221,7 @@
<h2 id="make-me-amazing">Make Me Amazing</h2>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="give-me-tricks">Give me tricks that work everywhere</h4>
<p>People feel great when they figure things out for themselves. Make your app easier to learn by
@@ -229,7 +229,7 @@
may be a good navigational shortcut.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_tricks.png">
@@ -239,7 +239,7 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="its-not-my-fault">It's not my fault</h4>
<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
@@ -247,7 +247,7 @@
If you can fix it behind the scenes, even better.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_error.png">
@@ -257,14 +257,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="sprinkle-encouragement">Sprinkle encouragement</h4>
<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
even if it's just a subtle glow.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">
@@ -274,7 +274,7 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4>
<p>Make novices feel like experts by enabling them to do things they never thought they could. For
@@ -282,7 +282,7 @@
only a few steps.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_heavy_lifting.png">
@@ -292,14 +292,14 @@
<div class="vspace size-2"> </div>
<div class="cols">
- <div class="col-7">
+ <div class="col-7of12">
<h4 id="make-important-things-fast">Make important things fast</h4>
<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
</div>
- <div class="col-6">
+ <div class="col-5of12">
<img src="{@docRoot}design/media/principles_make_important_fast.png">
diff --git a/docs/html/design/handhelds/index.jd b/docs/html/design/handhelds/index.jd
old mode 100644
new mode 100755
index 81c2c19..4a4526c
--- a/docs/html/design/handhelds/index.jd
+++ b/docs/html/design/handhelds/index.jd
@@ -79,9 +79,9 @@
</li>
<li>
<h4>Navigation Bar</h4>
-<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
+<p>The navigation bar is present only on devices that don't have
the traditional hardware keys. It houses the device navigation controls Back, Home, and
- Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
+ Recents.</p>
</li>
</ol>
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd
index 799a64f..b4e909f 100644
--- a/docs/html/design/index.jd
+++ b/docs/html/design/index.jd
@@ -1,10 +1,11 @@
fullpage=true
page.title=Design
-page.viewport_width=970
section.landing=true
meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
+page.metaDescription=Create beautiful experiences in your apps.
header.hide=1
footer.hide=1
+nonavpage=true
@jd:body
<section class="dac-expand dac-hero dac-light">
@@ -46,7 +47,7 @@
<i class="dac-sprite dac-arrow-down-gray"></i>
</a>
</div>
-<section class="dac-section dac-gray dac-small dac-invert" id="latest"><div class="wrap">
+<section class="dac-section dac-gray dac-small" id="latest"><div class="wrap">
<h2 class="norule">Latest</h2>
<div class="resource-widget resource-flow-layout col-16"
data-query="collection:design/landing/latest"
diff --git a/docs/html/design/material/index.jd b/docs/html/design/material/index.jd
index c5893a7..701c951 100644
--- a/docs/html/design/material/index.jd
+++ b/docs/html/design/material/index.jd
@@ -1,8 +1,8 @@
page.title=Material Design for Android
page.tags=Material,design
-page.type=design
page.image=images/cards/design-material-for-android_2x.jpg
-
+footer.hide=true
+forcelocalnav=true
@jd:body
<!-- developer docs box -->
diff --git a/docs/html/design/media/nemo_preview.png b/docs/html/design/media/nemo_preview.png
new file mode 100644
index 0000000..757b87a
--- /dev/null
+++ b/docs/html/design/media/nemo_preview.png
Binary files differ
diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd
index ef02c53..262172b 100644
--- a/docs/html/design/patterns/actionbar.jd
+++ b/docs/html/design/patterns/actionbar.jd
@@ -13,10 +13,10 @@
</div>
</a>
-<a class="notice-developers" href="{@docRoot}guide/topics/ui/actionbar.html">
+<a class="notice-developers" href="{@docRoot}training/appbar/index.html">
<div>
<h3>Developer Docs</h3>
- <p>Action Bar</p>
+ <p>Adding the App Bar</p>
</div>
</a>
diff --git a/docs/html/design/patterns/index.jd b/docs/html/design/patterns/index.jd
new file mode 100644
index 0000000..01e5c0d
--- /dev/null
+++ b/docs/html/design/patterns/index.jd
@@ -0,0 +1,29 @@
+page.title=Pure Android
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 0;
+ top: 402px;
+ width: 220px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ <span itemprop="description">Build visually compelling apps that look great on any
+ device.</span>
+ <br><br>
+ <a href="{@docRoot}design/style/devices-displays.html" class="landing-page-link">Devices and Displays</a>
+ </div>
+
+ <a href="{@docRoot}design/style/devices-displays.html">
+ <img src="{@docRoot}design/media/design_elements_landing.png">
+ </a>
+</div>
diff --git a/docs/html/design/patterns/navigation.jd b/docs/html/design/patterns/navigation.jd
old mode 100644
new mode 100755
index 703528e..abb3a73
--- a/docs/html/design/patterns/navigation.jd
+++ b/docs/html/design/patterns/navigation.jd
@@ -11,11 +11,10 @@
</a>
<p itemprop="description">Consistent navigation is an essential component of the overall user experience. Few things frustrate
-users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
-introduced significant changes to the global navigation behavior. Thoughtfully following the
-guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p>
-<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an
-app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared:
+users more than basic navigation that behaves in inconsistent and unexpected ways. Thoughtfully
+following the guidelines for Back and Up will make your app's navigation predictable and reliable
+for your users.</p>
+<p>Action bars provide a second, standard navigation mechanism:
the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
<img src="{@docRoot}design/media/navigation_with_back_and_up.png">
diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd
old mode 100644
new mode 100755
index 47b05b2..df4c2ed
--- a/docs/html/design/patterns/new.jd
+++ b/docs/html/design/patterns/new.jd
@@ -196,10 +196,7 @@
<div class="col-7">
<p>Android 4.0 removes the need for traditional hardware keys on
phones by replacing them with a virtual navigation bar that houses
- the Back, Home and Recents buttons. Read the
- <a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a>
- pattern to learn how the OS adapts to phones with hardware buttons and
- how pre-Android 3.0 apps that rely on menu keys are supported.</p>
+ the Back, Home and Recents buttons.</p>
</div>
<div class="col-6">
<img src="{@docRoot}design/media/whats_new_nav_bar.png">
diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd
index fdd435c..844c3b6 100644
--- a/docs/html/design/patterns/notifications.jd
+++ b/docs/html/design/patterns/notifications.jd
@@ -1,22 +1,22 @@
page.title=Notifications
-page.tags="notifications","design","L"
+page.tags="notifications","design"
@jd:body
- <a class="notice-developers" href="{@docRoot}training/notify-user/index.html">
+ <a class="notice-developers right" href="{@docRoot}training/notify-user/index.html">
<div>
<h3>Developer Docs</h3>
<p>Notifying the User</p>
</div>
</a>
-<a class="notice-designers" href="notifications_k.html">
+<a class="notice-designers right" href="notifications_k.html">
<div>
<h3>Notifications in Android 4.4 and Lower</h3>
</div>
</a>
<!-- video box -->
-<a class="notice-developers-video" href="https://www.youtube.com/watch?v=Uiq2kZ2JHVY">
+<a class="notice-developers-video right" href="https://www.youtube.com/watch?v=Uiq2kZ2JHVY">
<div>
<h3>Video</h3>
<p>DevBytes: Notifications in the Android L Developer Preview</p>
diff --git a/docs/html/design/patterns/notifications_k.jd b/docs/html/design/patterns/notifications_k.jd
index 01a12a7..39ee269 100644
--- a/docs/html/design/patterns/notifications_k.jd
+++ b/docs/html/design/patterns/notifications_k.jd
@@ -1,14 +1,15 @@
-page.title=Notifications in Android 4.4 and Lower
+page.title=Notifications, Android 4.4 and Lower
+footer.hide=1
@jd:body
-<a class="notice-developers" href="{@docRoot}training/notify-user/index.html">
+<a class="notice-developers right" href="{@docRoot}training/notify-user/index.html">
<div>
<h3>Developer Docs</h3>
<p>Notifying the User</p>
</div>
</a>
-<a class="notice-designers" href="notifications.html">
+<a class="notice-designers right" href="notifications.html">
<div>
<h3>Notifications in Android 5.0</h3>
</div>
diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd
index e617711..6446e39 100644
--- a/docs/html/design/patterns/pure-android.jd
+++ b/docs/html/design/patterns/pure-android.jd
@@ -65,28 +65,6 @@
<div class="vspace size-2"> </div>
-<div class="cols">
- <div class="col-5">
-
-<h4>Don't use bottom tab bars</h4>
-<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
-Android's tabs for view control are shown in action bars at the top of the screen instead. In
-addition, Android apps may use a bottom bar to display actions on a split action bar.</p>
-<p>You should follow this guideline to create a consistent experience with other apps on the Android
-platform and to avoid confusion between actions and view switching on Android.</p>
-<p>For more information on how to properly use action bars for view control, see
-<a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p>
-
- </div>
- <div class="col-8">
-
- <img src="{@docRoot}design/media/migrating_ios_dialers.png">
- <div class="figure-caption">
- Android dialer with tabs in an action bar vs. bottom tabs in iOS.
- </div>
-
- </div>
-</div>
<div class="cols">
<div class="col-5">
diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd
index 9ee33db..789538d 100644
--- a/docs/html/design/patterns/swipe-views.jd
+++ b/docs/html/design/patterns/swipe-views.jd
@@ -2,7 +2,7 @@
page.tags=viewpager,navigation,tabs
@jd:body
-<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html">
+<a class="notice-developers right" href="{@docRoot}training/implementing-navigation/lateral.html">
<div>
<h3>Developer Docs</h3>
<p>Creating Swipe Views with Tabs</p>
@@ -20,7 +20,7 @@
related data items, such as images, chats, or emails, and then pick one of the items to see the
detail contents in a separate screen.</p>
-<img src="{@docRoot}design/media/swipe_views.png">
+<img itemprop="image" src="{@docRoot}design/media/swipe_views.png">
<div class="figure-caption">
Master (left) and detail (right) views.
</div>
diff --git a/docs/html/design/patterns/widgets.jd b/docs/html/design/patterns/widgets.jd
old mode 100644
new mode 100755
index b149af6..42f563a
--- a/docs/html/design/patterns/widgets.jd
+++ b/docs/html/design/patterns/widgets.jd
@@ -87,7 +87,10 @@
<div class="cols">
<div class="col-6">
<h3>Widget resizing</h3>
- <p>With version 3.1, Android introduced resizable widgets to the platform. Resizing allows users to adjust the height and/or the width of a widget within the constraints of the home panel placement grid. You can decide if your widget is freely resizable or if it is constrained to horizontal or vertical size changes. You do not have to support resizing if your particular widget is inherently fixed-size.</p>
+ <p>Resizing allows users to adjust the height and/or the width of a widget within the
+constraints of the home panel placement grid. You can decide if your widget is freely resizable or
+if it is constrained to horizontal or vertical size changes. You do not have to support resizing if
+your particular widget is inherently fixed-size.</p>
<p>Allowing users to resize widgets has important benefits:</p>
<ul>
<li>They can fine-tune how much information they want to see on each widget.</li>
@@ -103,7 +106,7 @@
</div>
</div>
-<p>Planning a resize strategy for your widget depends on the type of widget you're creating. List or grid-based collection widgets are usually straightforward because resizing the widget will simply expand or contract the vertical scrolling area. Regardless of the of the widget's size, the user can still scroll all information elements into view. Information widgets on the other hand require a bit more hands-on planning, since they are not scrollable and all content has to fit within a given size. You will have to dynamically adjust your widget's content and layout to the size the user defined through the resize operation.</p>
+<p>Planning a resize strategy for your widget depends on the type of widget you're creating. List or grid-based collection widgets are usually straightforward because resizing the widget will simply expand or contract the vertical scrolling area. Regardless of the widget's size, the user can still scroll all information elements into view. Information widgets on the other hand require a bit more hands-on planning, since they are not scrollable and all content has to fit within a given size. You will have to dynamically adjust your widget's content and layout to the size the user defined through the resize operation.</p>
<img src="{@docRoot}design/media/widgets_resizing02.png">
<p>In this simple example the user can horizontally resize a weather widget in 4 steps and expose richer information about the weather at the current location as the widget grows.</p>
<p>For each widget size determine how much of your app's information should surface. For smaller sizes concentrate on the essential and then add more contextual information as the widget grows horizontally and vertically.</p>
diff --git a/docs/html/design/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd
index caa77da..9edfadd 100644
--- a/docs/html/design/style/devices-displays.jd
+++ b/docs/html/design/style/devices-displays.jd
@@ -3,15 +3,7 @@
@jd:body
-<a class="notice-designers-material"
- href="http://www.google.com/design/spec/layout/principles.html">
- <div>
- <h3>Material Design</h3>
- <p>Layout Principles<p>
- </div>
-</a>
-
-<p>Android powers hundreds of millions of phones, tablets, and other devices in a wide variety of screen sizes and
+<p>Android powers more than a billion phones, tablets, and other devices in a wide variety of screen sizes and
form factors. By taking advantage of Android's flexible layout system, you can create apps that
gracefully scale from large tablets to smaller phones.</p>
diff --git a/docs/html/design/tv/images/icon.png b/docs/html/design/tv/images/icon.png
index ae34e18..9cf584c 100644
--- a/docs/html/design/tv/images/icon.png
+++ b/docs/html/design/tv/images/icon.png
Binary files differ
diff --git a/docs/html/design/tv/images/overscan.png b/docs/html/design/tv/images/overscan.png
index fb7e4bc..7957e97 100644
--- a/docs/html/design/tv/images/overscan.png
+++ b/docs/html/design/tv/images/overscan.png
Binary files differ
diff --git a/docs/html/design/tv/patterns.jd b/docs/html/design/tv/patterns.jd
index ccec285..622e678 100644
--- a/docs/html/design/tv/patterns.jd
+++ b/docs/html/design/tv/patterns.jd
@@ -39,9 +39,10 @@
<h2 id="recommendation">Recommendations</h2>
<p>The first row of the Android TV home screen displays cards for content recommended by applications.
-Your application provides these recommendations, as described in <a href="{@docRoot}training/tv/discovery/recommendations.html">
-</a>. For a visual overview of recommendations, see <a href="design/tv/index.html#recommendations">
-Design for Android TV</a>.</p>
+Your application provides these recommendations, as described in
+<a href="{@docRoot}training/tv/discovery/recommendations.html">Recommending TV Content</a>.
+For a visual overview of recommendations, see
+<a href="{@docRoot}design/tv/index.html#recommendations">Designing for Android TV</a>.</p>
<div class="cols">
<div class="col-8 with-callouts">
@@ -75,7 +76,7 @@
should be different than the one provided for the large icon, and meet the following specifications:</p>
<ul>
- <li>Measure 2016 x 1134 pixels (1920 x 1080 plus 5% margin for for motion)</li>
+ <li>Measure 2016 x 1134 pixels (1920 x 1080 plus 5% margin for motion)</li>
<li id="solid-background">Must not be transparent</li>
</ul>
@@ -113,20 +114,24 @@
<h4>Small icon</h4>
-<p>Recommendation cards include a small icon that is imposed over a colored background. The icon and
-background color display at 100% opacity when the card is selected, and at 50% opacity when not
-selected.</p>
+<p>Recommendation cards include a small icon that is imposed over a colored
+background. The icon and background color both display at 100% opacity when the card
+is selected and at 50% opacity when the card is not selected.</p>
<img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" />
-<p>Here are the requirements for recommendation small icons:</p>
+<p>Here are the requirements for a small recommendation icon:</p>
<ul>
- <li>Flat image</li>
- <li>Monocolor: size 16x16dp, white (#fff) icon with transparent background, PNG format</li>
- <li>Graphics should be centered within the icon image</li>
+ <li>Visually flat graphic, monocolor, 16x16dp</li>
+ <li>Color <code>#eeeeee</code> with transparency</li>
+ <li>Graphic centered over transparent background</li>
+ <li>PNG file format</li>
</ul>
+<p class="note"><strong>Note:</strong> The color value <code>#eeeeee</code> is actually a light
+gray, but it is used by the system to create a background which appears white.</p>
+
<h2>Audio Feedback</h2>
<p>Sounds on Android TV bring a cinematic quality to the interaction experience. You should
diff --git a/docs/html/design/tv/style.jd b/docs/html/design/tv/style.jd
index dd10a8a..4c43983 100644
--- a/docs/html/design/tv/style.jd
+++ b/docs/html/design/tv/style.jd
@@ -51,9 +51,11 @@
<img src="{@docRoot}design/tv/images/overscan.png" alt="Overscan borders for TV" />
-<p>Build a 10% margin into your TV screen designs to account for overscan area the TV may not
- display correctly. On a 1920 x 1080 pixel screen, this margin should be a minimum of 27px from the
- top and bottom edges and a minimum of 48px from the right and left edges of the picture.</p>
+<p>Build a 5% margin into your TV screen designs to account for overscan area the TV may not
+ display correctly. On a 1920 x 1080 screen, this margin should be a minimum of 27 pixels
+ from the top and bottom edges and a minimum of 48 pixels from the right and left edges of the
+ picture.
+ </p>
<h2>Color</h2>
