docs: Migrating material design info from the Preview site
Change-Id: I3a2f71e41cc1371b8cce2d8860b116cf0f8b8ed2
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
index 1a6ee7a..52c7c52 100644
--- a/docs/html/design/design_toc.cs
+++ b/docs/html/design/design_toc.cs
@@ -9,6 +9,10 @@
</li>
<li class="nav-section">
+ <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/material/index.html">Material Design</a></div>
+ </li>
+
+ <li class="nav-section">
<div class="nav-section-header"><a href="<?cs var:toroot ?>design/devices.html">Devices</a></div>
<ul>
<li><a href="<?cs var:toroot ?>design/handhelds/index.html">Phones & Tablets</a></li>
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd
index 27e3169..47e8d26 100644
--- a/docs/html/design/index.jd
+++ b/docs/html/design/index.jd
@@ -28,20 +28,20 @@
<span itemprop="description">Welcome to <strong>Android Design</strong>, your place for
learning how to design exceptional Android apps.</span>
<br><br>
- Want to know what <strong>Android 4.4 KitKat</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br>
+ Want to know what <strong>Android 5.0</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br>
<a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
</div>
<a id="hero-image" href="/design/get-started/creative-vision.html">
- <img src="/design/media/index_landing_page.png">
+ <img src="{@docRoot}design/media/index_landing_page.png" width="760" height="600" alt=""
+ srcset="{@docRoot}design/media/index_landing_page_2x.png 2x"/>
</a>
<div style="background: hsl(8, 70%, 54%); margin: 0; padding: 20px 20px 10px 20px;color: #fff; position: absolute;top: 255px;width: 179px;">
-<h2 style="color: #fff;margin:0 0 10px; font-size:18px" class="norule">L Developer Preview</h2>
-<p> The next version of Android uses a design
-metaphor inspired by paper and ink that provides a reassuring sense of tactility. Before it arrives for users, you can get an early
-look at the new Material design.
+<h2 style="color: #fff;margin:0 0 10px; font-size:18px" class="norule">Material Design</h2>
+<p>Android 5.0 introduces a design
+metaphor inspired by paper and ink that provides a reassuring sense of tactility.
</p>
-<p><a class="white" href="{@docRoot}preview/material/index.html">Learn more about Material</a></p>
+<p><a class="white" href="{@docRoot}design/material/index.html">Learn more</a></p>
</div>
</div>
diff --git a/docs/html/preview/material/images/MaterialDark.png b/docs/html/design/material/images/MaterialDark.png
similarity index 100%
rename from docs/html/preview/material/images/MaterialDark.png
rename to docs/html/design/material/images/MaterialDark.png
Binary files differ
diff --git a/docs/html/preview/material/images/MaterialLight.png b/docs/html/design/material/images/MaterialLight.png
similarity index 100%
rename from docs/html/preview/material/images/MaterialLight.png
rename to docs/html/design/material/images/MaterialLight.png
Binary files differ
diff --git a/docs/html/preview/material/images/card_travel.png b/docs/html/design/material/images/card_travel.png
similarity index 100%
rename from docs/html/preview/material/images/card_travel.png
rename to docs/html/design/material/images/card_travel.png
Binary files differ
diff --git a/docs/html/preview/material/images/list_mail.png b/docs/html/design/material/images/list_mail.png
similarity index 100%
rename from docs/html/preview/material/images/list_mail.png
rename to docs/html/design/material/images/list_mail.png
Binary files differ
diff --git a/docs/html/design/material/index.jd b/docs/html/design/material/index.jd
new file mode 100644
index 0000000..61af487
--- /dev/null
+++ b/docs/html/design/material/index.jd
@@ -0,0 +1,150 @@
+page.title=Material Design
+page.tags=Material,design
+
+@jd:body
+
+<p itemprop="description">Material design is a comprehensive guide for visual, motion, and
+interaction design across platforms and devices. Android now includes support for
+material design apps. To use material design in your Android apps, follow the guidelines defined
+in the <a href="http://www.google.com/design/spec">material design specification</a> and use the
+new components and functionality available in Android 5.0 (API level 21) and above.</p>
+
+<p>Android provides the following elements for you to build material design apps:</p>
+
+<ul>
+ <li>A new theme</li>
+ <li>New widgets for complex views</li>
+ <li>New APIs for custom shadows and animations</li>
+</ul>
+
+<p>For more information about implementing material design on Android, see
+<a href="{@docRoot}training/material/index.html">Creating Apps with Material Design</a>.</p>
+
+
+<h3>Material Theme</h3>
+
+<p>The material theme provides a new style for your app, system widgets that let you set
+their color palette, and default animations for touch feedback and activity transitions.</p>
+
+<!-- two columns -->
+<div style="width:700px;margin-top:25px;margin-bottom:20px">
+<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
+ <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238"/>
+ <div style="width:140px;margin:0 auto">
+ <p style="margin-top:8px">Dark material theme</p>
+ </div>
+</div>
+<div style="float:left;width:250px;margin-right:0px;">
+ <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238"/>
+ <div style="width:140px;margin:0 auto">
+ <p style="margin-top:8px">Light material theme</p>
+ </div>
+</div>
+<br style="clear:left"/>
+</div>
+
+<p>For more information, see <a href="{@docRoot}training/material/theme.html">Using the Material
+Theme</a>.</p>
+
+
+<h3>Lists and Cards</h3>
+
+<p>Android provides two new widgets for displaying cards and lists with material design styles
+and animations:</p>
+
+<!-- two columns -->
+<div style="width:700px;margin-top:25px;margin-bottom:20px">
+<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
+ <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426"/>
+ <p>The new <code>RecyclerView</code> widget is a more pluggable version of <code>ListView</code>
+ that supports different layout types and provides performance improvements.</p>
+</div>
+<div style="float:left;width:250px;margin-right:0px;">
+ <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426"/>
+ <p>The new <code>CardView</code> widget lets you display important pieces of information inside
+ cards that have a consistent look and feel.</p>
+</div>
+<br style="clear:left"/>
+</div>
+
+<p>For more information, see <a href="{@docRoot}training/material/lists-cards.html">Creating Lists
+and Cards</a>.</p>
+
+
+<h3>View Shadows</h3>
+
+<p>In addition to the X and Y properties, views in Android now have a Z
+property. This new property represents the elevation of a view, which determines:</p>
+
+<ul>
+<li>The size of the shadow: views with higher Z values cast bigger shadows.</li>
+<li>The drawing order: views with higher Z values appear on top of other views.</li>
+</ul>
+
+<div style="width:290px;margin-left:35px;float:right">
+ <div class="framed-nexus5-port-span-5">
+ <video class="play-on-hover" autoplay>
+ <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
+ <source src="{@docRoot}design/videos/ContactsAnim.webm"/>
+ <source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
+ </video>
+ </div>
+ <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
+ <em>To replay the movie, click on the device screen</em>
+ </div>
+</div>
+
+<p>For more information, see <a href="{@docRoot}training/material/shadows-clipping.html">Defining
+Shadows and Clipping Views</a>.</p>
+
+
+<h3>Animations</h3>
+
+<p>The new animation APIs let you create custom animations for touch feedback in UI controls,
+changes in view state, and activity transitions.</p>
+
+<p>These APIs let you:</p>
+
+<ul>
+<li style="margin-bottom:15px">
+Respond to touch events in your views with <strong>touch feedback</strong> animations.
+</li>
+<li style="margin-bottom:15px">
+Hide and show views with <strong>circular reveal</strong> animations.
+</li>
+<li style="margin-bottom:15px">
+Switch between activities with custom <strong>activity transition</strong> animations.
+</li>
+<li style="margin-bottom:15px">
+Create more natural animations with <strong>curved motion</strong>.
+</li>
+<li style="margin-bottom:15px">
+Animate changes in one or more view properties with <strong>view state change</strong> animations.
+</li>
+<li style="margin-bottom:15px">
+Show animations in <strong>state list drawables</strong> between view state changes.
+</li>
+</ul>
+
+<p>Touch feedback animations are built into several standard views, such as buttons. The new APIs
+let you customize these animations and add them to your custom views.</p>
+
+<p>For more information, see <a href="{@docRoot}training/material/animations.html">Defining Custom
+Animations</a>.</p>
+
+
+<h3>Drawables</h3>
+
+<p>These new capabilities for drawables help you implement material design apps:</p>
+
+<ul>
+<li><strong>Vector drawables</strong> are scalable without losing definition and are perfect
+for single-color in-app icons.</li>
+<li><strong>Drawable tinting</strong> lets you define bitmaps as an alpha mask and tint them with
+a color at runtime.</li>
+<li><strong>Color extraction</strong> lets you automatically extract prominent colors from a
+bitmap image.</li>
+</ul>
+
+<p>For more information, see <a href="{@docRoot}training/material/drawables.html">Working with
+Drawables</a>.</p>
diff --git a/docs/html/preview/material/videos/ContactsAnim.mp4 b/docs/html/design/material/videos/ContactsAnim.mp4
similarity index 100%
rename from docs/html/preview/material/videos/ContactsAnim.mp4
rename to docs/html/design/material/videos/ContactsAnim.mp4
Binary files differ
diff --git a/docs/html/preview/material/videos/ContactsAnim.ogv b/docs/html/design/material/videos/ContactsAnim.ogv
similarity index 100%
rename from docs/html/preview/material/videos/ContactsAnim.ogv
rename to docs/html/design/material/videos/ContactsAnim.ogv
Binary files differ
diff --git a/docs/html/preview/material/videos/ContactsAnim.webm b/docs/html/design/material/videos/ContactsAnim.webm
similarity index 100%
rename from docs/html/preview/material/videos/ContactsAnim.webm
rename to docs/html/design/material/videos/ContactsAnim.webm
Binary files differ
diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png
index 078eb4d..36d3828f 100644
--- a/docs/html/design/media/index_landing_page.png
+++ b/docs/html/design/media/index_landing_page.png
Binary files differ
diff --git a/docs/html/design/media/index_landing_page_2x.png b/docs/html/design/media/index_landing_page_2x.png
new file mode 100644
index 0000000..1cd97ab
--- /dev/null
+++ b/docs/html/design/media/index_landing_page_2x.png
Binary files differ
diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd
index d672e46..1523cea 100644
--- a/docs/html/design/patterns/new.jd
+++ b/docs/html/design/patterns/new.jd
@@ -3,7 +3,24 @@
@jd:body
-<p>A quick look at the new patterns and styles you can use to build beautiful Android apps…
+<p>A quick look at the new patterns and styles you can use to build beautiful Android apps…
+
+
+<h2 id="Android5">Android 5.0 Lollipop</h2>
+
+<h3>Material design</h3>
+
+<p><a href="{@docRoot}design/material/index.html">Material design</a> is a comprehensive guide for
+visual, motion, and interaction design across platforms and devices. Android 5.0 provides a new
+theme, new widgets for complex views, and new APIs for shadows and animations that help you
+implement material design patterns in your apps.</p>
+
+<h3>Notifications</h3>
+
+<p><a href="{@docRoot}design/patterns/notifications.html">Notifications</a> receive important
+updates in Android 5.0, with material design visual changes, notification availability in the
+lockscreen, priority notifications, and cloud-synced notifications.</p>
+
<h2 id="kitkat">Android 4.4 KitKat</h2>
@@ -30,7 +47,7 @@
see it in every screen of your app.
</p>
<p>
- <a href="{@docRoot}design/style/branding.html">Your Branding</a> highlights
+ <a href="{@docRoot}design/style/branding.html">Your Branding</a> highlights
these and other pointers on how to incorporate elements of your brand into your
app's visual language — highly encouraged!
</p>
@@ -60,7 +77,7 @@
<img src="{@docRoot}design/media/touch_feedback_reaction_response.png" style="padding-top:1em;">
<h3>
- Full screen
+ Full screen
</h3>
<p>
@@ -73,7 +90,7 @@
<img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
<h3>
- Gestures
+ Gestures
</h3>
<div class="layout-content-row">
<div class="layout-content-col span-6">
diff --git a/docs/html/preview/material/animations.jd b/docs/html/preview/material/animations.jd
deleted file mode 100644
index 353f0f2..0000000
--- a/docs/html/preview/material/animations.jd
+++ /dev/null
@@ -1,441 +0,0 @@
-page.title=Animations
-
-@jd:body
-
-<div id="qv-wrapper">
-<div id="qv">
-<h2>In this document</h2>
-<ol>
- <li><a href="#touch">Touch Feedback</a></li>
- <li><a href="#reveal">Reveal Effect</a></li>
- <li><a href="#transitions">Activity Transitions</a></li>
- <li><a href="#curvedmotion">Curved Motion</a></li>
- <li><a href="#viewstate">Animating View State Changes</a></li>
- <li><a href="#drawabletint">Drawable Tinting</a></li>
- <li><a href="#colorextract">Extracting Colors from an Image</a></li>
-</ol>
-</div>
-</div>
-
-<p>Animations in material design give users feedback on their actions and provide visual
-continuity as users interact with your app. The material theme provides some default animations
-for buttons and activity transitions, and the Android L Developer Preview provides additional
-APIs that let you customize these animations and create new ones:</p>
-
-<ul>
-<li>Touch feedback</li>
-<li>Reveal effect</li>
-<li>Activity transitions</li>
-<li>Curved motion</li>
-<li>View state changes</li>
-</ul>
-
-
-<h2 id="touch">Touch Feedback</h2>
-
-<p>The default touch feedback animations for buttons use the new
-<code>RippleDrawable</code> class, which transitions between different states with a ripple
-effect.</p>
-
-<p>In most cases, this functionality should be applied in your view XML by specifying the
-background as <code>?android:attr/selectableItemBackground</code> for a bounded ripple or
-<code>?android:attr/selectableItemBackgroundBorderless</code> for a ripple that extends beyond
-the view bounds. You can also create a <code>RippleDrawable</code> and set
-it as the background of your view. Alternatively, you can define a <code>RippleDrawable</code>
-as an XML resource using the <code>ripple</code> element. The
-Android L Developer Preview animates the selection color with a ripple effect.</p>
-
-<p>You can assign a color to <code>RippleDrawable</code> objects. To change the default touch
-feedback color, use the theme's <code>android:colorControlHighlight</code> attribute.</p>
-
-
-<h2 id="reveal">Reveal Effect</h2>
-
-<p>The <code>ViewAnimationUtils.createCircularReveal</code> method enables you to animate a
-clipping circle to reveal or hide a view.</p>
-
-<p>To reveal a previously invisible view using this effect:</p>
-
-<pre>
-// previously invisible view
-View myView = findViewById(R.id.my_view);
-
-// get the center for the clipping circle
-int cx = (myView.getLeft() + myView.getRight()) / 2;
-int cy = (myView.getTop() + myView.getBottom()) / 2;
-
-// get the final radius for the clipping circle
-int finalRadius = myView.getWidth();
-
-// create and start the animator for this view
-// (the start radius is zero)
-ValueAnimator anim =
- ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
-anim.start();
-</pre>
-
-<p>To hide a previously visible view using this effect:</p>
-
-<pre>
-// previously visible view
-final View myView = findViewById(R.id.my_view);
-
-// get the center for the clipping circle
-int cx = (myView.getLeft() + myView.getRight()) / 2;
-int cy = (myView.getTop() + myView.getBottom()) / 2;
-
-// get the initial radius for the clipping circle
-int initialRadius = myView.getWidth();
-
-// create the animation (the final radius is zero)
-ValueAnimator anim =
- ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
-
-// make the view invisible when the animation is done
-anim.addListener(new AnimatorListenerAdapter() {
- @Override
- public void onAnimationEnd(Animator animation) {
- super.onAnimationEnd(animation);
- myView.setVisibility(View.INVISIBLE);
- }
-});
-
-// start the animation
-anim.start();
-</pre>
-
-
-<h2 id="transitions">Activity Transitions</h2>
-
-<p>You can specify custom animations for enter and exit transitions and for
-transitions of shared elements between activities.</p>
-
-<ul>
-<li>An <strong>enter</strong> transition determines how views in an activity enter the scene.
-For example, in the <em>explode</em> enter transition, the views enter the scene from the outside
-and fly in towards the center of the screen.</li>
-
-<li>An <strong>exit</strong> transition determines how views in an activity exit the scene. For
- example, in the <em>explode</em> exit transition, the views exit the scene away from the
-center.</li>
-
-<li>A <strong>shared elements</strong> transition determines how views that are shared between
-two activities transition between these activities. For example, if two activities have the same
-image in different positions and sizes, the <em>moveImage</em> shared element transition
-translates and scales the image smoothly between these activities.</li>
-</ul>
-
-<p>The Android L Developer Preview supports these enter and exit transitions:</p>
-
-<ul>
-<li><em>explode</em> - Moves views in or out from the center of the scene.</li>
-<li><em>slide</em> - Moves views in or out from one of the edges of the scene.</li>
-<li><em>fade</em> - Moves views in or out of the scene.</li>
-</ul>
-
-<p>Any transition that extends the <code>android.transition.Visibility</code> class is supported
-as an enter or exit transition. For more information, see the API reference for the
-<code>android.transition.Transition</code> class.</p>
-
-<p>The Android L Developer Preview also supports these shared elements transitions:</p>
-
-<ul>
-<li><em>changeBounds</em> - Animates the changes in layout bounds of target views.</li>
-<li><em>changeClipBounds</em> - Animates the changes in clip bounds of target views.</li>
-<li><em>changeTransform</em> - Animates the changes in scale and rotation of target views.</li>
-<li><em>moveImage</em> - Animates changes in size and scale type for an image view.</li>
-</ul>
-
-<p>When you enable activity transitions in your app, the default cross-fading transition is
-activated between the entering and exiting activities.</p>
-
-<img src="/preview/material/images/SceneTransition.png" alt=""
- id="figure1" style="width:600px;margin-top:20px"/>
-<p class="img-caption">
- <strong>Figure 1</strong> - A scene transition with one shared element.
-</p>
-
-<h3>Specify custom transitions</h3>
-
-<p>First, enable window content transitions with the <code>android:windowContentTransitions</code>
-attribute when you define a style that inherits from the material theme. You can also specify
-enter, exit, and shared element transitions in your style definition:</p>
-
-<pre>
-<style name="BaseAppTheme" parent="android:Theme.Material">
- <!-- enable window content transitions -->
- <item name="android:windowContentTransitions">true</item>
-
- <!-- specify enter and exit transitions -->
- <item name="android:windowEnterTransition">@transition/explode</item>
- <item name="android:windowExitTransition">@transition/explode</item>
-
- <!-- specify shared element transitions -->
- <item name="android:windowSharedElementEnterTransition">
- @transition/move_image</item>
- <item name="android:windowSharedElementExitTransition">
- @transition/move_image</item>
-</style>
-</pre>
-
-<p>The <code>move_image</code> transition in this example is defined as follows:</p>
-
-<pre>
-<!-- res/transition/move_image.xml -->
-<!-- (see also Shared Transitions below) -->
-<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
- <moveImage/>
-</transitionSet>
-</pre>
-
-<p>The <code>moveImage</code> element corresponds to the <code>android.transition.MoveImage</code>
-class. For more information, see the API reference for <code>android.transition.Transition</code>.
-</p>
-
-<p>To enable window content transitions in your code instead, call the
-<code>Window.requestFeature</code> method:</p>
-
-<pre>
-// inside your activity (if you did not enable transitions in your theme)
-getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
-
-// set an exit transition
-getWindow().setExitTransition(new Explode());
-</pre>
-
-<p>To specify transitions in your code, call these methods with a <code>Transition</code>
-object:</p>
-
-<ul>
- <li><code>Window.setEnterTransition</code></li>
- <li><code>Window.setExitTransition</code></li>
- <li><code>Window.setSharedElementEnterTransition</code></li>
- <li><code>Window.setSharedElementExitTransition</code></li>
-</ul>
-
-<p>The <code>setExitTransition</code> and <code>setSharedElementExitTransition</code> methods
-define the exit transition for the calling activity. The <code>setEnterTransition</code> and
-<code>setSharedElementEnterTransition</code> methods define the enter transition for the called
-activity.</p>
-
-<p>To get the full effect of a transition, you must enable window content transitions on both the
-calling and called activities. Otherwise, the calling activity will start the exit transition,
-but then you'll see a window transition (like scale or fade).</p>
-
-<p>To start an enter transition as soon as possible, use the
-<code>Window.setAllowEnterTransitionOverlap</code> method on the called activity. This lets you
-have more dramatic enter transitions. The same applies for the calling activity and exit
-transitions with the <code>Window.setAllowExitTransitionOverlap</code> method.</p>
-
-<h3>Start an activity using transitions</h3>
-
-<p>If you enable transitions and set an exit transition for an activity, the transition is activated
-when you launch another activity with the <code>startActivity</code> method. If you have set an
-enter transition for the second activity, the transition is also activated when the activity
-starts.</p>
-
-<h3>Shared elements transitions</h3>
-
-<p>To make a screen transition animation between two activities that have a shared element:</p>
-
-<ol>
-<li>Enable window content transitions in your style.</li>
-<li>Specify a shared elements transition in your style.</li>
-<li>Define your transition as an XML resource.</li>
-<li>Assign a common name to the shared elements in both layouts with the
- <code>android:viewName</code> attribute.</li>
-<li>Use the <code>ActivityOptions.makeSceneTransitionAnimation</code> method.</li>
-</ol>
-
-<pre>
-// get the element that receives the click event
-final View imgContainerView = findViewById(R.id.img_container);
-
-// get the common element for the transition in this activity
-final View androidRobotView = findViewById(R.id.image_small);
-
-// define a click listener
-imgContainerView.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View view) {
- Intent intent = new Intent(this, Activity2.class);
- // create the transition animation - the images in the layouts
- // of both activities are defined with android:viewName="robot"
- ActivityOptions options = ActivityOptions
- .makeSceneTransitionAnimation(this, androidRobotView, "robot");
- // start the new activity
- startActivity(intent, options.toBundle());
- }
-});
-</pre>
-
-<p>For shared dynamic views that you generate in your code, use the <code>View.setViewName</code>
-method to specify a common element name in both activities.</p>
-
-<p>To reverse the scene transition animation when you finish the second activity, call the
-<code>Activity.finishAfterTransition</code> method instead of <code>Activity.finish</code>.</p>
-
-<h3>Multiple shared elements</h3>
-
-<p>To make a scene transition animation between two activities that have more than one shared
-element, define the shared elements in both layouts with the <code>android:viewName</code>
-attribute (or use the <code>View.setViewName</code> in both activities), and create an
-<code>ActivityOptions</code> object as follows:</p>
-
-<pre>
-ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
- Pair.create(view1, "agreedName1"),
- Pair.create(view2, "agreedName2"));
-</pre>
-
-
-<h2 id="curvedmotion">Curved Motion</h2>
-
-<p>Animations in material design rely on curves for time interpolation and spatial movement
-patterns. The Android L Developer Preview provides new APIs that enable you to define custom
-timing curves and curved motion patterns for animations.</p>
-
-<p>The <code>PathInterpolator</code> class is a new interpolator based on a Bézier curve or a
-<code>Path</code> object. This interpolator specifies a motion curve in a 1x1 square, with anchor
-points at (0,0) and (1,1) and control points as specified using the constructor arguments. You can
-also define a <code>PathInterpolator</code> as an XML resource:</p>
-
-<pre>
-<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
- android:controlX1="0.4"
- android:controlY1="0"
- android:controlX2="1"
- android:controlY2="1"/>
-</pre>
-
-<p>The Android L Developer Preview provides XML resources for the three basic curves in the
-material design specification:</p>
-
-<ul>
- <li><code>@interpolator/fast_out_linear_in.xml</code></li>
- <li><code>@interpolator/fast_out_slow_in.xml</code></li>
- <li><code>@interpolator/linear_out_slow_in.xml</code></li>
-</ul>
-
-<p>You can pass a <code>PathInterpolator</code> object to the
-<code>Animator.setInterpolation</code> method.</p>
-
-<p>The <code>ObjectAnimator</code> class has new constructors that enable you to animate
-coordinates along a path using two or more properties at once. For example, the following animator
-uses a <code>Path</code> object to animate the X and Y properties of a view:</p>
-
-<pre>
-ObjectAnimator mAnimator;
-mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
-...
-mAnimator.start();
-</pre>
-
-
-<h2 id="viewstate">Animating View State Changes</h2>
-
-<p>The new <code>StateListAnimator</code> class lets you define animators that run when the state
-of a view changes. The following example shows how to define an <code>StateListAnimator</code> as
-an XML resource:</p>
-
-<pre>
-<!-- animate the translationZ property of a view when pressed -->
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:state_pressed="true">
- <set>
- <objectAnimator android:propertyName="translationZ"
- android:duration="100"
- android:valueTo="2"
- android:valueType="floatType"/>
- <!-- you could have other objectAnimator elements
- here for "x" and "y", or other properties -->
- </set>
- </item>
- <item android:state_enabled="true"
- android:state_pressed="false"
- android:state_focused="true">
- <set>
- <objectAnimator android:propertyName="translationZ"
- android:duration="100"
- android:valueTo="2"
- android:valueType="floatType"/>
- </set>
- </item>
-</selector>
-</pre>
-
-<p class="note"><strong>Note:</strong> There is a known issue in the L Developer Preview release
-that requires valueFrom values to be provided in StateListAnimator animations to get the correct
-behavior.</p>
-
-<p>The new <code>AnimatedStateListDrawable</code> class lets you create drawables that show
-animations between state changes of the associated view. Some of the system widgets in the
-Android L Developer Preview use these animations by default. The following example shows how
-to define an <code>AnimatedStateListDrawable</code> as an XML resource:</p>
-
-<pre>
-<!-- res/drawable/myanimstatedrawable.xml -->
-<animated-selector
- xmlns:android="http://schemas.android.com/apk/res/android">
-
- <!-- provide a different drawable for each state-->
- <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
- android:state_pressed="true"/>
- <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
- android:state_focused="true"/>
- <item android:id="@id/default"
- android:drawable="@drawable/drawableD"/>
-
- <!-- specify a transition -->
- <transition android:fromId="@+id/default" android:toId="@+id/pressed">
- <animation-list>
- <item android:duration="15" android:drawable="@drawable/dt1"/>
- <item android:duration="15" android:drawable="@drawable/dt2"/>
- ...
- </animation-list>
- </transition>
- ...
-</animated-selector>
-</pre>
-
-
-<h2 id="drawabletint">Drawable Tinting</h2>
-
-<p>The Android L Developer Preview enables you to define bitmaps or nine-patches as alpha masks and
-to tint them using a color resource or a theme attribute that resolves to a color resource (for
-example, <code>?android:attr/colorPrimary</code>). You can create these assets only once and color them
-automatically to match your theme.</p>
-
-<p>To apply a tint to a bitmap, use the <code>setTint</code> method or the <code>android:tint</code>
-attribute for <code>BitmapDrawable</code> and <code>NinePatchDrawable</code>.</p>
-
-<p>The <code>setTint</code> method also lets you set the Porter-Duff mode used to blend the
-tint color for <code>NinePatchDrawable</code> and <code>BitmapDrawable</code> objects in your code.
-To set the tint mode in your layouts, use the <code>android:tintMode</code> attribute.</p>
-
-
-<h2 id="colorextract">Extracting Prominent Colors from an Image</h2>
-
-<p>The Android L Developer Preview Support Library includes the <code>Palette</code> class,
-which lets you extract prominent colors from an image. This class extracts the following
-prominent colors:</p>
-
-<ul>
-<li>Vibrant</li>
-<li>Vibrant dark</li>
-<li>Vibrant light</li>
-<li>Muted</li>
-<li>Muted dark</li>
-<li>Muted light</li>
-</ul>
-
-<p>To extract these colors, pass a <code>Bitmap</code> object to the
-<code>Palette.generate</code> static method in the background thread where you load your images.
-If you can't use that thread, call the <code>Palette.generateAsync</code> method instead and
-provide a listener.</p>
-
-<p>To retrieve the prominent colors from the image, use the getter methods in the
-<code>Palette</code> class, such as <code>Palette.getVibrantColor</code>.</p>
-
-<p>For more information, see the API reference for the
-<code>android.support.v7.graphics.Palette</code> class.</p>
\ No newline at end of file
diff --git a/docs/html/preview/material/compatibility.jd b/docs/html/preview/material/compatibility.jd
deleted file mode 100644
index b4d26a7..0000000
--- a/docs/html/preview/material/compatibility.jd
+++ /dev/null
@@ -1,82 +0,0 @@
-page.title=Compatibility
-
-@jd:body
-
-<div id="qv-wrapper">
-<div id="qv">
-<h2>In this document</h2>
-<ol>
- <li><a href="#materialtheme">Material Theme</a></li>
- <li><a href="#layouts">Layouts</a></li>
- <li><a href="#widgets">UI Widgets</a></li>
- <li><a href="#animation">Animation APIs</a></li>
-</ol>
-</div>
-</div>
-
-<p>The new material design features (like the material theme and activity transitions) are only
-available in the Android L Developer Preview. However, you can design your apps to make use of
-these features when running on devices with the Android L Developer Preview and still be
-compatible with previous releases of Android.</p>
-
-
-<h2 id="materialtheme">Material Theme</h2>
-
-<p>The material theme is only available in the Android L Developer Preview. To configure your
-app to use the material theme on devices running the Android L Developer Preview and an older
-theme on devices running earlier versions of Android:</p>
-
-<ol>
-<li>Define a theme that inherits from an older theme (like Holo) in
-<code>res/values/styles.xml</code>.</li>
-<li>Define a theme with the same name that inherits from the material theme in
-<code>res/values-v21/styles.xml</code>.</li>
-<li>Set this theme as your app's theme in the manifest file.</li>
-</ol>
-
-<p class="note"><strong>Note:</strong> If you do not provide an alternative theme in this manner,
-your app will not run on earlier versions of Android.</p>
-
-
-<h2 id="layouts">Layouts</h2>
-
-<p>If the layouts that you design according to the material design guidelines do not use any
-of the new XML attributes from the Android L Developer Preview, they will work on previous
-versions of Android. Otherwise, you can provide alternative layouts. You can also provide
-alternative layouts to customize how your app looks on earlier versions of Android.</p>
-
-<p>Create your layout files for the Android L Developer Preview inside <code>res/layout-v21/</code>
-and your alternative layout files for earlier versions of Android inside <code>res/layout/</code>.
-Alternative layouts have the same file name.</p>
-
-<p>To avoid duplication of code, define your styles inside <code>res/values/</code> and modify the
-styles in <code>res/values-v21/</code> for the new APIs.</p>
-
-
-<h2 id="widgets">UI Widgets</h2>
-
-<p>The <code>RecyclerView</code> and <code>CardView</code> widgets are included in the Android L
-Developer Preview Support Library, so they are available in earlier versions of Android with
-these limitations:</p>
-
-<ul>
-<li><code>CardView</code> falls back to a programmatic shadow implementation using additional padding.</li>
-<li><code>CardView</code> does not clip its children views that intersect with rounded corners.</li>
-</ul>
-
-<p>These limitations do not apply to the Android L Developer Preview.</p>
-
-
-<h2 id="animation">Animation APIs</h2>
-
-<p>The following new APIs are only available in the Android L Developer Preview:</p>
-
-<ul>
-<li>Activity transitions</li>
-<li>Touch feedback</li>
-<li>Reveal animations</li>
-<li>Path-based animations</li>
-</ul>
-
-<p>To preserve compatibility with earlier versions of Android, check the system version at
-runtime before you invoke these APIs.</p>
\ No newline at end of file
diff --git a/docs/html/preview/material/get-started.jd b/docs/html/preview/material/get-started.jd
deleted file mode 100644
index 7d0625e..0000000
--- a/docs/html/preview/material/get-started.jd
+++ /dev/null
@@ -1,147 +0,0 @@
-page.title=Get Started
-
-@jd:body
-
-<div id="qv-wrapper">
-<div id="qv">
-<h2>In this document</h2>
-<ol>
- <li><a href="#applytheme">Apply the Material Theme</a></li>
- <li><a href="#layouts">Design Your Layouts</a></li>
- <li><a href="#depth">Specify Elevation in Your Views</a></li>
- <li><a href="#widgets">Use the New UI Widgets</a></li>
- <li><a href="#animations">Customize Your Animations</a></li>
-</ol>
-</div>
-</div>
-
-<p>To create apps with material design:</p>
-
-<ol>
- <li style="margin-bottom:10px">
- Take a look at the <a href="http://www.google.com/design/spec">material design
- specification</a>.</li>
- <li style="margin-bottom:10px">
- Apply the material <strong>theme</strong> to your app.</li>
- <li style="margin-bottom:10px">
- Define additional <strong>styles</strong> to customize the material theme.</li>
- <li style="margin-bottom:10px">
- Create your <strong>layouts</strong> following material design guidelines.</li>
- <li style="margin-bottom:10px">
- Specify the <strong>elevation</strong> of your views to cast appropriate shadows.</li>
- <li style="margin-bottom:10px">
- Use the new <strong>widgets</strong> for complex views, such as lists and cards.</li>
- <li style="margin-bottom:10px">
- Use the new APIs to customize the <strong>animations</strong> in your app.</li>
-</ol>
-
-<h3>Update Your App for the Android L Developer Preview</h3>
-
-<p>To update an existing app for the Android L Developer Preview, design new layouts following
-material design guidelines and consider how you can improve the user experience for your app by
-incorporating depth, touch feedback and animations in your UI.</p>
-
-<h3>Create New Apps for the Android L Developer Preview</h3>
-
-<p>If you are creating a new app for the Android L Developer Preview, the <a
-href="http://www.google.com/design/spec">material design guidelines</a> provide you with a
-cohesive design framework for your app. Follow these guidelines and
-use the new functionality in the Android framework to design and develop your app.</p>
-
-
-<h2 id="applytheme">Apply the Material Theme</h2>
-
-<p>To apply the material theme in your app, specify a style that inherits from
-<code>android:Theme.Material</code>:</p>
-
-<pre>
-<!-- res/values/styles.xml -->
-<resources>
- <!-- your app's theme inherits from the Material theme -->
- <style name="AppTheme" parent="android:Theme.Material">
- <!-- theme customizations -->
- </style>
-</resources>
-</pre>
-
-<p>The material theme provides new system widgets that let you set their color palette and default
-animations for touch feedback and activity transitions. For more details, see
-<a href="{@docRoot}preview/material/theme.html">Material Theme</a>.</p>
-
-
-<h2 id="layouts">Design Your Layouts</h2>
-
-<p>In addition to applying and customizing the material theme, your layouts should conform to
-the <a href="http://www.google.com/design/spec">material design guidelines</a>. When you design
-your layouts, pay special attention to the following:</p>
-
-<ul>
-<li>Baseline grids</li>
-<li>Keylines</li>
-<li>Spacing</li>
-<li>Touch target size</li>
-<li>Layout structure</li>
-</ul>
-
-
-<h2 id="depth">Specify Elevation in Your Views</h2>
-
-<p>Views can cast shadows, and the elevation value of a view
-determines the size of its shadow and its drawing order. To set the elevation of a view, use the
-<code>android:elevation</code> attribute in your layouts:</p>
-
-<pre>
-<TextView
- android:id="@+id/my_textview"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/next"
- android:background="@color/white"
- <strong>android:elevation</strong>="5dp" />
-</pre>
-
-<p>The new <code>translationZ</code> property lets you create animations that reflect temporary
-changes in the elevation of a view. For example, this is useful to respond to touch gestures.</p>
-
-<p>For more details, see <a href="{@docRoot}preview/material/views-shadows.html">Views and
-Shadows</a>.</p>
-
-
-<h2 id="widgets">Use the New UI Widgets</h2>
-
-<p><code>RecyclerView</code> is a more advanced version of <code>ListView</code> that provides
-performance improvements and is easier to use. <code>CardView</code> lets you show pieces of
-information inside cards with a consistent look across apps. To include a <code>CardView</code>
-in your layout:</p>
-
-<pre>
-<android.support.v7.widget.CardView
- android:id="@+id/card_view"
- android:layout_width="200dp"
- android:layout_height="200dp"
- card_view:cardCornerRadius="3dp">
- ...
-</android.support.v7.widget.CardView>
-</pre>
-
-<p>For more information, see <a href="{@docRoot}preview/material/ui-widgets.html">UI Widgets</a>.</p>
-
-
-<h2 id="animations">Customize Your Animations</h2>
-
-<p>The Android L Developer Preview includes new APIs to create custom animations in your app.
-For example, you can enable activity transitions and define an exit transition inside an
-activity:</p>
-
-<pre>
-// inside your activity
-getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
-
-// set an exit transition
-getWindow().setExitTransition(new Explode());
-</pre>
-
-<p>When you start another activity from this activity, the exit transition is activated.</p>
-
-<p>To learn about all the features in the new APIs, see <a
-href="{@docRoot}preview/material/animations.html">Animations</a>.</p>
\ No newline at end of file
diff --git a/docs/html/preview/material/images/SceneTransition.png b/docs/html/preview/material/images/SceneTransition.png
deleted file mode 100644
index ecaf472..0000000
--- a/docs/html/preview/material/images/SceneTransition.png
+++ /dev/null
Binary files differ
diff --git a/docs/html/preview/material/index.jd b/docs/html/preview/material/index.jd
deleted file mode 100644
index 9628e3a..0000000
--- a/docs/html/preview/material/index.jd
+++ /dev/null
@@ -1,130 +0,0 @@
-page.title=Material Design
-page.type=design
-page.image=images/material.png
-page.metaDescription=Learn how to apply material design to your apps.
-
-@jd:body
-
-<p itemprop="description">The Android L Developer Preview includes support for material design
-apps. Material design is a comprehensive guide for visual, motion, and interaction design across
-platforms and devices. To use material design in your Android apps, follow the guidelines defined
-in the <a href="http://www.google.com/design/spec">material design specification</a> and use the
-new components and functionality available in the Android L Developer Preview.</p>
-
-<p>The Android L Developer Preview provides the following elements for you to build material
-design apps:</p>
-
-<ul>
- <li>A new theme</li>
- <li>New widgets for complex views</li>
- <li>New APIs for custom shadows and animations</li>
-</ul>
-
-
-<h3>Material Theme</h3>
-
-<p>The material theme provides a new style for your app, system widgets that let you set
-their color palette, and default animations for touch feedback and activity transitions.</p>
-
-<!-- two columns -->
-<div style="width:700px;margin-top:25px;margin-bottom:20px">
-<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
- <img src="{@docRoot}preview/material/images/MaterialDark.png" width="500" height="238"/>
- <div style="width:140px;margin:0 auto">
- <p style="margin-top:8px">Dark Material theme</p>
- </div>
-</div>
-<div style="float:left;width:250px;margin-right:0px;">
- <img src="{@docRoot}preview/material/images/MaterialLight.png" width="500" height="238"/>
- <div style="width:140px;margin:0 auto">
- <p style="margin-top:8px">Light Material theme</p>
- </div>
-</div>
-<br style="clear:left"/>
-</div>
-
-
-<h3>New Widgets</h3>
-
-<p>The Android L Developer Preview includes two new widgets for displaying complex views:</p>
-
-<!-- two columns -->
-<div style="width:700px;margin-top:25px;margin-bottom:20px">
-<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
- <img src="{@docRoot}preview/material/images/list_mail.png" width="500" height="426"/>
- <p>The new <code>RecyclerView</code> widget is a more advanced version of <code>ListView</code>
- that provides performance improvements for dynamic views and is easier to use.</p>
-</div>
-<div style="float:left;width:250px;margin-right:0px;">
- <img src="{@docRoot}preview/material/images/card_travel.png" width="500" height="426"/>
- <p>The new <code>CardView</code> widget lets you display important pieces of information inside
- cards that have a consistent look and feel.</p>
-</div>
-<br style="clear:left"/>
-</div>
-
-
-<h3>View Shadows</h3>
-
-<p>In addition to the X and Y properties, views in the Android L Developer Preview have a Z
-property. This new property represents the elevation of a view, which determines:</p>
-
-<ul>
-<li>The size of the shadow - Views with higher Z values cast bigger shadows.</li>
-<li>The drawing order - Views with higher Z values appear on top of other views.</li>
-</ul>
-
-<div style="width:290px;margin-left:35px;float:right">
- <div class="framed-nexus5-port-span-5">
- <video class="play-on-hover" autoplay>
- <source src="/preview/material/videos/ContactsAnim.mp4"/>
- <source src="/preview/material/videos/ContactsAnim.webm"/>
- <source src="/preview/material/videos/ContactsAnim.ogv"/>
- </video>
- </div>
- <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
- <em>Click on the device screen to replay the movie</em>
- </div>
-</div>
-
-<h3>Animations</h3>
-
-<p>The Android L Developer Preview provides new APIs that let you create custom animations for
-touch feedback in UI controls, view state changes, and activity transitions.</p>
-
-<p>The new animation APIs let you:</p>
-
-<ul>
-<li style="margin-bottom:15px">
-Respond to touch events in your views with <strong>touch feedback</strong> animations.
-</li>
-<li style="margin-bottom:15px">
-Hide and show views with <strong>reveal effect</strong> animations.
-</li>
-<li style="margin-bottom:15px">
-Switch between activities with custom <strong>activity transition</strong> animations.
-</li>
-<li style="margin-bottom:15px">
-Create more natural animations with <strong>curved motion</strong>.
-</li>
-<li style="margin-bottom:15px">
-Animate changes in one or more view properties with <strong>view state change</strong> animations.
-</li>
-<li style="margin-bottom:15px">
-Show animations in <strong>state list drawables</strong> between view state changes.
-</li>
-</ul>
-
-<p>Touch feedback animations are built into several standard views, such as buttons. The new APIs
-let you customize these animations and add animations to your custom views.</p>
-
-
-<h3>New Capabilities for Drawables</h3>
-
-<p>The Android L Developer Preview supports <strong>drawable tinting</strong>: you can define
-bitmaps as an alpha mask and tint them using a color resource. You create these assets only
-once and color each instance to match your theme. Drawables also now support specifying most XML
-properties as <strong>theme attributes</strong>.</p>
-
-<p>The Android L Developer Preview Support Library includes a <strong>color extraction</strong>
-library that lets you automatically extract prominent colors from a bitmap image.</p>
\ No newline at end of file
diff --git a/docs/html/preview/material/theme.jd b/docs/html/preview/material/theme.jd
deleted file mode 100644
index dceeb47..0000000
--- a/docs/html/preview/material/theme.jd
+++ /dev/null
@@ -1,102 +0,0 @@
-page.title=Material Theme
-
-@jd:body
-
-<div id="qv-wrapper">
-<div id="qv">
-<h2>In this document</h2>
-<ol>
- <li><a href="#colorpalette">Customize the Color Palette</a></li>
- <li><a href="#statusbar">Customize the Status Bar</a></li>
- <li><a href="#inheritance">Theme Individual Views</a></li>
-</ol>
-</div>
-</div>
-
-<p>The new material theme provides:</p>
-
-<ul>
- <li>System widgets that let you set their color palette</li>
- <li>Touch feedback animations for the system widgets</li>
- <li>Activity transition animations</li>
-</ul>
-
-<p>You can customize the look of the material theme
-according to your brand identity with a color palette you control. You can tint the action bar and
-the status bar using theme attributes, as shown in Figure 1.</p>
-
-<div style="float:right;margin-left:25px;margin-top:-50px">
-<img src="{@docRoot}preview/material/images/ThemeColors.png" style="width:250px"/>
-<p class="img-caption" style="margin-bottom:0px">
-<strong>Figure 1.</strong> Customizing the material theme.</p>
-</div>
-
-<p>The system widgets have a new design and touch feedback animations. You can customize the
-color palette, the touch feedback animations, and the activity transitions for your app.</p>
-
-<p>The material theme is defined as:</p>
-
-<ul>
- <li><code>@android:style/Theme.Material</code> (dark version)</li>
- <li><code>@android:style/Theme.Material.Light</code> (light version)</li>
- <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
-</ul>
-
-<p>For a list of material styles that you can use, see the API reference for
-<code>android.R.style</code>.</p>
-
-<p class="note">
-<strong>Note:</strong> The material theme is only available in the Android L Developer Preview.
-For more information, see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.
-</p>
-
-
-<h2 id="colorpalette">Customize the Color Palette</h2>
-
-<p style="margin-bottom:30px">To customize the theme's base colors to fit your brand, define
-your custom colors using theme attributes when you inherit from the material theme:</p>
-
-<pre>
-<resources>
- <!-- inherit from the material theme -->
- <style name="AppTheme" parent="android:Theme.Material">
- <!-- Main theme colors -->
- <!-- your app's branding color (for the app bar) -->
- <item name="android:colorPrimary">@color/primary</item>
- <!-- darker variant of colorPrimary (for status bar, contextual app bars) -->
- <item name="android:colorPrimaryDark">@color/primary_dark</item>
- <!-- theme UI controls like checkboxes and text fields -->
- <item name="android:colorAccent">@color/accent</item>
- </style>
-</resources>
-</pre>
-
-
-<h2 id="statusbar">Customize the Status and Navigation Bar</h2>
-
-<p>The material theme lets you easily customize the status bar, so you can specify a
-color that fits your brand and provides enough contrast to show the white status icons. To
-set a custom color for the status bar, use the <code>android:statusBarColor</code> attribute when
-you extend the material theme. By default, <code>android:statusBarColor</code> inherits the
-value of <code>android:colorPrimaryDark</code>.</p>
-
-<p>To handle the color of the status bar yourself (for example, by adding a gradient in the
-background), set the <code>android:statusBarColor</code> attribute to
-<code>@android:color/transparent</code> and adjust the window flags as required. You can
-also use the <code>Window.setStatusBarColor</code> method for animations or fading.</p>
-
-<p class="note"><strong>Note:</strong>
-The status bar should almost always have a clear delineation from the primary toolbar, except for
-full-bleed imagery cases and when you use a gradient as a protection.
-</p>
-
-<p>When customizing the navigation and status bars, make them both transparent or modify only
-the status bar. The navigation bar should remain black in all other cases.</p>
-
-
-<h2 id="inheritance">Theme Individual Views</h3>
-
-<p>Elements in XML layout definitions can specify the <code>android:theme</code> attribute,
-which references a theme resource. This attribute modifies the theme for the element and any
-elements inflated below it, which is useful to alter theme color palettes in a specific portion
-of an interface.</p>
\ No newline at end of file
diff --git a/docs/html/preview/material/ui-widgets.jd b/docs/html/preview/material/ui-widgets.jd
deleted file mode 100644
index 69b7d2d..0000000
--- a/docs/html/preview/material/ui-widgets.jd
+++ /dev/null
@@ -1,198 +0,0 @@
-page.title=UI Widgets
-
-@jd:body
-
-<div id="qv-wrapper">
-<div id="qv">
-<h2>In this document</h2>
-<ol>
- <li><a href="#recyclerview">RecyclerView</a></li>
- <li><a href="#cardview">CardView</a></li>
-</ol>
-</div>
-</div>
-
-<p>The support library in the Android L Developer Preview contains two new widgets,
-<code>RecyclerView</code> and <code>CardView</code>. Use these widgets to show complex lists
-and cards in your app. These widgets have material design style by default.</p>
-
-
-<h2 id="recyclerview">RecyclerView</h2>
-
-<p><code>RecyclerView</code> is a more advanced and flexible version of <code>ListView</code>.
-This widget is a container for large sets of views that can be recycled and scrolled very
-efficiently. Use the <code>RecyclerView</code> widget when you have lists with elements that
-change dynamically.</p>
-
-<p><code>RecyclerView</code> is easy to use, because it provides:</p>
-
-<ul>
- <li>A layout manager for positioning items</li>
- <li>Default animations for common item operations</li>
-</ul>
-
-<p>You also have the flexibility to define custom layout managers and animations for this
-widget.</p>
-
-<p>To use the <code>RecyclerView</code> widget, you have to specify an adapter and a layout
-manager. To create an adapter, you extend the <code>RecyclerView.Adapter</code> class. The details
-of the implementation depend on the specifics of your dataset and the type of views. For more
-information, see the <a href="#rvexamples">examples</a> below.</p>
-
-<img src="/preview/material/images/RecyclerView.png" alt="" id="figure1" style="width:550px"/>
-<p class="img-caption">
- <strong>Figure 1</strong> - The <code>RecyclerView</code> widget.
-</p>
-
-<p>A <strong>layout manager</strong> positions item views inside a <code>RecyclerView</code> and
-determines when to reuse item views that are no longer visible to the user. To reuse (or
-<em>recycle</em>) a view, a layout manager may ask the adapter to replace the content of the
-view with a different element from the dataset. Recycling views in this manner improves
-performance by avoiding the creation of unnecessary views or performing expensive
-<code>findViewById</code> lookups.
-</p>
-
-<p><code>RecyclerView</code> provides <code>LinearLayoutManager</code>, which shows the items in a
-vertical or horizontal scrolling list. To create a custom layout, you extend the
-<code>RecyclerView.LayoutManager</code> class.</p>
-
-<h3>Animations</h3>
-
-<p>Animations for adding and removing items are enabled by default in <code>RecyclerView</code>.
-To customize these animations, extend the <code>RecyclerView.ItemAnimator</code> class and use
-the <code>RecyclerView.setItemAnimator</code> method.</p>
-
-<h3 id="rvexamples">Examples</h3>
-
-<p>To include a <code>RecyclerView</code> in your layout:</p>
-
-<pre>
-<!-- A RecyclerView with some commonly used attributes -->
-<android.support.v7.widget.RecyclerView
- android:id="@+id/my_recycler_view"
- android:scrollbars="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent"/>
-</pre>
-
-<p>To get the <code>RecyclerView</code> object in your activity:</p>
-
-<pre>
-public class MyActivity extends Activity {
- private RecyclerView mRecyclerView;
- private RecyclerView.Adapter mAdapter;
- private RecyclerView.LayoutManager mLayoutManager;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.my_activity);
- mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
-
- // improve performance if you know that changes in content
- // do not change the size of the RecyclerView
- mRecyclerView.setHasFixedSize(true);
-
- // use a linear layout manager
- mLayoutManager = new LinearLayoutManager(this);
- mRecyclerView.setLayoutManager(mLayoutManager);
-
- // specify an adapter (see also next example)
- mAdapter = new MyAdapter(myDataset);
- mRecyclerView.setAdapter(mAdapter);
- }
- ...
-}
-</pre>
-
-<p>To create a simple adapter:</p>
-
-<pre>
-public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
- private String[] mDataset;
-
- // Provide a reference to the type of views that you are using
- // (custom viewholder)
- public static class ViewHolder extends RecyclerView.ViewHolder {
- public TextView mTextView;
- public ViewHolder(TextView v) {
- super(v);
- mTextView = v;
- }
- }
-
- // Provide a suitable constructor (depends on the kind of dataset)
- public MyAdapter(String[] myDataset) {
- mDataset = myDataset;
- }
-
- // Create new views (invoked by the layout manager)
- @Override
- public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
- int viewType) {
- // create a new view
- View v = LayoutInflater.from(parent.getContext())
- .inflate(R.layout.my_text_view, parent, false);
- // set the view's size, margins, paddings and layout parameters
- ...
- ViewHolder vh = new ViewHolder(v);
- return vh;
- }
-
- // Replace the contents of a view (invoked by the layout manager)
- @Override
- public void onBindViewHolder(ViewHolder holder, int position) {
- // - get element from your dataset at this position
- // - replace the contents of the view with that element
- holder.mTextView.setText(mDataset[position]);
-
- }
-
- // Return the size of your dataset (invoked by the layout manager)
- @Override
- public int getItemCount() {
- return mDataset.length;
- }
-}
-</pre>
-
-
-<h2 id="cardview">CardView</h2>
-
-<p><code>CardView</code> extends the <code>FrameLayout</code> class and lets you show information
-inside cards that have a consistent look on any app. <code>CardView</code> widgets can have
-shadows and rounded corners.</p>
-
-<p>To create a card with a shadow, use the <code>android:elevation</code> attribute.
-<code>CardView</code> uses real elevation and dynamic shadows
-and falls back to a programmatic shadow implementation on earlier versions. For more information,
-see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.</p>
-
-<p>Here's how to specify properties of <code>CardView</code>:</p>
-
-<ul>
- <li>To set the corner radius in your layouts, use the <code>card_view:cardCornerRadius</code>
- attribute.</li>
- <li>To set the corner radius in your code, use the <code>CardView.setRadius</code> method.</li>
- <li>To set the background color of a card, use the <code>card_view:cardBackgroundColor</code>
-attribute.</li>
-</ul>
-
-<p>To include a <code>CardView</code> in your layout:</p>
-
-<pre>
-<!-- A CardView that contains a TextView -->
-<android.support.v7.widget.CardView
- xmlns:card_view="http://schemas.android.com/apk/res-auto"
- android:id="@+id/card_view"
- android:layout_gravity="center"
- android:layout_width="200dp"
- android:layout_height="200dp"
- card_view:cardCornerRadius="4dp">
-
- <TextView
- android:id="@+id/info_text"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
-</android.support.v7.widget.CardView>
-</pre>
\ No newline at end of file
diff --git a/docs/html/preview/material/views-shadows.jd b/docs/html/preview/material/views-shadows.jd
deleted file mode 100644
index 78c0062..0000000
--- a/docs/html/preview/material/views-shadows.jd
+++ /dev/null
@@ -1,95 +0,0 @@
-page.title=Views and Shadows
-
-@jd:body
-
-<div id="qv-wrapper">
-<div id="qv">
-<h2>In this document</h2>
-<ol>
- <li><a href="#elevation">View Elevation</a></li>
- <li><a href="#shadows">Shadows and Outlines</a></li>
- <li><a href="#clip">Clipping Views</a></li>
-</ol>
-</div>
-</div>
-
-<p>The elevation of a view determines the size of its shadow:
-views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane under an
-orthographic projection (the views do not scale for different values of Z).</p>
-
-<p>Elevation is also useful to create animations where widgets temporarily rise above the
-view plane when performing some action.</p>
-
-
-<h2 id="elevation">View Elevation</h2>
-
-<p>The Z value for a view has two components, elevation and translation. The elevation is the
-static component, and the translation is used for animations:</p>
-
-<p><code>Z = elevation + translationZ</code></p>
-
-<p>To set the elevation of a view:</p>
-
-<ul>
- <li>In a layout definition, use the <code>android:elevation</code> attribute.</li>
- <li>In the code of an activity, use the <code>View.setElevation</code> method.</li>
-</ul>
-
-<p>To set the translation of a view, use the <code>View.setTranslationZ</code> method.</p>
-
-<p>The new <code>ViewPropertyAnimator.z</code> and <code>ViewPropertyAnimator.translationZ</code>
-methods enable you to easily animate the elevation of views. For more information, see
-the API reference for <code>ViewPropertyAnimator</code> and the <a
-href="{@docRoot}guide/topics/graphics/prop-animation.html#object-animator">Property Animation</a>
-developer guide.</p>
-
-<p>The Z values are measured in the same units as the X and Y values.</p>
-
-
-<h2 id="shadows">Shadows and Outlines</h2>
-
-<p>The bounds of a view's background drawable determine the default shape of its shadow.
-<strong>Outlines</strong> represent the outer shape of a graphics object and define the ripple
-area for touch feedback.</p>
-
-<p>For example, if you define a view with a background drawable:</p>
-
-<pre>
-<TextView
- android:id="@+id/myview"
- ...
- android:elevation="2dp"
- android:background="@drawable/myrect" />
-</pre>
-
-<p>where the background drawable is defined as a rectangle with rounded corners:</p>
-
-<pre>
-<!-- res/drawable/myrect.xml -->
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <solid android:color="#42000000" />
- <corners android:radius="5dp" />
-</shape>
-</pre>
-
-<p>Then this view and drawable cast the appropriate shadow.</p>
-
-<p>You can also create outlines in your code using the methods in the <code>Outline</code> class,
-and you can assign them to views with the <code>View.setOutline</code> method.</p>
-
-<p>To prevent a view from casting a shadow, set its outline to <code>null</code>.</p>
-
-
-<h2 id="clip">Clipping Views</h2>
-
-<p>Clip a view to its outline area using the
-<code>View.setClipToOutline</code> method. Only rectangle, circle, and round rectangle outlines
-support clipping, as determined by the <code>Outline.canClip</code> method.</p>
-
-<p>To clip a view to the shape of a drawable, set the drawable as the background of the view
-(as shown above) and call the <code>View.setClipToOutline</code> method.</p>
-
-<p>Because clipping views is an expensive operation, don't animate the shape you use to
-clip a view. To achieve this effect, use a <a
-href="{@docRoot}preview/material/animations.html#reveal">Reveal Effect</a> animation.</p>
\ No newline at end of file
diff --git a/docs/html/training/material/animations.jd b/docs/html/training/material/animations.jd
new file mode 100644
index 0000000..e8291b8
--- /dev/null
+++ b/docs/html/training/material/animations.jd
@@ -0,0 +1,548 @@
+page.title=Defining Custom Animations
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>This lesson teaches you to</h2>
+<ol>
+ <li><a href="#Touch">Customize Touch Feedback</a></li>
+ <li><a href="#Reveal">Use the Reveal Effect</a></li>
+ <li><a href="#Transitions">Customize Activity Transitions</a></li>
+ <li><a href="#ViewState">Animate View State Changes</a></li>
+ <li><a href="#AnimVector">Animate Vector Drawables</a></li>
+</ol>
+<h2>You should also read</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Animations in material design give users feedback on their actions and provide visual
+continuity as users interact with your app. The material theme provides some default animations
+for buttons and activity transitions, and Android 5.0 (API level 21) and above lets you customize
+these animations and create new ones:</p>
+
+<ul>
+<li>Touch feedback</li>
+<li>Circular Reveal</li>
+<li>Activity transitions</li>
+<li>Curved motion</li>
+<li>View state changes</li>
+</ul>
+
+
+<h2 id="Touch">Customize Touch Feedback</h2>
+
+<p>Touch feedback in material design provides an instantaneous visual confirmation at the
+point of contact when users interact with UI elements. The default touch feedback animations
+for buttons use the new {@link android.graphics.drawable.RippleDrawable} class, which transitions
+between different states with a ripple effect.</p>
+
+<p>In most cases, you should apply this functionality in your view XML by specifying the view
+background as:</p>
+
+<ul>
+<li><code>?android:attr/selectableItemBackground</code> for a bounded ripple</li>
+<li><code>?android:attr/selectableItemBackgroundBorderless</code> for a ripple that extends beyond
+the view</li>
+</ul>
+
+<p class="note"><strong>Note:</strong> <code>selectableItemBackgroundBorderless</code> is a new
+attribute introduced in API level 21.</p>
+
+
+<p>Alternatively, you can define a {@link android.graphics.drawable.RippleDrawable}
+as an XML resource using the <code>ripple</code> element.</p>
+
+<p>You can assign a color to {@link android.graphics.drawable.RippleDrawable} objects. To change
+the default touch feedback color, use the theme's <code>android:colorControlHighlight</code>
+attribute.</p>
+
+<p>For more information, see the API reference for the {@link
+android.graphics.drawable.RippleDrawable} class.</p>
+
+
+<h2 id="Reveal">Use the Reveal Effect</h2>
+
+<p>Reveal animations provide users visual continuity when you show or hide a group of UI
+elements. The {@link android.view.ViewAnimationUtils#createCircularReveal
+ViewAnimationUtils.createCircularReveal()} method enables you to animate a clipping circle to
+reveal or hide a view.</p>
+
+<p>To reveal a previously invisible view using this effect:</p>
+
+<pre>
+// previously invisible view
+View myView = findViewById(R.id.my_view);
+
+// get the center for the clipping circle
+int cx = (myView.getLeft() + myView.getRight()) / 2;
+int cy = (myView.getTop() + myView.getBottom()) / 2;
+
+// get the final radius for the clipping circle
+int finalRadius = myView.getWidth();
+
+// create and start the animator for this view
+// (the start radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
+anim.start();
+</pre>
+
+<p>To hide a previously visible view using this effect:</p>
+
+<pre>
+// previously visible view
+final View myView = findViewById(R.id.my_view);
+
+// get the center for the clipping circle
+int cx = (myView.getLeft() + myView.getRight()) / 2;
+int cy = (myView.getTop() + myView.getBottom()) / 2;
+
+// get the initial radius for the clipping circle
+int initialRadius = myView.getWidth();
+
+// create the animation (the final radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
+
+// make the view invisible when the animation is done
+anim.addListener(new AnimatorListenerAdapter() {
+ @Override
+ public void onAnimationEnd(Animator animation) {
+ super.onAnimationEnd(animation);
+ myView.setVisibility(View.INVISIBLE);
+ }
+});
+
+// start the animation
+anim.start();
+</pre>
+
+
+<h2 id="Transitions">Customize Activity Transitions</h2>
+
+<!-- shared transition video -->
+<div style="width:290px;margin-left:35px;float:right">
+ <div class="framed-nexus5-port-span-5">
+ <video class="play-on-hover" autoplay="">
+ <source src="{@docRoot}design/material/videos/ContactsAnim.mp4">
+ <source src="{@docRoot}design/material/videos/ContactsAnim.webm">
+ <source src="{@docRoot}design/material/videos/ContactsAnim.ogv">
+ </video>
+ </div>
+ <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
+ <p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Figure 1</strong> - A
+ transition with shared elements.</p>
+ <em>To replay the movie, click on the device screen</em>
+ </div>
+</div>
+
+<p>Activity transitions in material design apps provide visual connections between different states
+through motion and transformations between common elements. You can specify custom animations for
+enter and exit transitions and for transitions of shared elements between activities.</p>
+
+<ul>
+<li>An <strong>enter</strong> transition determines how views in an activity enter the scene.
+For example, in the <em>explode</em> enter transition, the views enter the scene from the outside
+and fly in towards the center of the screen.</li>
+
+<li>An <strong>exit</strong> transition determines how views in an activity exit the scene. For
+ example, in the <em>explode</em> exit transition, the views exit the scene away from the
+center.</li>
+
+<li>A <strong>shared elements</strong> transition determines how views that are shared between
+two activities transition between these activities. For example, if two activities have the same
+image in different positions and sizes, the <em>changeImageTransform</em> shared element transition
+translates and scales the image smoothly between these activities.</li>
+</ul>
+
+<p>Android 5.0 (API level 21) supports these enter and exit transitions:</p>
+
+<ul>
+<li><em>explode</em> - Moves views in or out from the center of the scene.</li>
+<li><em>slide</em> - Moves views in or out from one of the edges of the scene.</li>
+<li><em>fade</em> - Adds or removes a view from the scene by changing its opacity.</li>
+</ul>
+
+<p>Any transition that extends the {@link android.transition.Visibility} class is supported
+as an enter or exit transition. For more information, see the API reference for the
+{@link android.transition.Transition} class.</p>
+
+<p>Android 5.0 (API level 21) also supports these shared elements transitions:</p>
+
+<ul>
+<li><em>changeBounds</em> - Animates the changes in layout bounds of target views.</li>
+<li><em>changeClipBounds</em> - Animates the changes in clip bounds of target views.</li>
+<li><em>changeTransform</em> - Animates the changes in scale and rotation of target views.</li>
+<li><em>changeImageTransform</em> - Animates changes in size and scale of target images.</li>
+</ul>
+
+<p>When you enable activity transitions in your app, the default cross-fading transition is
+activated between the entering and exiting activities.</p>
+
+<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405"
+ style="margin-top:20px"/>
+<p class="img-caption">
+ <strong>Figure 2</strong> - A scene transition with one shared element.
+</p>
+
+<h3>Specify custom transitions</h3>
+
+<p>First, enable window content transitions with the <code>android:windowContentTransitions</code>
+attribute when you define a style that inherits from the material theme. You can also specify
+enter, exit, and shared element transitions in your style definition:</p>
+
+<pre>
+<style name="BaseAppTheme" parent="android:Theme.Material">
+ <!-- enable window content transitions -->
+ <item name="android:windowContentTransitions">true</item>
+
+ <!-- specify enter and exit transitions -->
+ <item name="android:windowEnterTransition">@transition/explode</item>
+ <item name="android:windowExitTransition">@transition/explode</item>
+
+ <!-- specify shared element transitions -->
+ <item name="android:windowSharedElementEnterTransition">
+ @transition/change_image_transform</item>
+ <item name="android:windowSharedElementExitTransition">
+ @transition/change_image_transform</item>
+</style>
+</pre>
+
+<p>The <code>change_image_transform</code> transition in this example is defined as follows:</p>
+
+<pre>
+<!-- res/transition/change_image_transform.xml -->
+<!-- (see also Shared Transitions below) -->
+<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
+ <changeImageTransform/>
+</transitionSet>
+</pre>
+
+<p>The <code>changeImageTransform</code> element corresponds to the
+{@link android.transition.ChangeImageTransform} class. For more information, see the API
+reference for {@link android.transition.Transition}.</p>
+
+<p>To enable window content transitions in your code instead, call the
+{@link android.view.Window#requestFeature Window.requestFeature()} method:</p>
+
+<pre>
+// inside your activity (if you did not enable transitions in your theme)
+getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
+
+// set an exit transition
+getWindow().setExitTransition(new Explode());
+</pre>
+
+<p>To specify transitions in your code, call these methods with a {@link
+android.transition.Transition} object:</p>
+
+<ul>
+ <li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
+ <li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
+ <li>{@link android.view.Window#setSharedElementEnterTransition
+ Window.setSharedElementEnterTransition()}</li>
+ <li>{@link android.view.Window#setSharedElementExitTransition
+ Window.setSharedElementExitTransition()}</li>
+</ul>
+
+<p>The {@link android.view.Window#setExitTransition setExitTransition()} and {@link
+android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} methods define
+the exit transition for the calling activity. The {@link android.view.Window#setEnterTransition
+setEnterTransition()} and {@link android.view.Window#setSharedElementEnterTransition
+setSharedElementEnterTransition()} methods define the enter transition for the called activity.</p>
+
+<p>To get the full effect of a transition, you must enable window content transitions on both the
+calling and called activities. Otherwise, the calling activity will start the exit transition,
+but then you'll see a window transition (like scale or fade).</p>
+
+<p>To start an enter transition as soon as possible, use the
+{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
+method on the called activity. This lets you have more dramatic enter transitions.</p>
+
+<h3>Start an activity using transitions</h3>
+
+<p>If you enable transitions and set an exit transition for an activity, the transition is activated
+when you launch another activity as follows:</p>
+
+<pre>
+startActivity(intent,
+ ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
+</pre>
+
+<p>If you have set an enter transition for the second activity, the transition is also activated
+when the activity starts. To disable transitions when you start another activity, provide
+a <code>null</code> options bundle.</p>
+
+<h3>Start an activity with a shared element</h3>
+
+<p>To make a screen transition animation between two activities that have a shared element:</p>
+
+<ol>
+<li>Enable window content transitions in your theme.</li>
+<li>Specify a shared elements transition in your style.</li>
+<li>Define your transition as an XML resource.</li>
+<li>Assign a common name to the shared elements in both layouts with the
+ <code>android:transitionName</code> attribute.</li>
+<li>Use the {@link android.app.ActivityOptions#makeSceneTransitionAnimation
+ActivityOptions.makeSceneTransitionAnimation()} method.</li>
+</ol>
+
+<pre>
+// get the element that receives the click event
+final View imgContainerView = findViewById(R.id.img_container);
+
+// get the common element for the transition in this activity
+final View androidRobotView = findViewById(R.id.image_small);
+
+// define a click listener
+imgContainerView.setOnClickListener(new View.OnClickListener() {
+ @Override
+ public void onClick(View view) {
+ Intent intent = new Intent(this, Activity2.class);
+ // create the transition animation - the images in the layouts
+ // of both activities are defined with android:transitionName="robot"
+ ActivityOptions options = ActivityOptions
+ .makeSceneTransitionAnimation(this, androidRobotView, "robot");
+ // start the new activity
+ startActivity(intent, options.toBundle());
+ }
+});
+</pre>
+
+<p>For shared dynamic views that you generate in your code, use the
+{@link android.view.View#setTransitionName View.setTransitionName()} method to specify a common
+element name in both activities.</p>
+
+<p>To reverse the scene transition animation when you finish the second activity, call the
+{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
+method instead of {@link android.app.Activity#finish Activity.finish()}.</p>
+
+<h3>Start an activity with multiple shared elements</h3>
+
+<p>To make a scene transition animation between two activities that have more than one shared
+element, define the shared elements in both layouts with the <code>android:transitionName</code>
+attribute (or use the {@link android.view.View#setTransitionName View.setTransitionName()} method
+in both activities), and create an {@link android.app.ActivityOptions} object as follows:</p>
+
+<pre>
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
+ Pair.create(view1, "agreedName1"),
+ Pair.create(view2, "agreedName2"));
+</pre>
+
+
+<h2 id="CurvedMotion">Use Curved Motion</h2>
+
+<p>Animations in material design rely on curves for time interpolation and spatial movement
+patterns. With Android 5.0 (API level 21) and above, you can define custom timing curves and
+curved motion patterns for animations.</p>
+
+<p>The {@link android.view.animation.PathInterpolator} class is a new interpolator based on a
+Bézier curve or a {@link android.graphics.Path} object. This interpolator specifies a motion curve
+in a 1x1 square, with anchor points at (0,0) and (1,1) and control points as specified using the
+constructor arguments. You can also define a path interpolator as an XML resource:</p>
+
+<pre>
+<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
+ android:controlX1="0.4"
+ android:controlY1="0"
+ android:controlX2="1"
+ android:controlY2="1"/>
+</pre>
+
+<p>The system provides XML resources for the three basic curves in the material design
+specification:</p>
+
+<ul>
+ <li><code>@interpolator/fast_out_linear_in.xml</code></li>
+ <li><code>@interpolator/fast_out_slow_in.xml</code></li>
+ <li><code>@interpolator/linear_out_slow_in.xml</code></li>
+</ul>
+
+<p>You can pass a {@link android.view.animation.PathInterpolator} object to the {@link
+android.animation.Animator#setInterpolator Animator.setInterpolator()} method.</p>
+
+<p>The {@link android.animation.ObjectAnimator} class has new constructors that enable you to animate
+coordinates along a path using two or more properties at once. For example, the following animator
+uses a {@link android.graphics.Path} object to animate the X and Y properties of a view:</p>
+
+<pre>
+ObjectAnimator mAnimator;
+mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
+...
+mAnimator.start();
+</pre>
+
+
+<h2 id="ViewState">Animate View State Changes</h2>
+
+<p>The {@link android.animation.StateListAnimator} class lets you define animators that run when
+the state of a view changes. The following example shows how to define an {@link
+android.animation.StateListAnimator} as an XML resource:</p>
+
+<pre>
+<!-- animate the translationZ property of a view when pressed -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+ <item android:state_pressed="true">
+ <set>
+ <objectAnimator android:propertyName="translationZ"
+ android:duration="@android:integer/config_shortAnimTime"
+ android:valueTo="2dp"
+ android:valueType="floatType"/>
+ <!-- you could have other objectAnimator elements
+ here for "x" and "y", or other properties -->
+ </set>
+ </item>
+ <item android:state_enabled="true"
+ android:state_pressed="false"
+ android:state_focused="true">
+ <set>
+ <objectAnimator android:propertyName="translationZ"
+ android:duration="100"
+ android:valueTo="0"
+ android:valueType="floatType"/>
+ </set>
+ </item>
+</selector>
+</pre>
+
+<p>To attach custom view state animations to a view, define an animator using the
+<code>selector</code> element in an XML resource file as in this example, and assign it to your
+view with the <code>android:stateListAnimator</code> attribute. To assign a state list animator
+to a view in your code, use the {@link android.animation.AnimatorInflater#loadStateListAnimator
+AnimationInflater.loadStateListAnimator()} method, and assign the animator to your view with the
+{@link android.view.View#setStateListAnimator View.setStateListAnimator()} method.</p>
+
+<p>When your theme extends the material theme, buttons have a Z animation by default. To avoid this
+behavior in your buttons, set the <code>android:stateListAnimator</code> attribute to
+<code>@null</code>.</p>
+
+<p>The {@link android.graphics.drawable.AnimatedStateListDrawable} class lets you create drawables
+that show animations between state changes of the associated view. Some of the system widgets in
+Android 5.0 use these animations by default. The following example shows how
+to define an {@link android.graphics.drawable.AnimatedStateListDrawable} as an XML resource:</p>
+
+<pre>
+<!-- res/drawable/myanimstatedrawable.xml -->
+<animated-selector
+ xmlns:android="http://schemas.android.com/apk/res/android">
+
+ <!-- provide a different drawable for each state-->
+ <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
+ android:state_pressed="true"/>
+ <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
+ android:state_focused="true"/>
+ <item android:id="@id/default"
+ android:drawable="@drawable/drawableD"/>
+
+ <!-- specify a transition -->
+ <transition android:fromId="@+id/default" android:toId="@+id/pressed">
+ <animation-list>
+ <item android:duration="15" android:drawable="@drawable/dt1"/>
+ <item android:duration="15" android:drawable="@drawable/dt2"/>
+ ...
+ </animation-list>
+ </transition>
+ ...
+</animated-selector>
+</pre>
+
+
+<h2 id="AnimVector">Animate Vector Drawables</h2>
+
+<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Vector Drawables</a> are
+scalable without losing definition. The {@link android.graphics.drawable.AnimatedVectorDrawable}
+class lets you animate the properties of a vector drawable.</p>
+
+<p>You normally define animated vector drawables in three XML files:</p>
+
+<ul>
+<li>A vector drawable with the <code><vector></code> element in
+<code>res/drawable/</code></li>
+<li>An animated vector drawable with the <code><animated-vector></code> element in
+<code>res/drawable/</code></li>
+<li>One or more object animators with the <code><objectAnimator></code> element in
+<code>res/anim/</code></li>
+</ul>
+
+<p>Animated vector drawables can animate the attributes of the <code><group></code> and
+<code><path></code> elements. The <code><group></code> elements defines a set of
+paths or subgroups, and the <code><path></code> element defines paths to be drawn.</p>
+
+<p>When you define a vector drawable that you want to animate, use the <code>android:name</code>
+attribute to assign a unique name to groups and paths, so you can refer to them from your animator
+definitions. For example:</p>
+
+<pre>
+<!-- res/drawable/vectordrawable.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:height="64dp"
+ android:width="64dp"
+ android:viewportHeight="600"
+ android:viewportWidth="600">
+ <group
+ <strong>android:name="rotationGroup"</strong>
+ android:pivotX="300.0"
+ android:pivotY="300.0"
+ android:rotation="45.0" >
+ <path
+ <strong>android:name="v"</strong>
+ android:fillColor="#000000"
+ android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
+ </group>
+</vector>
+</pre>
+
+<p>The animated vector drawable definition refers to the groups and paths in the vector drawable
+by their names:</p>
+
+<pre>
+<!-- res/drawable/animvectordrawable.xml -->
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:drawable="@drawable/vectordrawable" >
+ <target
+ android:name="rotationGroup"
+ android:animation="@anim/rotation" />
+ <target
+ android:name="v"
+ android:animation="@anim/path_morph" />
+</animated-vector>
+</pre>
+
+<p>The animation definitions represent {@link android.animation.ObjectAnimator} or {@link
+android.animation.AnimatorSet} objects. The first animator in this example rotates the target
+group 360 degrees:</p>
+
+<pre>
+<!-- res/anim/rotation.xml -->
+<objectAnimator
+ android:duration="6000"
+ android:propertyName="rotation"
+ android:valueFrom="0"
+ android:valueTo="360" />
+</pre>
+
+<p>The second animator in this example morphs the vector drawable's path from one shape to
+another. Both paths must be compatible for morphing: they must have the same number of commands
+and the same number of parameters for each command.</p>
+
+<pre>
+<!-- res/anim/path_morph.xml -->
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+ <objectAnimator
+ android:duration="3000"
+ android:propertyName="pathData"
+ android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
+ android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
+ android:valueType="pathType" />
+</set>
+</pre>
+
+<p>For more information, see the API reference for {@link
+android.graphics.drawable.AnimatedVectorDrawable}.</p>
diff --git a/docs/html/training/material/compatibility.jd b/docs/html/training/material/compatibility.jd
new file mode 100644
index 0000000..5e03450
--- /dev/null
+++ b/docs/html/training/material/compatibility.jd
@@ -0,0 +1,172 @@
+page.title=Maintaining Compatibility
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>This lesson teaches you to</h2>
+<ol>
+ <li><a href="#Theme">Define Alternative Styles</a></li>
+ <li><a href="#Layouts">Provide Alternative Layouts</a></li>
+ <li><a href="#SupportLib">Use the Support Library</a></li>
+ <li><a href="#CheckVersion">Check the System Version</a></li>
+</ol>
+<h2>You should also read</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Some material design features like the material theme and custom activity transitions are
+only available on Android 5.0 (API level 21) and above. However, you can design your apps to make
+use of these features when running on devices that support material design and still be compatible
+with devices running previous releases of Android.</p>
+
+
+<h2 id="Theme">Define Alternative Styles</h2>
+
+<p>You can configure your app to use the material theme on devices that support it and revert
+to an older theme on devices running earlier versions of Android:</p>
+
+<ol>
+<li>Define a theme that inherits from an older theme (like Holo) in
+ <code>res/values/styles.xml</code>.</li>
+<li>Define a theme with the same name that inherits from the material theme in
+ <code>res/values-v21/styles.xml</code>.</li>
+<li>Set this theme as your app's theme in the manifest file.</li>
+</ol>
+
+<p class="note"><strong>Note:</strong>
+If your app uses the material theme but does not provide an alternative theme in this manner,
+your app will not run on versions of Android earlier than 5.0.
+</p>
+
+
+<h2 id="Layouts">Provide Alternative Layouts</h2>
+
+<p>If the layouts that you design according to the material design guidelines do not use any of
+the new XML attributes introduced in Android 5.0 (API level 21), they will work on previous
+versions of Android. Otherwise, you can provide alternative layouts. You can also provide
+alternative layouts to customize how your app looks on earlier versions of Android.</p>
+
+<p>Create your layout files for Android 5.0 (API level 21) inside <code>res/layout-v21/</code> and
+your alternative layout files for earlier versions of Android inside <code>res/layout/</code>.
+For example, <code>res/layout/my_activity.xml</code> is an alternative layout for
+<code>res/layout-v21/my_activity.xml</code>.</p>
+
+<p>To avoid duplication of code, define your styles inside <code>res/values/</code>, modify the
+styles in <code>res/values-v21/</code> for the new APIs, and use style inheritance, defining base
+styles in <code>res/values/</code> and inheriting from those in <code>res/values-v21/</code>.</p>
+
+
+<h2 id="SupportLib">Use the Support Library</h2>
+
+<p>The <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>
+r21 and above includes the following material design features:</p>
+
+<ul>
+<li><a href="{@docRoot}training/material/theme.html">Material design styles</a> for some system
+ widgets when you apply one of the <code>Theme.AppCompat</code> themes.</li>
+<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Color palette theme attributes</a>
+ in the <code>Theme.AppCompat</code> themes.</li>
+<li>The {@link android.support.v7.widget.RecyclerView} widget to <a
+ href="{@docRoot}training/material/lists-cards.html#RecyclerView">display data
+ collections</a>.</li>
+<li>The {@link android.support.v7.widget.CardView} widget to <a
+ href="{@docRoot}training/material/lists-cards.html#CardView">create cards</a>.</li>
+<li>The {@link android.support.v7.graphics.Palette} class to <a
+ href="{@docRoot}training/material/drawables.html#ColorExtract">extract prominent colors from
+ images</a>.</li>
+</ul>
+
+<h3>System widgets</h3>
+
+<p>The <code>Theme.AppCompat</code> themes provide material design styles for these widgets:</p>
+
+<ul>
+ <li>{@link android.widget.EditText}</li>
+ <li>{@link android.widget.Spinner}</li>
+ <li>{@link android.widget.CheckBox}</li>
+ <li>{@link android.widget.RadioButton}</li>
+ <li>{@link android.support.v7.widget.SwitchCompat}</li>
+ <li>{@link android.widget.CheckedTextView}</li>
+</ul>
+
+<h3>Color Palette</h3>
+
+<p>To obtain material design styles and customize the color palette with the Android v7 Support
+Library, apply one of the <code>Theme.AppCompat</code> themes:</p>
+
+<pre>
+<!-- extend one of the Theme.AppCompat themes -->
+<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
+ <!-- customize the color palette -->
+ <item name="colorPrimary">@color/material_blue_500</item>
+ <item name="colorPrimaryDark">@color/material_blue_700</item>
+ <item name="colorAccent">@color/material_green_A200</item>
+</style>
+</pre>
+
+<h3>Lists and Cards</h3>
+
+<p>The {@link android.support.v7.widget.RecyclerView} and {@link
+android.support.v7.widget.CardView} widgets are available in earlier versions of Android through
+the Android v7 Support Library with these limitations:</p>
+<ul>
+<li>{@link android.support.v7.widget.CardView} falls back to a programmatic shadow implementation
+ using additional padding.</li>
+<li>{@link android.support.v7.widget.CardView} does not clip its children views that intersect
+ with rounded corners.</li>
+</ul>
+
+
+<h3>Dependencies</h3>
+
+<p>To use these features in versions of Android earlier than 5.0 (API level 21), include the
+Android v7 Support Library in your project as a <a
+href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle dependency</a>:</p>
+
+<pre>
+dependencies {
+ compile 'com.android.support:appcompat-v7:+'
+ compile 'com.android.support:cardview-v7:+'
+ compile 'com.android.support:recyclerview-v7:+'
+}
+</pre>
+
+
+<h2 id="CheckVersion">Check the System Version</h2>
+
+<p>The following features are available only in Android 5.0 (API level 21) and above:</p>
+
+<ul>
+<li>Activity transitions</li>
+<li>Touch feedback</li>
+<li>Reveal animations</li>
+<li>Path-based animations</li>
+<li>Vector drawables</li>
+<li>Drawable tinting</li>
+</ul>
+
+<p>To preserve compatibility with earlier versions of Android, check the system {@link
+android.os.Build.VERSION#SDK_INT version} at runtime before you invoke the APIs for any of these
+features:</p>
+
+<pre>
+// Check if we're running on Android 5.0 or higher
+if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+ // Call some material design APIs here
+} else {
+ // Implement this feature without material design
+}
+</pre>
+
+<p class="note"><strong>Note:</strong> To specify which versions of Android your app supports,
+use the <code>android:minSdkVersion</code> and <code>android:targetSdkVersion</code>
+attributes in your manifest file. To use the material design features in Android 5.0, set
+the <code>android:targetSdkVersion</code> attribute to <code>21</code>. For more information, see
+the <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html"><uses-sdk> API
+guide</a>.</p>
diff --git a/docs/html/training/material/drawables.jd b/docs/html/training/material/drawables.jd
new file mode 100644
index 0000000..8d7f453
--- /dev/null
+++ b/docs/html/training/material/drawables.jd
@@ -0,0 +1,119 @@
+page.title=Working with Drawables
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>This lesson teaches you to</h2>
+<ol>
+ <li><a href="#DrawableTint">Tint Drawable Resources</a></li>
+ <li><a href="#ColorExtract">Extract Prominent Colors from an Image</a></li>
+ <li><a href="#VectorDrawables">Create Vector Drawables</a></li>
+</ol>
+<h2>You should also read</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
+</ul>
+</div>
+</div>
+
+<p>The following capabilities for drawables help you implement material design in your apps:</p>
+
+<ul>
+<li>Drawable tinting</li>
+<li>Prominent color extraction</li>
+<li>Vector drawables</li>
+</ul>
+
+<p>This lesson shows you how to use these features in your app.</p>
+
+
+<h2 id="DrawableTint">Tint Drawable Resources</h2>
+
+<p>With Android 5.0 (API level 21) and above, you can tint bitmaps and nine-patches defined as
+alpha masks. You can tint them with color resources or theme attributes that resolve to color
+resources (for example, <code>?android:attr/colorPrimary</code>). Usually, you create these assets
+only once and color them automatically to match your theme.</p>
+
+<p>You can apply a tint to {@link android.graphics.drawable.BitmapDrawable} or {@link
+android.graphics.drawable.NinePatchDrawable} objects with the {@code setTint()} method. You can
+also set the tint color and mode in your layouts with the <code>android:tint</code> and
+<code>android:tintMode</code> attributes.</p>
+
+
+<h2 id="ColorExtract">Extract Prominent Colors from an Image</h2>
+
+<p>The Android Support Library r21 and above includes the {@link
+android.support.v7.graphics.Palette} class, which lets you extract prominent colors from an image.
+This class extracts the following prominent colors:</p>
+
+<ul>
+<li>Vibrant</li>
+<li>Vibrant dark</li>
+<li>Vibrant light</li>
+<li>Muted</li>
+<li>Muted dark</li>
+<li>Muted light</li>
+</ul>
+
+<p>To extract these colors, pass a {@link android.graphics.Bitmap} object to the
+{@link android.support.v7.graphics.Palette#generate Palette.generate()} static method in the
+background thread where you load your images. If you can't use that thread, call the
+{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} method and
+provide a listener instead.</p>
+
+<p>You can retrieve the prominent colors from the image using the getter methods in the
+<code>Palette</code> class, such as <code>Palette.getVibrantColor</code>.</p>
+
+<p>To use the {@link android.support.v7.graphics.Palette} class in your project, add the following
+<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependency</a> to your
+app's module:</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:+'
+}
+</pre>
+
+<p>For more information, see the API reference for the {@link android.support.v7.graphics.Palette}
+class.</p>
+
+
+<h2 id="VectorDrawables">Create Vector Drawables</h2>
+
+<p>In Android 5.0 (API Level 21) and above, you can define vector drawables, which scale without
+losing definition. You need only one asset file for a vector image, as opposed to an asset file for
+each screen density in the case of bitmap images. To create a vector image, you define the details
+of the shape inside a <code><vector></code> XML element.</p>
+
+<p>The following example defines a vector image with the shape of a heart:</p>
+
+<pre>
+<!-- res/drawable/heart.xml -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ <!-- intrinsic size of the drawable -->
+ android:height="256dp"
+ android:width="256dp"
+ <!-- size of the virtual canvas -->
+ android:viewportWidth="32"
+ android:viewportHeight="32">
+
+ <!-- draw a path -->
+ <path android:fillColor="#8fff"
+ android:pathData="M20.5,9.5
+ c-1.955,0,-3.83,1.268,-4.5,3
+ c-0.67,-1.732,-2.547,-3,-4.5,-3
+ C8.957,9.5,7,11.432,7,14
+ c0,3.53,3.793,6.257,9,11.5
+ c5.207,-5.242,9,-7.97,9,-11.5
+ C25,11.432,23.043,9.5,20.5,9.5z" />
+</vector>
+</pre>
+
+<p>Vector images are represented in Android as {@link android.graphics.drawable.VectorDrawable}
+objects. For more information about the <code>pathData</code> syntax, see the <a
+href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path reference</a>. For more information
+about animating the properties of vector drawables, see
+<a href="{@docRoot}training/material/animations.html#AnimVector">Animating Vector Drawables</a>.</p>
diff --git a/docs/html/training/material/get-started.jd b/docs/html/training/material/get-started.jd
new file mode 100644
index 0000000..b6088eb
--- /dev/null
+++ b/docs/html/training/material/get-started.jd
@@ -0,0 +1,173 @@
+page.title=Getting Started
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>This lesson teaches you to</h2>
+<ol>
+ <li><a href="#ApplyTheme">Apply the Material Theme</a></li>
+ <li><a href="#Layouts">Design Your Layouts</a></li>
+ <li><a href="#Depth">Specify Elevation in Your Views</a></li>
+ <li><a href="#ListsCards">Create Lists and Cards</a></li>
+ <li><a href="#Animations">Customize Your Animations</a></li>
+</ol>
+<h2>You should also read</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>To create apps with material design:</p>
+
+<ol>
+ <li style="margin-bottom:10px">
+ Review the <a href="http://www.google.com/design/spec">material design specification</a>.</li>
+ <li style="margin-bottom:10px">
+ Apply the material <strong>theme</strong> to your app.</li>
+ <li style="margin-bottom:10px">
+ Create your <strong>layouts</strong> following material design guidelines.</li>
+ <li style="margin-bottom:10px">
+ Specify the <strong>elevation</strong> of your views to cast shadows.</li>
+ <li style="margin-bottom:10px">
+ Use system <strong>widgets</strong> for lists and cards.</li>
+ <li style="margin-bottom:10px">
+ Customize the <strong>animations</strong> in your app.</li>
+</ol>
+
+<h3>Maintain backward compatibility</h3>
+
+<p>You can add many material design features to your app while maintaining compatibility with
+versions of Android earlier than 5.0. For more information, see
+<a href="{@docRoot}training/material/compatibility.html">Maintaining Compatibility</a>.</p>
+
+<h3>Update your app with material design</h3>
+
+<p>To update an existing app to incorporate material design, update your layouts following
+material design guidelines. Also make sure to incorporate depth, touch feedback, and
+animations.</p>
+
+<h3>Create new apps with material design</h3>
+
+<p>If you are creating a new app with material design features, the <a
+href="http://www.google.com/design/spec">material design guidelines</a> provide you with a
+cohesive design framework. Follow those guidelines and use the new functionality in the Android
+framework to design and develop your app.</p>
+
+
+<h2 id="ApplyTheme">Apply the Material Theme</h2>
+
+<p>To apply the material theme in your app, specify a style that inherits from
+<code>android:Theme.Material</code>:</p>
+
+<pre>
+<!-- res/values/styles.xml -->
+<resources>
+ <!-- your theme inherits from the material theme -->
+ <style name="AppTheme" parent="android:Theme.Material">
+ <!-- theme customizations -->
+ </style>
+</resources>
+</pre>
+
+<p>The material theme provides updated system widgets that let you set their color palette and
+default animations for touch feedback and activity transitions. For more details, see
+<a href="{@docRoot}training/material/theme.html">Using the Material Theme</a>.</p>
+
+
+<h2 id="Layouts">Design Your Layouts</h2>
+
+<p>In addition to applying and customizing the material theme, your layouts should conform to
+the <a href="http://www.google.com/design/spec">material design guidelines</a>. When you design
+your layouts, pay special attention to the following:</p>
+
+<ul>
+<li>Baseline grids</li>
+<li>Keylines</li>
+<li>Spacing</li>
+<li>Touch target size</li>
+<li>Layout structure</li>
+</ul>
+
+
+<h2 id="Depth">Specify Elevation in Your Views</h2>
+
+<p>Views can cast shadows, and the elevation value of a view
+determines the size of its shadow and its drawing order. To set the elevation of a view, use the
+<code>android:elevation</code> attribute in your layouts:</p>
+
+<pre>
+<TextView
+ android:id="@+id/my_textview"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:text="@string/next"
+ android:background="@color/white"
+ android:elevation="5dp" />
+</pre>
+
+<p>The new <code>translationZ</code> property lets you create animations that reflect temporary
+changes in the elevation of a view. Elevation changes can be useful when
+<a href="{@docRoot}training/material/animations.html#ViewState">responding to touch
+gestures</a>.</p>
+
+<p>For more details, see <a href="{@docRoot}training/material/shadows-clipping.html">Defining
+Shadows and Clipping Views</a>.</p>
+
+
+<h2 id="ListsCards">Create Lists and Cards</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} is a more pluggable version of {@link
+android.widget.ListView} that supports different layout types and provides performance improvements.
+{@link android.support.v7.widget.CardView} lets you show pieces of information inside cards with
+a consistent look across apps. The following code example demonstrates how to include a
+{@link android.support.v7.widget.CardView} in your layout:</p>
+
+<pre>
+<android.support.v7.widget.CardView
+ android:id="@+id/card_view"
+ android:layout_width="200dp"
+ android:layout_height="200dp"
+ card_view:cardCornerRadius="3dp">
+ ...
+</android.support.v7.widget.CardView>
+</pre>
+
+<p>For more information, see <a href="{@docRoot}training/material/lists-cards.html">Creating Lists
+and Cards</a>.</p>
+
+
+<h2 id="Animations">Customize Your Animations</h2>
+
+<p>Android 5.0 (API level 21) includes new APIs to create custom animations in your app.
+For example, you can enable activity transitions and define an exit transition inside an
+activity:</p>
+
+<pre>
+public class MyActivity extends Activity {
+
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ // enable transitions
+ getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
+ setContentView(R.layout.activity_my);
+ }
+
+ public void onSomeButtonClicked(View view) {
+ getWindow().setExitTransition(new Explode());
+ Intent intent = new Intent(this, MyOtherActivity.class);
+ startActivity(intent,
+ ActivityOptions
+ .makeSceneTransitionAnimation(this).toBundle());
+ }
+}
+</pre>
+
+<p>When you start another activity from this activity, the exit transition is activated.</p>
+
+<p>To learn more about the new animation APIs, see <a
+href="{@docRoot}training/material/animations.html">Defining Custom Animations</a>.</p>
diff --git a/docs/html/preview/material/images/RecyclerView.png b/docs/html/training/material/images/RecyclerView.png
similarity index 100%
rename from docs/html/preview/material/images/RecyclerView.png
rename to docs/html/training/material/images/RecyclerView.png
Binary files differ
diff --git a/docs/html/training/material/images/SceneTransition.png b/docs/html/training/material/images/SceneTransition.png
new file mode 100644
index 0000000..ae82820
--- /dev/null
+++ b/docs/html/training/material/images/SceneTransition.png
Binary files differ
diff --git a/docs/html/preview/material/images/ThemeColors.png b/docs/html/training/material/images/ThemeColors.png
similarity index 85%
rename from docs/html/preview/material/images/ThemeColors.png
rename to docs/html/training/material/images/ThemeColors.png
index 53f695d..b3c570b 100644
--- a/docs/html/preview/material/images/ThemeColors.png
+++ b/docs/html/training/material/images/ThemeColors.png
Binary files differ
diff --git a/docs/html/training/material/images/shadows-depth.png b/docs/html/training/material/images/shadows-depth.png
new file mode 100644
index 0000000..26b6b4a
--- /dev/null
+++ b/docs/html/training/material/images/shadows-depth.png
Binary files differ
diff --git a/docs/html/training/material/index.jd b/docs/html/training/material/index.jd
new file mode 100644
index 0000000..682926e
--- /dev/null
+++ b/docs/html/training/material/index.jd
@@ -0,0 +1,58 @@
+page.title=Creating Apps with Material Design
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>Dependencies and Prerequisites</h2>
+ <ul>
+ <li>Android 5.0 (API level 21)</li>
+ <li>Android Studio 0.8</li>
+ </ul>
+</div>
+</div>
+
+<p>Material design is a comprehensive guide for visual, motion, and interaction design across
+platforms and devices. To use material design in your Android apps, follow the guidelines
+described in the
+<a href="http://www.google.com/design/spec/material-design/introduction.html">material design
+specification</a> and use the new components and functionality available in Android 5.0
+(API level 21).</p>
+
+<p>This class shows you how to create material design apps with the following elements:</p>
+
+<ul>
+<li>The material theme</li>
+<li>Widgets for cards and lists</li>
+<li>Custom shadows and view clipping</li>
+<li>Vector drawables</li>
+<li>Custom animations</li>
+</ul>
+
+<p>This class also teaches you how to maintain compatibility with versions of Android earlier than
+5.0 (API level 21) when you use material design features in your app.</p>
+
+<h2>Lessons</h2>
+
+<dl>
+ <dt><a href="{@docRoot}training/material/get-started.html">Getting Started</a></dt>
+ <dd>Learn how to update your app with material design features.</dd>
+
+ <dt><a href="{@docRoot}training/material/theme.html">Using the Material Theme</a></dt>
+ <dd>Learn how to apply material design styles to your app.</dd>
+
+ <dt><a href="{@docRoot}training/material/lists-cards.html">Creating Lists and Cards</a></dt>
+ <dd>Learn how to create lists and cards with a consistent look and feel using system widgets.</dd>
+
+ <dt><a href="{@docRoot}training/material/shadows-clipping.html">Defining Shadows and Clipping Views</a></dt>
+ <dd>Learn how to set elevation for your views to create custom shadows and how to clip views.</dd>
+
+ <dt><a href="{@docRoot}training/material/drawables.html">Working with Drawables</a></dt>
+ <dd>Learn how to create vector drawables and how to tint drawable resources.</dd>
+
+ <dt><a href="{@docRoot}training/material/animations.html">Defining Custom Animations</a></dt>
+ <dd>Learn how to create custom animations for views and activity transitions with shared elements.</dd>
+
+ <dt><a href="{@docRoot}training/material/compatibility.html">Maintaining Compatibility</a></dt>
+ <dd>Learn how to maintain compatibility with platform versions earlier than Android 5.0.</dd>
+</dl>
diff --git a/docs/html/training/material/lists-cards.jd b/docs/html/training/material/lists-cards.jd
new file mode 100644
index 0000000..eb45f0d
--- /dev/null
+++ b/docs/html/training/material/lists-cards.jd
@@ -0,0 +1,266 @@
+page.title=Creating Lists and Cards
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>This lesson teaches you to</h2>
+<ol>
+ <li><a href="#RecyclerView">Create Lists</a></li>
+ <li><a href="#CardView">Create Cards</a></li>
+ <li><a href="#Dependencies">Add Dependencies</a></li>
+</ol>
+<h2>You should also read</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>To create complex lists and cards with material design styles in your apps, you can use the
+{@link android.support.v7.widget.RecyclerView} and {@link android.support.v7.widget.CardView}
+widgets.</p>
+
+
+<h2 id="RecyclerView">Create Lists</h2>
+
+<p>The {@link android.support.v7.widget.RecyclerView} widget is a more advanced and flexible
+version of {@link android.widget.ListView}. This widget is a container for displaying large data
+sets that can be scrolled very efficiently by maintaining a limited number of views. Use the
+{@link android.support.v7.widget.RecyclerView} widget when you have data collections whose elements
+change at runtime based on user action or network events.</p>
+
+<p>The {@link android.support.v7.widget.RecyclerView} class simplifies the display and handling of
+large data sets by providing:</p>
+
+<ul>
+ <li>Layout managers for positioning items</li>
+ <li>Default animations for common item operations, such as removal or addition of items</li>
+</ul>
+
+<p>You also have the flexibility to define custom layout managers and animations for {@link
+android.support.v7.widget.RecyclerView} widgets.</p>
+
+<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106"/>
+<p class="img-caption">
+<strong>Figure 1</strong>. The <code>RecyclerView</code> widget.
+</p>
+
+<p>To use the {@link android.support.v7.widget.RecyclerView} widget, you have to specify an
+adapter and a layout manager. To create an adapter, extend the {@link
+android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} class. The details
+of the implementation depend on the specifics of your dataset and the type of views. For more
+information, see the <a href="#RVExamples">examples</a> below.</p>
+
+<div style="float:right">
+<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426"/>
+<p class="img-caption" style="margin-left:8px">
+<strong>Figure 2</strong> - Lists with <code>RecyclerView</code>.
+</p>
+</div>
+
+<p>A <strong>layout manager</strong> positions item views inside a {@link
+android.support.v7.widget.RecyclerView} and determines when to reuse item views that are no
+longer visible to the user. To reuse (or <em>recycle</em>) a view, a layout manager may ask the
+adapter to replace the contents of the view with a different element from the dataset. Recycling
+views in this manner improves performance by avoiding the creation of unnecessary views or
+performing expensive {@link android.app.Activity#findViewById findViewById()} lookups.</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} provides these built-in layout managers:</p>
+
+<ul>
+<li>{@link android.support.v7.widget.LinearLayoutManager} shows items in a vertical or horizontal
+scrolling list.</li>
+<li>{@link android.support.v7.widget.GridLayoutManager} shows items in a grid.</li>
+<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} shows items in a staggered grid.</li>
+</ul>
+
+<p>To create a custom layout manager, extend the {@link
+android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} class.</p>
+
+<h3>Animations</h3>
+
+<p>Animations for adding and removing items are enabled by default in {@link
+android.support.v7.widget.RecyclerView}. To customize these animations, extend the
+{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} class and use
+the {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}
+method.</p>
+
+<h3 id="RVExamples">Examples</h3>
+
+<p>The following code example demonstrates how to add the
+{@link android.support.v7.widget.RecyclerView} to a layout:</p>
+
+<pre>
+<!-- A RecyclerView with some commonly used attributes -->
+<android.support.v7.widget.RecyclerView
+ android:id="@+id/my_recycler_view"
+ android:scrollbars="vertical"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"/>
+</pre>
+
+<p>Once you have added a {@link android.support.v7.widget.RecyclerView} widget to your layout,
+obtain a handle to the object, connect it to a layout manager, and attach an adapter for the data
+to be displayed:</p>
+
+<pre>
+public class MyActivity extends Activity {
+ private RecyclerView mRecyclerView;
+ private RecyclerView.Adapter mAdapter;
+ private RecyclerView.LayoutManager mLayoutManager;
+
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ setContentView(R.layout.my_activity);
+ mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
+
+ // use this setting to improve performance if you know that changes
+ // in content do not change the layout size of the RecyclerView
+ mRecyclerView.setHasFixedSize(true);
+
+ // use a linear layout manager
+ mLayoutManager = new LinearLayoutManager(this);
+ mRecyclerView.setLayoutManager(mLayoutManager);
+
+ // specify an adapter (see also next example)
+ mAdapter = new MyAdapter(myDataset);
+ mRecyclerView.setAdapter(mAdapter);
+ }
+ ...
+}
+</pre>
+
+<p>The adapter provides access to the items in your data set, creates views for items, and
+replaces the content of some of the views with new data items when the original item is no longer
+visible. The following code example shows a simple implementation for a data set that consists
+of an array of strings displayed using {@link android.widget.TextView} widgets:</p>
+
+<pre>
+public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
+ private String[] mDataset;
+
+ // Provide a reference to the views for each data item
+ // Complex data items may need more than one view per item, and
+ // you provide access to all the views for a data item in a view holder
+ public static class ViewHolder extends RecyclerView.ViewHolder {
+ // each data item is just a string in this case
+ public TextView mTextView;
+ public ViewHolder(TextView v) {
+ super(v);
+ mTextView = v;
+ }
+ }
+
+ // Provide a suitable constructor (depends on the kind of dataset)
+ public MyAdapter(String[] myDataset) {
+ mDataset = myDataset;
+ }
+
+ // Create new views (invoked by the layout manager)
+ @Override
+ public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
+ int viewType) {
+ // create a new view
+ View v = LayoutInflater.from(parent.getContext())
+ .inflate(R.layout.my_text_view, parent, false);
+ // set the view's size, margins, paddings and layout parameters
+ ...
+ ViewHolder vh = new ViewHolder(v);
+ return vh;
+ }
+
+ // Replace the contents of a view (invoked by the layout manager)
+ @Override
+ public void onBindViewHolder(ViewHolder holder, int position) {
+ // - get element from your dataset at this position
+ // - replace the contents of the view with that element
+ holder.mTextView.setText(mDataset[position]);
+
+ }
+
+ // Return the size of your dataset (invoked by the layout manager)
+ @Override
+ public int getItemCount() {
+ return mDataset.length;
+ }
+}
+</pre>
+
+
+<div style="float:right;margin-top:15px;margin-left:30px">
+<img src="{@docRoot}design/material/images/card_travel.png" alt="" width="225" height="383">
+<p class="img-caption" style="margin-left:12px">
+<strong>Figure 3</strong>. Card examples.
+</p>
+</div>
+
+<h2 id="CardView">Create Cards</h2>
+
+<p>{@link android.support.v7.widget.CardView} extends the {@link android.widget.FrameLayout} class
+and lets you show information inside cards that have a consistent look across the platform. {@link
+android.support.v7.widget.CardView} widgets can have shadows and rounded corners.</p>
+
+<p>To create a card with a shadow, use the <code>card_view:cardElevation</code> attribute.
+{@link android.support.v7.widget.CardView} uses real elevation and dynamic shadows on Android 5.0
+(API level 21) and above and falls back to a programmatic shadow implementation on earlier versions.
+For more information, see <a href="{@docRoot}training/material/compatibility.html">Maintaining
+Compatibility</a>.</p>
+
+<p>Use these properties to customize the appearance of the
+{@link android.support.v7.widget.CardView} widget:</p>
+
+<ul>
+ <li>To set the corner radius in your layouts, use the <code>card_view:cardCornerRadius</code>
+ attribute.</li>
+ <li>To set the corner radius in your code, use the <code>CardView.setRadius</code> method.</li>
+ <li>To set the background color of a card, use the <code>card_view:cardBackgroundColor</code>
+attribute.</li>
+</ul>
+
+<p>The following code example shows you how to include a {@link android.support.v7.widget.CardView}
+widget in your layout:</p>
+
+<pre>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+ xmlns:tools="http://schemas.android.com/tools"
+ xmlns:card_view="http://schemas.android.com/apk/res-auto"
+ ... >
+ <!-- A CardView that contains a TextView -->
+ <android.support.v7.widget.CardView
+ xmlns:card_view="http://schemas.android.com/apk/res-auto"
+ android:id="@+id/card_view"
+ android:layout_gravity="center"
+ android:layout_width="200dp"
+ android:layout_height="200dp"
+ card_view:cardCornerRadius="4dp">
+
+ <TextView
+ android:id="@+id/info_text"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent" />
+ </android.support.v7.widget.CardView>
+</LinearLayout>
+</pre>
+
+<p>For more information, see the API reference for {@link android.support.v7.widget.CardView}.</p>
+
+
+<h2 id="Dependencies">Add Dependencies</h2>
+
+<p>The {@link android.support.v7.widget.RecyclerView} and {@link android.support.v7.widget.CardView}
+widgets are part of the <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support
+Libraries</a>. To use these widgets in your project, add these
+<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependencies</a> to your
+app's module:</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:+'
+ compile 'com.android.support:recyclerview-v7:+'
+}
+</pre>
diff --git a/docs/html/training/material/shadows-clipping.jd b/docs/html/training/material/shadows-clipping.jd
new file mode 100644
index 0000000..f58d780
--- /dev/null
+++ b/docs/html/training/material/shadows-clipping.jd
@@ -0,0 +1,127 @@
+page.title=Defining Shadows and Clipping Views
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>This lesson teaches you to</h2>
+<ol>
+ <li><a href="#Elevation">Assign Elevation to Your Views</a></li>
+ <li><a href="#Shadows">Customize View Shadows and Outlines</a></li>
+ <li><a href="#Clip">Clip Views</a></li>
+</ol>
+<h2>You should also read</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
+</ul>
+</div>
+</div>
+
+<p>Material design introduces depth for UI elements. Depth helps users understand the relative
+importance of each element and focus their attention to the task at hand.</p>
+
+<p>The elevation of a view, represented by the Z property, determines the size of its shadow:
+views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane; they
+don't cast shadows on other views placed below them and above the Z=0 plane.</p>
+
+<p>Views with higher Z values occlude views with lower Z values. However, the Z value of a view
+does not affect the view's size.</p>
+
+<p>Elevation is also useful to create animations where widgets temporarily rise above the
+view plane when performing some action.</p>
+
+
+<h2 id="Elevation">Assign Elevation to Your Views</h2>
+
+<p>The Z value for a view has two components, elevation and translation. The elevation is the
+static component, and the translation is used for animations:</p>
+
+<p><code>Z = elevation + translationZ</code></p>
+
+<img src="{@docRoot}training/material/images/shadows-depth.png" width="680" height="177" alt=""/>
+<p class="img-caption"><strong>Figure 1</strong> - Shadows for different view elevations.</p>
+
+<p>To set the elevation of a view in a layout definition, use the <code>android:elevation</code>
+attribute. To set the elevation of a view in the code of an activity, use the
+{@link android.view.View#setElevation View.setElevation()} method.</p>
+
+<p>To set the translation of a view, use the {@link android.view.View#setTranslationZ
+View.setTranslationZ()} method.</p>
+
+<p>The new {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} and {@link
+android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} methods enable
+you to easily animate the elevation of views. For more information, see the API reference for
+{@link android.view.ViewPropertyAnimator} and the <a
+href="{@docRoot}guide/topics/graphics/prop-animation.html">Property Animation</a> developer
+guide.</p>
+
+<p>You can also use a {@link android.animation.StateListAnimator} to
+specify these animations in a declarative way. This is especially useful for cases where state
+changes trigger animations, like when a user presses a button. For more information, see
+<a href="{@docRoot}training/material/animations.html#ViewState">Animate View State Changes</a></p>.
+
+<p>The Z values are measured in the same units as the X and Y values.</p>
+
+
+<h2 id="Shadows">Customize View Shadows and Outlines</h2>
+
+<p>The bounds of a view's background drawable determine the default shape of its shadow.
+<strong>Outlines</strong> represent the outer shape of a graphics object and define the ripple
+area for touch feedback.</p>
+
+<p>Consider this view, defined with a background drawable:</p>
+
+<pre>
+<TextView
+ android:id="@+id/myview"
+ ...
+ android:elevation="2dp"
+ android:background="@drawable/myrect" />
+</pre>
+
+<p>The background drawable is defined as a rectangle with rounded corners:</p>
+
+<pre>
+<!-- res/drawable/myrect.xml -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+ android:shape="rectangle">
+ <solid android:color="#42000000" />
+ <corners android:radius="5dp" />
+</shape>
+</pre>
+
+<p>The view casts a shadow with rounded corners, since the background drawable defines the
+view's outline. Providing a custom outline overrides the default shape of a view's shadow.</p>
+
+<p>To define a custom outline for a view in your code:<p>
+
+<ol>
+<li>Extend the {@link android.view.ViewOutlineProvider} class.</li>
+<li>Override the {@link android.view.ViewOutlineProvider#getOutline getOutline()} method.</li>
+<li>Assign the new outline provider to your view with the {@link
+android.view.View#setOutlineProvider View.setOutlineProvider()} method.</li>
+</ol>
+
+<p>You can create oval and rectangular outlines with rounded corners using the methods in the
+{@link android.graphics.Outline} class. The default outline provider for views obtains the outline
+from the view's background. To prevent a view from casting a shadow, set its outline provider
+to <code>null</code>.</p>
+
+
+<h2 id="Clip">Clip Views</h2>
+
+<p>Clipping views enables you to easily change the shape of a view. You can clip views for
+consistency with other design elements or to change the shape of a view in response to user input.
+You can clip a view to its outline area using the {@link android.view.View#setClipToOutline
+View.setClipToOutline()} method or the <code>android:clipToOutline</code> attribute. Only
+rectangle, circle, and round rectangle outlines support clipping, as determined by the
+{@link android.graphics.Outline#canClip Outline.canClip()} method.</p>
+
+<p>To clip a view to the shape of a drawable, set the drawable as the background of the view
+(as shown above) and call the {@link android.view.View#setClipToOutline View.setClipToOutline()}
+method.</p>
+
+<p>Clipping views is an expensive operation, so don't animate the shape you use to
+clip a view. To achieve this effect, use the <a
+href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a> animation.</p>
diff --git a/docs/html/training/material/theme.jd b/docs/html/training/material/theme.jd
new file mode 100644
index 0000000..17894f6
--- /dev/null
+++ b/docs/html/training/material/theme.jd
@@ -0,0 +1,131 @@
+page.title=Using the Material Theme
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>This lesson teaches you to</h2>
+<ol>
+ <li><a href="#ColorPalette">Customize the Color Palette</a></li>
+ <li><a href="#StatusBar">Customize the Status Bar</a></li>
+ <li><a href="#Inheritance">Theme Individual Views</a></li>
+</ol>
+<h2>You should also read</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>The new material theme provides:</p>
+
+<ul>
+ <li>System widgets that let you set their color palette</li>
+ <li>Touch feedback animations for the system widgets</li>
+ <li>Activity transition animations</li>
+</ul>
+
+<p>You can customize the look of the material theme
+according to your brand identity with a color palette you control. You can tint the action bar and
+the status bar using theme attributes, as shown in <a href="#fig3">Figure 3</a>.</p>
+
+<p>The system widgets have a new design and touch feedback animations. You can customize the
+color palette, the touch feedback animations, and the activity transitions for your app.</p>
+
+<p>The material theme is defined as:</p>
+
+<ul>
+ <li><code>@android:style/Theme.Material</code> (dark version)</li>
+ <li><code>@android:style/Theme.Material.Light</code> (light version)</li>
+ <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+</ul>
+
+<p>For a list of material styles that you can use, see the API reference for
+{@link android.R.style R.style}.</p>
+
+<!-- two columns, dark/light material theme example -->
+<div style="width:700px;margin-top:25px;margin-bottom:10px">
+<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
+ <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238">
+ <div style="width:170px;margin:0 auto">
+ <p style="margin-top:8px;font-size:12px"><strong>Figure 1</strong>. Dark material theme</p>
+ </div>
+</div>
+<div style="float:left;width:250px;margin-right:0px;">
+ <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238">
+ <div style="width:170px;margin:0 auto">
+ <p style="margin-top:8px;font-size:12px"><strong>Figure 2</strong>. Light material theme</p>
+ </div>
+</div>
+<br style="clear:left">
+</div>
+
+<p class="note">
+<strong>Note:</strong> The material theme is only available in Android 5.0 (API level 21) and
+above. The <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>
+provide themes with material design styles for some widgets and support for customizing the color
+palette. For more information, see
+<a href="{@docRoot}training/material/compatibility.html">Maintaining Compatibility</a>.
+</p>
+
+
+<h2 id="ColorPalette">Customize the Color Palette</h2>
+
+<p style="margin-bottom:30px">To customize the theme's base colors to fit your brand, define
+your custom colors using theme attributes when you inherit from the material theme:</p>
+
+<pre>
+<resources>
+ <!-- inherit from the material theme -->
+ <style name="AppTheme" parent="android:Theme.Material">
+ <!-- Main theme colors -->
+ <!-- your app branding color for the app bar -->
+ <item name="android:colorPrimary">@color/primary</item>
+ <!-- darker variant for the status bar and contextual app bars -->
+ <item name="android:colorPrimaryDark">@color/primary_dark</item>
+ <!-- theme UI controls like checkboxes and text fields -->
+ <item name="android:colorAccent">@color/accent</item>
+ </style>
+</resources>
+</pre>
+
+<div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3">
+<img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445"/>
+<p class="img-caption" style="margin-bottom:0px">
+<strong>Figure 3.</strong> Customizing the material theme.</p>
+</div>
+
+
+<h2 id="StatusBar">Customize the Status Bar</h2>
+
+<p>The material theme lets you easily customize the status bar, so you can specify a
+color that fits your brand and provides enough contrast to show the white status icons. To
+set a custom color for the status bar, use the <code>android:statusBarColor</code> attribute when
+you extend the material theme. By default, <code>android:statusBarColor</code> inherits the
+value of <code>android:colorPrimaryDark</code>.</p>
+
+<p>You can also draw behind the status bar yourself. For example, if you want to show
+the status bar transparently over a photo, with a subtle dark gradient to ensure the white
+status icons are visible. To do so, set the <code>android:statusBarColor</code> attribute to
+<code>@android:color/transparent</code> and adjust the window flags as required. You can
+also use the {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} method for
+animations or fading.</p>
+
+<p class="note">
+<strong>Note:</strong> The status bar should almost always have a clear delineation from the
+primary toolbar, except for cases where you show edge-to-edge rich imagery or media content behind
+these bars and when you use a gradient to ensure that the icons are still visible.
+</p>
+
+<p>When you customize the navigation and status bars, either make them both transparent or modify
+only the status bar. The navigation bar should remain black in all other cases.</p>
+
+
+<h2 id="Inheritance">Theme Individual Views</h3>
+
+<p>Elements in XML layout definitions can specify the <code>android:theme</code> attribute,
+which references a theme resource. This attribute modifies the theme for the element and any
+child elements, which is useful for altering theme color palettes in a specific portion
+of an interface.</p>
diff --git a/docs/html/training/training_toc.cs b/docs/html/training/training_toc.cs
index 12685ba..4cec623 100644
--- a/docs/html/training/training_toc.cs
+++ b/docs/html/training/training_toc.cs
@@ -836,9 +836,9 @@
</li>
</ul>
</li>
-
<!-- End Building for wearables -->
+
<!-- Start: Building for TV -->
<li class="nav-section">
<div class="nav-section-header">
@@ -1237,6 +1237,45 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header">
+ <a href="<?cs var:toroot ?>training/material/index.html"
+ description=
+ "How to implement material design on Android."
+ >Creating Apps with Material Design</a>
+ </div>
+ <ul>
+ <li><a href="<?cs var:toroot ?>training/material/get-started.html">
+ Getting Started
+ </a>
+ </li>
+ <li><a href="<?cs var:toroot ?>training/material/theme.html">
+ Using the Material Theme
+ </a>
+ </li>
+ <li><a href="<?cs var:toroot ?>training/material/lists-cards.html">
+ Creating Lists and Cards
+ </a>
+ </li>
+ <li><a href="<?cs var:toroot ?>training/material/shadows-clipping.html">
+ Defining Shadows and Clipping Views
+ </a>
+ </li>
+ <li><a href="<?cs var:toroot ?>training/material/drawables.html">
+ Working with Drawables
+ </a>
+ </li>
+ <li><a href="<?cs var:toroot ?>training/material/animations.html">
+ Defining Custom Animations
+ </a>
+ </li>
+ <li><a href="<?cs var:toroot ?>training/material/compatibility.html">
+ Maintaining Compatibility
+ </a>
+ </li>
+ </ul>
+ </li>
+
</ul>
</li>
<!-- End User Interface -->
