diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css
index 3bfb6874d6..d11a862ed0 100644
--- a/tools/droiddoc/templates-sdk/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk/assets/css/default.css
@@ -338,7 +338,8 @@ video.with-shadow {
       width: 34px;
       height: 34px; }
   #nav li.expanded li ul.tree-list-children {
-    padding:0;
+    display:block; /*dd temporary for debug */
+    padding: 0 0 0 10px;
   }
   #nav li.expanded li ul.tree-list-children .tree-list-children {
     padding:0 0 0 10px;
@@ -957,7 +958,7 @@ scroll top left;
     background-image: url(../images/styles/ico_wrong.png); }
   .do-dont-label.good {
     background-image: url(../images/styles/ico_good.png); }
-
+    
 
 
 
@@ -2358,6 +2359,9 @@ div.toggle-content.closed .toggle-content-toggleme {
 #jd-content img.toggle-content-img {
   margin:0 5px 5px 0;
 }
+div.toggle-content p {
+  margin:10px 0 0;
+}
 div.toggle-content-toggleme {
   padding:0 0 0 15px;
 }
@@ -2443,6 +2447,144 @@ Lightbox
   background-position: -10px 0;
 }
 
+
+/* Styles for toggleable divs */
+.toggleable {
+  padding: .25em 1em 0em 1em;
+  margin-bottom: 0;
+}
+.toggleme {
+  padding: 1em 1em 0 2em;
+  line-height:1em;
+}
+.toggleable a {
+  text-decoration:none;
+}
+.toggleme a {
+  text-decoration:underline;
+}
+
+.toggleable.closed .toggleme {
+  display:none;
+}
+#jd-content .toggle-img {
+  margin:0;
+}
+
+/* --------------------------------------------------------------------------
+Styles for samples project trees and code browsing in resources tab 
+*/
+
+.structure-dir {
+background-image:url(../../assets/images/folder.png);
+background-repeat:no-repeat;
+background-position:16px 2px;
+  margin:.25em 0 0 0;
+  padding:0 0 0 0;
+}
+
+.structure-toggleme {
+  margin:0 0 0 3em;
+  padding:0 0 0 0;
+  text-decoration:none;
+}
+
+.structure-java{
+background-image:url(../../assets/images/file-java.png);
+background-repeat:no-repeat;
+background-position:0px 2px;
+  margin:.3em 0 0 0;
+  padding:.3em 0 .3em 22px;
+}
+
+.structure-file {
+background-image:url(../../assets/images/file-generic.png);
+background-repeat:no-repeat;
+background-position:0px 2px;
+  margin:.3em 0 0 0;
+  padding:.3em 0 .3em 22px;
+}
+
+.structure-xml {
+background-image:url(../../assets/images/file-xml.png);
+background-repeat:no-repeat;
+background-position:0px 2px;
+  margin:.3em 0 0 0;
+  padding:.3em 0 .25em 22px;
+}
+
+.structure-img {
+background-image:url(../../assets/images/file-image.png);
+background-repeat:no-repeat;
+background-position:0px 2px;
+  margin:.3em 0 0 0;
+  padding:.3em 0 .25em 22px;
+}
+
+.structure-manifest {
+background-image:url(../../assets/images/file-manifest.png);
+background-repeat:no-repeat;
+  margin:.0 0 0 1.25em;
+  padding:0 0 0 22px;
+  text-decoration:none;
+}
+
+#jd-content .structure-toggle-img {
+  margin:.5em 0 0 0;
+padding-right:2.1em;
+}
+
+.dirInfo {
+  margin-left:2em;
+}
+
+.structure-dir a {
+  text-decoration:none;
+}
+
+.structure-manifest a {
+  text-decoration: none;
+}
+.structure-file a {
+  text-decoration: none;
+}
+
+.sampleEmbed {
+  background-color:rgb(249, 249, 249);
+}
+
+.sampleEmbed ol.lineNumbers {
+  list-style-type: decimal;
+  padding-left:1em;
+}
+
+.sampleEmbed ol.lineNumbers li {
+border-left:1px solid #ddd;
+border-right:1px solid #ddd;
+color:gray;
+background-color:#f7f7f7;
+margin:0 0 0 24px;
+padding: 2px 2px 2px 6px;
+}
+
+.sampleEmbed ol.lineNumbers li:hover {
+background: #efefef;
+}
+
+/* --------------------------------------------------------------------------
+Styles for raw formatted line numbers (not used with listformatted version)
+div.sampleLine div.lineNumber {
+  display: inline;
+}
+div.sampleLine div.lineCode {
+  display: inline;
+  padding-left:6px;
+}
+div.sampleLine {
+  padding:0;
+  margin:0;
+}*/
+
 /* --------------------------------------------------------------------------
 Butterbar
 */
@@ -2489,7 +2631,7 @@ table.blank th, table.blank td {
 .caption {
   margin: 0.5em 0 2em 0;
   color: #000;
-  font-size: 11.5px;
+  font-size: 11.5px;  
 }
 
 .nolist {
diff --git a/tools/droiddoc/templates-sdk/assets/images/file-generic.png b/tools/droiddoc/templates-sdk/assets/images/file-generic.png
new file mode 100644
index 0000000000..18024577b1
Binary files /dev/null and b/tools/droiddoc/templates-sdk/assets/images/file-generic.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/file-image.png b/tools/droiddoc/templates-sdk/assets/images/file-image.png
new file mode 100644
index 0000000000..d3aec4634b
Binary files /dev/null and b/tools/droiddoc/templates-sdk/assets/images/file-image.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/file-java.png b/tools/droiddoc/templates-sdk/assets/images/file-java.png
new file mode 100644
index 0000000000..ec85e4bf69
Binary files /dev/null and b/tools/droiddoc/templates-sdk/assets/images/file-java.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/file-manifest.png b/tools/droiddoc/templates-sdk/assets/images/file-manifest.png
new file mode 100644
index 0000000000..332d06690a
Binary files /dev/null and b/tools/droiddoc/templates-sdk/assets/images/file-manifest.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/file-xml.png b/tools/droiddoc/templates-sdk/assets/images/file-xml.png
new file mode 100644
index 0000000000..3dd21b67b8
Binary files /dev/null and b/tools/droiddoc/templates-sdk/assets/images/file-xml.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/folder.png b/tools/droiddoc/templates-sdk/assets/images/folder.png
new file mode 100644
index 0000000000..44c610047f
Binary files /dev/null and b/tools/droiddoc/templates-sdk/assets/images/folder.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js
index c21929ea16..86b7aa1d2d 100644
--- a/tools/droiddoc/templates-sdk/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk/assets/js/docs.js
@@ -188,6 +188,8 @@ $(document).ready(function() {
       $("#nav-x li.tools a").addClass("selected");
     } else if ($("body").hasClass("google")) {
       $("#nav-x li.google a").addClass("selected");
+    } else if ($("body").hasClass("samples")) {
+      $("#nav-x li.samples a").addClass("selected");
     }
 
   // highlight Distribute tab
@@ -640,13 +642,6 @@ function updateSideNavPosition() {
   $('#devdoc-nav .totop').css({left: -(newLeft - parseInt($('#side-nav').css('margin-left')))});
 }
 
-
-
-
-
-
-
-
 // TODO: use $(document).ready instead
 function addLoadEvent(newfun) {
   var current = window.onload;
@@ -2577,6 +2572,13 @@ function init_navtree(navtree_id, toroot, root_nodes)
   }
 }
 
+
+
+
+
+
+
+
 /* TODO: eliminate redundancy with non-google functions */
 function init_google_navtree(navtree_id, toroot, root_nodes)
 {
@@ -2691,6 +2693,22 @@ function init_default_gcm_navtree(toroot) {
   });
 }
 
+function showSamplesRefTree() {
+  init_default_samples_navtree(toRoot);
+}
+
+function init_default_samples_navtree(toroot) {
+  // load json file for navtree data
+  $.getScript(toRoot + 'samples_navtree_data.js', function(data, textStatus, jqxhr) {
+      // when the file is loaded, initialize the tree
+      if(jqxhr.status === 200) {
+          init_google_navtree("samples-tree-list", toroot, SAMPLES_NAVTREE_DATA);
+          highlightSidenav();
+          resizeNav();
+      }
+  });
+}
+
 /* TOGGLE INHERITED MEMBERS */
 
 /* Toggle an inherited class (arrow toggle)
diff --git a/tools/droiddoc/templates-sdk/components/masthead.cs b/tools/droiddoc/templates-sdk/components/masthead.cs
index 4f3273c69a..78e53b271b 100644
--- a/tools/droiddoc/templates-sdk/components/masthead.cs
+++ b/tools/droiddoc/templates-sdk/components/masthead.cs
@@ -188,6 +188,10 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
                         </li>
                         <li><a href="<?cs var:toroot ?>google/index.html">Google Services</a>
                         </li>
+                        <?cs if:android.hasSamples ?>
+                          <li><a href="<?cs var:toroot ?>samples/index.html">Samples</a>
+                          </li>
+                        <?cs /if ?>
                       </ul>
                     </li>
                     <li class="distribute last">
@@ -214,7 +218,7 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
   </div>
     
     
-  <?cs if:training || guide || reference || tools || develop || google ?>
+  <?cs if:training || guide || reference || tools || develop || google || samples ?>
     <!-- Secondary x-nav -->
     <div id="nav-x">
         <div class="wrap">
@@ -254,6 +258,10 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
                 <li class="google"><a href="<?cs var:toroot ?>google/index.html"
                   >Google Services</a>
                 </li>
+                <?cs if:android.hasSamples ?>
+                  <li><a href="<?cs var:toroot ?>samples/index.html">Samples</a>
+                  </li>
+                <?cs /if ?>
             </ul>
         </div>
         
diff --git a/tools/droiddoc/templates-sdk/customizations.cs b/tools/droiddoc/templates-sdk/customizations.cs
index 33edbdef73..985f059a27 100644
--- a/tools/droiddoc/templates-sdk/customizations.cs
+++ b/tools/droiddoc/templates-sdk/customizations.cs
@@ -134,6 +134,30 @@ def:distribute_nav() ?>
     </script>
 <?cs /def ?>
 
+<?cs
+def:samples_nav() ?>
+  <div class="wrap clearfix" id="body-content">
+    <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+      <div id="devdoc-nav" class="scroll-pane">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+
+<?cs
+        include:"../../../../frameworks/base/docs/html/samples/samples_toc.cs" ?>
+
+
+      </div>
+      <script type="text/javascript">
+       showSamplesRefTree();
+
+      </script>
+    </div> <!-- end side-nav -->
+    <script>
+      $(document).ready(function() {
+        scrollIntoView("devdoc-nav");
+        });
+    </script>
+<?cs /def ?>
+
 <?cs
 def:google_nav() ?>
   <div class="wrap clearfix" id="body-content">
@@ -177,28 +201,7 @@ def:about_nav() ?>
         });
     </script>
 <?cs /def ?>
-<?cs
-def:dist_more_nav() ?>
-  <div class="wrap clearfix" id="body-content">
-    <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
-      <div id="devdoc-nav" class="scroll-pane">
-<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
 
-
-<?cs 
-        include:"../../../../frameworks/base/docs/html/distribute/more/more_toc.cs" ?>
-        
-
-      </div>
-    </div> <!-- end side-nav -->
-    <script>
-      $(document).ready(function() {
-        scrollIntoView("devdoc-nav");
-        });
-    </script>
-:
-
-<?cs /def ?>
 <?cs # The default side navigation for the reference docs ?><?cs 
 def:default_left_nav() ?>
 <?cs if:reference.gcm || reference.gms ?>
@@ -322,6 +325,8 @@ def:custom_left_nav() ?><?cs
     call:tools_nav() ?><?cs
   elif:google ?><?cs 
     call:google_nav() ?><?cs 
+  elif:samples ?><?cs
+    call:samples_nav() ?><?cs
   elif:more ?><?cs 
     call:dist_more_nav() ?><?cs
   elif:distribute ?><?cs 
diff --git a/tools/droiddoc/templates-sdk/docpage.cs b/tools/droiddoc/templates-sdk/docpage.cs
index 90e663b124..566e2daf7d 100644
--- a/tools/droiddoc/templates-sdk/docpage.cs
+++ b/tools/droiddoc/templates-sdk/docpage.cs
@@ -3,7 +3,7 @@
 <html<?cs if:devsite ?> devsite<?cs /if ?>>
 <?cs include:"head_tag.cs" ?>
 <body class="gc-documentation <?cs if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?>
-  <?cs if:(guide||develop||training||reference||tools||sdk) ?>develop<?cs if:guide ?> guide<?cs /if ?><?cs
+  <?cs if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs if:guide ?> guide<?cs /if ?><?cs if:samples ?> samples<?cs /if ?><?cs
   elif:about ?>about<?cs
   elif:design ?>design<?cs
   elif:distribute ?>distribute<?cs
diff --git a/tools/droiddoc/templates-sdk/head_tag.cs b/tools/droiddoc/templates-sdk/head_tag.cs
index 9778389be8..6a1ce060ff 100644
--- a/tools/droiddoc/templates-sdk/head_tag.cs
+++ b/tools/droiddoc/templates-sdk/head_tag.cs
@@ -2,7 +2,7 @@
 <?cs ####### If building devsite, add some meta data needed for when generating the top nav ######### ?>
 <?cs
   if:devsite ?><?cs
-    if:guide||develop||training||reference||tools||sdk||google
+    if:guide||develop||training||reference||tools||sdk||google||samples
       ?><meta name="top_category" value="develop" /><?cs
     elif:google
       ?><meta name="top_category" value="google" /><?cs
diff --git a/tools/droiddoc/templates-sdk/sample.cs b/tools/droiddoc/templates-sdk/sample.cs
new file mode 100644
index 0000000000..763ba3f24f
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/sample.cs
@@ -0,0 +1,165 @@
+<?cs include:"doctype.cs" ?>
+<?cs include:"macros.cs" ?>
+<html<?cs if:devsite ?> devsite<?cs /if ?>>
+<?cs include:"head_tag.cs" ?>
+<body class="gc-documentation <?cs if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?>
+  <?cs if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs if:guide ?> guide<?cs /if ?><?cs if:samples ?> samples<?cs /if ?><?cs
+  elif:about ?>about<?cs
+  elif:design ?>design<?cs
+  elif:distribute ?>distribute<?cs
+  /if ?><?cs
+  if:page.trainingcourse ?> trainingcourse<?cs /if ?>" itemscope itemtype="http://schema.org/Article">
+<?cs include:"header.cs" ?>
+
+<div <?cs if:fullpage
+?>class="fullpage"<?cs elif:design||tools||about||sdk||distribute
+?>class="col-13" id="doc-col"<?cs else 
+?>class="col-12" id="doc-col"<?cs /if ?> >
+
+<?cs if:(design||training||walkthru) && !page.trainingcourse && !page.article ?><?cs # header logic for docs that provide previous/next buttons ?>
+  <?cs if:header.hide ?>
+  <?cs else ?>
+  <div class="layout-content-row content-header <?cs if:header.justLinks ?>just-links<?cs /if ?>">
+    <div class="layout-content-col <?cs if:training ?>span-7<?cs else ?>span-9<?cs /if ?>">
+      <?cs if:header.justLinks ?>&nbsp;
+      <?cs else ?><h1 itemprop="name">item <?cs var:page.title ?></h1>
+      <?cs /if ?>
+    </div>
+    <?cs if:training ?>
+      <div class="training-nav-top layout-content-col span-5" itemscope itemtype="http://schema.org/SiteNavigationElement">
+        <a href="#" class="prev-page-link hide"
+            zh-tw-lang="上一堂課"
+            zh-cn-lang="上一课"
+            ru-lang="Предыдущий"
+            ko-lang="이전"
+            ja-lang="前へ"
+            es-lang="Anterior"               
+            >Previous</a>
+        <a href="#" class="next-page-link hide"
+            zh-tw-lang="下一堂課"
+            zh-cn-lang="下一课"
+            ru-lang="Следующий"
+            ko-lang="다음"
+            ja-lang="次へ"
+            es-lang="Siguiente"               
+            >Next</a>
+        <a href="#" class="start-class-link hide"
+            zh-tw-lang="開始上課"
+            zh-cn-lang="开始"
+            ru-lang="Начало работы"
+            ko-lang="시작하기"
+            ja-lang="開始する"
+            es-lang="Empezar"               
+            >Get started</a>
+      </div>
+    <?cs elif:!page.trainingcourse ?>
+      <div class="paging-links layout-content-col span-4" itemscope itemtype="http://schema.org/SiteNavigationElement">
+        <a href="#" class="prev-page-link hide"
+            zh-tw-lang="上一堂課"
+            zh-cn-lang="上一课"
+            ru-lang="Предыдущий"
+            ko-lang="이전"
+            ja-lang="前へ"
+            es-lang="Anterior"               
+            >Previous</a>
+        <a href="#" class="next-page-link hide"
+            zh-tw-lang="下一堂課"
+            zh-cn-lang="下一课"
+            ru-lang="Следующий"
+            ko-lang="다음"
+            ja-lang="次へ"
+            es-lang="Siguiente"               
+            >Next</a>
+      </div>
+    <?cs /if ?><?cs # end if training ?>
+  </div>
+  <?cs /if ?>
+<?cs else ?>
+  <?cs if:(!fullpage && !header.hide) ?>
+    <?cs if:page.landing ?><?cs # header logic for docs that are landing pages ?>
+      <div class="landing-banner">
+        <?cs if:page.landing.image ?><?cs # use two-column layout only if theres an image ?>
+        <div class="col-6">
+          <img src="<?cs var:toroot ?><?cs var:page.landing.image ?>" alt="" />
+        </div>
+        <div class="col-6">
+        <?cs /if ?>
+          <h1 itemprop="name" style="margin-bottom:0;"> item2 <?cs var:page.title ?></h1>
+          <p itemprop="description"><?cs var:page.landing.intro ?></p>
+          
+          <p><a class="next-page-link topic-start-link"></a></p>
+        <?cs if:page.landing.image ?>
+        </div>
+        <?cs /if ?>
+      </div>
+    <?cs else ?>
+      <?cs if:tab1 ?><div id="title-tabs-wrapper"><?cs /if ?>
+        <h1 itemprop="name" <?cs if:tab1 ?>class="with-title-tabs"<?cs /if ?>>"<?cs var:page.title ?>"</h1><?cs
+          if:tab1 ?><ul id="title-tabs">
+              <li class="selected"><a href="<?cs var:tab1.link ?>"><?cs var:tab1 ?></a></li>
+              <?cs if:tab2 ?>
+              <li><a href="<?cs var:tab2.link ?>"><?cs var:tab2 ?></a></li><?cs /if ?>
+              <?cs if:tab3 ?>
+              <li><a href="<?cs var:tab3.link ?>"><?cs var:tab3 ?></a></li><?cs /if ?>
+            </ul>
+          <?cs /if ?>
+      <?cs if:tab1 ?></div><!-- end tab-wrapper --><?cs /if ?>
+    <?cs /if ?>
+  <?cs /if ?>
+<?cs /if ?><?cs # end if design ?>
+
+  <?cs # THIS IS THE MAIN DOC CONTENT ?>
+  <div id="jd-content">
+
+<?cs if:android.whichdoc == "online" ?>
+
+<?cs # If this is the online docs, build the src code navigation links ?>
+
+
+<?cs var:summary ?>
+
+<p>The file containing the source code shown below is located in the corresponding directory in <code>&lt;sdk&gt;/samples/android-&lt;version&gt;/...</code></p>
+
+<!-- begin file contents -->
+<div class="sampleEmbed">
+  <code class="prettyprint">
+    <ol class="lineNumbers">
+      <?cs var:fileContents ?>
+    </ol>
+  </code>
+</div>
+
+
+<!-- end file contents -->
+
+
+
+
+
+<?cs else ?><?cs
+  # else, this means it's offline docs,
+          so don't show src links (we dont have the pages!) ?>
+
+<p>You can find the source code for this sample in your SDK at:</p>
+<p style="margin-left:2em">
+<code><em>&lt;sdk&gt;</em>/samples/android-<em>&lt;version&gt;</em>/</code>
+</p>
+
+<?cs /if ?><?cs # end if/else online docs ?>
+
+  </div> <!-- end jd-content -->
+
+<?cs include:"footer.cs" ?>
+</div><!-- end doc-content -->
+
+<?cs include:"trailer.cs" ?>
+
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/tools/droiddoc/templates-sdk/sampleindex.cs b/tools/droiddoc/templates-sdk/sampleindex.cs
index a1733634c6..2447da8956 100644
--- a/tools/droiddoc/templates-sdk/sampleindex.cs
+++ b/tools/droiddoc/templates-sdk/sampleindex.cs
@@ -1,53 +1,219 @@
 <?cs include:"doctype.cs" ?>
 <?cs include:"macros.cs" ?>
-<?cs set:resources="true" ?>
 <html<?cs if:devsite ?> devsite<?cs /if ?>>
 <?cs include:"head_tag.cs" ?>
+<body class="gc-documentation <?cs if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?>
+  <?cs if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs if:guide ?> guide<?cs /if ?><?cs if:samples ?> samples<?cs /if ?><?cs
+  elif:about ?>about<?cs
+  elif:design ?>design<?cs
+  elif:distribute ?>distribute<?cs
+  /if ?><?cs
+  if:page.trainingcourse ?> trainingcourse<?cs /if ?>" itemscope itemtype="http://schema.org/Article">
 <?cs include:"header.cs" ?>
-<body class="gc-documentation">
+
+<div <?cs if:fullpage
+?>class="fullpage"<?cs elif:design||tools||about||sdk||distribute
+?>class="col-13" id="doc-col"<?cs else 
+?>class="col-12" id="doc-col"<?cs /if ?> >
+
+<?cs if:(design||training||walkthru) && !page.trainingcourse && !page.article ?><?cs # header logic for docs that provide previous/next buttons ?>
+  <?cs if:header.hide ?>
+  <?cs else ?>
+  <div class="layout-content-row content-header <?cs if:header.justLinks ?>just-links<?cs /if ?>">
+    <div class="layout-content-col <?cs if:training ?>span-7<?cs else ?>span-9<?cs /if ?>">
+      <?cs if:header.justLinks ?>&nbsp;
+      <?cs else ?><h1 itemprop="name">item <?cs var:page.title ?></h1>
+      <?cs /if ?>
+    </div>
+    <?cs if:training ?>
+      <div class="training-nav-top layout-content-col span-5" itemscope itemtype="http://schema.org/SiteNavigationElement">
+        <a href="#" class="prev-page-link hide"
+            zh-tw-lang="上一堂課"
+            zh-cn-lang="上一课"
+            ru-lang="Предыдущий"
+            ko-lang="이전"
+            ja-lang="前へ"
+            es-lang="Anterior"               
+            >Previous</a>
+        <a href="#" class="next-page-link hide"
+            zh-tw-lang="下一堂課"
+            zh-cn-lang="下一课"
+            ru-lang="Следующий"
+            ko-lang="다음"
+            ja-lang="次へ"
+            es-lang="Siguiente"               
+            >Next</a>
+        <a href="#" class="start-class-link hide"
+            zh-tw-lang="開始上課"
+            zh-cn-lang="开始"
+            ru-lang="Начало работы"
+            ko-lang="시작하기"
+            ja-lang="開始する"
+            es-lang="Empezar"               
+            >Get started</a>
+      </div>
+    <?cs elif:!page.trainingcourse ?>
+      <div class="paging-links layout-content-col span-4" itemscope itemtype="http://schema.org/SiteNavigationElement">
+        <a href="#" class="prev-page-link hide"
+            zh-tw-lang="上一堂課"
+            zh-cn-lang="上一课"
+            ru-lang="Предыдущий"
+            ko-lang="이전"
+            ja-lang="前へ"
+            es-lang="Anterior"               
+            >Previous</a>
+        <a href="#" class="next-page-link hide"
+            zh-tw-lang="下一堂課"
+            zh-cn-lang="下一课"
+            ru-lang="Следующий"
+            ko-lang="다음"
+            ja-lang="次へ"
+            es-lang="Siguiente"               
+            >Next</a>
+      </div>
+    <?cs /if ?><?cs # end if training ?>
+  </div>
+  <?cs /if ?>
+<?cs else ?>
+  <?cs if:(!fullpage && !header.hide) ?>
+    <?cs if:page.landing ?><?cs # header logic for docs that are landing pages ?>
+      <div class="landing-banner">
+        <?cs if:page.landing.image ?><?cs # use two-column layout only if theres an image ?>
+        <div class="col-6">
+          <img src="<?cs var:toroot ?><?cs var:page.landing.image ?>" alt="" />
+        </div>
+        <div class="col-6">
+        <?cs /if ?>
+          <h1 itemprop="name" style="margin-bottom:0;"> item2 <?cs var:page.title ?></h1>
+          <p itemprop="description"><?cs var:page.landing.intro ?></p>
+          
+          <p><a class="next-page-link topic-start-link"></a></p>
+        <?cs if:page.landing.image ?>
+        </div>
+        <?cs /if ?>
+      </div>
+    <?cs else ?>
+      <?cs if:tab1 ?><div id="title-tabs-wrapper"><?cs /if ?>
+        <h1 itemprop="name" <?cs if:tab1 ?>class="with-title-tabs"<?cs /if ?>><?cs var:projectTitle ?></h1><?cs
+          if:tab1 ?><ul id="title-tabs">
+              <li class="selected"><a href="<?cs var:tab1.link ?>"><?cs var:tab1 ?></a></li>
+              <?cs if:tab2 ?>
+              <li><a href="<?cs var:tab2.link ?>"><?cs var:tab2 ?></a></li><?cs /if ?>
+              <?cs if:tab3 ?>
+              <li><a href="<?cs var:tab3.link ?>"><?cs var:tab3 ?></a></li><?cs /if ?>
+            </ul>
+          <?cs /if ?>
+      <?cs if:tab1 ?></div><!-- end tab-wrapper --><?cs /if ?>
+    <?cs /if ?>
+  <?cs /if ?>
+<?cs /if ?><?cs # end if design ?>
+
+  <?cs # THIS IS THE MAIN DOC CONTENT ?>
+  <div id="jd-content">
+
+<?cs if:android.whichdoc == "online" ?>
+
+<?cs # If this is the online docs, build the src code navigation links ?>
+
+<?cs if:page.title == "Project Structure" ?>
+
+<script type="text/javascript"> 
+function toggleDiv(link) {
+  var toggleable = $(link).parent();
+  if (toggleable.hasClass("closed")) {
+    $(".toggleme", toggleable).slideDown("fast");
+    toggleable.removeClass("closed");
+    toggleable.addClass("open");
+    $(".toggle-img", toggleable).attr("title", "hide").attr("src", (toRoot + "assets/images/triangle-opened.png"));
+  } else {
+    $(".toggleme", toggleable).slideUp("fast");
+    toggleable.removeClass("open");
+    toggleable.addClass("closed");
+    $(".toggle-img", toggleable).attr("title", "show").attr("src", (toRoot + "assets/images/triangle-closed.png"));
+  }
+  return false;
+}
+</script>
 
 
-<a name="top"></a>
-<div class="g-unit" id="doc-content">
- <div id="jd-header" class="guide-header">
-    <span class="crumb">
-      <a href="<?cs var:toroot ?>resources/browser.html?tag=sample">Sample Code</a> >
-    </span>
-  <h1><?cs var:page.title ?></h1>
- </div>
+<?cs def:display_files(files) ?>
 
-<div id="jd-content">
-<p><a href="../index.html">&larr; Back</a></p>
+    <?cs each:file = files ?>
+        <?cs if:file.Type != "dir" ?>
+            <div class="structure-<?cs var:file.Type ?>"><a href="<?cs var:toroot ?><?cs var:file.Href ?>"><?cs var:file.Name ?></a></div>
+        <?cs else ?>
+            <div class="toggleable opened structure-dir"> 
+               <a href="#" onclick="return toggleDiv(this)"> 
+               <img src="<?cs var:toroot ?>assets/images/triangle-opened.png" class="toggle-img structure-toggle-img" height="9px" width="9px" />
+               <?cs var:file.Name ?></a><?cs if:file.SummaryFlag == "true" ?><span class="dirInfo">[&nbsp;<a href="file.SummaryHref">Info</a>&nbsp;]</a></span><?cs /if ?>
+
+               <div class="toggleme structure-toggleme"> 
+
+        <?cs if:file.Sub.0.Name ?>
+                 <?cs call:display_files(file.Sub) ?>
+        <?cs /if ?>
+               </div> <?cs # /toggleme ?>
+            </div> <?cs # /toggleable ?>
+         <?cs /if ?>
+    <?cs /each ?>
+<?cs /def ?>
+
+<?cs call:display_files(Files) ?>
+
+<?cs else ?> <?cs # else not project structure doc ?>
 
 <?cs var:summary ?>
 
-  <?cs if:subcount(subdirs) ?>
-      <h2>Subdirectories</h2>
-      <ul class="nolist">
-      <?cs each:dir=subdirs ?>
-        <li><a href="<?cs var:dir.name ?>/index.html"><?cs
-          var:dir.name ?>/</a></li>
-      <?cs /each ?>
-      </ul>
-  <?cs /if ?>
+<h2>Project Structure</h2>
 
-  <?cs if:subcount(files) ?>
-      <h2>Files</h2>
-      <ul class="nolist">
-      <?cs each:file=files ?>
-        <li><a href="<?cs var:file.href ?>"><?cs
-          var:file.name ?></a></li>
-      <?cs /each ?>
-      </ul>
-  <?cs /if ?>
+<p>Decide what to do with this ...</p>
 
-</div><!-- end jd-content -->
+
+<?cs def:display_files(files) ?>
+
+    <?cs each:file = files ?>
+        <?cs if:file.Type != "dir" ?>
+            <div class="structure-<?cs var:file.Type ?>"><a href="<?cs var:toroot ?><?cs var:file.Href ?>"><?cs var:file.Name ?></a></div>
+        <?cs else ?>
+            <div class="toggleable opened structure-dir"> 
+               <a href="#" onclick="return toggleDiv(this)"> 
+               <img src="<?cs var:toroot ?>assets/images/triangle-opened.png" class="toggle-img structure-toggle-img" height="9px" width="9px" />
+               <?cs var:file.Name ?></a><?cs if:file.SummaryFlag == "true" ?><span class="dirInfo">[&nbsp;<a href="file.SummaryHref">Info</a>&nbsp;]</a></span><?cs /if ?>
+
+               <div class="toggleme structure-toggleme"> 
+
+        <?cs if:file.Sub.0.Name ?>
+                 <?cs call:display_files(file.Sub) ?>
+        <?cs /if ?>
+               </div> <?cs # /toggleme ?>
+            </div> <?cs # /toggleable ?>
+         <?cs /if ?>
+    <?cs /each ?>
+<?cs /def ?>
+
+<?cs call:display_files(Files) ?>
+
+<?cs /if ?> <?cs # end if project structure ?>
+
+<?cs else ?><?cs
+  # else, this means it's offline docs,
+          so don't show src links (we dont have the pages!) ?>
+
+<p>You can find the source code for this sample in your SDK at:</p>
+<p style="margin-left:2em">
+<code><em>&lt;sdk&gt;</em>/samples/android-<em>&lt;version&gt;</em>/</code>
+</p>
+
+<?cs /if ?><?cs # end if/else online docs ?>
+
+  </div> <!-- end jd-content -->
 
 <?cs include:"footer.cs" ?>
-
 </div><!-- end doc-content -->
 
 <?cs include:"trailer.cs" ?>
 
 </body>
 </html>
+
+
diff --git a/tools/droiddoc/templates-sdk/samples_navtree_data.cs b/tools/droiddoc/templates-sdk/samples_navtree_data.cs
new file mode 100644
index 0000000000..24ac7b77cb
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/samples_navtree_data.cs
@@ -0,0 +1,3 @@
+var SAMPLES_NAVTREE_DATA =
+<?cs var:reference_tree ?>
+;