Merge "Localization of Android Material Design pages. Bug: 19125767" into lmp-docs
diff --git a/docs/html-intl/intl/es/design/material/index.jd b/docs/html-intl/intl/es/design/material/index.jd
new file mode 100644
index 0000000..35cd613
--- /dev/null
+++ b/docs/html-intl/intl/es/design/material/index.jd
@@ -0,0 +1,43 @@
+page.title=Diseño
+page.viewport_width=970
+section.landing=original
+meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
+header.hide=1
+footer.hide=1
+
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 0;
+ top: 42px;
+ width: 266px;
+
+}
+#hero-image {
+ padding-left:68px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ <span itemprop="description">Bienvenido a <strong>Diseño Android</strong>, tu lugar para aprender a diseñar aplicaciones de Android excepcionales.</span>
+ <br><br>
+ ¿Quieres saber lo que <strong>Android 5.0</strong> tiene para los diseñadores? Consulta <a href="{@docRoot}design/patterns/new.html">Nuevo en Android</a>.<br><br>
+ <a href="/design/get-started/creative-vision.html" class="landing-page-link">Visión creativa</a>
+ </div>
+ <a id="hero-image" href="/design/get-started/creative-vision.html"> <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">Diseño Material</h2>
+<p>Android 5.0 introduce una metáfora de diseño inspirada en papel y tinta, que proporciona un sentido distendido de lo táctil.
+</p>
+<p><a class="white" href="{@docRoot}design/material/index.html">Obtener más información</a></p>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/docs/html-intl/intl/es/training/material/animations.jd b/docs/html-intl/intl/es/training/material/animations.jd
new file mode 100644
index 0000000..7a13583
--- /dev/null
+++ b/docs/html-intl/intl/es/training/material/animations.jd
@@ -0,0 +1,456 @@
+page.title=Definir animaciones personalizadas
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lección te enseña a</h2>
+<ol>
+ <li><a href="#Touch">Personalizar la respuesta táctil</a></li>
+ <li><a href="#Reveal">Usar el efecto Revelar</a></li>
+ <li><a href="#Transitions">Personalizar transiciones de actividades</a></li>
+ <li><a href="#ViewState">Animar cambios de estados de las vistas</a></li>
+ <li><a href="#AnimVector">Animar interfaces dibujables en vector</a></li>
+</ol>
+<h2>También deberías leer</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Diseño material en Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Las animaciones en Material Design proporcionan a los usuarios comentarios sobre sus acciones y continuidad visual a medida que los usuarios interactúan con su aplicación. El tema material proporciona algunas animaciones predeterminadas para botones y transiciones de actividades; Android 5.0 (nivel de API 21) y superior te permite personalizar estas animaciones y crear unas nuevas:</p>
+
+<ul>
+<li>Respuesta táctil</li>
+<li>Efecto revelar circular</li>
+<li>Transiciones de actividades</li>
+<li>Movimiento curvo</li>
+<li>Ver cambios de estados</li>
+</ul>
+
+
+<h2 id="Touch">Personalizar la respuesta táctil</h2>
+
+<p>La respuesta táctil en Material Design proporciona una confirmación visual instantánea en el punto de contacto cuando los usuarios interactúan con los elementos de la IU (interfaz de usuario, en inglés: UI, User Interface). Las animaciones predeterminadas de la respuesta táctil para botones usan la nueva clase {@link android.graphics.drawable.RippleDrawable}, que realiza una transición entre diferentes estados con un efecto de ondas.</p>
+
+<p>En la mayoría de los casos, debes aplicar esta funcionalidad en tu vista XML al especificar el fondo de la vista como:</p>
+
+<ul>
+<li><code>?android:attr/selectableItemBackground</code> para un efecto de ondas con límites</li>
+<li><code>?android:attr/selectableItemBackgroundBorderless</code> para un efecto de ondas que se extiende más allá de la vista</li>
+</ul>
+
+<p class="note"><strong>Nota:</strong> <code>selectableItemBackgroundBorderless</code> es un nuevo atributo introducido en el nivel de API 21.</p>
+
+
+<p>Alternativamente, puedes definir un {@link android.graphics.drawable.RippleDrawable} como un recurso XML que usa el elemento <code>ripple</code>.</p>
+
+<p>Puedes asignar un color a los objetos {@link android.graphics.drawable.RippleDrawable}. Para cambiar el color predeterminado de la respuesta táctil, usa el atributo <code>android:colorControlHighlight</code> del tema.</p>
+
+<p>Para más información, consulta la referencia de la API para la clase {@link android.graphics.drawable.RippleDrawable}.</p>
+
+
+<h2 id="Reveal">Usar el efecto revelar</h2>
+
+<p>Las animaciones del efecto revelar proporcionan a los usuarios una continuidad visual cuando muestras u ocultas un grupo de elementos de la IU. El método {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} te permite animar un círculo de recorte para revelar u ocultar una vista.</p>
+
+<p>Para revelar una vista previamente invisible usando este efecto:</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 = Math.max(myView.getWidth(), myView.getHeight());
+
+// create the animator for this view (the start radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
+
+// make the view visible and start the animation
+myView.setVisibility(View.VISIBLE);
+anim.start();
+</pre>
+
+<p>Para ocultar una vista previamente invisible usando este efecto:</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">Personalizar transiciones de actividades</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>Figura 1</strong>: una transición con elementos compartidos.</p>
+ <em>Para volver a reproducir la película, haz clic en la pantalla del dispositivo.</em>
+ </div>
+</div>
+
+<p>Las transiciones de actividades en las aplicaciones de Material Design proporcionan conexiones visuales entre diferentes estados mediante el movimiento y las transformaciones entre elementos comunes. Puedes especificar las animaciones personalizadas para entrar y salir de las transiciones y para las transiciones de elementos compartidos entre actividades.</p>
+
+<ul>
+<li>Una transición de <strong>entrada</strong> determina cómo entran en escena las vistas en una actividad. Por ejemplo, en la transición de entrada <em>expandir</em>, las vistas entran en escena desde el exterior y vuelan hacia el centro de la pantalla.</li>
+
+<li>Una transición de <strong>salida</strong> determina cómo salen de escena las vistas en una actividad. Por ejemplo, en la transición de entrada <em>expandir</em>, las vistas salen de escena lejos del centro.</li>
+
+<li>Una transición <strong>elementos compartidos</strong> determina cómo las vistas que están compartidas entre dos actividades realizan una transición entre las mismas. Por ejemplo, si dos actividades tienen la misma imagen en diferentes posiciones y tamaños, la transición de elementos compartidos <em>changeImageTransform</em> traduce y escala la imagen suavemente entre estas actividades.</li>
+</ul>
+
+<p>Android 5.0 (nivel de API 21) admite estas transiciones de entrada y salida:</p>
+
+<ul>
+<li><em>expandir</em>: desplaza vistas hacia adentro o hacia afuera del centro de la escena.</li>
+<li><em>deslizar</em>: desplaza vistas hacia adentro o hacia afuera de uno de los bordes de la escena.</li>
+<li><em>difuminar</em>: agrega o quita una vista de la escena al cambiar su opacidad.</li>
+</ul>
+
+<p>Toda transición que extiende la clase {@link android.transition.Visibility} está admitida como una transición de entrada o salida. Para más información, consulta la referencia de la API para la clase {@link android.transition.Transition}.</p>
+
+<p>Android 5.0 (nivel de API 21) también admite estas transiciones de elementos compartidos:</p>
+
+<ul>
+<li><em>changeBounds</em>: anima los cambios en los límites de las vistas de destino.</li>
+<li><em>changeClipBounds</em>: anima los cambios en los límites de recorte de las vistas de destino.</li>
+<li><em>changeTransform</em>: anima los cambios en escala y rotación de las vistas de destino.</li>
+<li><em>changeImageTransform</em>: anima los cambios de tamaño y escala de imágenes de destino.</li>
+</ul>
+
+<p>Cuando habilitas las transiciones de actividades en tu aplicación, la transición entre difuminados predeterminada se activa entre las actividades que ingresan y salen.</p>
+
+<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
+<p class="img-caption">
+ <strong>Figura 2</strong>: una transición de escena con un elemento compartido.
+</p>
+
+<h3>Especificar transiciones personalizadas</h3>
+
+<p>Primero, habilita las transiciones de contenido de la ventana con el atributo <code>android:windowContentTransitions</code> cuando definas un estilo que herede del tema material. También puedes especificar transiciones de entrada, salida y elementos compartidos en tu definición de estilo:</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>La transición <code>change_image_transform</code> en este ejemplo se define en la siguiente forma:</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>El elemento <code>changeImageTransform</code> corresponde a la clase {@link android.transition.ChangeImageTransform}. Para más información, consulta la referencia de la API para {@link android.transition.Transition}.</p>
+
+<p>Para habilitar las transiciones del contenido de las ventanas en tu código haz una llamada al método {@link android.view.Window#requestFeature Window.requestFeature()}:</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>Para especificar transiciones en tu código, llama estos métodos con un objeto {@link android.transition.Transition}:</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>Los métodos {@link android.view.Window#setExitTransition setExitTransition()} y {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} definen la transición de salida para la actividad de llamada. Los métodos {@link android.view.Window#setEnterTransition setEnterTransition()} y {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} definen la transición de entrada para la actividad requerida.</p>
+
+<p>Para obtener el efecto completo de una transición, debes habilitar las transiciones de contenido de las ventanas en las actividades de llamada o requeridas. De lo contrario, la actividad de llamada comenzará la transición de salida, pero luego observarás una ventana de transición (como escalar o difuminar).</p>
+
+<p>Para comenzar una transición de entrada lo antes posible, usa el método {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} en la actividad requerida. Esto te permite tener transiciones de entrada más intensas.</p>
+
+<h3>Iniciar una actividad mediante el uso de transiciones</h3>
+
+<p>Si permites transiciones y estableces una transición de salida para una actividad, la transición se activa cuando inicias otra actividad como alguna de las siguientes:</p>
+
+<pre>
+startActivity(intent,
+ ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
+</pre>
+
+<p>Si estableciste una transición de entrada para la segunda actividad, la transición también se activa cuando se inicia la actividad. Para deshabilitar las transiciones cuando inicias otra actividad, proporciona una agrupación de opciones <code>null</code>.</p>
+
+<h3>Iniciar una actividad con un elemento compartido</h3>
+
+<p>Para realizar una animación de transiciones de pantallas entre dos actividades que tienen un elemento compartido:</p>
+
+<ol>
+<li>Habilita las transiciones de contenido de ventanas en tu tema.</li>
+<li>Especifica una transición de elementos compartidos en tu estilo.</li>
+<li>Define tu transición como un recurso XML.</li>
+<li>Asigna un nombre en común para los elementos compartidos en ambos diseños con el atributo <code>android:transitionName</code>.</li>
+<li>Usa el método {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()}.</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>Para las vistas dinámicas compartidas que generas en tu código, usa el método {@link android.view.View#setTransitionName View.setTransitionName()} para especificar un nombre del elemento en común en ambas actividades.</p>
+
+<p>Para invertir la animación de transición de escenas cuando terminas la segunda actividad, llama al método {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} en lugar del {@link android.app.Activity#finish Activity.finish()}.</p>
+
+<h3>Iniciar una actividad con múltiples elementos compartidos</h3>
+
+<p>Para realizar una animación de transición de escenas entre dos actividades que tienen más de un elemento compartido, define los elementos compartidos en ambos diseños con el atributo <code>android:transitionName</code> (o usa el método {@link android.view.View#setTransitionName View.setTransitionName()} en ambas actividades) y crea un objeto {@link android.app.ActivityOptions} como se indica a continuación:</p>
+
+<pre>
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
+ Pair.create(view1, "agreedName1"),
+ Pair.create(view2, "agreedName2"));
+</pre>
+
+
+<h2 id="CurvedMotion">Usar movimiento curvo</h2>
+
+<p>Las animaciones en Material Design se basan en curvas para la interpolación de tiempo y los modelos de movimiento espacial. Con Android 5.0 (nivel de API 21) y superior, puedes definir las curvas de sincronización personalizadas y los modelos de movimientos curvos para las animaciones.</p>
+
+<p>La clase {@link android.view.animation.PathInterpolator} es un nuevo interpolador que se basa en una curva Bézier o un objeto {@link android.graphics.Path}. Este interpolador especifica una curva de movimiento en un cuadrado de 1x1, con puntos de anclaje a (0,0) y (1,1), y puntos de control según lo especificado en los argumentos del constructor. También puedes definir un interpolador para la ruta de acceso como un recurso XML:</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>El sistema proporciona recursos XML para las tres curvas básicas en la especificación de Material Design:</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>Puedes pasar un objeto {@link android.view.animation.PathInterpolator} al método {@link android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
+
+<p>La clase {@link android.animation.ObjectAnimator} tiene nuevos constructores que te permiten animar coordenadas junto a una ruta de acceso, usando dos o más propiedades a la vez. Por ejemplo, el siguiente animador usa un objeto{@link android.graphics.Path} para animar las propiedades X e Y de una vista:</p>
+
+<pre>
+ObjectAnimator mAnimator;
+mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
+...
+mAnimator.start();
+</pre>
+
+
+<h2 id="ViewState">Animar cambios de estados de las vistas</h2>
+
+<p>La clase {@link android.animation.StateListAnimator} te permite definir los animadores que se ejecutan cuando cambia el estado de una vista. En el siguiente ejemplo, se muestra cómo definir un {@link android.animation.StateListAnimator} como un recurso XML:</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>Para adjuntar animaciones personalizadas de los estados de visualizaciones, define un animador usando el elemento <code>selector</code> en un archivo de recurso XML como en este ejemplo y asígnalo a tu vista con el atributo <code>android:stateListAnimator</code>. Para asignar un animador de lista de estados a una vista en tu código, usa el método {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} y asigna el animador a tu vista con el método {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
+
+<p>Cuando tu tema extiende al tema material, los botones tendrán una animación Z de manera predeterminada. Para evitar este comportamiento en tus botones, establece el atributo <code>android:stateListAnimator</code> para <code>@null</code>.</p>
+
+<p>La clase {@link android.graphics.drawable.AnimatedStateListDrawable} te permite crear elementos de diseño que muestren animaciones entre los cambios de estados de la vista asociada. Algunos de los widgets del sistema en Android 5.0 usan estas animaciones de manera predeterminada. En el siguiente ejemplo, se muestra cómo definir un {@link android.graphics.drawable.AnimatedStateListDrawable} como un recurso XML:</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">Animar interfaces dibujables en vector</h2>
+
+<p>Las <a href="{@docRoot}training/material/drawables.html#VectorDrawables">interfaces dibujables en vector</a> son escalables sin perder definición. La clase {@link android.graphics.drawable.AnimatedVectorDrawable} te permite animar las propiedades de un elemento de diseño en vector.</p>
+
+<p>Generalmente, las interfaces animadas dibujables en vector se definen en tres archivos XML:</p>
+
+<ul>
+<li>Una interfaz dibujable en vector con el elemento <code><vector></code> en <code>res/drawable/</code></li>
+<li>Una interfaz dibujable animada en vector con el elemento <code><animated-vector></code> en <code>res/drawable/</code></li>
+<li>Uno o más animadores de objeto con el elemento <code><objectAnimator></code> en <code>res/anim/</code></li>
+</ul>
+
+<p>Las interfaces animadas dibujables en vector pueden animar los atributos de los elementos <code><group></code> y <code><path></code>. Los elementos <code><group></code> definen un conjunto de rutas de acceso o subgrupos y el elemento <code><path></code> define rutas de acceso para dibujar.</p>
+
+<p>Cuando definas una interfaz dibujable en vector que desees animar, usa el atributo <code>android:name</code> para asignar un nombre único a grupos o rutas de acceso, de manera que puedas hacer referencia a ellos desde tus definiciones del animador. Por ejemplo:</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>La definición de la interfaz animada dibujable en vector hace referencia a grupos y rutas de acceso en el elemento de diseño en vector por sus nombres:</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>Las definiciones de animación representan objetos {@link android.animation.ObjectAnimator} o {@link android.animation.AnimatorSet}. El primer animador en este ejemplo rota el grupo objetivo unos 360 grados:</p>
+
+<pre>
+<!-- res/anim/rotation.xml -->
+<objectAnimator
+ android:duration="6000"
+ android:propertyName="rotation"
+ android:valueFrom="0"
+ android:valueTo="360" />
+</pre>
+
+<p>El segundo animador en este ejemplo transforma la ruta de acceso de la interfaz dibujable en vector de una forma a otra. Ambas rutas de acceso deben ser compatibles para transformar: deben tener el mismo número de comandos y el mismo número de parámetros para cada comando.</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>Para más información, consulta la referencia de API para {@link android.graphics.drawable.AnimatedVectorDrawable}.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/es/training/material/compatibility.jd b/docs/html-intl/intl/es/training/material/compatibility.jd
new file mode 100644
index 0000000..8295cf9
--- /dev/null
+++ b/docs/html-intl/intl/es/training/material/compatibility.jd
@@ -0,0 +1,134 @@
+page.title=Mantener la compatibilidad
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lección te enseña a</h2>
+<ol>
+ <li><a href="#Theme">Definir estilos alternativos</a></li>
+ <li><a href="#Layouts">Proporcionar diseños alternativos</a></li>
+ <li><a href="#SupportLib">Usar la Biblioteca de soporte</a></li>
+ <li><a href="#CheckVersion">Comprobar la versión del sistema</a></li>
+</ol>
+<h2>También deberías leer</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Algunas características de Material Design como el tema material y las transiciones de actividades personalizadas solo están disponibles en Android 5.0 (nivel 21 de la API) y superior. Sin embargo, puedes diseñar tus aplicaciones para usar estas características al ejecutar en dispositivos que admiten Material Design y aún son compatibles con dispositivos que ejecutan versiones anteriores de Android.</p>
+
+
+<h2 id="Theme">Definir estilos alternativos</h2>
+
+<p>Puedes configurar tu aplicación para usar el tema material en los dispositivos que los admiten y revertir a un tema anterior en los dispositivos que ejecutan versiones anteriores de Android:</p>
+
+<ol>
+<li>Define un tema que herede de un tema anterior (como Holo) en <code>res/values/styles.xml</code>.</li>
+<li>Define un tema con el mismo nombre que hereda del tema material en <code>res/values-v21/styles.xml</code>.</li>
+<li>Establece este tema como el tema de tu aplicación en el archivo de manifiesto.</li>
+</ol>
+
+<p class="note"><strong>Nota:</strong> Si tu aplicación usa el tema material pero no proporciona un tema alternativo, tu aplicación no se ejecutará en versiones de Android anteriores a la versión 5.0.
+</p>
+
+
+<h2 id="Layouts">Proporcionar diseños alternativos</h2>
+
+<p>Si los diseños que realizas de acuerdo con las pautas de Material Design no usan ninguno de los nuevos atributos XML introducidos en Android 5.0 (nivel de API 21), estos trabajarán en versiones anteriores de Android. De lo contrario, puedes proporcionar diseños alternativos. También puedes proporcionar diseños alternativos para personalizar la apariencia de tu aplicación en versiones anteriores de Android.</p>
+
+<p>Crea tus archivos de diseño para Android 5.0 (nivel de API 21) dentro de <code>res/layout-v21/</code> y tus archivos de diseño alternativo para versiones anteriores de Android dentro de <code>res/layout/</code>. Por ejemplo, <code>res/layout/my_activity.xml</code> es un diseño alternativo para <code>res/layout-v21/my_activity.xml</code>.</p>
+
+<p>Para evitar duplicación de código, define tus estilos en <code>res/values/</code>, modifica estilos en <code>res/values-v21/</code> para las nuevas API y usa transmisión por herencia de estilos, al definir estilos base en <code>res/values/</code> y al heredar de estos en <code>res/values-v21/</code>.</p>
+
+
+<h2 id="SupportLib">Usar la Biblioteca de soporte</h2>
+
+<p>Las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a> r21 y superiores incluyen las siguientes características de Material Design:</p>
+
+<ul>
+<li><a href="{@docRoot}training/material/theme.html">Estilos de Material Design</a> para algunos widgets del sistema cuando aplicas uno de los temas <code>Theme.AppCompat</code>.</li>
+<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Atributos del tema de la paleta de colores</a> en los temas <code>Theme.AppCompat</code>.</li>
+<li>El widget {@link android.support.v7.widget.RecyclerView} para <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">mostrar conjuntos de datos</a>.</li>
+<li>El widget {@link android.support.v7.widget.CardView} para <a href="{@docRoot}training/material/lists-cards.html#CardView">crear tarjetas</a>.</li>
+<li>La clase {@link android.support.v7.graphics.Palette} para <a href="{@docRoot}training/material/drawables.html#ColorExtract">extraer colores prominentes de imágenes</a>.</li>
+</ul>
+
+<h3>Widgets del sistema</h3>
+
+<p>Los temas <code>Theme.AppCompat</code> proporcionan estilos de Material Design para estos 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>Paleta de colores</h3>
+
+<p>Para obtener estilos de Material Design y personalizar la paleta de colores con la Biblioteca de soporte v7 de Android, aplica uno de los temas <code>Theme.AppCompat</code>:</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>Listas y tarjetas</h3>
+
+<p>Los widgets {@link android.support.v7.widget.RecyclerView} y {@link android.support.v7.widget.CardView} están disponible en versiones anteriores de Android mediante la Biblioteca de soporte v7 con estas limitaciones:</p>
+<ul>
+<li>{@link android.support.v7.widget.CardView} regresa a una implementación de sombras programáticas mediante el uso de espaciado adicional.</li>
+<li>{@link android.support.v7.widget.CardView} no recorta las vistas de sus hijos que forman intersecciones con esquinas redondeadas.</li>
+</ul>
+
+
+<h3>Dependencias</h3>
+
+<p>Para usar estas características en versiones de Android anteriores a la 5.0 (nivel de API 21), incluye en tu proyecto la Biblioteca de soporte v7 de Android como una <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Dependencia Gradle</a>:</p>
+
+<pre>
+dependencies {
+ compile 'com.android.support:appcompat-v7:21.0.+'
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
+
+
+<h2 id="CheckVersion">Comprobar la versión del sistema</h2>
+
+<p>Las siguientes características están disponibles solo en Android 5.0 (nivel de API 21) y superior:</p>
+
+<ul>
+<li>Transiciones de actividades</li>
+<li>Respuesta táctil</li>
+<li>Animaciones con el efecto revelar</li>
+<li>Animaciones basadas en rutas</li>
+<li>Interfaces dibujables en vector</li>
+<li>Matiz de la interfaz dibujable</li>
+</ul>
+
+<p>Para conservar la compatibilidad con versiones anteriores de Android, comprueba el sistema {@link android.os.Build.VERSION#SDK_INT version} en tiempo de ejecución antes de invocar las API para cualquiera de estas características:</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>Nota:</strong> Para especificar qué versiones de Android admite tu aplicación, usa los atributos <code>android:minSdkVersion</code> y <code>android:targetSdkVersion</code> en tu archivo de manifiesto. Para usar las características de Material Design en Android 5.0, establece el atributo <code>android:targetSdkVersion</code> para <code>21</code>. Para más información, consulta la <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">guía de <uses-sdk> de la API</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/es/training/material/drawables.jd b/docs/html-intl/intl/es/training/material/drawables.jd
new file mode 100644
index 0000000..5979f37
--- /dev/null
+++ b/docs/html-intl/intl/es/training/material/drawables.jd
@@ -0,0 +1,105 @@
+page.title=Trabajar con interfaces dibujables
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lección te enseña a</h2>
+<ol>
+ <li><a href="#DrawableTint">Cambiar el matiz de los recursos dibujables</a></li>
+ <li><a href="#ColorExtract">Extraer colores prominentes de una imagen</a></li>
+ <li><a href="#VectorDrawables">Crear interfaces dibujables en vector</a></li>
+</ol>
+<h2>También deberías leer</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Diseño material en Android</a></li>
+</ul>
+</div>
+</div>
+
+<p>Las siguientes capacidades para las interfaces dibujables te ayudan a implementar Material Design en tus aplicaciones:</p>
+
+<ul>
+<li>Matiz de la interfaz dibujable</li>
+<li>Extracción de color prominente</li>
+<li>Interfaces dibujables en vector</li>
+</ul>
+
+<p>Esta lección te muestra cómo usar estas características en tu aplicación.</p>
+
+
+<h2 id="DrawableTint">Cambiar el matiz de los recursos dibujables</h2>
+
+<p>Con Android 5.0 (nivel de API 21) y superior, puedes cambiar el matiz de los mapas de bits y nueve parches definidos como máscaras alfa. Puedes cambiar el matiz con recursos de colores o atributos de temas que se resuelven a recursos de colores (por ejemplo, <code>?android:attr/colorPrimary</code>). Generalmente, puedes crear estos materiales solo una vez y agregarles color automáticamente para que coincidan con tu tema.</p>
+
+<p>Puedes aplicar un matiz a los objetos {@link android.graphics.drawable.BitmapDrawable} o {@link android.graphics.drawable.NinePatchDrawable} con el método {@code setTint()}. También puedes establecer el color de matiz y el modo en tus diseños con los atributos <code>android:tint</code> y <code>android:tintMode</code>.</p>
+
+
+<h2 id="ColorExtract">Extraer colores prominentes de una imagen</h2>
+
+<p>La Biblioteca de soporte de Android r21 y superiores incluye la clase {@link android.support.v7.graphics.Palette}, que te permite extraer colores prominentes de una imagen. Esta clase extrae los siguientes colores prominentes:</p>
+
+<ul>
+<li>Brillante</li>
+<li>Oscuro brillante</li>
+<li>Claro brillante</li>
+<li>Apagado</li>
+<li>Oscuro apagado</li>
+<li>Claro apagado</li>
+</ul>
+
+<p>Para extraer estos colores, pasa un objeto {@link android.graphics.Bitmap} al método estático {@link android.support.v7.graphics.Palette#generate Palette.generate()} en el subproceso de fondo en donde cargas tus imágenes. Si no puedes usar dicho subproceso, llama al método {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} y proporciona un oyente (o gestor de eventos) en su lugar.</p>
+
+<p>Puedes recuperar los colores prominentes de la imagen mediante los métodos de obtención en la clase <code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p>
+
+<p>Para usar la clase {@link android.support.v7.graphics.Palette} en tu proyecto, agrega la siguiente <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Dependencia Gradle</a> al módulo de tu aplicación:</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:21.0.+'
+}
+</pre>
+
+<p>Para más información, consulta la referencia de la API para la clase {@link android.support.v7.graphics.Palette}.</p>
+
+
+<h2 id="VectorDrawables">Crear interfaces dibujables en vector</h2>
+
+<!-- video box -->
+<a class="notice-developers-video"
+href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
+<div>
+ <h3>Video</h3>
+ <p>Gráficos en vector de Android</p>
+</div>
+</a>
+
+<p>En Android 5.0 (nivel de API 21) y superiores, puedes definir las interfaces dibujables en vector, que escalan sin perder definición. Solo necesitas un archivo de recurso para una imagen en vector, en oposición a un archivo de recurso para la densidad de cada pantalla en el caso de imágenes de mapa de bits. Para crear una imagen en vector, defines los detalles de la forma dentro de un elemento XML <code><vector></code>.</p>
+
+<p>El siguiente ejemplo define una imagen en vector con la forma de un corazón:</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>Las imágenes en vector están representadas en Android como objetos {@link android.graphics.drawable.VectorDrawable}. Para más información sobre la sintaxis <code>pathData</code>, consulta la <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">referencia de ruta de acceso SVG</a>. Para más información sobre la animación de las propiedades de las interfaces dibujables en vector, consulta <a href="{@docRoot}training/material/animations.html#AnimVector">Animación de interfaces dibujables en vector</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/es/training/material/get-started.jd b/docs/html-intl/intl/es/training/material/get-started.jd
new file mode 100644
index 0000000..50a762d
--- /dev/null
+++ b/docs/html-intl/intl/es/training/material/get-started.jd
@@ -0,0 +1,147 @@
+page.title=Comencemos
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lección te enseña a</h2>
+<ol>
+ <li><a href="#ApplyTheme">Aplicar el tema Material</a></li>
+ <li><a href="#Layouts">Realizar tus diseños</a></li>
+ <li><a href="#Depth">Especificar la elevación en tus vistas</a></li>
+ <li><a href="#ListsCards">Crear listas y tarjetas</a></li>
+ <li><a href="#Animations">Personalizar tus animaciones</a></li>
+</ol>
+<h2>También deberías leer</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Para crear aplicaciones con Material Design:</p>
+
+<ol>
+ <li style="margin-bottom:10px">
+ Revisar la <a href="http://www.google.com/design/spec">especificación de Material Design</a>.</li>
+ <li style="margin-bottom:10px">
+ Aplicar el <strong>tema</strong> material a tu aplicación.</li>
+ <li style="margin-bottom:10px">
+ Crear tus <strong>diseños</strong> siguiendo las pautas de Material Design.</li>
+ <li style="margin-bottom:10px">
+ Especificar la <strong>elevación</strong> de tus vistas para convertir sombras.</li>
+ <li style="margin-bottom:10px">
+ Usar <strong>widgets</strong> del sistema para listas y tarjetas.</li>
+ <li style="margin-bottom:10px">
+ Personalizar las <strong>animaciones</strong> en tu aplicación.</li>
+</ol>
+
+<h3>Mantener la compatibilidad con versiones anteriores</h3>
+
+<p>Puedes agregar muchas características de Material Design a tu aplicación mientras mantienes la compatibilidad con las versiones anteriores a Android 5.0. Para más información, consulta <a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>.</p>
+
+<h3>Actualización de tu aplicación con Material Design</h3>
+
+<p>Para actualizar una aplicación existente para incorporar Material Design, actualiza tus diseños siguiendo las pautas de Material Design. Además, asegúrate de incorporar profundidad, respuesta táctil y animaciones.</p>
+
+<h3>Crear nuevas aplicaciones con Material Design</h3>
+
+<p>Si creas una nueva aplicación con las características de Material Design, las <a href="http://www.google.com/design/spec">pautas de Material Design</a> te proporcionan un framework de diseño cohesivo. Sigue estas pautas y usa la nueva funcionalidad del framework de Android para diseñar y desarrollar tu aplicación.</p>
+
+
+<h2 id="ApplyTheme">Aplicar el tema Material</h2>
+
+<p>Para aplicar el tema material en tu aplicación, especifica el estilo que hereda de <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>El tema material proporciona widgets de sistema actualizados y te permite establecer la paleta de colores y las animaciones predeterminadas para la respuesta táctil y las transiciones de actividades. Para obtener más detalles, consulta <a href="{@docRoot}training/material/theme.html">Usar el tema Material</a>.</p>
+
+
+<h2 id="Layouts">Realizar tus diseños</h2>
+
+<p>Además de aplicar y personalizar el tema material, tus diseños deben cumplir con las <a href="http://www.google.com/design/spec">pautas de Material Design</a>. Cuando realices tus diseños, presta especial atención a lo siguiente:</p>
+
+<ul>
+<li>Cuadrículas de referencia</li>
+<li>Líneas clave</li>
+<li>Espaciado</li>
+<li>Tamaño del objetivo táctil</li>
+<li>Estructura del diseño</li>
+</ul>
+
+
+<h2 id="Depth">Especificar la elevación en tus vistas</h2>
+
+<p>Las vistas pueden proyectar sombras y el valor de elevación de una vista determina el tamaño de su sombra y el orden en que será dibujada. Para establecer la elevación de una vista, usa el atributo <code>android:elevation</code> en tus diseños:</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>La nueva propiedad <code>translationZ</code> te permite crear animaciones que reflejen cambios temporales en la elevación de una vista. Los cambios de elevación pueden ser útiles cuando <a href="{@docRoot}training/material/animations.html#ViewState">responden a gestos táctiles</a>.</p>
+
+<p>Para obtener más detalles, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definir vistas de recorte y sombras</a>.</p>
+
+
+<h2 id="ListsCards">Crear listas y tarjetas</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} es una versión más acoplable de {@link android.widget.ListView} que admite diferentes tipos de diseños y proporciona mejoras en el rendimiento. {@link android.support.v7.widget.CardView} te permite mostrar partes de información dentro de las tarjetas con una apariencia consistente entre distintas aplicaciones. El siguiente ejemplo de códigos muestra cómo incluir un {@link android.support.v7.widget.CardView} en tu diseño:</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>Para más información, consulta <a href="{@docRoot}training/material/lists-cards.html">Crear listas y tarjetas</a>.</p>
+
+
+<h2 id="Animations">Personalizar tus animaciones</h2>
+
+<p>Android 5.0 (nivel de API 21) incluye nuevas API para crear animaciones personalizadas en tu aplicación. Por ejemplo, puedes habilitar las transiciones de actividades y definir una transición de salida dentro de una actividad:</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>Cuando comienzas otra actividad desde esta actividad, se activa la transición de salida.</p>
+
+<p>Para más información sobre las nuevas API de animación, consulta <a href="{@docRoot}training/material/animations.html">Definir animaciones personalizadas</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/es/training/material/index.jd b/docs/html-intl/intl/es/training/material/index.jd
new file mode 100644
index 0000000..57750b9
--- /dev/null
+++ b/docs/html-intl/intl/es/training/material/index.jd
@@ -0,0 +1,55 @@
+page.title=Crear aplicaciones con Material Design
+page.type=diseño
+page.image=images/material.png
+page.metaDescription=Aprende a aplicar Material Design a tus aplicaciones.
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>Dependencias y requisitos previos</h2>
+ <ul>
+ <li>Android 5.0 (nivel de API 21)</li>
+ <li>Android Studio 0.8</li>
+ </ul>
+</div>
+</div>
+
+<p>Material Design es una guía integral para diseño visual, de movimiento e interacción en distintas plataformas y dispositivos. Para usar Material Design en tus aplicaciones de Android, sigue las pautas descritas en la <a href="http://www.google.com/design/spec/material-design/introduction.html">especificación de Material Design</a> y usa los nuevos componentes y funcionalidades disponibles en Android 5.0 (nivel de API 21).</p>
+
+<p>Esta clase muestra cómo crear aplicaciones de Material Design con los siguientes elementos:</p>
+
+<ul>
+<li>Tema Material</li>
+<li>Widget para tarjetas y listas</li>
+<li>Personalizar sombras y ver recortes</li>
+<li>Interfaces dibujables en vector</li>
+<li>Animaciones personalizadas</li>
+</ul>
+
+<p>Esta clase también te enseña cómo mantener la compatibilidad con versiones anteriores de Android 5.0 (nivel de API 21) cuando usas las características de Material Design en tu aplicación.</p>
+
+<h2>Lecciones</h2>
+
+<dl>
+ <dt><a href="{@docRoot}training/material/get-started.html">Comencemos</a></dt>
+ <dd>Aprende a actualizar tu aplicación con las características de Material Design.</dd>
+
+ <dt><a href="{@docRoot}training/material/theme.html">Usar el tema Material</a></dt>
+ <dd>Aprende a aplicar los estilos de Material Design a tu aplicación.</dd>
+
+ <dt><a href="{@docRoot}training/material/lists-cards.html">Crear listas y tarjetas</a></dt>
+ <dd>Aprende a crear listas y tarjetas con un aspecto consistente mediante el uso de widgets del sistema.</dd>
+
+ <dt><a href="{@docRoot}training/material/shadows-clipping.html">Definir vistas de recorte y sombras</a></dt>
+ <dd>Aprende a establecer la elevación para tus vistas para crear sombras personalizadas y cómo recortar vistas.</dd>
+
+ <dt><a href="{@docRoot}training/material/drawables.html">Trabajar con interfaces dibujables</a></dt>
+ <dd>Aprende cómo crear interfaces dibujables en vector y cómo agregar un matiz a los recursos dibujables.</dd>
+
+ <dt><a href="{@docRoot}training/material/animations.html">Definir animaciones personalizadas</a></dt>
+ <dd>Aprende a crear animaciones personalizadas para vistas y transiciones de actividades con elementos compartidos.</dd>
+
+ <dt><a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a></dt>
+ <dd>Aprende a mantener la compatibilidad con versiones de plataforma anteriores a Android 5.0.</dd>
+</dl>
\ No newline at end of file
diff --git a/docs/html-intl/intl/es/training/material/lists-cards.jd b/docs/html-intl/intl/es/training/material/lists-cards.jd
new file mode 100644
index 0000000..dc3f67c
--- /dev/null
+++ b/docs/html-intl/intl/es/training/material/lists-cards.jd
@@ -0,0 +1,223 @@
+page.title=Crear listas y tarjetas
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lección te enseña a</h2>
+<ol>
+ <li><a href="#RecyclerView">Crear listas</a></li>
+ <li><a href="#CardView">Crear tarjetas</a></li>
+ <li><a href="#Dependencies">Agregar dependencias</a></li>
+</ol>
+<h2>También deberías leer</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Para crear listas completas y tarjetas con estilos de Material Design en tus aplicaciones, puedes usar los widgets {@link android.support.v7.widget.RecyclerView} y {@link android.support.v7.widget.CardView}.</p>
+
+
+<h2 id="RecyclerView">Crear listas</h2>
+
+<p>El widget {@link android.support.v7.widget.RecyclerView} es una versión más flexible y avanzada de {@link android.widget.ListView}. Este widget es un contenedor para mostrar grandes conjuntos de datos que se pueden desplazar de manera muy eficiente al mantener una cantidad limitada de vistas. Usa el widget {@link android.support.v7.widget.RecyclerView} cuando tengas conjuntos de datos cuyos elementos cambien en tiempo de ejecución sobre la base de la acción del usuario o los eventos de la red.</p>
+
+<p>La clase {@link android.support.v7.widget.RecyclerView} simplifica la pantalla y la manipulación de grandes conjuntos de datos al proporcionar lo siguiente:</p>
+
+<ul>
+ <li>Administradores de diseño para el posicionamiento de elementos</li>
+ <li>Animaciones predeterminadas para las operaciones comunes con elementos, como quitar o agregar elementos</li>
+</ul>
+
+<p>También tienes la flexibilidad para definir administradores de diseño personalizados y animaciones para los widgets {@link android.support.v7.widget.RecyclerView}.</p>
+
+<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
+<p class="img-caption">
+<strong>Figura 1</strong>. El widget <code>RecyclerView</code>.
+</p>
+
+<p>Para usar el widget {@link android.support.v7.widget.RecyclerView}, tienes que especificar un adaptador y un administrador de diseño. Para crear un adaptador, extiende la clase {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Los detalles de la implementación dependen de las especificaciones de tu conjunto de datos y los tipos de vistas. Para más información, consulta los <a href="#RVExamples">ejemplos</a> que figuran a continuación.</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>Figura 2</strong>: listas con <code>RecyclerView</code>.
+</p>
+</div>
+
+<p>Un <strong>administrador de diseño</strong> posiciona las vistas de artículos dentro de un {@link android.support.v7.widget.RecyclerView} y determina cuándo volver a usar las vistas de elementos que ya no están visibles para el usuario. Para reutilizar (o <em>reciclar</em>) una vista, un administrador de diseño puede solicitarle al adaptador que reemplace el contenido de la vista con un elemento diferente del conjunto de datos. De esta manera, cuando se reciclan las vistas se mejora el rendimiento al evitar la creación de vistas innecesarias o realizar búsquedas costosas de {@link android.app.Activity#findViewById findViewById()}.</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} te proporciona estos administradores de diseño incorporados:</p>
+
+<ul>
+<li>{@link android.support.v7.widget.LinearLayoutManager} muestra elementos en una lista de desplazamiento horizontal o vertical.</li>
+<li>{@link android.support.v7.widget.GridLayoutManager} muestra elementos en una cuadrícula.</li>
+<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} muestra elementos en una cuadrícula escalonada.</li>
+</ul>
+
+<p>Para crear un administrador de diseño personalizado, extiende la clase {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
+
+<h3>Animaciones</h3>
+
+<p>Las animaciones para agregar o eliminar elementos están permitidas en forma predeterminada en {@link android.support.v7.widget.RecyclerView}. Para personalizar estas animaciones, extiende la clase {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} y usa el método {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}.</p>
+
+<h3 id="RVExamples">Ejemplos</h3>
+
+<p>El siguiente ejemplo de códigos demuestra cómo agregar el {@link android.support.v7.widget.RecyclerView} a un diseño:</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>Una vez que hayas agregado un widget {@link android.support.v7.widget.RecyclerView} a tu diseño, obtén un identificador para el objeto, conéctalo a un administrador de diseño y adjunta un adaptador para los datos que se van a mostrar:</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>El adaptador proporciona acceso a los elementos en tu conjunto de datos, crea vistas para los elementos y reemplaza el contenido de algunas de las vistas con estos elementos de datos nuevos cuando el elemento original ya no está visible. El siguiente ejemplo de código muestra una implementación simple para un conjunto de datos que consta de una matriz de cadenas mostradas mediante el uso de widgets {@link android.widget.TextView}:</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>Figura 3</strong>. Ejemplos de tarjetas.
+</p>
+</div>
+
+<h2 id="CardView">Crear tarjetas</h2>
+
+<p>{@link android.support.v7.widget.CardView} extiende la clase {@link android.widget.FrameLayout} y te permite mostrar información dentro de tarjetas que tienen una apariencia consistente en la plataforma. Los widgets {@link android.support.v7.widget.CardView} pueden tener sombras y esquinas redondeadas.</p>
+
+<p>Para crear una tarjeta con una sombra, usa el atributo <code>card_view:cardElevation</code>. {@link android.support.v7.widget.CardView} usa elevación real y sombras dinámicas en Android 5.0 (nivel de API 21) y superior, y regresa a una implementación de sombras programáticas en versiones anteriores. Para más información, consulta <a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>.</p>
+
+<p>Usa estas propiedades para personalizar la apariencia del widget {@link android.support.v7.widget.CardView}:</p>
+
+<ul>
+ <li>Para establecer el radio de la esquina en tus diseños, usa el atributo <code>card_view:cardCornerRadius</code>.</li>
+ <li>Para establecer el radio en tu código, usa el método <code>CardView.setRadius</code>.</li>
+ <li>Para establecer el color de fondo de una tarjeta, usa el atributo <code>card_view:cardBackgroundColor</code>.</li>
+</ul>
+
+<p>El siguiente ejemplo de código muestra cómo incluir un widget {@link android.support.v7.widget.CardView} en tu diseño:</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>Para más información, consulta la referencia de la API para {@link android.support.v7.widget.CardView}.</p>
+
+
+<h2 id="Dependencies">Agregar dependencias</h2>
+
+<p>Los widgets {@link android.support.v7.widget.RecyclerView} y {@link android.support.v7.widget.CardView} son parte de las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a>. Para usar estos widgets en tu proyecto, agrega estas <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Dependencias de Gradle</a> al módulo de tu aplicación:</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
\ No newline at end of file
diff --git a/docs/html-intl/intl/es/training/material/shadows-clipping.jd b/docs/html-intl/intl/es/training/material/shadows-clipping.jd
new file mode 100644
index 0000000..5e6aa35
--- /dev/null
+++ b/docs/html-intl/intl/es/training/material/shadows-clipping.jd
@@ -0,0 +1,99 @@
+page.title=Definir vistas de recorte y sombras
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lección te enseña a</h2>
+<ol>
+ <li><a href="#Elevation">Asignar elevación a tus vistas</a></li>
+ <li><a href="#Shadows">Personalizar vistas de sombras y contornos</a></li>
+ <li><a href="#Clip">Recortar vistas</a></li>
+</ol>
+<h2>También deberías leer</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li>
+</ul>
+</div>
+</div>
+
+<p>Material Design introduce una elevación para los elementos de la IU. La elevación ayuda a los usuarios a comprender la importancia relativa de cada elemento y a centrar su atención en la tarea a realizar.</p>
+
+<p>La elevación de una vista, representada por la propiedad Z, determina la apariencia visual de su sombra: las vistas con valores de Z superiores, proyectan sombras más grandes y suaves. Las vistas con valores Z superiores ocluyen las vistas con valores Z inferiores. Sin embargo, el valor Z de una vista no afecta el tamaño de la vista.</p>
+
+<p>El padre de la vista elevada se encarga de dibujar las sombras y así, sujeto al recorte de vista estándar, es recortado por el padre de manera predeterminada.</p>
+
+<p>La elevación también es útil para crear animaciones donde los widgets suben temporalmente sobre el plano visual cuando realizan alguna acción.</p>
+
+<p>Para más información sobre la elevación en Material Design, consulta <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos en el espacio 3D</a>.</p>
+
+
+<h2 id="Elevation">Asignar elevación a tus vistas</h2>
+
+<p>El valor Z de una vista cualquiera tiene dos componentes: <ul>
+<li>Elevación: El componente estático.</li>
+<li>Traducción: El componente dinámico usado para las animaciones.</li>
+</ul>
+
+<p><code>Z = elevation + translationZ</code></p>
+
+<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
+<p class="img-caption"><strong>Figura 1</strong>: sombras para diferentes elevaciones de vistas.</p>
+
+<p>Para establecer la elevación de una vista al definir un diseño, usa el atributo <code>android:elevation</code>. Para establecer la elevación de una vista en el código de una actividad, usa el método {@link android.view.View#setElevation View.setElevation()}.</p>
+
+<p>Para establecer la traducción de una vista, usa el método {@link android.view.View#setTranslationZ View.setTranslationZ()}.</p>
+
+<p>Los nuevos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} y {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} te permiten animar fácilmente la elevación de las vistas. Para más información, consulta la referencia de la API para {@link android.view.ViewPropertyAnimator} y la guía del desarrollador <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animación de propiedades</a>.</p>
+
+<p>También puedes usar un {@link android.animation.StateListAnimator} para especificar estas animaciones de manera declarativa. Esto es especialmente útil para casos en donde los cambios de estados desencadenan animaciones, como cuando un usuario pulsa un botón. Para más información, consulta <a href="{@docRoot}training/material/animations.html#ViewState">Animar cambios de estados de las vistas</a>.</p>
+
+<p>Los valores Z se miden en dp (píxeles independientes de la densidad).</p>
+
+
+<h2 id="Shadows">Personalizar visualización de sombras y contornos</h2>
+
+<p>Los límites del elemento de diseño de fondo de una vista determinan la forma predeterminada de su sombra. Los <strong>contornos</strong> representan la forma externa de un objeto gráfico y definen el área de la onda para la respuesta táctil.</p>
+
+<p>Examina esta vista, definida con una interfaz dibujable en segundo plano:</p>
+
+<pre>
+<TextView
+ android:id="@+id/myview"
+ ...
+ android:elevation="2dp"
+ android:background="@drawable/myrect" />
+</pre>
+
+<p>La interfaz dibujable en segundo plano está definida como un rectángulo con esquinas redondeadas:</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>La vista proyecta una sombra con esquinas redondeadas, ya que la interfaz dibujable en segundo plano define el contorno de la vista. Un contorno personalizado reemplazaría la forma predeterminada de la sombra de una vista.</p>
+
+<p>Para definir un contorno personalizado para una vista en tu código:<p>
+
+<ol>
+<li>Extiende la clase {@link android.view.ViewOutlineProvider}.</li>
+<li>Reemplaza el método {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
+<li>Asigna el nuevo proveedor de contornos a tu vista con el método {@link android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
+</ol>
+
+<p>Puedes crear contornos rectangulares y ovalados con esquinas redondeadas mediante el uso de métodos en la clase {@link android.graphics.Outline}. El proveedor de contornos predeterminado para las vistas obtiene el contorno a partir del plano de fondo de la vista. Para evitar que una vista proyecte una sombra, establece su proveedor de contornos a <code>null</code>.</p>
+
+
+<h2 id="Clip">Recortar vistas</h2>
+
+<p>Recortar vistas te permite cambiar fácilmente la forma de una vista. Puedes recortar vistas para mantener una consistencia con otros elementos del diseño o para cambiar la forma de una vista en respuesta a una señal de entrada del usuario. Puedes recortar una vista a partir de su área de contorno mediante el método {@link android.view.View#setClipToOutline View.setClipToOutline()} o el atributo <code>android:clipToOutline</code>. Solo los contornos rectangulares, circulares y redondeados admiten el recorte, según lo determinado por el método {@link android.graphics.Outline#canClip Outline.canClip()}.</p>
+
+<p>Para recortar una vista a partir de una interfaz dibujable, establece la interfaz dibujable como el plano de fondo de la vista (como se muestra más arriba) y llama al método {@link android.view.View#setClipToOutline View.setClipToOutline()}.</p>
+
+<p>Recortar vistas es una operación costosa, asi que no animes la forma que usas para recortar una vista. Para lograr este efecto, usa la animación <a href="{@docRoot}training/material/animations.html#Reveal">Efecto revelar</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/es/training/material/theme.jd b/docs/html-intl/intl/es/training/material/theme.jd
new file mode 100644
index 0000000..c949483
--- /dev/null
+++ b/docs/html-intl/intl/es/training/material/theme.jd
@@ -0,0 +1,107 @@
+page.title=Usar el tema Material
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lección te enseña a</h2>
+<ol>
+ <li><a href="#ColorPalette">Personalizar la paleta de colores</a></li>
+ <li><a href="#StatusBar">Personalizar la barra de estado</a></li>
+ <li><a href="#Inheritance">Cambiar el tema de vistas individuales</a></li>
+</ol>
+<h2>También deberías leer</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>El nuevo tema material proporciona:</p>
+
+<ul>
+ <li>Widgets del sistema que te permiten establecer la paleta de colores.</li>
+ <li>Animaciones para la respuesta táctil de los widgets del sistema.</li>
+ <li>Animaciones para transiciones de actividades</li>
+</ul>
+
+<p>Puedes personalizar la apariencia del tema material según la identidad de tu marca, con una paleta de colores que esté bajo tu control. Puedes cambiar el matiz de la barra de acción y la barra de estado mediante atributos de temas, como se muestra en la <a href="#fig3">Figura 3</a>.</p>
+
+<p>Los widgets del sistema tienen un nuevo diseño y animaciones para respuesta táctil. Puedes personalizar tu aplicación cambiando su paleta de colores, las animaciones de la respuesta táctil y sus transiciones de actividades.</p>
+
+<p>El tema material se define como:</p>
+
+<ul>
+ <li><code>@android:style/Theme.Material</code> (versión oscura)</li>
+ <li><code>@android:style/Theme.Material.Light</code> (versión clara)</li>
+ <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+</ul>
+
+<p>Para obtener una lista de estilos de Material, consulta la referencia de la API para {@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>Figura 1</strong>. Tema Material oscuro</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>Figura 2</strong>. Tema Material claro</p>
+ </div>
+</div>
+<br style="clear:left">
+</div>
+
+<p class="note">
+<strong>Nota:</strong> El tema material solo está disponible en Android 5.0 (nivel de API 21) y superior. Las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a> proporcionan temas con estilos de Material Design para algunos widgets y admiten la personalización de la paleta de colores. Para más información, consulta <a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>.
+</p>
+
+
+<h2 id="ColorPalette">Personalizar la paleta de colores</h2>
+
+<p style="margin-bottom:30px">Si deseas personalizar los colores base del tema para que se adapten a tu marca, define tus colores personalizados mediante los atributos de temas cuando heredes del tema material:</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>Figura 3</strong>. Personalizar el tema material.</p>
+</div>
+
+
+<h2 id="StatusBar">Personalizar la barra de estado</h2>
+
+<p>El tema material te permite personalizar fácilmente la barra de estado, especifica un color que se adapte a tu marca y proporciona suficiente contraste para mostrar los íconos de estado en blanco. Si quieres establecer un color personalizado para la barra de estado, usa el atributo <code>android:statusBarColor</code> cuando extiendas el tema material. <code>android:statusBarColor</code> hereda el valor de <code>android:colorPrimaryDark</code> en forma predeterminada.</p>
+
+<p>También puedes dibujar por detrás de la barra de estado. Por ejemplo, si quieres que la barra de estado se muestre en forma transparente sobre una foto, aplica un sutil degradado oscuro para garantizar que los íconos de estado blancos sigan visibles. Para hacerlo, establece el atributo <code>android:statusBarColor</code> a <code>@android:color/transparent</code> y ajusta los indicadores de la ventana según lo requerido. También puedes usar el método {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para las animaciones o el difuminado.</p>
+
+<p class="note">
+<strong>Nota:</strong> La barra de estado casi siempre debe estar delimitada claramente de la barra de herramientas principal, excepto para los casos en donde muestres imágenes de un extremo a otro o contenido multimedia detrás de estas barras, y también cuando uses un degradado para garantizar que los íconos aún sean visibles.
+</p>
+
+<p>Cuando personalizas la barra de navegación y la barra de estado, o bien tendrás que hacer que ambas sean transparentes o modifica solo la barra de estado. La barra de navegación debe permanecer de color negro en todos los otros casos.</p>
+
+
+<h2 id="Inheritance">Cambiar el tema de vistas individuales</h3>
+
+<p>Los elementos en las definiciones de diseño XML pueden especificar el atributo <code>android:theme</code>, que hace referencia al recurso del tema. Este atributo modifica el tema para el elemento y cualquier elemento hijo, y esto es útil para modificar las paletas de colores de los temas en una porción específica de una interfaz.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/design/material/index.jd b/docs/html-intl/intl/ja/design/material/index.jd
new file mode 100644
index 0000000..40716fe
--- /dev/null
+++ b/docs/html-intl/intl/ja/design/material/index.jd
@@ -0,0 +1,43 @@
+page.title=設計
+page.viewport_width=970
+section.landing=true
+meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
+header.hide=1
+footer.hide=1
+
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 0;
+ top: 42px;
+ width: 266px;
+
+}
+#hero-image {
+ padding-left:68px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ <span itemprop="description"><strong>Android デザイン</strong>へようこそ。ここでは、ひときわ優れた Android アプリを設計する方法を学ぶことができます。</span>
+ <br><br>
+ <strong>Android 5.0</strong> が備えるデザイナー向け機能については、<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="{@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">マテリアル デザイン</h2>
+<p>Android 5.0 は紙とインクからヒントを得たデザイン メタファーを導入し、ユーザーが安心できる使用感を実現しています。
+</p>
+<p><a class="white" href="{@docRoot}design/material/index.html">詳細を見る</a></p>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/training/material/animations.jd b/docs/html-intl/intl/ja/training/material/animations.jd
new file mode 100644
index 0000000..2938001
--- /dev/null
+++ b/docs/html-intl/intl/ja/training/material/animations.jd
@@ -0,0 +1,455 @@
+page.title=カスタム アニメーションの定義
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>このレッスンでの学習内容</h2>
+<ol>
+ <li><a href="#Touch">タッチ フィードバックをカスタマイズする</a></li>
+ <li><a href="#Reveal">出現エフェクトを使用する</a></li>
+ <li><a href="#Transitions">アクティビティ遷移をカスタマイズする</a></li>
+ <li><a href="#ViewState">ビューの状態遷移にアニメーションを付ける</a></li>
+ <li><a href="#AnimVector">ベクター型ドローアブルにアニメーションを付ける</a></li>
+</ol>
+<h2>関連ドキュメント</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>マテリアル デザインのアニメーションは、ユーザーの操作に応じて反応し、アプリの操作にともない連続した動きを見せます。マテリアル テーマでは、ボタンやアクティビティの遷移にデフォルトのアニメーションが用意されており、Android 5.0（API レベル 21）以降では次のようなアニメーションをカスタマイズして新しいアニメーションを作成できます。</p>
+
+<ul>
+<li>タッチ フィードバック</li>
+<li>円形状の出現</li>
+<li>アクティビティ遷移</li>
+<li>曲線モーション</li>
+<li>ビューの状態遷移</li>
+</ul>
+
+
+<h2 id="Touch">タッチ フィードバックをカスタマイズする</h2>
+
+<p>マテリアル デザインのタッチ フィードバックは、ユーザーが UI 要素に触れて操作した時点で、視覚的な反応を瞬時に表します。ボタンに対するデフォルトのタッチ フィードバック アニメーションでは、新しい {@link android.graphics.drawable.RippleDrawable} クラスを使用して、状態の切り替わりをリップル（波紋）効果で表現しています。</p>
+
+<p>ほとんどの場合、次のようにビューの背景を指定することでビュー XML にこの機能を適用できます。</p>
+
+<ul>
+<li>範囲が限定された波紋: <code>?android:attr/selectableItemBackground</code></li>
+<li>ビューの範囲外まで広がる波紋: <code>?android:attr/selectableItemBackgroundBorderless</code></li>
+</ul>
+
+<p class="note"><strong>注:</strong> <code>selectableItemBackgroundBorderless</code> は API レベル 21 で導入された新しい属性です。</p>
+
+
+<p>または、<code>ripple</code> 要素を使って {@link android.graphics.drawable.RippleDrawable} を XML リソースとしても定義できます。</p>
+
+<p>{@link android.graphics.drawable.RippleDrawable} オブジェクトには、色を割り当てることができます。タッチ フィードバックのデフォルトの色を変更するには、テーマの <code>android:colorControlHighlight</code> 属性を使用します。</p>
+
+<p>詳細については、API リファレンスの {@link android.graphics.drawable.RippleDrawable} クラスをご覧ください。</p>
+
+
+<h2 id="Reveal">出現エフェクトを使用する</h2>
+
+<p>Reveal （出現）アニメーションを使用すると、UI 要素のグループを表示したり非表示にしたりするときに連続した印象をユーザーに与えます。{@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} メソッドでは、ビューを表示したり非表示にしたりする際に円形のアニメーションを付けることができます。</p>
+
+<p>この効果を使って、非表示のビューを表示するには: </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 = Math.max(myView.getWidth(), myView.getHeight());
+
+// create the animator for this view (the start radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
+
+// make the view visible and start the animation
+myView.setVisibility(View.VISIBLE);
+anim.start();
+</pre>
+
+<p>この効果を使って、表示されているビューを非表示にするには: </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">アクティビティ遷移をカスタマイズする</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>図 1</strong> - 共有要素を使った画面遷移</p>
+ <em>端末の画像をクリックすると動画を再生できます</em>
+ </div>
+</div>
+
+<p>マテリアル デザイン アプリの Activity transitions （アクティビティ遷移）では、共通する要素の間での動作や変化を通じて、状態の切り替えに視覚的なつながりを持たせます。Enter と Exit の遷移や、アクティビティ間でのShared elements 遷移にカスタム アニメーションを指定できます。</p>
+
+<ul>
+<li><strong>Enter</strong> （入口）遷移は、アクティビティのビューがどのように画面に入ってくるかを決定します。たとえば <em>Explode</em> の Enter 遷移の場合、ビューが画面外から画面の中心に向かって飛び込むように現れます。</li>
+
+<li><strong>Exit</strong> （出口）遷移は、アクティビティのビューがどのように画面から出ていくかを決定します。同じく <em>Explode</em> の Exit 遷移の場合、画面の中心から外側に向かってビューが出ていきます。</li>
+
+<li><strong>Shared Elements</strong> （共有要素）遷移は、2 つのアクティビティで共有されているビューが、各アクティビティの間でどのように遷移するかを決定します。たとえば、2 つのアクティビティで同じ画像を異なる位置とサイズで使用している場合、<em>changeImageTransform</em> 共有要素の遷移によって、2 つのアクティビティの間でスムーズに画像が変換されスケーリングされます。</li>
+</ul>
+
+<p>Android 5.0（API レベル 21）では、次の Enter 遷移と Exit 遷移がサポートされています。</p>
+
+<ul>
+<li><em>explode</em> （爆発状） - ビューをシーン中心から外側へ移動したり外側から中心へ移動したりします。</li>
+<li><em>slide</em> （スライド） - ビューをシーンの端から移動したり端へ移動したりします。</li>
+<li><em>fade</em> （フェード） - 不透明度を変化させながらビューをシーンに追加したりシーンから削除したりします。</li>
+</ul>
+
+<p>{@link android.transition.Visibility} クラスを拡張する遷移はすべて、EnterTransition または ExitTransition としてサポートされます。詳細については、API リファレンスの {@link android.transition.Transition} クラスをご覧ください。</p>
+
+<p>Android 5.0（API レベル 21）では、次の共有要素遷移もサポートしています。</p>
+
+<ul>
+<li><em>changeBounds</em> - 対象ビューのレイアウト範囲での変化にアニメーションを付けます。</li>
+<li><em>changeClipBounds</em> - 対象ビューのクリップ範囲での変化にアニメーションを付けます。</li>
+<li><em>changeTransform</em> - 対象ビューのスケールや向きの変化にアニメーションを付けます。</li>
+<li><em>changeImageTransform</em> - 対象画像のサイズやスケールの変化にアニメーションを付けます。</li>
+</ul>
+
+<p>アプリにアクティビティ遷移を適用すると、アクティビティの開始と終了の間でデフォルトのクロス フェーディング遷移が有効になります。</p>
+
+<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
+<p class="img-caption">
+ <strong>図 2</strong> - 1 つの共有要素とシーンの遷移
+</p>
+
+<h3>カスタム遷移を指定する</h3>
+
+<p>まず、マテリアル テーマから継承したスタイルを定義するときに、<code>android:windowContentTransitions</code> 属性で windowContentTransitions を有効にします。また、次のように Enter、Exit、Shared Element の Transitions をスタイルの定義で指定できます。</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>この例の <code>change_image_transform</code> 遷移は、次のように定義されています。</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><code>changeImageTransform</code> 要素は {@link android.transition.ChangeImageTransform} クラスに対応します。詳細については、API リファレンスの {@link android.transition.Transition} クラスをご覧ください。</p>
+
+<p>代わりに、コードで windowContentTransitions を有効にするには、{@link android.view.Window#requestFeature Window.requestFeature()} メソッドを呼び出します。</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>コードで遷移を指定するには、{@link android.transition.Transition} オブジェクトで次のメソッドを呼び出します。</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>{@link android.view.Window#setExitTransition setExitTransition()} メソッドや {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} メソッドは、呼び出し元のアクティビティの ExitTransition を定義します。{@link android.view.Window#setEnterTransition setEnterTransition()} メソッドや {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} メソッドは、呼び出し先のアクティビティの EnterTransition を定義します。</p>
+
+<p>遷移の効果を完全に表すには、呼び出し元と呼び出し先のアクティビティ双方で windowContentTransitions を有効にする必要があります。有効にしていないと、呼び出し元のアクティビティが Exit 遷移を開始したあと、window 遷移（スケールやフェードなど）が起こります。</p>
+
+<p>Enter 遷移をできるだけ早く開始するには、呼び出し先のアクティビティで {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} メソッドを使用します。そうすることで、より印象的な Enter 遷移になります。</p>
+
+<h3>遷移を使ってアクティビティを開始する</h3>
+
+<p>遷移を有効にしてアクティビティに ExitTransition を設定した場合、次のように別のアクティビティを開始したときに Exit 遷移がアクティベートされます。</p>
+
+<pre>
+startActivity(intent,
+ ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
+</pre>
+
+<p>2 つ目のアクティビティに EnterTransition を設定している場合は、そのアクティビティの開始時に Enter 遷移も発生します。別のアクティビティ開始時の遷移を無効にするには、<code>null</code> のオプション バンドルを付与します。</p>
+
+<h3>共有要素を使ってアクティビティを開始する</h3>
+
+<p>共有要素を持つ 2 つのアクティビティの間で画面遷移のアニメーションを作成するには: </p>
+
+<ol>
+<li>テーマで windowContentTransitions を有効にします。</li>
+<li>スタイルで SharedElementsTransition を指定します。</li>
+<li>遷移を XML リソースとして定義します。</li>
+<li><code>android:transitionName</code> 属性を用いて、双方のレイアウトで共有要素に同じ名前を割り当てます。</li>
+<li>{@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()} メソッドを使用します。</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>コードで生成した共有の動的ビューでは、{@link android.view.View#setTransitionName View.setTransitionName()} メソッドを使用して両方のアクティビティに共通の要素名を指定します。</p>
+
+<p>2 つ目のアクティビティが終了したときにシーンの切り替えアニメーションを逆回転させるには、{@link android.app.Activity#finish Activity.finish()} の代わりに {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} メソッドを呼び出します。</p>
+
+<h3>複数の共有要素を使ってアクティビティを開始する</h3>
+
+<p>複数の共有要素を持つ 2 つのアクティビティの間にシーンの切り替えアニメーションを付けるには、双方のレイアウトで <code>android:transitionName</code> 属性を使用（または双方のアクティビティで {@link android.view.View#setTransitionName View.setTransitionName()} メソッドを使用）して共有要素を定義して、次のように {@link android.app.ActivityOptions} オブジェクトを作成します。</p>
+
+<pre>
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
+ Pair.create(view1, "agreedName1"),
+ Pair.create(view2, "agreedName2"));
+</pre>
+
+
+<h2 id="CurvedMotion">曲線モーションを使用する</h2>
+
+<p>マテリアル デザインのアニメーションは、時間的な間を補ったり立体的な動作パターンを表現するために曲線を多く用いています。Android 5.0（API レベル 21）以降では、カスタムのタイミングで描かれる曲線や曲線モーションのパターンをアニメーションで定義できます。</p>
+
+<p>{@link android.view.animation.PathInterpolator} クラスはベジェ曲線や {@link android.graphics.Path} オブジェクトに基づく新しい Interpolator （補間）です。この Interpolator は 1x1 の正方形に動作曲線を指定します。アンカー ポイントは（0,0）と（1,1）、制御点はコンストラクタ引数を使用して指定します。または、PathInterpolator を XML リソースとしても定義できます。</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>マテリアル デザインの仕様では、次の 3 つの基本的な曲線を XML リソースとして提供しています。</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>{@link android.view.animation.PathInterpolator} オブジェクトは {@link android.animation.Animator#setInterpolator Animator.setInterpolator()} メソッドに渡すことができます。</p>
+
+<p>{@link android.animation.ObjectAnimator} クラスには新しいコンストラクタがあり、一度に 2 つ以上のプロパティを使用して経路に沿ったアニメーションを作ることができます。たとえば、次の animator では {@link android.graphics.Path} オブジェクトを使ってビューの X と Y プロパティを指定しています。</p>
+
+<pre>
+ObjectAnimator mAnimator;
+mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
+...
+mAnimator.start();
+</pre>
+
+
+<h2 id="ViewState">ビューの状態遷移にアニメーションを付ける</h2>
+<p>{@link android.animation.StateListAnimator} クラスを使って、ビューの状態が変化したときに実行されるアニメーションを定義できます。次の例は、{@link android.animation.StateListAnimator} を XML リソースとして定義する方法を示しています。</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>ビューの状態についてのカスタム アニメーションをビューに付与するには、この例のように XML リソース ファイルの <code>selector</code> 要素を使用して animator を定義し、それを <code>android:stateListAnimator</code> 属性でビューに割り当てます。コードで StateListAnimator をビューに割り当てるには、{@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} メソッドを使用して {@link android.view.View#setStateListAnimator View.setStateListAnimator()} メソッドでビューに animator を割り当てます。</p>
+
+<p>テーマがマテリアル テーマに拡張されると、ボタンにはデフォルトで Z アニメーションが設定されます。これを避けるためには、<code>android:stateListAnimator</code> 属性を <code>@null</code> に設定します。</p>
+
+<p>{@link android.graphics.drawable.AnimatedStateListDrawable} クラスを使用すると、関連するビューの状態遷移にアニメーションを表示するドローアブルを作成できます。Android 5.0 の一部のシステム ウィジェットでは、デフォルトでこれらのアニメーションを使用しています。次の例は、{@link android.graphics.drawable.AnimatedStateListDrawable} を XML リソースとして定義する方法を示しています。</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">ベクター型ドローアブルにアニメーションを付ける</h2>
+
+<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">ベクター型ドローアブル</a>は定義を失わずにスケールできます。{@link android.graphics.drawable.AnimatedVectorDrawable} クラスを使うと、ベクター型ドローアブルのプロパティを指定してアニメーションを付けられます。</p>
+
+<p>通常は、次に示す 3 つの XML ファイルで AnimatedVectorDrawable を定義します。</p>
+
+<ul>
+<li><code>res/drawable/</code> の <code><vector></code> 要素を持つ vectordrawable の xml ファイル</li>
+<li><code>res/drawable/</code> の <code><animated-vector></code> 要素を持つ AnimatedVectorDrawable の xml ファイル</li>
+<li><code>res/anim/</code> の <code><objectAnimator></code> 要素を持つ 1 つ以上のObjectAnimator の xml ファイル</li>
+</ul>
+
+<p>AnimatedVectorDrawable では、<code><group></code> 要素と <code><path></code> 要素の属性にアニメーションを付けることができます。<code><group></code> 要素は一連の経路やサブグループを定義し、<code><path></code> 要素は描く経路を定義します。</p>
+
+<p>アニメーションを付けたいベクター型ドローアブルを定義するときは、<code>android:name</code> 属性を使用してグループや経路に一意の名前を割り当てれば animator の定義からそれらを参照できるようになります。次に例を示します。</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>AnimatedVectorDrawable の定義では、次のようにベクター型ドローアブルのグループや経路をその名前で参照します。</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>アニメーションの定義は {@link android.animation.ObjectAnimator} オブジェクトか {@link android.animation.AnimatorSet} オブジェクトを示します。この例の最初の animator は、次のように対象グループを 360 度回転させています。</p>
+
+<pre>
+<!-- res/anim/rotation.xml -->
+<objectAnimator
+ android:duration="6000"
+ android:propertyName="rotation"
+ android:valueFrom="0"
+ android:valueTo="360" />
+</pre>
+
+<p>この例の 2 つ目の animator は、ベクター型ドローアブルの経路をある形から別の形へと変化させています。両方の経路が形の変化に対応できる必要があります。つまり同じ数のコマンドと、各コマンドで同じ数のパラメーターを保持している必要があります。</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>詳細については、API リファレンスの {@link android.graphics.drawable.AnimatedVectorDrawable} をご覧ください。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/training/material/compatibility.jd b/docs/html-intl/intl/ja/training/material/compatibility.jd
new file mode 100644
index 0000000..b863b17
--- /dev/null
+++ b/docs/html-intl/intl/ja/training/material/compatibility.jd
@@ -0,0 +1,134 @@
+page.title=互換性の維持
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>このレッスンでの学習内容</h2>
+<ol>
+ <li><a href="#Theme">別のスタイルを定義する</a></li>
+ <li><a href="#Layouts">別のレイアウトを提供する</a></li>
+ <li><a href="#SupportLib">サポート ライブラリを使用する</a></li>
+ <li><a href="#CheckVersion">システム バージョンを確認する</a></li>
+</ol>
+<h2>関連ドキュメント</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>マテリアル テーマやカスタムのアクティビティ遷移など、マテリアル デザインの一部の機能は Android5.0（API レベル21）以降でのみ利用できます。ただし、マテリアル デザインをサポートし、以前のバージョンの Android を実行している端末と互換性がある端末でこれらの機能が実行されている場合は、機能を使用できるようにアプリを設計することが可能です。</p>
+
+
+<h2 id="Theme">別のスタイルを定義する</h2>
+
+<p>マテリアル テーマをサポートしている端末ではマテリアル テーマを使用するようにアプリを構成できますが、同時に次のようにして以前のバージョンの Android を実行する端末向けに以前のテーマに戻すことができます。</p>
+
+<ol>
+<li><code>res/values/styles.xml</code> で、以前のテーマ（Holo など）から継承するテーマを定義します。</li>
+<li><code>res/values-v21/styles.xml</code> で、マテリアル テーマから継承するテーマを上記と同じ名前で定義します。</li>
+<li>マニフェスト ファイルでこのテーマをアプリのテーマとして設定します。</li>
+</ol>
+
+<p class="note"><strong>注:</strong> この方法で別のテーマを用意せずマテリアル テーマだけを使う場合、そのアプリは以前のバージョンの Android では実行できません。
+</p>
+
+
+<h2 id="Layouts">別のレイアウトを提供する</h2>
+
+<p>マテリアル デザインのガイドラインに沿って設計したレイアウトでも、Android 5.0（API レベル 21）で導入された新しい XML 属性を一切使用していない場合は、以前のバージョンの Android でも問題なく表示されます。新しい XML 属性を使用している場合は、別のレイアウトを用意できます。以前のバージョンの Android でアプリが表示される方法をカスタマイズする目的で別のレイアウトを用意することも可能です。</p>
+
+<p>Android 5.0（API レベル 21）向けのレイアウト ファイルを <code>res/layout-v21/</code> に作成し、以前のバージョンの Android 向けの別のレイアウト ファイルを <code>res/layout/</code> に作成します。たとえば、<code>res/layout/my_activity.xml</code> は <code>res/layout-v21/my_activity.xml</code> の代替レイアウトになります。</p>
+
+<p>コードの重複を避けるには、<code>res/values/</code> でスタイルを定義して <code>res/values-v21/</code> で新しい API 用にスタイルを修正します。それからスタイル継承を用いて、基本スタイルを <code>res/values/</code> で定義してそのスタイルを <code>res/values-v21/</code> で継承します。</p>
+
+
+<h2 id="SupportLib">サポート ライブラリを使用する</h2>
+
+<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 サポート ライブラリ</a> r21 以降には、次のマテリアル デザイン機能が含まれています。</p>
+
+<ul>
+<li><code>Theme.AppCompat</code> テーマのいずれかを適用した場合の、システム ウィジェット用の<a href="{@docRoot}training/material/theme.html">マテリアル デザインのスタイル</a>。</li>
+<li><code>Theme.AppCompat</code> テーマの<a href="{@docRoot}training/material/theme.html#ColorPalette">カラー パレット テーマ属性</a>。</li>
+<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">データ コレクションを表示する</a> {@link android.support.v7.widget.RecyclerView} ウィジェット。</li>
+<li><a href="{@docRoot}training/material/lists-cards.html#CardView">カードを作成する</a> {@link android.support.v7.widget.CardView} ウィジェット。</li>
+<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">画像から代表色を抽出する</a>{@link android.support.v7.graphics.Palette} クラス。</li>
+</ul>
+
+<h3>システム ウィジェット</h3>
+
+<p><code>Theme.AppCompat</code> テーマでは、次のウィジェット向けにマテリアル デザインのスタイルが提供されています。</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>カラー パレット</h3>
+
+<p>Android v7 サポート ライブラリでマテリアル デザインのスタイルを入手し、カラー パレットをカスタマイズするには、次のように <code>Theme.AppCompat</code> テーマのいずれかを適用します。</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>リストとカード</h3>
+
+<p>{@link android.support.v7.widget.RecyclerView} ウィジェットや{@link android.support.v7.widget.CardView} ウィジェットは Android v7 サポート ライブラリを通じて以前のバージョンの Android でも使用できますが、次のような制限があります。</p>
+<ul>
+<li>{@link android.support.v7.widget.CardView} は、付加的なパディングを使い、プログラムでシャドウを実装するものになります。</li>
+<li>{@link android.support.v7.widget.CardView} によって、丸い角と交差する子ビューがクリップされることはありません。</li>
+</ul>
+
+
+<h3>依存関係</h3>
+
+<p>5.0（API レベル 21）より前のバージョンの Android でこれらの機能を使用するには、Android v7 サポート ライブラリを <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle dependency</a> としてプロジェクトに含めます。</p>
+
+<pre>
+dependencies {
+ compile 'com.android.support:appcompat-v7:21.0.+'
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
+
+
+<h2 id="CheckVersion">システム バージョンを確認する</h2>
+
+<p>次の機能は、Android 5.0（API レベル 21）以降でのみ使用できます。</p>
+
+<ul>
+<li>アクティビティ遷移</li>
+<li>タッチ フィードバック</li>
+<li>出現アニメーション</li>
+<li>経路ベースのアニメーション</li>
+<li>ベクター型ドローアブル</li>
+<li>ドローアブルによる着色</li>
+</ul>
+
+<p>以前のバージョンの Android との互換性を維持するには、上記の機能に対する API を起動する前に、システム {@link android.os.Build.VERSION#SDK_INT version} を実行時に確認します。</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>注:</strong> アプリがサポートする Android のバージョンを指定するには、マニフェスト ファイルで <code>android:minSdkVersion</code> 属性と <code>android:targetSdkVersion</code> 属性を使用します。Android 5.0 でマテリアル デザインの機能を使用するには、<code>android:targetSdkVersion</code> 属性を <code>21</code> に設定します。詳細については、<a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html"><uses-sdk> API ガイド</a>をご覧ください。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/training/material/drawables.jd b/docs/html-intl/intl/ja/training/material/drawables.jd
new file mode 100644
index 0000000..ff929a4
--- /dev/null
+++ b/docs/html-intl/intl/ja/training/material/drawables.jd
@@ -0,0 +1,105 @@
+page.title=ドローアブルの使用
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>このレッスンでの学習内容</h2>
+<ol>
+ <li><a href="#DrawableTint">ドローアブル リソースに色を付ける</a></li>
+ <li><a href="#ColorExtract">画像から代表色を抽出する</a></li>
+ <li><a href="#VectorDrawables">ベクター型ドローアブルを作成する</a></li>
+</ol>
+<h2>関連ドキュメント</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li>
+</ul>
+</div>
+</div>
+
+<p>アプリにマテリアル デザインを実装する際は、Drawable （ドローアブル）の次の機能を活用できます。</p>
+
+<ul>
+<li>ドローアブルによる着色</li>
+<li>代表色の抽出</li>
+<li>ベクター型ドローアブル</li>
+</ul>
+
+<p>このレッスンでは、アプリでのこれらの機能を使用する方法について説明します。</p>
+
+
+<h2 id="DrawableTint">ドローアブル リソースに色を付ける</h2>
+
+<p>Android 5.0（API レベル 21）以降では、アルファ マスクとして定義されたビットマップや 9-patch に色を付けることができます。着色には、カラー リソースまたはカラー リソースに変換されるテーマ属性を使用できます（<code>?android:attr/colorPrimary</code> など）。通常は、これらのアセットを一度作成するだけで、テーマに合うように自動的に着色されます。</p>
+
+<p>{@code setTint()} メソッドを使用して {@link android.graphics.drawable.BitmapDrawable} オブジェクトか {@link android.graphics.drawable.NinePatchDrawable} オブジェクトに色を適用できます。また、<code>android:tint</code> 属性や <code>android:tintMode</code> 属性を使ってレイアウトで色やモードを設定できます。</p>
+
+
+<h2 id="ColorExtract">画像から代表色を抽出する</h2>
+
+<p>Android サポート ライブラリ r21 以降には、画像から代表色を抽出できる {@link android.support.v7.graphics.Palette} クラスが含まれています。このクラスで抽出できる代表色には次のものがあります。</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>これらの色を抽出するには、画像を読み込むバックグラウンド スレッドで {@link android.graphics.Bitmap} オブジェクトを{@link android.support.v7.graphics.Palette#generate Palette.generate()} の静的メソッドに渡します。スレッドを使用できない場合は、代わりに {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} メソッドを呼び出してリスナーを提供します。</p>
+
+<p><code>Palette</code> クラスで、<code>Palette.getVibrantColor</code> などの getter メソッドを使って画像から代表色を取得できます。</p>
+
+<p>プロジェクトで {@link android.support.v7.graphics.Palette} クラスを使用するには、アプリのモジュールに次の <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependency</a> を追加します。</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:21.0.+'
+}
+</pre>
+
+<p>詳細については、API リファレンスの {@link android.support.v7.graphics.Palette} クラスをご覧ください。</p>
+
+
+<h2 id="VectorDrawables">ベクター型ドローアブルを作成する</h2>
+
+<!-- video box -->
+<a class="notice-developers-video"
+href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
+<div>
+ <h3>ビデオ</h3>
+ <p>Android<br>ベクター グラフィック</p>
+</div>
+</a>
+
+<p>Android 5.0（API レベル 21）以降では、ベクター型ドローアブルを定義できます。このドローアブルは定義を失わずに拡張できます。ビットマップ画像では画面密度ごとにアセット ファイルが必要ですが、ベクター画像で必要なアセット ファイルは 1 つのみです。ベクター画像を作成するには、<code><vector></code> XML 要素で図形の詳細を定義します。</p>
+
+<p>次の例では、ハート型のベクター画像を定義しています。</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>Android ではベクター画像は {@link android.graphics.drawable.VectorDrawable} オブジェクトとして表示されます。<code>pathData</code> 構文の詳細については、<a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path reference</a> をご覧ください。ベクター型ドローアブルのアニメーションの詳細については、<a href="{@docRoot}training/material/animations.html#AnimVector">Animating Vector Drawables</a> をご覧ください。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/training/material/get-started.jd b/docs/html-intl/intl/ja/training/material/get-started.jd
new file mode 100644
index 0000000..db0439b
--- /dev/null
+++ b/docs/html-intl/intl/ja/training/material/get-started.jd
@@ -0,0 +1,147 @@
+page.title=スタート ガイド
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>このレッスンでの学習内容</h2>
+<ol>
+ <li><a href="#ApplyTheme">マテリアル テーマを適用する</a></li>
+ <li><a href="#Layouts">レイアウトを設計する</a></li>
+ <li><a href="#Depth">ビューでエレベーションを指定する</a></li>
+ <li><a href="#ListsCards">リストとカードを作成する</a></li>
+ <li><a href="#Animations">アニメーションをカスタマイズする</a></li>
+</ol>
+<h2>関連ドキュメント</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>マテリアル デザインでアプリを作成するには: </p>
+
+<ol>
+ <li style="margin-bottom:10px">
+ <a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a>を確認します。</li>
+ <li style="margin-bottom:10px">
+ マテリアル <strong>テーマ</strong>をアプリに適用します。</li>
+ <li style="margin-bottom:10px">
+ マテリアル デザインのガイドラインに沿って<strong>レイアウト</strong>を<br>作成します。</li>
+ <li style="margin-bottom:10px">
+ ビューの<strong>エレベーション</strong>を設定してシャドウを付与します。</li>
+ <li style="margin-bottom:10px">
+ リストやカードにシステム<strong>ウィジェット</strong>を使用します。</li>
+ <li style="margin-bottom:10px">
+ アプリで<strong>アニメーション</strong>をカスタマイズします。</li>
+</ol>
+
+<h3>下方互換性を維持する</h3>
+
+<p>Android 5.0 より前のバージョンとの互換性を維持しながら、マテリアル デザインのさまざまな機能をアプリに追加できます。詳細については、<a href="{@docRoot}training/material/compatibility.html">互換性の維持</a>をご覧ください。</p>
+
+<h3>マテリアル デザインでアプリを更新する</h3>
+
+<p>既存のアプリを更新してマテリアル デザインを組み込むには、マテリアル デザインのガイドラインに沿ってレイアウトをアップデートします。深度、タッチ フィードバック、アニメーションを組み込んでいることも確認してください。</p>
+
+<h3>マテリアル デザインで新しいアプリを作成する</h3>
+
+<p>マテリアル デザインの機能を使って新しいアプリを作成すると、<a href="http://www.google.com/design/spec">マテリアル デザインのガイドライン</a>から凝縮したデザイン フレームワークが得られます。ガイドラインに従い、Android フレームワークの新しい機能を使ってアプリを設計、開発してください。</p>
+
+
+<h2 id="ApplyTheme">マテリアル テーマを適用する</h2>
+
+<p>アプリでマテリアル テーマを適用するには、次のように <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>マテリアル テーマはアップデートされたシステム ウィジェットを提供しています。これにより、タッチ フィードバックやアクティビティ遷移のためのカラー パレットやデフォルトのアニメーションを指定でます。詳細については、<a href="{@docRoot}training/material/theme.html">マテリアル テーマの使用</a>をご覧ください。</p>
+
+
+<h2 id="Layouts">レイアウトを設計する</h2>
+
+<p>マテリアル テーマを適用したりカスタマイズしたりすることに加えて、レイアウトが<a href="http://www.google.com/design/spec">マテリアル デザインのガイドライン</a>に準拠している必要があります。レイアウトを設計するときは、次の項目に特に注意してください。</p>
+
+<ul>
+<li>ベースライン グリッド</li>
+<li>キーライン</li>
+<li>空白スペース</li>
+<li>タッチ ターゲット サイズ</li>
+<li>レイアウト構成</li>
+</ul>
+
+
+<h2 id="Depth">ビューでエレベーションを指定する</h2>
+
+<p>ビューにはシャドウを付与できます。ビューのエレベーションの値によって、付与されるシャドウのサイズと表示される順序が決まります。ビューのエレベーションを設定するには、次のようにレイアウトの <code>android:elevation</code> 属性を使用します。</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>新しい <code>translationZ</code> プロパティを使用すると、ビューのエレベーションの一時的な変更が反映されるアニメーションを作成できます。エレベーションの変更は、<a href="{@docRoot}training/material/animations.html#ViewState">タッチ操作に応答</a>するときに便利です。</p>
+
+<p>詳細については、<a href="{@docRoot}training/material/shadows-clipping.html">シャドウとクリッピング ビューの定義</a>をご覧ください。</p>
+
+
+<h2 id="ListsCards">リストとカードを作成する</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} は {@link android.widget.ListView} のさらに柔軟なバージョンで、異なるレイアウト タイプをサポートしてパフォーマンスを向上します。{@link android.support.v7.widget.CardView} を使用すると、あらゆるアプリで一貫した外観でカードの中に情報を表示できます。次のコードは、レイアウトに {@link android.support.v7.widget.CardView} を含める方法の一例です。</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>詳細については、<a href="{@docRoot}training/material/lists-cards.html">リストとカードの作成</a>をご覧ください。</p>
+
+
+<h2 id="Animations">アニメーションをカスタマイズする</h2>
+
+<p>Android 5.0（API レベル 21）には、アプリでカスタム アニメーションを作成する新たな API が含まれます。たとえば次のように、アクティビティ遷移を有効にしてアクティビティ内部で ExitTransition を定義できます。</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>このアクティビティから次のアクティビティを開始するときに Exit 遷移がアクティベートされます。</p>
+
+<p>新しいアニメーション API の詳細については、<a href="{@docRoot}training/material/animations.html">カスタム アニメーションの定義</a>をご覧ください。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/training/material/index.jd b/docs/html-intl/intl/ja/training/material/index.jd
new file mode 100644
index 0000000..22939a2
--- /dev/null
+++ b/docs/html-intl/intl/ja/training/material/index.jd
@@ -0,0 +1,55 @@
+page.title=マテリアル デザインでのアプリ作成
+page.type=設計
+page.image=images/material.png
+page.metaDescription=アプリにマテリアル デザインを適用する方法を学習する
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>必要な知識と前提条件</h2>
+ <ul>
+ <li>Android 5.0（API レベル 21）</li>
+ <li>Android Studio 0.8</li>
+ </ul>
+</div>
+</div>
+
+<p>マテリアル デザインは、視覚的な動作と、複数のプラットフォームやデバイス間でのインタラクション デザインに関する包括的な指針です。Android アプリでマテリアル デザインを使うには、<a href="http://www.google.com/design/spec/material-design/introduction.html">マテリアル デザインの仕様</a>で説明されているガイドラインに従い、Android 5.0（API レベル 21）の新しいコンポーネントや機能を使用します。</p>
+
+<p>ここでは、次の要素を用いてマテリアル デザイン アプリを作成する方法について説明します。</p>
+
+<ul>
+<li>マテリアル テーマ</li>
+<li>カードやリストのウィジェット</li>
+<li>カスタム シャドウとビューのクリッピング</li>
+<li>ベクター型ドローアブル</li>
+<li>カスタム アニメーション</li>
+</ul>
+
+<p>さらに、アプリでマテリアル デザインの機能を使うときに Android 5.0（API レベル 21）より前のバージョンとの互換性を維持する方法についても説明します。</p>
+
+<h2>レッスン</h2>
+
+<dl>
+ <dt><a href="{@docRoot}training/material/get-started.html">スタート ガイド</a></dt>
+ <dd>マテリアル デザインの機能でアプリを更新する方法について学習します。</dd>
+
+ <dt><a href="{@docRoot}training/material/theme.html">マテリアル テーマの使用</a></dt>
+ <dd>マテリアル デザインのスタイルをアプリに適用する方法について学習します。</dd>
+
+ <dt><a href="{@docRoot}training/material/lists-cards.html">リストとカードの作成</a></dt>
+ <dd>システム ウィジェットを使って、一貫した外観や使用感のリストやカードを作成する方法について学習します。</dd>
+
+ <dt><a href="{@docRoot}training/material/shadows-clipping.html">シャドウとクリッピング ビューの定義</a></dt>
+ <dd>ビューのエレベーションを設定してカスタム シャドウを作成する方法やビューをクリップする方法について学習します。</dd>
+
+ <dt><a href="{@docRoot}training/material/drawables.html">ドローアブルの使用</a></dt>
+ <dd>ベクター型ドローアブルの作成方法やドローアブル リソースに色を付ける方法について学習します。</dd>
+
+ <dt><a href="{@docRoot}training/material/animations.html">カスタム アニメーションの定義</a></dt>
+ <dd>ビューのカスタム アニメーションや共有要素とアクティビティ遷移の作成方法について学習します。</dd>
+
+ <dt><a href="{@docRoot}training/material/compatibility.html">互換性の維持</a></dt>
+ <dd>Android 5.0 より前のバージョンのプラットフォームとの互換性を保つ方法について学習します。</dd>
+</dl>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/training/material/lists-cards.jd b/docs/html-intl/intl/ja/training/material/lists-cards.jd
new file mode 100644
index 0000000..3b18d364
--- /dev/null
+++ b/docs/html-intl/intl/ja/training/material/lists-cards.jd
@@ -0,0 +1,223 @@
+page.title=リストとカードの作成
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>このレッスンでの学習内容</h2>
+<ol>
+ <li><a href="#RecyclerView">リストを作成する</a></li>
+ <li><a href="#CardView">カードを作成する</a></li>
+ <li><a href="#Dependencies">依存関係を追加する</a></li>
+</ol>
+<h2>関連ドキュメント</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>マテリアル デザインのスタイルを適用した複雑なリストやカードをアプリで作成するには、{@link android.support.v7.widget.RecyclerView} ウィジェットや {@link android.support.v7.widget.CardView} ウィジェットを使用できます。</p>
+
+
+<h2 id="RecyclerView">リストを作成する</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} ウィジェットは、{@link android.widget.ListView} をさらに進化させ柔軟にしたものです。このウィジェットは、大きなデータ セットを表示するためのコンテナで、限られたビューを維持することで非常に効率的にスクロールできます。ユーザーのアクションやネットワークのイベントに基づいて、実行時に要素が変わるデータ コレクションを持つ場合には、{@link android.support.v7.widget.RecyclerView} ウィジェットを使用してください。</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} クラスは次の機能を提供することで、簡単に大きなデータ セットを表示したり処理したりできます。</p>
+
+<ul>
+ <li>アイテムの位置調整を行うレイアウト マネージャー</li>
+ <li>アイテムの削除や追加のような一般的な操作のデフォルト アニメーション</li>
+</ul>
+
+<p>また、{@link android.support.v7.widget.RecyclerView} ウィジェットのカスタム レイアウト マネージャーやアニメーションも柔軟に定義できます。</p>
+
+<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
+<p class="img-caption">
+<strong>図 1</strong> <code>RecyclerView</code> ウィジェット
+</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} ウィジェットを使用するには、アダプターとレイアウト マネージャーを指定する必要があります。アダプターを作成するには、{@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} クラスを拡張します。具体的な実装方法は、データ セットの詳細やビューの種類によって異なります。詳細については、下記の<a href="#RVExamples">例</a>をご覧ください。</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>図 2</strong> - <code>RecyclerView</code> を使ったリスト
+</p>
+</div>
+
+<p><strong>レイアウト マネージャー</strong>は、{@link android.support.v7.widget.RecyclerView} 内でアイテム ビューを位置付けし、ユーザーから見えなくなったアイテム ビューを再利用するタイミングを決定します。ビューを再利用（または<em>リサイクル</em>）するために、レイアウト マネージャーからアダプターにデータ セットの異なる要素でビューの内容を入れ替えるよう求められることがあります。このようにビューをリサイクルすることで、不要なビューを作成したりコストのかかる {@link android.app.Activity#findViewById findViewById()} のルックアップをしたりせずに済み、パフォーマンスが向上します。</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} には、次のレイアウト マネージャーが組み込まれています。</p>
+
+<ul>
+<li>{@link android.support.v7.widget.LinearLayoutManager} は、アイテムを縦方向か横方向のスクロール リストに表示します。</li>
+<li>{@link android.support.v7.widget.GridLayoutManager} は、アイテムをグリッドに表示します。</li>
+<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} は、アイテムをスタッガード グリッドに表示します。</li>
+</ul>
+
+<p>カスタム レイアウト マネージャーを作成するには、{@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} クラスを拡張します。</p>
+
+<h3>アニメーション</h3>
+
+<p>{@link android.support.v7.widget.RecyclerView} では、アイテムの追加や削除のアニメーションがデフォルトで有効になっています。これらのアニメーションをカスタマイズするには、{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} クラスを拡張し、{@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} メソッドを使用します。</p>
+
+<h3 id="RVExamples">例</h3>
+
+<p>次のコードは、レイアウトに {@link android.support.v7.widget.RecyclerView} を追加する方法の一例です。</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>レイアウトに {@link android.support.v7.widget.RecyclerView} ウィジェットを追加したら、オブジェクトのハンドルを取得してレイアウト マネージャーに接続し、表示するデータのアダプターを添付します。</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>アダプターによって、データ セット内の各項目にアクセスしたり、アイテムのビューを作成したり、元のアイテムが見えなくなったときにビューのコンテンツの一部を新しいデータ アイテムと入れ替えたりできます。次のコードはデータ セットを実装する簡単な例です。このデータ セットは、{@link android.widget.TextView} ウィジェットを使用して表示した文字列の配列で構成されています。</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>図 3</strong> カードの例
+</p>
+</div>
+
+<h2 id="CardView">カードを作成する</h2>
+
+<p>{@link android.support.v7.widget.CardView} は {@link android.widget.FrameLayout} クラスを拡張して、あらゆるプラットフォームで統一された外観のカード内に情報を表示できます。{@link android.support.v7.widget.CardView} ウィジェットは、シャドウを付けたり角を丸くしたりできます。</p>
+
+<p>シャドウ付きのカードを作成するには、<code>card_view:cardElevation</code> 属性を使用します。{@link android.support.v7.widget.CardView} は Android 5.0（API レベル 21）以降ではリアルなエレベーションや動きのあるシャドウを使用し、それより前のバージョンではプログラム的なシャドウを使用します。詳細については、<a href="{@docRoot}training/material/compatibility.html">互換性の維持</a>をご覧ください。</p>
+
+<p>{@link android.support.v7.widget.CardView} ウィジェットの外観をカスタマイズするには、次のプロパティを使用します。</p>
+
+<ul>
+ <li>レイアウトで角の丸みを設定するには、<code>card_view:cardCornerRadius</code> 属性を使用します。</li>
+ <li>コードで角の丸みを設定するには、<code>CardView.setRadius</code> メソッドを使用します。</li>
+ <li>カードの背景色を設定するには、<code>card_view:cardBackgroundColor</code> 属性を使用します。</li>
+</ul>
+
+<p>次のコードは、レイアウトに {@link android.support.v7.widget.CardView} ウィジェットを含める方法の一例です。</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>詳細については、API リファレンスの {@link android.support.v7.widget.CardView} をご覧ください。</p>
+
+
+<h2 id="Dependencies">依存関係を追加する</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} ウィジェットや {@link android.support.v7.widget.CardView} ウィジェットは、<a href="{@docRoot}tools/support-library/features.html#v7">v7 サポート ライブラリ</a>の一部です。プロジェクトでこれらのウィジェットを使うには、次のようにアプリのモジュールに <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependencies</a> を追加します。</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/training/material/shadows-clipping.jd b/docs/html-intl/intl/ja/training/material/shadows-clipping.jd
new file mode 100644
index 0000000..cafd1c7
--- /dev/null
+++ b/docs/html-intl/intl/ja/training/material/shadows-clipping.jd
@@ -0,0 +1,99 @@
+page.title=シャドウとクリッピング ビューの定義
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>このレッスンでの学習内容</h2>
+<ol>
+ <li><a href="#Elevation">ビューにエレベーションを割り当てる</a></li>
+ <li><a href="#Shadows">ビュー シャドウとアウトラインをカスタマイズする</a></li>
+ <li><a href="#Clip">ビューをクリップする</a></li>
+</ol>
+<h2>関連ドキュメント</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li>
+</ul>
+</div>
+</div>
+
+<p>マテリアル デザインでは、UI 要素に Elevation （エレベーション、高度）を導入しています。エレベーションによって、ユーザーは一つの要素が他の要素と比べて重要であることを理解でき、目の前の作業に集中できるようになります。</p>
+
+<p>ビューのエレベーションは Z プロパティで表され、シャドウ ビューの見た目を決定します。Z 値が高くなればシャドウも大きく、滑らかになります。Z 値が高いビューは Z 値が低いビューを覆い隠しますが、Z 値がビューのサイズに影響することはありません。</p>
+
+<p>シャドウは、Z 値が設定された親ビューによって描かれ、標準的なビュー クリッピングの対象になります。デフォルトでは親ビューによってクリップされます。</p>
+
+<p>エレベーションは、何らかのアクションでビューの平面上にウィジェットが浮き上がるようなアニメーションを作成する際にも役立ちます。</p>
+
+<p>マテリアル デザインのエレベーションの詳細については、<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objects in 3D space</a> をご覧ください。</p>
+
+
+<h2 id="Elevation">ビューにエレベーションを割り当てる</h2>
+
+<p>ビューの Z 値には次の 2 つのコンポーネントがあります。 <ul>
+<li>Elevation （エレベーション）: 静的なコンポーネントです。</li>
+<li>Translation （トランスレーション）: アニメーションに使われる動的なコンポーネントです。</li>
+</ul>
+
+<p><code>Z = elevation + translationZ</code></p>
+
+<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
+<p class="img-caption"><strong>図 1</strong> - 異なるビュー エレベーションのシャドウ</p>
+
+<p>レイアウトの定義でビューのエレベーションを設定するには、<code>android:elevation</code> 属性を使用します。アクティビティのコードでビューのエレベーションを設定するには、{@link android.view.View#setElevation View.setElevation()} メソッドを使用します。</p>
+
+<p>ビューのトランスレーションを設定するには、{@link android.view.View#setTranslationZ View.setTranslationZ()} メソッドを使用します。</p>
+
+<p>新しい {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} メソッドや {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} メソッドを使用すると、ビューのエレベーションに簡単にアニメーションを付けられます。詳細については、API リファレンスの {@link android.view.ViewPropertyAnimator} と、デベロッパー ガイドの <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Property Animation</a> をご覧ください。</p>
+
+<p>また、{@link android.animation.StateListAnimator} を使用してアニメーションを宣言的に指定することも可能です。これは、ユーザーがボタンを押したときなど、状態の変化によってアニメーションを動作する場合に特に役立ちます。詳細については、<a href="{@docRoot}training/material/animations.html#ViewState">ビューの状態遷移にアニメーションを付ける</a>をご覧ください。</p>
+
+<p>Z 値は dp （密度非依存ピクセル）で測られます。</p>
+
+
+<h2 id="Shadows">ビュー シャドウとアウトラインをカスタマイズする</h2>
+
+<p>ビュー背景のドローアブルの範囲によってシャドウのデフォルトの形状が決まります。<strong>アウトライン</strong>はグラフィック オブジェクトの外形を表し、タッチ フィードバックのリップル（波紋）の領域を定義します。</p>
+
+<p>次のように、背景ドローアブルで定義されたビューについて考えてみます。</p>
+
+<pre>
+<TextView
+ android:id="@+id/myview"
+ ...
+ android:elevation="2dp"
+ android:background="@drawable/myrect" />
+</pre>
+
+<p>次のように、背景ドローアブルが角が丸い長方形として定義されます。</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>背景ドローアブルによってビューの外形が定義されるため、このビューは角が丸いシャドウを付与します。カスタム アウトラインを使えば、ビュー シャドウのデフォルトの形状を更新できます。</p>
+
+<p>コードでビューのカスタム アウトラインを定義するには: <p>
+
+<ol>
+<li>{@link android.view.ViewOutlineProvider} クラスを拡張します。</li>
+<li>{@link android.view.ViewOutlineProvider#getOutline getOutline()} メソッドを上書きします。</li>
+<li>{@link android.view.View#setOutlineProvider View.setOutlineProvider()} メソッドで、ビューに新しい OutlineProvider を割り当てます。</li>
+</ol>
+
+<p>{@link android.graphics.Outline} クラスのメソッドを使用して、楕円形や角が丸い長方形のアウトラインを作成できます。ビューのデフォルトの OutlineProvider は、ビューの背景から外形を決定します。ビューがシャドウを付与しないようにするには、OutlineProvider を <code>null</code> に設定します。</p>
+
+
+<h2 id="Clip">ビューをクリップする</h2>
+
+<p>ビューをクリップすると、ビューの形を簡単に変更できます。ビューをクリップすることで、他のデザイン要素との統一性を保ったり、ユーザーのインプットに応じてビューの形を変えたりできます。{@link android.view.View#setClipToOutline View.setClipToOutline()} メソッドか <code>android:clipToOutline</code> 属性を使用すると、ビューをそのアウトラインの範囲にクリップできます。{@link android.graphics.Outline#canClip Outline.canClip()} メソッドで指定されているように、クリップがサポートされるのは長方形、円形、角が丸い長方形のみです。</p>
+
+<p>上述のように、ドローアブルの範囲でビューをクリップするには、ドローアブルをビューの背景として設定し、{@link android.view.View#setClipToOutline View.setClipToOutline()} メソッドを呼び出します。</p>
+
+<p>ビューのクリップは負荷の高い操作であるため、ビューのクリップに使用する形状にはアニメーションを付けないでください。この効果を付けるには、<a href="{@docRoot}training/material/animations.html#Reveal">出現エフェクト</a>アニメーションを使用します。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ja/training/material/theme.jd b/docs/html-intl/intl/ja/training/material/theme.jd
new file mode 100644
index 0000000..66e4592
--- /dev/null
+++ b/docs/html-intl/intl/ja/training/material/theme.jd
@@ -0,0 +1,107 @@
+page.title=マテリアル テーマの使用
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>このレッスンでの学習内容</h2>
+<ol>
+ <li><a href="#ColorPalette">カラー パレットをカスタマイズする</a></li>
+ <li><a href="#StatusBar">ステータス バーをカスタマイズする</a></li>
+ <li><a href="#Inheritance">テーマ個別のビュー</a></li>
+</ol>
+<h2>関連ドキュメント</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>新しいマテリアル テーマでは、次のものが提供されます。</p>
+
+<ul>
+ <li>カラー パレットを設定できるシステム ウィジェット</li>
+ <li>システム ウィジェットのタッチ フィードバック アニメーション</li>
+ <li>アクティビティ遷移アニメーション</li>
+</ul>
+
+<p>マテリアル テーマの外観は、ブランド イメージにあわせて自分のカラー パレットでカスタマイズできます。<a href="#fig3">図 3</a> のように、アクション バーやステータス バーにテーマ属性で色を付けることができます。</p>
+
+<p>システム ウィジェットには、新しいデザインやタッチ フィードバックがあります。カラー パレット、タッチ フィードバック、アクティビティ遷移は、自分のアプリ向けにカスタマイズできます。</p>
+
+<p>マテリアル テーマは次のように定義されます。</p>
+
+<ul>
+ <li><code>@android:style/Theme.Material</code> （暗色バージョン）</li>
+ <li><code>@android:style/Theme.Material.Light</code> （明色バージョン）</li>
+ <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+</ul>
+
+<p>使用できるマテリアル スタイルのリストについては、API リファレンスの {@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>図 1</strong> 暗色マテリアル テーマ</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>図 2</strong> 明色マテリアル テーマ</p>
+ </div>
+</div>
+<br style="clear:left">
+</div>
+
+<p class="note">
+<strong>注:</strong> マテリアル テーマは、Android 5.0（API レベル 21）以降でのみ使用できます。<a href="{@docRoot}tools/support-library/features.html#v7">v7 サポート ライブラリ</a>は、一部のウィジェットに対してマテリアル デザイン スタイルでテーマを提供し、カラー パレットのカスタマイズをサポートしています。詳細については、<a href="{@docRoot}training/material/compatibility.html">互換性の維持</a>をご覧ください。
+</p>
+
+
+<h2 id="ColorPalette">カラー パレットをカスタマイズする</h2>
+
+<p style="margin-bottom:30px">ブランド イメージに合うようにテーマの基本色をカスタマイズするには、次の例に示すようにマテリアル テーマから継承する場合、テーマ属性を使ってカスタム カラーを定義します。</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>図 3</strong> マテリアル テーマのカスタマイズ</p>
+</div>
+
+
+<h2 id="StatusBar">ステータス バーをカスタマイズする</h2>
+
+<p>マテリアル テーマを使うと、ステータス バーを簡単にカスタマイズできます。ブランド イメージに合わせて、またコントラストで白色のステータス アイコンを際立たせて色を設定できます。ステータス バーのカスタム カラーを設定するには、マテリアル テーマを拡張するときに <code>android:statusBarColor</code> 属性を使用します。デフォルトでは <code>android:statusBarColor</code> は <code>android:colorPrimaryDark</code> の値を継承します。</p>
+
+<p>また、ステータス バーの背景を描くこともできます。たとえば、白色のステータス アイコンが見にくくならないように薄い暗色のグラデーションを付けて、ステータス バーを写真の上に透過的に表示したい場合、<code>@android:color/transparent</code> に <code>android:statusBarColor</code> 属性を指定してウィンドウ フラグを希望の通りに調整します。アニメーションやフェードには、{@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} メソッドも使用できます。</p>
+
+<p class="note">
+<strong>注:</strong> ステータス バーはメインのツールバーと明確に分かれている必要があります。ただし、背景に画面の端から端まで表示される鮮やかな画像やメディア コンテンツを使用したり、アイコンが見にくくならないようにグラデーションを使用する場合は例外です。
+</p>
+
+<p>ナビケーションとステータス バーをカスタマイズするときは、どちらも透過的にするか、ステータス バーだけを変更します。その他のケースではナビゲーション バーは黒色のままにする必要があります。</p>
+
+
+<h2 id="Inheritance">テーマ個別のビュー</h3>
+
+<p>XML レイアウト定義の各要素では、テーマのリソースを参照する <code>android:theme</code> 属性を指定できます。この属性は、要素や子要素のテーマを変更し、インターフェースの一定の割合を占めるテーマ カラー パレットを変更する場合に役立ちます。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/design/material/index.jd b/docs/html-intl/intl/ko/design/material/index.jd
new file mode 100644
index 0000000..23d775b
--- /dev/null
+++ b/docs/html-intl/intl/ko/design/material/index.jd
@@ -0,0 +1,43 @@
+page.title=디자인
+page.viewport_width=970
+section.landing=true
+meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
+header.hide=1
+footer.hide=1
+
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 0;
+ top: 42px;
+ width: 266px;
+
+}
+#hero-image {
+ padding-left:68px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ <span itemprop="description">뛰어난 Android 앱을 디자인하는 방법을 배울 수 있는 <strong>Android 디자인</strong>에 오신 것을 환영합니다.</span>
+ <br><br>
+ <strong>Android 5.0</strong>이 디자이너에게 어떤 기능을 제공하는지 궁금하세요? <a href="{@docRoot}design/patterns/new.html">Android의 새 기능</a>을 참조하세요.<br><br>
+ <a href="/design/get-started/creative-vision.html" class="landing-page-link">크리에이티브 비전</a>
+ </div>
+ <a id="hero-image" href="/design/get-started/creative-vision.html"> <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">머티어리얼 디자인</h2>
+<p>Android 5.0에서는 종이와 잉크의 질감을 느낄 수 있는 디자인 개념이 도입되었습니다.
+</p>
+<p><a class="white" href="{@docRoot}design/material/index.html">자세히 알아보기</a></p>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/training/material/animations.jd b/docs/html-intl/intl/ko/training/material/animations.jd
new file mode 100644
index 0000000..eda949b
--- /dev/null
+++ b/docs/html-intl/intl/ko/training/material/animations.jd
@@ -0,0 +1,456 @@
+page.title=사용자지정 애니메이션 정의
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>이 과정에서 다루는 내용</h2>
+<ol>
+ <li><a href="#Touch">터치 피드백 사용자지정</a></li>
+ <li><a href="#Reveal">Reveal Effect 사용</a></li>
+ <li><a href="#Transitions">액티비티 전환 사용자지정</a></li>
+ <li><a href="#ViewState">뷰 상태 변경 애니메이트</a></li>
+ <li><a href="#AnimVector">Vector Drawable 애니메이트</a></li>
+</ol>
+<h2>필독 항목</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>머티어리얼 디자인에서 애니메이션은 동작에 대한 사용자 피드백을 제공하며, 사용자가 앱과 상호작용할 때 시각적 연속성을 제공합니다. 머티어리얼 테마는 버튼 및 액티비티 전환을 위한 몇 가지 기본 애니메이션을 제공합니다. Android 5.0(API 레벨 21) 이상에서는 다음과 같은 애니메이션을 사용자지정하거나 새로운 애니메이션을 만들 수 있도록 지원합니다.</p>
+
+<ul>
+<li>터치 피드백</li>
+<li>Circular Reveal</li>
+<li>액티비티 전환</li>
+<li>커브 모션</li>
+<li>뷰 상태 변경</li>
+</ul>
+
+
+<h2 id="Touch">터치 피드백 사용자지정</h2>
+
+<p>머티어리얼 디자인의 터치 피드백은 사용자가 UI 요소와 상호작용하는 시점에서 즉시 시각적으로 확인할 수 있습니다. 버튼의 기본 터치 피드백 애니메이션은 물결 효과를 통해 서로 다른 상태 간에 전환하는 새 {@link android.graphics.drawable.RippleDrawable} 클래스를 사용합니다.</p>
+
+<p>대부분의 경우, 다음과 같이 뷰 배경을 지정하는 방식으로 뷰 XML에서 이 기능을 적용해야 합니다.</p>
+
+<ul>
+<li>제한된 물결의 경우, <code>?android:attr/selectableItemBackground</code></li>
+<li>뷰를 넘어 확장되는 물결의 경우, <code>?android:attr/selectableItemBackgroundBorderless</code></li>
+</ul>
+
+<p class="note"><strong>참고:</strong> <code>selectableItemBackgroundBorderless</code>는 API 레벨 21에서 새로 도입된 특성입니다.</p>
+
+
+<p>또는 <code>ripple</code> 요소를 사용하여 {@link android.graphics.drawable.RippleDrawable}을 XML 리소스로 정의할 수 있습니다.</p>
+
+<p>{@link android.graphics.drawable.RippleDrawable} 개체에 색상을 지정할 수 있습니다. 기본 터치 피드백 색상을 변경하려면 테마의 <code>android:colorControlHighlight</code> 특성을 사용합니다.</p>
+
+<p>자세한 내용은 {@link android.graphics.drawable.RippleDrawable} 클래스의 API 레퍼런스를 참조하세요.</p>
+
+
+<h2 id="Reveal">Reveal Effect 사용</h2>
+
+<p>Reveal 애니메이션은 UI 요소 그룹을 표시하거나 숨길 때 사용자에게 시각적 연속성을 제공합니다. {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} 메서드를 사용하면 클리핑 서클을 애니메이트하여 뷰를 표시하거나 숨길 수 있습니다.</p>
+
+<p>이전에 보이지 않았던 뷰를 표시하려면 아래의 효과를 사용합니다.</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 = Math.max(myView.getWidth(), myView.getHeight());
+
+// create the animator for this view (the start radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
+
+// make the view visible and start the animation
+myView.setVisibility(View.VISIBLE);
+anim.start();
+</pre>
+
+<p>이전에 보였던 뷰를 숨기려면 아래의 효과를 사용합니다.</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">액티비티 전환 사용자지정</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>그림 1</strong> - 공유 요소를 이용한 전환.</p>
+ <em>영화를 재생하려면 기기 화면을 클릭합니다</em>
+ </div>
+</div>
+
+<p>머티어리얼 디자인 앱의 액티비티 전환은 공통 요소 간의 모션 및 변환을 통해 서로 다른 상태 간에 시각적 연결을 제공합니다. 들어가기 및 나가기 전환과 액티비티 간 공유 요소의 전환을 위한 사용자지정 애니메이션을 지정할 수 있습니다.</p>
+
+<ul>
+<li><strong>들어가기</strong> 전환은 액티비티의 뷰가 장면에 들어가는 방식을 결정합니다. 예를 들어 <em>explode</em> 들어가기 전환의 경우, 뷰가 밖에서 장면 속으로 들어가며 화면의 중앙으로 향합니다.</li>
+
+<li><strong>나가기</strong> 전환은 액티비티의 뷰가 장면을 나가는 방식을 결정합니다. 예를 들어 <em>explode</em> 나가기 전환의 경우, 뷰가 화면의 중앙에서 장면을 벗어납니다.</li>
+
+<li><strong>공유 요소</strong> 전환은 두 액티비티 간에 공유되는 뷰가 이 두 액티비티 간에 전환되는 방식을 결정합니다. 예를 들어 두 액티비티에서 사용하는 동일한 이미지가 다른 위치에 있고 크기도 다를 경우, <em>changeImageTransform</em> 공유 요소 전환은 두 액티비티 간에 이미지를 매끄럽게 변환하고 배율을 조정합니다.</li>
+</ul>
+
+<p>Android 5.0(API 레벨 21)은 다음 들어가기 및 나가기 전환을 지원합니다.</p>
+
+<ul>
+<li><em>explode</em> - 뷰를 장면의 중앙에서 안이나 밖으로 이동합니다.</li>
+<li><em>slide</em> - 뷰를 장면의 가장자리 중 하나에서 안이나 밖으로 이동합니다.</li>
+<li><em>fade</em> - 불투명도를 변경하여 뷰를 추가하거나 장면에서 제거합니다.</li>
+</ul>
+
+<p>{@link android.transition.Visibility} 클래스를 확장하는 모든 전환은 들어가기 또는 나가기 전환으로 지원됩니다. 자세한 내용은 {@link android.transition.Transition} 클래스의 API 레퍼런스를 참조하세요.</p>
+
+<p>Android 5.0(API 레벨 21)은 다음의 공유 요소 전환도 지원합니다.</p>
+
+<ul>
+<li><em>changeBounds</em> - 대상 뷰의 레이아웃 경계에서 변경을 애니메이트합니다.</li>
+<li><em>changeClipBounds</em> - 대상 뷰의 클리핑 경계에서 변경을 애니메이트합니다.</li>
+<li><em>changeTransform</em> - 대상 뷰의 배율 및 회전 변경을 애니메이트합니다.</li>
+<li><em>changeImageTransform</em> - 대상 이미지의 크기 및 배율 변경을 애니메이트합니다.</li>
+</ul>
+
+<p>앱에서 액티비티 전환을 활성화할 경우, 들어가기 및 나가기 액티비티 간에 기본 크로스페이딩(cross-fading) 전환이 활성화됩니다.</p>
+
+<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
+<p class="img-caption">
+ <strong>그림 2</strong> - 하나의 공유 요소로 장면 전환.
+</p>
+
+<h3>사용자지정 전환 지정</h3>
+
+<p>먼저 머티어리얼 테마에서 상속한 스타일을 정의할 때, <code>android:windowContentTransitions</code> 특성을 통해 창 콘텐츠 전환을 활성화합니다. 들어가기, 나가기 및 공유 요소 전환도 스타일 정의에서 지정할 수 있습니다.</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>이 예에서 <code>change_image_transform</code> 전환은 다음과 같이 정의됩니다.</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><code>changeImageTransform</code> 요소는 {@link android.transition.ChangeImageTransform} 클래스에 해당합니다. 자세한 내용은 {@link android.transition.Transition}의 API 레퍼런스를 참조하세요.</p>
+
+<p>코드에서 창 콘텐츠 전환을 활성화할 경우,{@link android.view.Window#requestFeature Window.requestFeature()} 메서드를 호출합니다.</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>코드에서 전환을 지정하려면, {@link android.transition.Transition} 개체를 사용하여 다음과 같은 메서드를 호출합니다.</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>{@link android.view.Window#setExitTransition setExitTransition()} 및 {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 메서드는 호출하는 액티비티의 나가기 전환을 정의합니다. {@link android.view.Window#setEnterTransition setEnterTransition()} 및 {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} 메서드는 호출되는 액티비티의 들어가기 전환을 정의합니다.</p>
+
+<p>전환 효과를 극대화하려면 호출하는 액티비티와 호출되는 액티비티 모두에서 창 콘텐츠 전환을 활성화해야 합니다. 그렇지 않으면 호출하는 액티비티가 나가기 전환을 시작하지만, 배율 또는 페이드와 같은 창 전환이 나타납니다.</p>
+
+<p>들어가기 전환을 최대한 빨리 시작하려면 호출되는 액티비티에서 {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} 메서드를 사용하세요. 그러면 더욱 인상적인 들어가기 전환이 가능합니다.</p>
+
+<h3>전환을 사용하여 액티비티 시작</h3>
+
+<p>전환을 활성화하고 액티비티에 대해 나가기 전환을 설정한 경우, 다음과 같이 다른 액티비티를 시작하면 전환이 활성화됩니다.</p>
+
+<pre>
+startActivity(intent,
+ ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
+</pre>
+
+<p>두 번째 액티비티에 대해 들어가기 전환을 설정한 경우, 액티비티가 시작되면 전환도 활성화됩니다. 다른 액티비티를 시작할 때 전환을 비활성화하려면 <code>null</code> 옵션 번들을 제공하세요.</p>
+
+<h3>공유 요소가 있는 액티비티 시작</h3>
+
+<p>공유 요소를 가진 두 액티비티 간에 화면 전환 애니메이션을 만들려면:</p>
+
+<ol>
+<li>테마에서 창 콘텐츠 전환을 활성화합니다.</li>
+<li>스타일에서 공유 요소 전환을 지정합니다.</li>
+<li>전환을 XML 리소스로 정의합니다.</li>
+<li><code>android:transitionName</code> 특성을 사용하여 두 레이아웃의 공유 요소에 공통 이름을 지정합니다.</li>
+<li>{@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()} 메서드를 사용합니다.</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>코드에서 생성하는 공유된 동적 뷰의 경우, {@link android.view.View#setTransitionName View.setTransitionName()} 메서드를 사용하여 두 액티비티의 공통 요소 이름을 지정합니다.</p>
+
+<p>두 번째 액티비티 종료 시, 장면 전환 애니메이션을 되돌리려면 {@link android.app.Activity#finish Activity.finish()} 대신 {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} 메서드를 호출합니다.</p>
+
+<h3>여러 공유 요소를 가진 액티비티 시작</h3>
+
+<p>2개 이상의 공유 요소를 가진 두 액티비티 간에 적용할 장면 전환 애니메이션을 만들려면 <code>android:transitionName</code> 특성으로(또는 두 액티비티에서 {@link android.view.View#setTransitionName View.setTransitionName()} 메서드를 사용하여) 두 레이아웃의 공유 요소를 정의하고 다음과 같이 {@link android.app.ActivityOptions} 개체를 생성합니다.</p>
+
+<pre>
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
+ Pair.create(view1, "agreedName1"),
+ Pair.create(view2, "agreedName2"));
+</pre>
+
+
+<h2 id="CurvedMotion">커브 모션 사용</h2>
+
+<p>머티어리얼 디자인의 애니메이션은 시간 보간 및 공간 이동 패턴에서 커브를 사용합니다. Android 5.0(API 레벨 21) 이상에서 애니메이션의 사용자지정 타이밍 커브 및 커브 모션 패턴을 정의할 수 있습니다.</p>
+
+<p>{@link android.view.animation.PathInterpolator} 클래스는 베지어 커브나 {@link android.graphics.Path} 개체를 기반으로 하는 새 보간기(interpolator)입니다. 보간기는 생성자 인수를 사용하여 지정된 기준점 (0,0) 및 (1,1)과 제어점으로 모션 커브를 1x1 정사각형 안에 지정합니다. 또한 경로 보간기를 XML 리소스로 정의할 수도 있습니다.</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>시스템은 머티어리얼 디자인 사양에서 세 가지 기본 커브에 대한 XML 리소스를 제공합니다.</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>{@link android.view.animation.PathInterpolator} 개체를 {@link android.animation.Animator#setInterpolator Animator.setInterpolator()} 메서드에 전달할 수 있습니다.</p>
+
+<p>{@link android.animation.ObjectAnimator} 클래스에는 한 번에 2개 이상의 속성을 사용하여 경로를 따라 좌표를 애니메이트할 수 있는 새 생성자가 있습니다. 예를 들어 다음 애니메이터는 뷰의 X 및 Y 속성을 애니메이트하기 위해 {@link android.graphics.Path} 개체를 사용합니다.</p>
+
+<pre>
+ObjectAnimator mAnimator;
+mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
+...
+mAnimator.start();
+</pre>
+
+
+<h2 id="ViewState">뷰 상태 변경 애니메이트</h2>
+
+<p>{@link android.animation.StateListAnimator} 클래스를 사용하면 뷰의 상태가 변경될 때 실행되는 애니메이터를 정의할 수 있습니다. 다음 예는 {@link android.animation.StateListAnimator}를 XML 리소스로 정의하는 방법을 보여줍니다.</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>사용자지정 뷰 상태 애니메이션을 뷰에 첨부하려면 이 예와 같이 XML 리소스 파일의 <code>selector</code> 요소를 사용하여 애니메이터를 정의한 후에 <code>android:stateListAnimator</code> 특성을 통해 뷰에 할당합니다. 코드에서 뷰에 상태 목록 애니메이터를 할당하려면 {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} 메서드를 사용하고, {@link android.view.View#setStateListAnimator View.setStateListAnimator()} 메서드로 애니메이터를 뷰에 할당합니다.</p>
+
+<p>머티어리얼 테마를 확장하는 테마의 경우, 버튼은 기본적으로 Z 애니메이션을 가집니다. 버튼에서 이러한 동작을 피하려면 <code>android:stateListAnimator</code> 특성을 <code>@null</code>로 설정합니다.</p>
+
+<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 클래스를 사용하면 연관된 뷰의 상태 변경 사이에 애니메이션을 보여주는 Drawable을 생성할 수 있습니다. Android 5.0의 일부 시스템 위젯은 이러한 애니메이션을 기본적으로 사용합니다. 다음 예는 {@link android.graphics.drawable.AnimatedStateListDrawable}을 XML 리소스로 정의하는 방법을 보여줍니다.</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">Vector Drawable 애니메이트</h2>
+
+<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Vector Drawable</a>은 정의를 잃지 않고 확대할 수 있습니다. {@link android.graphics.drawable.AnimatedVectorDrawable} 클래스를 사용하면 Vector Drawable의 속성을 애니메이트할 수 있습니다.</p>
+
+<p>일반적으로 애니메이트된 Vector Drawable은 다음 3개의 XML 파일에서 정의합니다.</p>
+
+<ul>
+<li><code>res/drawable/</code>의 <code><vector></code> 요소를 가진 Vector Drawable</li>
+<li><code>res/drawable/</code>의 <code><animated-vector></code> 요소를 가진 애니메이트된 Vector Drawable</li>
+<li><code>res/anim/</code>의 <code><objectAnimator></code> 요소를 가진 하나 이상의 개체 애니메이터</li>
+</ul>
+
+<p>애니메이트된 Vector Drawable은 <code><group></code> 및 <code><path></code> 요소의 특성을 애니메이트할 수 있습니다. <code><group></code> 요소는 경로 또는 하위 그룹 집합을 정의하며, <code><path></code> 요소는 그릴 경로를 정의합니다.</p>
+
+<p>애니메이트할 Vector Drawable을 정의하는 경우, 애니메이터 정의에서 참조할 수 있도록 <code>android:name</code> 특성을 사용하여 그룹 및 경로에 고유한 이름을 할당합니다. 예:</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>애니메이트된 Vector Drawable 정의는 Vector Drawable의 그룹 및 경로를 이름으로 참조합니다.</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>애니메이션 정의는 {@link android.animation.ObjectAnimator} 또는 {@link android.animation.AnimatorSet} 개체를 나타냅니다. 이 예의 첫 번째 애니메이터는 대상 그룹을 360도 회전합니다.</p>
+
+<pre>
+<!-- res/anim/rotation.xml -->
+<objectAnimator
+ android:duration="6000"
+ android:propertyName="rotation"
+ android:valueFrom="0"
+ android:valueTo="360" />
+</pre>
+
+<p>두 번째 애니메이터는 Vector Drawable의 경로를 다른 모양으로 모핑합니다. 두 경로 모두 모핑이 가능해야 하며, 같은 수의 명령어와 각 명령어에 대해 같은 수의 매개변수가 있어야 합니다.</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>자세한 내용은 {@link android.graphics.drawable.AnimatedVectorDrawable}의 API 레퍼런스를 참조하세요.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/training/material/compatibility.jd b/docs/html-intl/intl/ko/training/material/compatibility.jd
new file mode 100644
index 0000000..a712d1b
--- /dev/null
+++ b/docs/html-intl/intl/ko/training/material/compatibility.jd
@@ -0,0 +1,134 @@
+page.title=호환성 유지
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>이 과정에서 다루는 내용</h2>
+<ol>
+ <li><a href="#Theme">대체 스타일 정의</a></li>
+ <li><a href="#Layouts">대체 레이아웃 제공</a></li>
+ <li><a href="#SupportLib">지원 라이브러리 사용</a></li>
+ <li><a href="#CheckVersion">시스템 버전 확인</a></li>
+</ol>
+<h2>필독 항목</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>머티어리얼 테마 및 사용자지정 액티비티 전환과 같은 일부 머티어리얼 디자인 기능은 Android 5.0(API 레벨 21) 이상에서만 이용할 수 있습니다. 그러나 머티어리얼 디자인을 지원하는 기기에서 실행할 경우 이러한 기능을 사용하면서도 이전 버전의 Android를 실행하는 기기와도 호환되도록 앱을 디자인할 수 있습니다.</p>
+
+
+<h2 id="Theme">대체 스타일 정의</h2>
+
+<p>머티어리얼 테마를 지원하는 기기에서 해당 테마를 사용하고, 이전 버전의 Android를 실행하는 기기에서 구버전의 테마로 되돌리도록 앱을 구성할 수 있습니다.</p>
+
+<ol>
+<li><code>res/values/styles.xml</code>에서 구버전의 테마에서 상속된 테마(Holo 등)를 정의합니다.</li>
+<li><code>res/values-v21/styles.xml</code>에서 머티어리얼 테마에서 상속된 같은 이름을 가진 테마를 정의합니다.</li>
+<li>매니페스트 파일에서 이 테마를 앱의 테마로 설정합니다.</li>
+</ol>
+
+<p class="note"><strong>참고:</strong> 앱이 머티어리얼 테마를 사용하지만 이러한 방식으로 대체 테마를 제공하지 않으면 Android 5.0 이전 버전에서는 앱이 실행되지 않습니다.
+</p>
+
+
+<h2 id="Layouts">대체 레이아웃 제공</h2>
+
+<p>머티어리얼 디자인 지침에 따라 디자인한 레이아웃이 Android 5.0(API 레벨 21)에서 새로 도입된 XML 특성을 사용하지 않는 경우, 해당 레이아웃은 이전 버전의 Android에서 실행됩니다. 그렇지 않은 경우 대체 레이아웃을 제공할 수 있습니다. 또한 이전 버전의 Android에서 앱이 표시되는 방식을 사용자지정할 수 있는 대체 레이아웃을 제공할 수도 있습니다.</p>
+
+<p><code>res/layout-v21/</code> 안에서 Android 5.0(API 레벨 21)의 레이아웃 파일을 생성하고, <code>res/layout/</code> 안에서 이전 버전의 Android를 위한 대체 레이아웃 파일을 생성합니다. 예를 들어, <code>res/layout/my_activity.xml</code>은 <code>res/layout-v21/my_activity.xml</code>의 대체 레이아웃입니다.</p>
+
+<p>코드의 중복을 피하기 위해 <code>res/values/</code> 안에서 스타일을 정의하고, 새 API에 대해 <code>res/values-v21/</code>에서 스타일을 수정하고, 스타일 상속을 사용하여 <code>res/values/</code>에서 기본 스타일을 정의하고 <code>res/values-v21/</code>에서 해당 스타일로부터 상속합니다.</p>
+
+
+<h2 id="SupportLib">지원 라이브러리 사용</h2>
+
+<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a> r21 이상에는 다음과 같은 머티어리얼 디자인 기능이 포함되어 있습니다.</p>
+
+<ul>
+<li><code>Theme.AppCompat</code> 테마 중 하나를 적용할 때 일부 시스템 위젯에 대한 <a href="{@docRoot}training/material/theme.html">머티어리얼 디자인 스타일</a></li>
+<li><code>Theme.AppCompat</code> 테마의 <a href="{@docRoot}training/material/theme.html#ColorPalette">색상표 테마 특성</a></li>
+<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">데이터 컬렉션 표시</a>를 위한 {@link android.support.v7.widget.RecyclerView} 위젯</li>
+<li> <a href="{@docRoot}training/material/lists-cards.html#CardView">카드 생성</a>을 위한 {@link android.support.v7.widget.CardView} 위젯</li>
+<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">이미지에서 주요 색상을 추출</a>하기 위한 {@link android.support.v7.graphics.Palette} 클래스</li>
+</ul>
+
+<h3>시스템 위젯</h3>
+
+<p><code>Theme.AppCompat</code> 테마는 다음 위젯에 대한 머티어리얼 디자인 스타일을 제공합니다.</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>색상표</h3>
+
+<p>Android v7 Support Library에서 머티어리얼 디자인 스타일을 가져와서 색상표를 사용자지정하려면 <code>Theme.AppCompat</code> 테마 중 하나를 적용합니다.</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>목록 및 카드</h3>
+
+<p>{@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView} 위젯은 Android v7 Support Library를 통해 이전 버전의 Android에서 사용할 수 있지만, 다음과 같은 제약이 있습니다.</p>
+<ul>
+<li>{@link android.support.v7.widget.CardView}는 추가 패딩을 사용하여 프로그래밍 방식의 그림자 구현으로 환원됩니다.</li>
+<li>{@link android.support.v7.widget.CardView}는 둥근 모서리와 교차하는 하위 뷰를 클리핑하지 않습니다.</li>
+</ul>
+
+
+<h3>종속관계</h3>
+
+<p>Android 5.0(API 레벨 21) 이전 버전에서 다음 기능을 사용하려면 프로젝트에 Android v7 Support Library를 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 종속관계</a>로 포함하세요.</p>
+
+<pre>
+dependencies {
+ compile 'com.android.support:appcompat-v7:21.0.+'
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
+
+
+<h2 id="CheckVersion">시스템 버전 확인</h2>
+
+<p>다음 기능은 Android 5.0(API 레벨 21) 이상에서만 사용할 수 있습니다.</p>
+
+<ul>
+<li>액티비티 전환</li>
+<li>터치 피드백</li>
+<li>애니메이션 표시</li>
+<li>경로기반 애니메이션</li>
+<li>Vector Drawable</li>
+<li>Drawable 색조 적용</li>
+</ul>
+
+<p>이전 버전 Android와 호환성을 유지하려면, 이러한 기능을 위한 API를 호출하기 전에 런타임에 시스템 {@link android.os.Build.VERSION#SDK_INT version}을 확인하세요.</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>참고:</strong> 앱에서 어떤 버전의 Android를 지원할지 지정하려면 매니페스트 파일에서 <code>android:minSdkVersion</code> 및 <code>android:targetSdkVersion</code> 특성을 사용하세요. Android 5.0에서 머티어리얼 디자인 기능을 사용하려면 <code>android:targetSdkVersion</code> 특성을 <code>21</code>로 설정하세요. 자세한 내용은 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html"><uses-sdk> API 가이드</a>를 참조하세요.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/training/material/drawables.jd b/docs/html-intl/intl/ko/training/material/drawables.jd
new file mode 100644
index 0000000..bea82b8
--- /dev/null
+++ b/docs/html-intl/intl/ko/training/material/drawables.jd
@@ -0,0 +1,105 @@
+page.title=Drawable 사용
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>이 과정에서 다루는 내용</h2>
+<ol>
+ <li><a href="#DrawableTint">Drawable 리소스 색조 적용</a></li>
+ <li><a href="#ColorExtract">이미지에서 주요 색상 추출</a></li>
+ <li><a href="#VectorDrawables">Vector Drawable 생성</a></li>
+</ol>
+<h2>필독 항목</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
+</ul>
+</div>
+</div>
+
+<p>Drawable의 다음 기능은 앱에서 머티어리얼 디자인을 구현하는 데 도움이 됩니다.</p>
+
+<ul>
+<li>Drawable 색조 적용</li>
+<li>주요 색상 추출</li>
+<li>Vector Drawable</li>
+</ul>
+
+<p>이 과정은 앱에서 이러한 기능을 사용하는 방법을 보여줍니다.</p>
+
+
+<h2 id="DrawableTint">Drawable 리소스 색조 적용</h2>
+
+<p>Android 5.0(API 레벨 21) 이상에서는 알파 마스크로 정의된 비트맵 및 나인패치에 색조를 적용할 수 있습니다. 색상 리소스 또는 색상 리소스로 변환되는 테마 특성(예: <code>?android:attr/colorPrimary</code>)을 사용하여 색조를 적용할 수 있습니다. 일반적으로 이러한 에셋은 한 번만 생성하며 자동으로 채색되어 테마와 일치하게 됩니다.</p>
+
+<p>{@code setTint()} 메서드를 사용하여 {@link android.graphics.drawable.BitmapDrawable} 또는 {@link android.graphics.drawable.NinePatchDrawable} 개체에 색조를 적용할 수 있습니다. 또한 <code>android:tint</code> 및 <code>android:tintMode</code> 특성으로 레이아웃에 색조 색상과 모드를 설정할 수 있습니다.</p>
+
+
+<h2 id="ColorExtract">이미지에서 주요 색상 추출</h2>
+
+<p>Android Support Library r21 이상에는 이미지에서 주요 색상을 추출할 수 있는 {@link android.support.v7.graphics.Palette} 클래스가 있습니다. 이 클래스는 다음과 같은 주요 색상을 추출합니다.</p>
+
+<ul>
+<li>생생한 색상</li>
+<li>생생한 어두운 색상</li>
+<li>생생한 밝은 색상</li>
+<li>차분한 색상</li>
+<li>차분하고 어두운 색상</li>
+<li>차분하고 밝은 색상</li>
+</ul>
+
+<p>이러한 색상을 추출하려면, 이미지를 불러올 배경 스레드에서 {@link android.support.v7.graphics.Palette#generate Palette.generate()} 정적 메서드로 {@link android.graphics.Bitmap} 개체를 전달합니다. 스레드를 사용할 수 없는 경우, 대신 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 메서드를 호출하고 Listener를 제공합니다.</p>
+
+<p><code>Palette.getVibrantColor</code>와 같은 <code>Palette</code> 클래스의 getter 메서드를 사용하여 이미지에서 주요 색상을 추출할 수 있습니다.</p>
+
+<p>프로젝트에서 {@link android.support.v7.graphics.Palette} 클래스를 사용하려면 다음 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 종속관계</a>를 앱의 모듈에 추가합니다.</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:21.0.+'
+}
+</pre>
+
+<p>자세한 내용은 {@link android.support.v7.graphics.Palette} 클래스의 API 레퍼런스를 참조하세요.</p>
+
+
+<h2 id="VectorDrawables">Vector Drawable 생성</h2>
+
+<!-- video box -->
+<a class="notice-developers-video"
+href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
+<div>
+ <h3>비디오</h3>
+ <p>Android Vector Graphics</p>
+</div>
+</a>
+
+<p>Android 5.0(API 레벨 21) 이상에서는 정의를 잃지 않고 배율을 조정하는 Vector Drawable을 정의할 수 있습니다. 비트맵 이미지의 경우 각 화면 밀도마다 에셋 파일이 필요한 반면, 벡터 이미지의 경우에는 하나의 에셋 파일만 필요로 합니다. 벡터 이미지를 생성하려면 <code><vector></code> XML 요소 안에 모양의 세부정보를 정의합니다.</p>
+
+<p>다음 예에서는 하트 모양을 가진 벡터 이미지를 정의합니다.</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>벡터 이미지는 Android에서 {@link android.graphics.drawable.VectorDrawable} 개체로 나타납니다. <code>pathData</code> 구문에 대한 자세한 내용은 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 경로 레퍼런스</a>를 참조하세요. Vector Drawable의 속성 애니메이트에 대한 자세한 내용은 <a href="{@docRoot}training/material/animations.html#AnimVector">Vector Drawable 애니메이트</a>를 참조하세요.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/training/material/get-started.jd b/docs/html-intl/intl/ko/training/material/get-started.jd
new file mode 100644
index 0000000..e1f6eee
--- /dev/null
+++ b/docs/html-intl/intl/ko/training/material/get-started.jd
@@ -0,0 +1,147 @@
+page.title=시작하기
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>이 과정에서 다루는 내용</h2>
+<ol>
+ <li><a href="#ApplyTheme">머티어리얼 테마 적용</a></li>
+ <li><a href="#Layouts">레이아웃 디자인</a></li>
+ <li><a href="#Depth">뷰에서 엘리베이션 지정</a></li>
+ <li><a href="#ListsCards">목록 및 카드 생성</a></li>
+ <li><a href="#Animations">애니메이션 사용자지정</a></li>
+</ol>
+<h2>필독 항목</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>머티어리얼 디자인으로 앱을 생성하려면:</p>
+
+<ol>
+ <li style="margin-bottom:10px">
+ <a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a>을 검토합니다.</li>
+ <li style="margin-bottom:10px">
+ 앱에 머티어리얼 <strong>테마</strong>를 적용합니다.</li>
+ <li style="margin-bottom:10px">
+ 머티어리얼 디자인 지침에 따라 <strong>레이아웃</strong>을 생성합니다.</li>
+ <li style="margin-bottom:10px">
+ 그림자를 드리우기 위한 뷰의 <strong>엘리베이션</strong>을 지정합니다.</li>
+ <li style="margin-bottom:10px">
+ 목록 및 카드에는 시스템 <strong>위젯</strong>을 사용합니다.</li>
+ <li style="margin-bottom:10px">
+ 앱에서 <strong>애니메이션</strong>을 사용자지정합니다.</li>
+</ol>
+
+<h3>이전 버전과의 호환성 유지</h3>
+
+<p>Android 5.0 이전 버전과의 호환성을 유지하면서 다양한 머티어리얼 디자인 기능을 앱에 추가할 수 있습니다. 자세한 내용은 <a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.</p>
+
+<h3>머티어리얼 디자인으로 앱 업데이트</h3>
+
+<p>머티어리얼 디자인을 통합하기 위해 기존 앱을 업데이트하려면 머티어리얼 디자인 지침에 따라 레이아웃을 업데이트하세요. 또한 깊이, 터치 피드백, 애니메이션도 통합하세요.</p>
+
+<h3>머티어리얼 디자인으로 새 앱 생성</h3>
+
+<p>머티어리얼 디자인 기능으로 새 앱을 생성하는 경우, <a href="http://www.google.com/design/spec">머티어리얼 디자인 지침</a>은 효율적인 디자인 프레임워크를 제공합니다. 앱 디자인 및 개발 시 이 지침을 따르고 Android 프레임워크의 새로운 기능을 사용하세요.</p>
+
+
+<h2 id="ApplyTheme">머티어리얼 테마 적용</h2>
+
+<p>머티어리얼 테마를 앱에 적용하려면 <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>머티어리얼 테마는 터치 피드백 및 액티비티 전환을 위한 색상표 및 기본 애니메이션을 설정할 수 있는 업데이트된 시스템 위젯을 제공합니다. 자세한 내용은<a href="{@docRoot}training/material/theme.html">머티어리얼 테마 사용</a>을 참조하세요.</p>
+
+
+<h2 id="Layouts">레이아웃 디자인</h2>
+
+<p>머티어리얼 테마를 적용하고 사용자지정하는 것과 더불어, 레이아웃이 <a href="http://www.google.com/design/spec">머티어리얼 디자인 지침</a>을 따라야 합니다. 레이아웃 디자인 시 다음 사항에 특히 주의하세요.</p>
+
+<ul>
+<li>기준선 그리드</li>
+<li>키라인</li>
+<li>간격</li>
+<li>터치 대상 크기</li>
+<li>레이아웃 구조</li>
+</ul>
+
+
+<h2 id="Depth">뷰에서 엘리베이션 지정</h2>
+
+<p>뷰는 그림자를 드리울 수 있으며 뷰의 엘리베이션 값은 그림자 크기 및 그리는 순서를 결정합니다. 뷰의 엘리베이션을 설정하려면 레이아웃에서 <code>android:elevation</code> 특성을 사용하세요.</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>새 <code>translationZ</code> 속성을 사용하여 뷰 엘리베이션의 일시적 변경을 반영하는 애니메이션을 생성할 수 있습니다. 엘리베이션 변경은 <a href="{@docRoot}training/material/animations.html#ViewState">터치 제스처에 반응</a>할 때 유용합니다.</p>
+
+<p>자세한 내용은 <a href="{@docRoot}training/material/shadows-clipping.html">그림자 정의 및 뷰 클리핑</a>을 참조하세요.</p>
+
+
+<h2 id="ListsCards">목록 및 카드 생성</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView}는 {@link android.widget.ListView}의 플러그 기능이 개선된 버전으로, 다양한 레이아웃 유형을 지원하고 향상된 성능을 제공합니다. {@link android.support.v7.widget.CardView}를 사용하면 모든 앱에서 일관된 모습으로 카드 안의 정보를 표시할 수 있습니다. 다음 코드 예는 {@link android.support.v7.widget.CardView}를 레이아웃에 포함시키는 방법을 보여줍니다.</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>자세한 내용은 <a href="{@docRoot}training/material/lists-cards.html">목록 및 카드 생성</a>을 참조하세요.</p>
+
+
+<h2 id="Animations">애니메이션 사용자지정</h2>
+
+<p>Android 5.0(API 레벨 21)은 앱에서 사용자지정 애니메이션 생성을 위한 새 API가 포함되어 있습니다. 예를 들어, 액티비티 전환을 활성화하고 액티비티 내부에서 나가기 전환을 정의할 수 있습니다.</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>이 액티비티에서 다른 액티비티를 시작하면 나가기 전환이 활성화됩니다.</p>
+
+<p>새 애니메이션 API에 대한 자세한 내용은 <a href="{@docRoot}training/material/animations.html">사용자지정 애니메이션 정의</a>를 참조하세요.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/training/material/index.jd b/docs/html-intl/intl/ko/training/material/index.jd
new file mode 100644
index 0000000..7ce1631
--- /dev/null
+++ b/docs/html-intl/intl/ko/training/material/index.jd
@@ -0,0 +1,55 @@
+page.title=머티어리얼 디자인으로 앱 생성
+page.type=design
+page.image=images/material.png
+page.metaDescription=앱에 머티어리얼 디자인을 적용하는 방법을 배웁니다.
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>종속관계 및 전제조건</h2>
+ <ul>
+ <li>Android 5.0(API 레벨 21)</li>
+ <li>Android Studio 0.8</li>
+ </ul>
+</div>
+</div>
+
+<p>머티어리얼 디자인은 플랫폼 및 기기 전반의 표현 방식, 모션 및 상호작용 디자인에 대한 종합적인 지침입니다. Android 앱에서 머티어리얼 디자인을 사용하려면 <a href="http://www.google.com/design/spec/material-design/introduction.html">머티어리얼 디자인 사양</a>에 설명된 지침을 따르세요. 또한 Android 5.0 (API 레벨 21)에 있는 새 구성요소 및 기능을 사용하세요.</p>
+
+<p>이 클래스에서는 다음 요소를 사용하여 머티어리얼 디자인 앱을 만드는 방법을 보여줍니다.</p>
+
+<ul>
+<li>머티어리얼 테마</li>
+<li>목록 및 카드용 위젯</li>
+<li>사용자지정 그림자 및 뷰 클리핑</li>
+<li>Vector Drawable</li>
+<li>사용자지정 애니메이션</li>
+</ul>
+
+<p>또한 이 클래스에서는 앱에서 머티어리얼 디자인 기능을 사용할 때 Android 5.0(API 레벨 21) 이전 버전과의 호환성을 유지하는 방법도 배웁니다.</p>
+
+<h2>과정</h2>
+
+<dl>
+ <dt><a href="{@docRoot}training/material/get-started.html">시작하기</a></dt>
+ <dd>머티어리얼 디자인 기능을 사용하여 앱을 업데이트하는 방법을 배웁니다.</dd>
+
+ <dt><a href="{@docRoot}training/material/theme.html">머티어리얼 테마 사용</a></dt>
+ <dd>앱에 머티어리얼 디자인 스타일을 적용하는 방법을 배웁니다.</dd>
+
+ <dt><a href="{@docRoot}training/material/lists-cards.html">목록 및 카드 생성</a></dt>
+ <dd>시스템 위젯을 사용하여 일관된 모양과 느낌을 가진 목록과 카드를 만드는 방법을 배웁니다.</dd>
+
+ <dt><a href="{@docRoot}training/material/shadows-clipping.html">그림자 정의 및 뷰 클리핑</a></dt>
+ <dd>뷰에 대한 엘리베이션을 설정하여 사용자지정 그림자를 생성하는 방법과 뷰를 클리핑하는 방법을 배웁니다.</dd>
+
+ <dt><a href="{@docRoot}training/material/drawables.html">Drawable 사용</a></dt>
+ <dd>Vector Drawable을 생성하는 방법과 Drawable 리소스를 채색하는 방법을 배웁니다.</dd>
+
+ <dt><a href="{@docRoot}training/material/animations.html">사용자지정 애니메이션 정의</a></dt>
+ <dd>공유 요소를 사용하여 뷰 및 액티비티 전환을 위한 사용자지정 애니메이션을 생성하는 방법을 배웁니다.</dd>
+
+ <dt><a href="{@docRoot}training/material/compatibility.html">호환성 유지</a></dt>
+ <dd>Android 5.0 이전 버전 플랫폼과의 호환성을 유지하는 방법을 배웁니다.</dd>
+</dl>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/training/material/lists-cards.jd b/docs/html-intl/intl/ko/training/material/lists-cards.jd
new file mode 100644
index 0000000..61416f6
--- /dev/null
+++ b/docs/html-intl/intl/ko/training/material/lists-cards.jd
@@ -0,0 +1,223 @@
+page.title=목록 및 카드 생성
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>이 과정에서 다루는 내용</h2>
+<ol>
+ <li><a href="#RecyclerView">목록 생성</a></li>
+ <li><a href="#CardView">카드 생성</a></li>
+ <li><a href="#Dependencies">종속관계 추가</a></li>
+</ol>
+<h2>필독 항목</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>앱에서 머티어리얼 디자인 스타일로 복잡한 목록과 카드를 생성하려면 {@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView} 위젯을 사용하세요.</p>
+
+
+<h2 id="RecyclerView">목록 생성</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} 위젯은 {@link android.widget.ListView}의 더욱 향상되고 유연해진 버전입니다. 이 위젯은 한정된 수의 뷰를 유지함으로써 매우 효율적으로 스크롤할 수 있는 큰 데이터 집합을 표시하기 위한 컨테이너입니다. 사용자 작업 또는 네트워크 이벤트를 기반으로 런타임에 요소가 변경되는 데이터 컬렉션이 있는 경우 {@link android.support.v7.widget.RecyclerView} 위젯을 사용하세요.</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} 클래스는 다음 기능을 제공하여 큰 데이터 집합의 표시 및 취급 작업을 단순화합니다.</p>
+
+<ul>
+ <li>항목 위치지정을 위한 레이아웃 관리자</li>
+ <li>항목 제거 및 추가와 같은 일반 항목 작업을 위한 기본 애니메이션</li>
+</ul>
+
+<p>또한 필요에 따라 {@link android.support.v7.widget.RecyclerView} 위젯을 위한 사용자지정 레이아웃 관리자 및 애니메이션을 정의할 수도 있습니다.</p>
+
+<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
+<p class="img-caption">
+<strong>그림 1</strong>. <code>RecyclerView</code> 위젯.
+</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} 위젯을 사용하려면 어댑터와 레이아웃 관리자를 지정해야 합니다. 어댑터를 생성하려면 {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 클래스를 확장하세요. 구현 세부사항은 데이터 집합의 사양 및 뷰 유형에 의해 결정됩니다. 자세한 내용은 아래의 <a href="#RVExamples">예</a>를 참조하세요.</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>그림 2</strong> - <code>RecyclerView</code>를 사용한 목록.
+</p>
+</div>
+
+<p><strong>레이아웃 관리자</strong>는 항목 뷰를 {@link android.support.v7.widget.RecyclerView} 내에 배치하고 사용자에게 더 이상 보이지 않는 항목 뷰를 언제 재사용할지 결정합니다. 뷰를 재사용(또는 <em>재활용</em>)하기 위해, 레이아웃 관리자는 어댑터에게 뷰의 콘텐츠를 데이터 집합의 다른 요소로 교체하도록 요청할 수 있습니다. 이런 방식으로 뷰를 재활용하면 불필요한 뷰 생성이나 리소스를 많이 소모하는 {@link android.app.Activity#findViewById findViewById()} 룩업을 수행하지 않아도 되므로 성능이 개선됩니다.</p>
+
+<p>{@link android.support.v7.widget.RecyclerView}는 다음과 같은 내장 레이아웃 관리자를 제공합니다.</p>
+
+<ul>
+<li>{@link android.support.v7.widget.LinearLayoutManager}는 항목을 가로 또는 세로 스크롤 목록에 표시합니다.</li>
+<li>{@link android.support.v7.widget.GridLayoutManager}는 그리드 형식으로 항목을 표시합니다.</li>
+<li>{@link android.support.v7.widget.StaggeredGridLayoutManager}는 지그재그형의 그리드 형식으로 항목을 표시합니다.</li>
+</ul>
+
+<p>사용자지정 레이아웃 관리자를 생성하려면 {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 클래스를 확장하세요.</p>
+
+<h3>애니메이션</h3>
+
+<p>항목 추가 및 제거를 위한 애니메이션은 {@link android.support.v7.widget.RecyclerView}에서 기본적으로 활성화됩니다. 이러한 애니메이션을 사용자지정하려면 {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 클래스를 확장하고 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} 메서드를 사용하세요.</p>
+
+<h3 id="RVExamples">예</h3>
+
+<p>다음 코드 예는 {@link android.support.v7.widget.RecyclerView}를 레이아웃에 추가하는 방법을 보여줍니다.</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>{@link android.support.v7.widget.RecyclerView} 위젯을 레이아웃에 추가한 후, 개체 핸들을 얻어 레이아웃 관리자에 연결하고, 표시할 데이터의 어댑터를 첨부합니다.</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>어댑터는 데이터 집합의 항목에 액세스할 수 있게 해주며, 항목 뷰를 생성하고, 원래의 항목이 더 이상 보이지 않을 경우 일부 뷰의 콘텐츠를 새 데이터 항목으로 교체합니다. 다음 코드 예는 {@link android.widget.TextView} 위젯을 사용하여 표시된 문자열 배열로 이루어진 데이터 집합의 간단한 구현을 보여줍니다.</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>그림 3</strong>. 카드 예.
+</p>
+</div>
+
+<h2 id="CardView">카드 생성</h2>
+
+<p>{@link android.support.v7.widget.CardView}는 {@link android.widget.FrameLayout} 클래스를 확장하고 카드 내의 정보를 플랫폼에서 일관된 모습으로 표시할 수 있도록 합니다. {@link android.support.v7.widget.CardView} 위젯은 그림자와 둥근 모서리를 가질 수 있습니다.</p>
+
+<p>그림자가 있는 카드를 생성하려면 <code>card_view:cardElevation</code> 특성을 사용합니다. {@link android.support.v7.widget.CardView}는 Android 5.0(API 레벨 21) 이상에서 실제 엘리베이션 및 동적 그림자를 사용하며, 이전 버전에서는 이전의 프로그래밍 방식의 그림자 구현으로 환원됩니다. 자세한 내용은 <a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.</p>
+
+<p>이러한 속성을 사용하여 {@link android.support.v7.widget.CardView} 위젯의 모습을 사용자지정합니다.</p>
+
+<ul>
+ <li>레이아웃에 모서리 반지름을 설정하려면 <code>card_view:cardCornerRadius</code> 특성을 사용합니다.</li>
+ <li>코드에서 모서리 반지름을 설정하려면 <code>CardView.setRadius</code> 메서드를 사용합니다.</li>
+ <li>카드의 배경색을 설정하려면 <code>card_view:cardBackgroundColor</code> 특성을 사용합니다.</li>
+</ul>
+
+<p>다음 코드 예는 {@link android.support.v7.widget.CardView} 위젯을 레이아웃에 포함시키는 방법을 보여줍니다.</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>자세한 내용은 {@link android.support.v7.widget.CardView}의 API 레퍼런스를 참조하세요.</p>
+
+
+<h2 id="Dependencies">종속관계 추가</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView} 위젯은 <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>의 일부입니다. 이러한 위젯을 프로젝트에서 사용하려면 다음 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 종속관계</a>를 앱 모듈에 추가하세요.</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/training/material/shadows-clipping.jd b/docs/html-intl/intl/ko/training/material/shadows-clipping.jd
new file mode 100644
index 0000000..fc56891
--- /dev/null
+++ b/docs/html-intl/intl/ko/training/material/shadows-clipping.jd
@@ -0,0 +1,99 @@
+page.title=그림자 정의 및 뷰 클리핑
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>이 과정에서 다루는 내용</h2>
+<ol>
+ <li><a href="#Elevation">뷰에 엘리베이션 지정</a></li>
+ <li><a href="#Shadows">뷰 그림자 및 윤곽선 사용자지정</a></li>
+ <li><a href="#Clip">뷰 클리핑</a></li>
+</ol>
+<h2>필독 항목</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
+</ul>
+</div>
+</div>
+
+<p>머티어리얼 디자인은 UI 요소에 엘리베이션을 도입합니다. 엘리베이션은 사용자가 각 요소의 상대적 중요성을 이해하고 현재 직면한 작업에 집중할 수 있도록 도와줍니다.</p>
+
+<p>Z 속성으로 표현되는 뷰의 엘리베이션은 그림자의 시각적인 모양을 결정합니다. 예를 들어, 더 높은 Z값을 가진 뷰는 더 크고 부드러운 그림자를 드리웁니다. 높은 Z값을 가진 뷰는 낮은 Z값을 가진 뷰를 가립니다. 하지만 뷰의 Z값이 뷰의 크기에 영향을 주지는 않습니다.</p>
+
+<p>그림자는 엘리베이트된 뷰의 상위 요소에 의해 그려지며, 따라서 기본적으로 상위 요소에 의해 클리핑되는 표준 뷰 클리핑이 적용됩니다.</p>
+
+<p>엘리베이션은 특정 작업 수행 시 위젯이 일시적으로 뷰 평면 위로 올라오는 애니메이션을 생성하는 경우에도 유용합니다.</p>
+
+<p>머티어리얼 디자인의 엘리베이션에 대한 자세한 내용은 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 공간의 개체</a>를 참조하세요.</p>
+
+
+<h2 id="Elevation">뷰에 엘리베이션 지정</h2>
+
+<p>뷰의 Z 값은 2개의 구성요소를 가집니다. <ul>
+<li>엘리베이션: 정적 구성요소.</li>
+<li>변환: 애니메이션에 사용되는 동적 구성요소.</li>
+</ul>
+
+<p><code>Z = elevation + translationZ</code></p>
+
+<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
+<p class="img-caption"><strong>그림 1</strong> - 서로 다른 뷰 엘리베이션의 그림자.</p>
+
+<p>레이아웃 정의에서 뷰의 엘리베이션을 설정하려면 <code>android:elevation</code> 특성을 사용하세요. 액티비티의 코드에서 뷰의 엘리베이션을 설정하려면 {@link android.view.View#setElevation View.setElevation()} 메서드를 사용하세요.</p>
+
+<p>뷰의 변환을 설정하려면 {@link android.view.View#setTranslationZ View.setTranslationZ()} 메서드를 사용하세요.</p>
+
+<p>새 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 및 {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 메서드를 사용하면 뷰의 엘리베이션을 손쉽게 애니메이트할 수 있습니다. 자세한 내용은 {@link android.view.ViewPropertyAnimator}의 API 레퍼런스와 <a href="{@docRoot}guide/topics/graphics/prop-animation.html">속성 애니메이션</a> 개발자 가이드를 참조하세요.</p>
+
+<p>{@link android.animation.StateListAnimator}를 사용해서 이러한 애니메이션을 선언적 방식으로 지정할 수도 있습니다. 이는 사용자가 버튼을 누를 때와 같이 상태 변경이 애니메이션을 트리거하는 경우에 특히 유용합니다. 자세한 내용은 <a href="{@docRoot}training/material/animations.html#ViewState">뷰 상태 변경 애니메이트</a>를 참조하세요.</p>
+
+<p>Z 값은 dp(밀도-독립 화소)로 측정됩니다.</p>
+
+
+<h2 id="Shadows">뷰 그림자 및 윤곽선 사용자지정</h2>
+
+<p>뷰의 배경 Drawable의 경계는 그림자의 기본 모양을 결정합니다. <strong>윤곽선</strong>은 그래픽 개체의 바깥쪽 모양을 나타내고 터치 피드백의 물결 영역을 정의합니다.</p>
+
+<p>배경 Drawable을 사용하여 정의된 다음 뷰를 살펴봅시다.</p>
+
+<pre>
+<TextView
+ android:id="@+id/myview"
+ ...
+ android:elevation="2dp"
+ android:background="@drawable/myrect" />
+</pre>
+
+<p>배경 Drawable은 둥근 모서리를 가진 직사각형으로 정의됩니다.</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>배경 Drawable이 뷰의 윤곽선을 정의하기 때문에 뷰는 둥근 모서리를 가진 그림자를 드리웁니다. 사용자지정 윤곽선을 제공하면 뷰 그림자의 기본 모양이 재정의됩니다.</p>
+
+<p>코드에서 뷰의 사용자지정 윤곽선을 정의하려면:<p>
+
+<ol>
+<li>{@link android.view.ViewOutlineProvider} 클래스를 확장합니다.</li>
+<li>{@link android.view.ViewOutlineProvider#getOutline getOutline()} 메서드를 재정의합니다.</li>
+<li>{@link android.view.View#setOutlineProvider View.setOutlineProvider()} 메서드를 사용하여 새로운 윤곽선 공급자를 뷰에 할당합니다.</li>
+</ol>
+
+<p>{@link android.graphics.Outline} 클래스의 메서드를 사용해서 둥근 모서리를 가진 타원형 및 직사각형 윤곽선을 생성할 수 있습니다. 뷰의 기본 윤곽선 공급자는 뷰의 배경에서 윤곽선을 가져옵니다. 뷰에 그림자가 드리우는 것을 원치 않으면 뷰의 윤곽선 공급자를 <code>null</code>로 설정합니다.</p>
+
+
+<h2 id="Clip">뷰 클리핑</h2>
+
+<p>뷰를 클리핑하면 뷰의 모양을 손쉽게 바꿀 수 있습니다. 다른 디자인 요소와의 일관성을 위해, 또는 사용자 입력에 응답하여 뷰의 모양을 바꾸기 위해 뷰를 클리핑할 수 있습니다. {@link android.view.View#setClipToOutline View.setClipToOutline()} 메서드 또는 <code>android:clipToOutline</code> 특성을 사용하여 윤곽선 영역으로 뷰를 클리핑할 수 있습니다. {@link android.graphics.Outline#canClip Outline.canClip()} 메서드에서 결정된 대로 정사각형, 원형 그리고 둥근 사각형의 윤곽선만 클리핑을 지원합니다.</p>
+
+<p>Drawable 모양으로 뷰를 클리핑하려면 위와 같이 Drawable을 뷰의 배경으로 설정하고 {@link android.view.View#setClipToOutline View.setClipToOutline()} 메서드를 호출합니다.</p>
+
+<p>뷰 클리핑은 리소스 소모가 많은 작업이므로, 뷰를 클리핑하는 데 사용하는 모양을 애니메이트하지 마십시오. 이 효과를 얻으려면 <a href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a> 애니메이션을 사용하세요.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ko/training/material/theme.jd b/docs/html-intl/intl/ko/training/material/theme.jd
new file mode 100644
index 0000000..0e80a20
--- /dev/null
+++ b/docs/html-intl/intl/ko/training/material/theme.jd
@@ -0,0 +1,107 @@
+page.title=머티어리얼 테마 사용
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>이 과정에서 다루는 내용</h2>
+<ol>
+ <li><a href="#ColorPalette">색상표 사용자지정</a></li>
+ <li><a href="#StatusBar">상태 표시줄 사용자지정</a></li>
+ <li><a href="#Inheritance">개별 뷰의 테마 지정</a></li>
+</ol>
+<h2>필독 항목</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>새 머티어리얼 테마는 다음과 같은 기능을 제공합니다.</p>
+
+<ul>
+ <li>색상표를 설정할 수 있는 시스템 위젯</li>
+ <li>시스템 위젯의 터치 피드백 애니메이션</li>
+ <li>액티비티 전환 애니메이션</li>
+</ul>
+
+<p>제어 중인 색상표로 브랜드 ID에 따라 머티어리얼 테마의 모습을 사용자지정할 수 있습니다. <a href="#fig3">그림 3</a>과 같이 테마 특성을 사용하여 작업 표시줄 및 상태 표시줄에 색조를 적용할 수 있습니다.</p>
+
+<p>시스템 위젯에는 새 디자인 및 터치 피드백 애니메이션이 있습니다. 앱에서 색상표, 터치 피드백 애니메이션, 액티비티 전환을 사용자지정할 수 있습니다.</p>
+
+<p>머티어리얼 테마는 다음과 같이 정의됩니다.</p>
+
+<ul>
+ <li><code>@android:style/Theme.Material</code> (어두운 버전)</li>
+ <li><code>@android:style/Theme.Material.Light</code> (밝은 버전)</li>
+ <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+</ul>
+
+<p>사용가능한 머티어리얼 스타일 목록은 {@link android.R.style R.style}의 API 레퍼런스를 참조하세요.</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>그림 1</strong>. 어두운 머티어리얼 테마</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>그림 2</strong>. 밝은 머티어리얼 테마</p>
+ </div>
+</div>
+<br style="clear:left">
+</div>
+
+<p class="note">
+<strong>참고:</strong> 머티어리얼 테마는 Android 5.0(API 레벨 21) 이상에서만 사용할 수 있습니다. <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>는 일부 위젯에 머티어리얼 디자인 스타일의 테마를 제공하고 색상표 사용자지정을 지원합니다. 자세한 내용은 <a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.
+</p>
+
+
+<h2 id="ColorPalette">색상표 사용자지정</h2>
+
+<p style="margin-bottom:30px">테마의 기본 색상을 브랜드에 맞게 사용자지정하려면 머티어리얼 테마에서 상속 시 테마 특성을 사용하여 사용자지정 색상을 정의하세요.</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>그림 3.</strong> 머티어리얼 테마 사용자자정</p>
+</div>
+
+
+<h2 id="StatusBar">상태 표시줄 사용자지정</h2>
+
+<p>머티어리얼 테마를 사용하면 손쉽게 상태 표시줄을 사용자지정할 수 있습니다. 따라서 브랜드에 맞는 색상을 지정하고 흰색 상태 아이콘이 보이도록 충분한 대비를 제공할 수 있습니다. 상태 표시줄의 사용자지정 색상을 설정하려면 머티어리얼 테마를 확장할 때 <code>android:statusBarColor</code> 특성을 사용합니다. 기본적으로 <code>android:statusBarColor</code>는 <code>android:colorPrimaryDark</code>의 값을 상속합니다.</p>
+
+<p>직접 상태 표시줄 뒤에 그릴 수도 있습니다. 예를 들어 사진 위에 상태 표시줄이 투명하게 표시되도록 하려면, 희미하게 어두운 그라데이션으로 흰색 상태 아이콘이 보이게 합니다. 그러기 위해서는 <code>android:statusBarColor</code> 특성을 <code>@android:color/transparent</code>에 설정하고 필요한 만큼 창 플래그를 조정합니다. 또한 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 메서드를 사용하여 애니메이션 또는 페이드 효과를 줄 수도 있습니다.</p>
+
+<p class="note">
+<strong>참고:</strong> 상태 표시줄은 거의 언제나 기본 도구모음과 경계가 분명히 식별되어야 합니다. 단, 이러한 표시줄 뒤에 다채로운 가장자리 이미지 또는 미디어 콘텐츠를 표시하는 경우나 아이콘이 계속 보이도록 그라데이션을 사용하는 경우는 제외됩니다.
+</p>
+
+<p>탐색 표시줄과 상태 표시줄을 사용자지정하는 경우, 둘 다 투명하게 만들거나 상태 표시줄만 수정합니다. 그 밖의 경우 탐색 표시줄은 항상 검은색을 유지합니다.</p>
+
+
+<h2 id="Inheritance">개별 뷰의 테마 지정</h3>
+
+<p>XML 레이아웃 정의에 있는 요소는 테마 리소스를 참조하는 <code>android:theme</code> 특성을 지정할 수 있습니다. 이 특성은 요소와 모든 하위 요소의 테마를 수정하며, 인터페이스의 특정 부분에서 테마 색상표를 바꿀 때 유용합니다.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/design/material/index.jd b/docs/html-intl/intl/pt-br/design/material/index.jd
new file mode 100644
index 0000000..9070c02
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/design/material/index.jd
@@ -0,0 +1,43 @@
+page.title=Design
+page.viewport_width=970
+section.landing=true
+meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
+header.hide=1
+footer.hide=1
+
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 0;
+ top: 42px;
+ width: 266px;
+
+}
+#hero-image {
+ padding-left:68px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ <span itemprop="description">Boas-vindas ao <strong>Android Design</strong>, o lugar para aprender a projetar aplicativos Android excepcionais.</span>
+ <br><br>
+ Quer saber o que o <strong>Android 5.0</strong> tem para os projetistas? Veja em <a href="{@docRoot}design/patterns/new.html">Novato no Android</a>.<br><br>
+ <a href="/design/get-started/creative-vision.html" class="landing-page-link">Visão criativa</a>
+ </div>
+ <a id="hero-image" href="/design/get-started/creative-vision.html"> <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">Material Design</h2>
+<p>O Android 5.0 apresenta uma metáfora de design inspirada em papel e caneta que dá uma sensação de tatibilidade reconfortante.
+</p>
+<p><a class="white" href="{@docRoot}design/material/index.html">Saiba mais</a></p>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/training/material/animations.jd b/docs/html-intl/intl/pt-br/training/material/animations.jd
new file mode 100644
index 0000000..ca722e8
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/training/material/animations.jd
@@ -0,0 +1,456 @@
+page.title=Como definir animações personalizadas
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lição ensina a</h2>
+<ol>
+ <li><a href="#Touch">Personalizar feedback de toque</a></li>
+ <li><a href="#Reveal">Usar o efeito de revelação</a></li>
+ <li><a href="#Transitions">Personalizar transições de atividades</a></li>
+ <li><a href="#ViewState">Animar mudança de estado da visualização</a></li>
+ <li><a href="#AnimVector">Animar desenháveis de vetor</a></li>
+</ol>
+<h2>Você também deve ler</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>As animações no Material Design dão feedback aos usuários sobre as ações deles e fornecem continuidade visual à medida que interagem com o seu aplicativo. O tema do Material fornece algumas animações padrão para botões e transições de atividades e o Android 5.0 (API de nível 21) e posteriores permitem a personalização dessas animações e a criação de novas:</p>
+
+<ul>
+<li>Feedback de toque</li>
+<li>Revelação circular</li>
+<li>Transições de atividades</li>
+<li>Movimento curvado</li>
+<li>Mudanças de estado da visualização</li>
+</ul>
+
+
+<h2 id="Touch">Personalizar feedback de toque</h2>
+
+<p>Os feedbacks de toque no Material Design fornecem confirmação visual instantânea no ponto de contato quando os usuários interagem com elementos da IU. As animações de feedback de toque padrão para botões usam a nova classe {@link android.graphics.drawable.RippleDrawable}, que passa por transições entre diferentes estados com um efeito de ondulação.</p>
+
+<p>Na maioria dos casos, você deve aplicar essa funcionalidade no XML de visualização especificando o plano de fundo da visualização como:</p>
+
+<ul>
+<li><code>?android:attr/selectableItemBackground</code> para uma ondulação delimitada</li>
+<li><code>?android:attr/selectableItemBackgroundBorderless</code> para uma ondulação que se estenda além da visualização</li>
+</ul>
+
+<p class="note"><strong>Observação:</strong> <code>selectableItemBackgroundBorderless</code> é um novo atributo inserido na API de nível 21.</p>
+
+
+<p>Alternativamente, você pode definir um {@link android.graphics.drawable.RippleDrawable} como um recurso XML usando o elemento <code>ripple</code>.</p>
+
+<p>Você pode atribuir uma cor para objetos {@link android.graphics.drawable.RippleDrawable}. Para alterar a cor do feedback de toque padrão, use o atributo <code>android:colorControlHighlight</code> do tema.</p>
+
+<p>Para obter mais informações, consulte a referência de API para a classe {@link android.graphics.drawable.RippleDrawable}.</p>
+
+
+<h2 id="Reveal">Usar o efeito de revelação</h2>
+
+<p>Revelar animações fornece continuidade visual aos usuários ao exibir ou esconder um grupo de elementos da IU. O método {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} permite animar um círculo de recorte para revelar ou esconder uma visualização.</p>
+
+<p>Para revelar uma visualização anteriormente invisível usando esse efeito:</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 = Math.max(myView.getWidth(), myView.getHeight());
+
+// create the animator for this view (the start radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
+
+// make the view visible and start the animation
+myView.setVisibility(View.VISIBLE);
+anim.start();
+</pre>
+
+<p>Para esconder uma visualização anteriormente visível usando esse efeito:</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">Personalizar transições de atividades</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>Figura 1</strong> - uma transição com elementos compartilhados.</p>
+ <em>Para reproduzir o filme, clique na tela do dispositivo</em>
+ </div>
+</div>
+
+<p>As transições de atividades em aplicativos com Material Design fornecem conexões visuais entre estados diferentes por meio de movimentos e transformações entre elementos comuns. Você pode especificar animações personalizadas para transições de entrada e de saída e para transições de elementos compartilhados entre atividades.</p>
+
+<ul>
+<li>Uma transição de <strong>entrada</strong> determina como as visualizações em uma atividade entram em cena. Por exemplo, na transição de entrada <em>explodir</em>, as visualizações entram em cena por fora e voam em direção ao centro da tela.</li>
+
+<li>Uma transição de <strong>saída</strong> determina como as visualizações em uma atividade saem de cena. Por exemplo, na transição de saída <em>explodir</em>, as visualizações saem de cena a partir do centro.</li>
+
+<li>Uma transição de <strong>elementos compartilhados</strong> determina como as visualizações compartilhadas entre duas atividades fazem transição entre essas atividades. Por exemplo, se duas atividades têm a mesma imagem em posições e tamanhos diferentes, a transição de elemento compartilhado <em>changeImageTransform</em> movimenta e dimensiona a imagem suavemente entre essas atividades.</li>
+</ul>
+
+<p>O Android 5.0 (API de nível 21) é compatível com estas transições de entrada e de saída:</p>
+
+<ul>
+<li><em>explodir</em> - move as visualizações para dentro ou para fora partindo do centro da cena.</li>
+<li><em>deslizar</em> - move as visualizações para dentro ou para fora partindo de um dos cantos da cena.</li>
+<li><em>esmaecer</em> - adiciona ou remove uma visualização de uma cena alterando a opacidade.</li>
+</ul>
+
+<p>Qualquer transição que amplie a classe {@link android.transition.Visibility} é compatibilizada como uma transição de entrada ou de saída. Para obter mais informações, consulte a referência de API para a classe {@link android.transition.Transition}.</p>
+
+<p>O Android 5.0 (API de nível 21) também é compatível com estas transições de elementos compartilhados:</p>
+
+<ul>
+<li><em>changeBounds</em> - anima as mudanças das visualizações desejadas em limites do layout.</li>
+<li><em>changeBounds</em> - anima as mudanças das visualizações desejadas em limites de corte.</li>
+<li><em>changeBounds</em> - anima as mudanças das visualizações desejadas em escala e rotação.</li>
+<li><em>changeImageTransform</em> - anima as mudanças das imagens desejadas em tamanho e escala.</li>
+</ul>
+
+<p>Ao habilitar as transições de atividade no seu aplicativo, a transição de esmaecimento cruzado padrão é ativada entre as atividades de entrada e saída.</p>
+
+<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
+<p class="img-caption">
+ <strong>Figura 2</strong> - uma transição de cena com um elemento compartilhado.
+</p>
+
+<h3>Especificar transições de atividades</h3>
+
+<p>Primeiramente, habilite as transições de conteúdo da janela com o atributo <code>android:windowContentTransitions</code> ao definir um estilo herdado do tema do Material. Você também pode especificar transições de entrada, saída e elemento compartilhado na definição de estilo:</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>A transição <code>change_image_transform</code> nesse exemplo é definida a seguir:</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>O elemento <code>changeImageTransform</code> corresponde à classe {@link android.transition.ChangeImageTransform}. Para obter mais informações, consulte a referência de API para {@link android.transition.Transition}.</p>
+
+<p>Para habilitar transições de conteúdo da janela no código como alternativa, chame o método {@link android.view.Window#requestFeature Window.requestFeature()}:</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>Para especificar transições no código, chame os métodos a seguir com um objeto {@link android.transition.Transition}:</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>Os métodos {@link android.view.Window#setExitTransition setExitTransition()} e {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} definem a transição de saída para a atividade de chamada. Os métodos {@link android.view.Window#setEnterTransition setEnterTransition()} e {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} definem a transição de entrada para a atividade chamada.</p>
+
+<p>Para obter o efeito completo de uma transição, você deve habilitar as transições de conteúdo da janela tanto na atividade chamada quanto na atividade de chamada. Caso contrário, a atividade de chamada acionará a transição de saída, mas você verá uma transição de janela (como dimensionamento ou esmaecimento).</p>
+
+<p>Para iniciar uma transição de entrada o mais cedo possível, use o método {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} na atividade chamada. Isso faz com que haja transições de entrada mais dramáticas.</p>
+
+<h3>Iniciar uma atividade usando transições</h3>
+
+<p>Se você habilita as transições e define uma transição de saída para uma atividade, a transição será ativada ao iniciar outra atividade, como a seguir:</p>
+
+<pre>
+startActivity(intent,
+ ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
+</pre>
+
+<p>Se você configurou uma transição de entrada para a segunda atividade, a transição também será ativada quando a atividade for iniciada. Para desabilitar as transições ao iniciar outra atividade, forneça um pacote de opções <code>null</code>.</p>
+
+<h3>Iniciar uma atividade com um elemento compartilhado</h3>
+
+<p>Para criar uma animação de transição de tela entre duas atividades que têm um elemento compartilhado:</p>
+
+<ol>
+<li>Habilite transições de conteúdo da janela no tema.</li>
+<li>Especifique uma transição de elementos compartilhados no estilo.</li>
+<li>Defina a transição como um recurso XML.</li>
+<li>Atribua um nome comum aos elementos compartilhados em ambos os layouts com o atributo <code>android:transitionName</code>.</li>
+<li>Use o método {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()}.</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>Para obter visualizações dinâmicas compartilhadas geradas no código, use o método {@link android.view.View#setTransitionName View.setTransitionName()} para especificar um nome de elemento comum em ambas as atividades.</p>
+
+<p>Para reverter a animação de transição de cena ao finalizar a segunda atividade, chame o método {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} em vez de {@link android.app.Activity#finish Activity.finish()}.</p>
+
+<h3>Iniciar uma atividade com diversos elementos compartilhados</h3>
+
+<p>Para criar uma animação de transição de cena entre duas atividades que têm mais de um elemento compartilhado, defina os elementos compartilhados em ambos os layouts com o atributo <code>android:transitionName</code> (ou use o método {@link android.view.View#setTransitionName View.setTransitionName()} em ambas as atividades), e crie um objeto {@link android.app.ActivityOptions}, como a seguir:</p>
+
+<pre>
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
+ Pair.create(view1, "agreedName1"),
+ Pair.create(view2, "agreedName2"));
+</pre>
+
+
+<h2 id="CurvedMotion">Usar movimento curvado</h2>
+
+<p>As animações no Material Design dependem das curvas para obter padrões de interpolação de tempo e de movimentos espaciais. Com o Android 5.0 (API de nível 21) e posteriores, você pode definir padrões de curvas de temporização personalizada e de movimentos curvados para animações.</p>
+
+<p>A classe {@link android.view.animation.PathInterpolator} é um novo interpolador baseado em uma curve Bézier ou em um objeto {@link android.graphics.Path}. Esse interpolador especifica uma curva de movimento em um quadrado de 1x1, com pontos de ancoragem em (0,0) e (1,1) e pontos de controle conforme o especificado, usando os argumentos do construtor. Você também pode definir um interpolador de caminho como um recurso XML:</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>O sistema fornece recursos XML para três curvas básicas na especificação do Material Design:</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>Você pode passar um objeto {@link android.view.animation.PathInterpolator} ao método {@link android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
+
+<p>A classe {@link android.animation.ObjectAnimator} tem novos construtores que habilitam a animação de coordenadas ao longo de um caminho usando duas ou mais propriedades simultaneamente. Por exemplo, o animador a seguir usa um objeto {@link android.graphics.Path} para animar as propriedades X e Y de uma visualização:</p>
+
+<pre>
+ObjectAnimator mAnimator;
+mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
+...
+mAnimator.start();
+</pre>
+
+
+<h2 id="ViewState">Animar mudança de estado da visualização</h2>
+
+<p>A classe {@link android.animation.StateListAnimator} permite a definição de animadores que são executados quando o estado de uma visualização muda. O exemplo a seguir mostra como definir uma {@link android.animation.StateListAnimator} como um recurso XML:</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>Para anexar animações de estado de visualização personalizadas a uma visualização, defina um animador usando o elemento <code>selector</code> em um arquivo de recurso XML, como nesse exemplo, e atribua-o à visualização com o atributo <code>android:stateListAnimator</code>. Para atribuir um animador de lista de estado a uma visualização no código, use o método {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} e atribua o animador à visualização com o método {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
+
+<p>Quando o tema amplia o tema do Material, os botões têm uma animação Z por padrão. Para evitar esse comportamento nos botões, defina o atributo <code>android:stateListAnimator</code> como <code>@null</code>.</p>
+
+<p>A classe {@link android.graphics.drawable.AnimatedStateListDrawable} permite a criação de desenháveis que exibem animações entre mudanças de estado da visualização associada. Alguns dos widgets de sistema no Android 5.0 usam essas animações por padrão. O exemplo a seguir mostra como definir uma {@link android.graphics.drawable.AnimatedStateListDrawable} como um recurso XML:</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">Animar desenháveis de vetor</h2>
+
+<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Desenháveis de vetor</a> são dimensionáveis sem perder definição. A classe {@link android.graphics.drawable.AnimatedVectorDrawable} permite a animação de propriedades de um desenhável de vetor.</p>
+
+<p>Você normalmente define desenháveis de vetor animados em três arquivos XML:</p>
+
+<ul>
+<li>Um desenhável de vetor com o elemento <code><vector></code> em <code>res/drawable/</code></li>
+<li>Um desenhável de vetor animado com o elemento <code><animated-vector></code> em <code>res/drawable/</code></li>
+<li>Um ou mais animadores de objeto com o elemento <code><objectAnimator></code> em <code>res/anim/</code></li>
+</ul>
+
+<p>Desenháveis de vetor animados podem animar os atributos dos elementos <code><group></code> e <code><path></code>. Os elementos <code><group></code> definem um conjunto de caminhos ou subgrupos e o elemento <code><path></code> define caminhos a serem desenhados.</p>
+
+<p>Ao definir um desenhável de vetor que você queira animar, use o atributo <code>android:name</code> para atribuir um nome único a grupos e caminhos para poder referenciá-los nas definições do animador. Por exemplo:</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>O desenhável de vetor animado refere-se a grupos e caminhos no desenhável de vetor pelos respectivos nomes:</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>As definições da animação representam os objetos {@link android.animation.ObjectAnimator} ou {@link android.animation.AnimatorSet}. O primeiro animador nesse exemplo gira o grupo desejado em 360º:</p>
+
+<pre>
+<!-- res/anim/rotation.xml -->
+<objectAnimator
+ android:duration="6000"
+ android:propertyName="rotation"
+ android:valueFrom="0"
+ android:valueTo="360" />
+</pre>
+
+<p>O segundo animador nesse exemplo transforma a forma do caminho do desenhável de vetor. Ambos os caminhos devem ser compatíveis com a transformação: eles precisam ter o mesmo número de comandos e de parâmetros para cada comando.</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>Para obter mais informações, consulte a referência de API para {@link android.graphics.drawable.AnimatedVectorDrawable}.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/training/material/compatibility.jd b/docs/html-intl/intl/pt-br/training/material/compatibility.jd
new file mode 100644
index 0000000..e04d22c
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/training/material/compatibility.jd
@@ -0,0 +1,134 @@
+page.title=Como manter a compatibilidade
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lição ensina a</h2>
+<ol>
+ <li><a href="#Theme">Definir estilos alternativos</a></li>
+ <li><a href="#Layouts">Fornecer layouts alternativos</a></li>
+ <li><a href="#SupportLib">Usar a Biblioteca de Suporte</a></li>
+ <li><a href="#CheckVersion">Verificar a versão do sistema</a></li>
+</ol>
+<h2>Você também deve ler</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Alguns recursos do Material Design, como o tema do Material e transições personalizadas de atividades, estão disponíveis apenas no Android 5.0 (API de nível 21) e em posteriores. Contudo, você pode projetar os aplicativos para usar esses recursos ao executá-los em dispositivos compatíveis com o Material Design e ainda mantê-los compatíveis com dispositivos que funcionam com versões anteriores do Android.</p>
+
+
+<h2 id="Theme">Definir estilos alternativos</h2>
+
+<p>Você pode configurar o aplicativo para usar o tema do Material em dispositivos compatíveis com ele e regressar a um tema antigo em dispositivos que funcionam com versões anteriores do Android:</p>
+
+<ol>
+<li>Defina um tema herdado de um tema antigo (como Holo) em <code>res/values/styles.xml</code>.</li>
+<li>Defina um tema com o mesmo nome herdado do tema do Material em <code>res/values-v21/styles.xml</code>.</li>
+<li>Defina esse tema como o tema do seu aplicativo no arquivo de manifesto.</li>
+</ol>
+
+<p class="note"><strong>Observação:</strong> Se o seu aplicativo usa o tema do Material mas não fornece um tema alternativo dessa maneira, o aplicativo não rodará em verões mais antigas do que o Android 5.0.
+</p>
+
+
+<h2 id="Layouts">Fornecer layouts alternativos</h2>
+
+<p>Se os layouts que você projetou de acordo com as orientações do Material Design não usarem quaisquer dos novos atributos XML introduzidos no Android 5.0 (API de nível 21), funcionarão em versões antigas do Android. Caso contrário, você pode fornecer layouts alternativos. Você também pode fornecer layouts alternativos para personalizar a aparência do seu aplicativo em versões anteriores do Android.</p>
+
+<p>Crie arquivos de layout para Android 5.0 (API de nível 21) dentro de <code>res/layout-v21/</code> e arquivos de layout alternativo para versões anteriores do Android dentro de <code>res/layout/</code>. Por exemplo, <code>res/layout/my_activity.xml</code> é um layout alternativo para <code>res/layout-v21/my_activity.xml</code>.</p>
+
+<p>Para evitar duplicação do código, defina os estilos dentro de <code>res/values/</code>, modifique-os em <code>res/values-v21/</code> para as novas APIs e use herança de estilo, definindo estilos de base em <code>res/values/</code> e herdando daqueles em <code>res/values-v21/</code>.</p>
+
+
+<h2 id="SupportLib">Usar a Biblioteca de Suporte</h2>
+
+<p>A <a href="{@docRoot}tools/support-library/features.html#v7">v7 da Biblioteca de Suporte</a> r21 e posteriores incluem os seguintes recursos do Material Design:</p>
+
+<ul>
+<li><a href="{@docRoot}training/material/theme.html">Estilos do Material Design</a> para alguns widgets do sistema quando se aplica um dos temas <code>Theme.AppCompat</code>.</li>
+<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Atributos de tema da paleta de cores</a> nos temas <code>Theme.AppCompat</code>.</li>
+<li>O widget {@link android.support.v7.widget.RecyclerView} para <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">coletar dados do visor</a>.</li>
+<li>O widget {@link android.support.v7.widget.CardView} para <a href="{@docRoot}training/material/lists-cards.html#CardView">criar cartões</a>.</li>
+<li>A classe {@link android.support.v7.graphics.Palette} para <a href="{@docRoot}training/material/drawables.html#ColorExtract">extrair cores proeminentes de imagens</a>.</li>
+</ul>
+
+<h3>Widgets de sistema</h3>
+
+<p>Os temas <code>Theme.AppCompat</code> fornecem estilos do Material Design para os seguintes 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>Paleta de cores</h3>
+
+<p>Para obter estilos do Material Design e personalizar a paleta de cores com a v7 da Biblioteca de Suporte do Android, aplique um dos temas <code>Theme.AppCompat</code>:</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>Listas e cartões</h3>
+
+<p>Os widgets {@link android.support.v7.widget.RecyclerView} e {@link android.support.v7.widget.CardView} estão disponíveis em versões anteriores do Android na Biblioteca de Suporte v7 do Android com as seguintes limitações:</p>
+<ul>
+<li>{@link android.support.v7.widget.CardView} volta a uma implementação de sombra programática usando preenchimento adicional.</li>
+<li>{@link android.support.v7.widget.CardView} não recorta as visualizações filhas que cortam as bordas arredondadas.</li>
+</ul>
+
+
+<h3>Dependências</h3>
+
+<p>Para usar esses recursos em versões anteriores ao Android 5.0 (API de nível 21), inclua a Biblioteca de Suporte v7 do Android no projeto como uma <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">dependência de Gradle</a>:</p>
+
+<pre>
+dependencies {
+ compile 'com.android.support:appcompat-v7:21.0.+'
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
+
+
+<h2 id="CheckVersion">Verificar a versão do sistema</h2>
+
+<p>Os recursos a seguir estão disponíveis somente no Android 5.0 (API de nível 21) e em posteriores:</p>
+
+<ul>
+<li>Transições de atividades</li>
+<li>Feedback de toque</li>
+<li>Animações de revelação</li>
+<li>Animações com base em caminhos</li>
+<li>Desenháveis de vetor</li>
+<li>Tingimento desenhável.</li>
+</ul>
+
+<p>Para preservar a compatibilidade com versões anteriores do Android, verifique a {@link android.os.Build.VERSION#SDK_INT version} do sistema em execução que chama as APIs para quaisquer destes recursos:</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>Observação:</strong> Para especificar quais versões do Android são compatíveis com o seu aplicativo, use os atributos <code>android:minSdkVersion</code> e <code>android:targetSdkVersion</code> no arquivo de manifesto. Para usar os recursos do Material Design no Android 5.0, defina o atributo <code>android:targetSdkVersion</code> como <code>21</code>. Para obter mais informações, consulte o <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">guia de API <uses-sdk></a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/training/material/drawables.jd b/docs/html-intl/intl/pt-br/training/material/drawables.jd
new file mode 100644
index 0000000..190d6bf
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/training/material/drawables.jd
@@ -0,0 +1,105 @@
+page.title=Como trabalhar com desenháveis
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lição ensina a</h2>
+<ol>
+ <li><a href="#DrawableTint">Colorir recursos desenháveis</a></li>
+ <li><a href="#ColorExtract">Extrair cores proeminentes de uma imagem</a></li>
+ <li><a href="#VectorDrawables">Criar desenháveis de vetor</a></li>
+</ol>
+<h2>Você também deve ler</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
+</ul>
+</div>
+</div>
+
+<p>As seguintes capacidades dos desenháveis ajudam na implementação do Material Design nos aplicativos:</p>
+
+<ul>
+<li>Tingimento desenhável</li>
+<li>Extração de cor proeminente</li>
+<li>Desenháveis de vetor.</li>
+</ul>
+
+<p>Esta lição mostra como usar esses recursos no seu aplicativo.</p>
+
+
+<h2 id="DrawableTint">Colorir recursos desenháveis</h2>
+
+<p>Com o Android 5.0 (API de nível 21) e posteriores, você pode colorir bitmaps e nine-patches definidos como máscaras alfa. Você pode colori-los com recursos de cor ou atributos de tema que determinam os recursos de cor (por exemplo, <code>?android:attr/colorPrimary</code>). Normalmente, você cria esses ativos somente uma vez e colore-os automaticamente para combinar com seu tema.</p>
+
+<p>Você pode aplicar um tingimento aos objetos {@link android.graphics.drawable.BitmapDrawable} ou {@link android.graphics.drawable.NinePatchDrawable} com o método {@code setTint()}. Você também pode configurar a cor do tingimento e modelar os layouts com os atributos <code>android:tint</code> e <code>android:tintMode</code>.</p>
+
+
+<h2 id="ColorExtract">Extrair cores proeminentes de uma imagem</h2>
+
+<p>A Biblioteca de Suporte r21 do Android e posteriores incluem a classe {@link android.support.v7.graphics.Palette}, que permite a extração de cores proeminentes de uma imagem. Essa classe extrai as seguintes cores proeminentes:</p>
+
+<ul>
+<li>Vibrante</li>
+<li>Escuro vibrante</li>
+<li>Claro vibrante</li>
+<li>Suave</li>
+<li>Escuro suave</li>
+<li>Claro suave</li>
+</ul>
+
+<p>Para extrair essas cores, passe um objeto {@link android.graphics.Bitmap} para o método estático {@link android.support.v7.graphics.Palette#generate Palette.generate()} na linha do segundo plano em que você carrega as imagens. Se você não puder usar aquela linha, chame o método {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} e forneça um ouvinte como alternativa.</p>
+
+<p>Você pode recuperar as cores proeminentes da imagem usando métodos de obtenção na classe <code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p>
+
+<p>Para usar a classe {@link android.support.v7.graphics.Palette} no projeto, adicione a seguinte <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependência do Gradle</a> ao módulo do aplicativo:</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:21.0.+'
+}
+</pre>
+
+<p>Para obter mais informações, consulte a referência de API para a classe {@link android.support.v7.graphics.Palette}.</p>
+
+
+<h2 id="VectorDrawables">Criar desenháveis de vetor</h2>
+
+<!-- video box -->
+<a class="notice-developers-video"
+href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
+<div>
+ <h3>Vídeos</h3>
+ <p>Gráficos de vetor do Android</p>
+</div>
+</a>
+
+<p>No Android 5.0 (API de nível 21) e em posteriores, você pode definir desenháveis de vetor que são dimensionáveis sem perder definição. Você precisa somente de um arquivo de ativo para uma imagem de vetor, em vez de um arquivo de ativos para cada densidade de tela no caso de imagens de bitmap. Para criar uma imagem de vetor, defina os detalhes da forma dentro de um elemento XML <code><vector></code>.</p>
+
+<p>O exemplo a seguir define uma imagem de vetor com a forma de um coração:</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>Imagens de vetor são representadas no Android por objetos {@link android.graphics.drawable.VectorDrawable}. Para obter mais informações sobre a sintaxe <code>pathData</code>, consulte a <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Referência do caminho SVG</a>. Para obter informações sobre animação de propriedades de desenháveis de vetor, consulte <a href="{@docRoot}training/material/animations.html#AnimVector">Animar desenháveis de vetor</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/training/material/get-started.jd b/docs/html-intl/intl/pt-br/training/material/get-started.jd
new file mode 100644
index 0000000..e2b29e4
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/training/material/get-started.jd
@@ -0,0 +1,147 @@
+page.title=Fundamentos
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lição ensina a</h2>
+<ol>
+ <li><a href="#ApplyTheme">Aplicar o tema do Material</a></li>
+ <li><a href="#Layouts">Projetar layouts</a></li>
+ <li><a href="#Depth">Especificar a elevação em visualizações</a></li>
+ <li><a href="#ListsCards">Criar listas e cartões</a></li>
+ <li><a href="#Animations">Personalizar animações</a></li>
+</ol>
+<h2>Você também deve ler</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Para criar aplicativos com o Material Design:</p>
+
+<ol>
+ <li style="margin-bottom:10px">
+ Reveja as <a href="http://www.google.com/design/spec">especificações do Material Design</a>.</li>
+ <li style="margin-bottom:10px">
+ Aplique o <strong>tema</strong> do Material no seu aplicativo.</li>
+ <li style="margin-bottom:10px">
+ Crie <strong>layouts</strong> de acordo com as orientações do Material Design.</li>
+ <li style="margin-bottom:10px">
+ Especifique a <strong>elevação</strong> das visualizações para inserir sombras.</li>
+ <li style="margin-bottom:10px">
+ Use <strong>widgets</strong> do sistema para listas e cartões.</li>
+ <li style="margin-bottom:10px">
+ Personalize <strong>animações</strong> no aplicativo.</li>
+</ol>
+
+<h3>Manter compatibilidade com versões anteriores</h3>
+
+<p>Você pode adicionar muitos recursos do Material Design ao aplicativo e, ao mesmo tempo, manter a compatibilidade com versões anteriores ao Android 5.0. Para obter mais informações, consulte <a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.</p>
+
+<h3>Atualizar o aplicativo com o Material Design</h3>
+
+<p>Para atualizar um aplicativo existente para incorporar o Material Design, atualize os layouts de acordo com as orientações do Material Design. Certifique-se também de incorporar profundidade, feedbacks de toque e animações.</p>
+
+<h3>Criar novos aplicativos com o Material Design</h3>
+
+<p>Se você está criando um novo aplicativo com recursos do Material Design, as <a href="http://www.google.com/design/spec">orientações do Material Design</a> fornecem uma estrutura de projeto coesa. Siga tais orientações e use a nova funcionalidade na estrutura do Android para projetar e desenvolver o aplicativo.</p>
+
+
+<h2 id="ApplyTheme">Aplicar o tema do Material</h2>
+
+<p>Para aplicar o tema do Material no aplicativo, especifique um estilo herdado de <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>O tema do Material fornece widgets do sistema atualizados que permitem definir a paleta de cores e as animações padrão para feedback de toque e transições de atividades. Para obter mais detalhes, consulte <a href="{@docRoot}training/material/theme.html">Como usar o tema do Material</a>.</p>
+
+
+<h2 id="Layouts">Projetar layouts</h2>
+
+<p>Além de aplicar e personalizar o tema do Material, os layouts devem estar em conformidade com as <a href="http://www.google.com/design/spec">orientações do Material Design</a>. Ao projetar os layouts, dê atenção especial ao seguinte:</p>
+
+<ul>
+<li>Grades das linhas de base</li>
+<li>Linhas-chave</li>
+<li>Espaçamento</li>
+<li>Tamanho do alvo de toque</li>
+<li>Estrutura do layout</li>
+</ul>
+
+
+<h2 id="Depth">Especificar a elevação em visualizações</h2>
+
+<p>As visualizações podem lançar sombras e o valor da elevação delas determina o tamanho da sombra e da ordem dos desenhos. Para definir a elevação de uma visualização, use o atributo <code>android:elevation</code> nos 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>A nova propriedade <code>translationZ</code> permite a criação de animações que refletem mudanças temporárias na elevação de uma visualização. As mudanças de elevação podem ser úteis ao <a href="{@docRoot}training/material/animations.html#ViewState">responder a gestos de toque</a>.</p>
+
+<p>Para obter mais detalhes, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como definir sombras e recortar visualizações</a>.</p>
+
+
+<h2 id="ListsCards">Criar listas e cartões</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} é uma versão mais completa de {@link android.widget.ListView} compatível com diferentes tipos de layout e que fornece melhor desempenho. {@link android.support.v7.widget.CardView} permite a exibição de informações dentro dos cartões com uma aparência consistente nos aplicativos. O exemplo de código a seguir mostra como incluir um {@link android.support.v7.widget.CardView} no 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>Para obter mais informações, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar listas e cartões</a>.</p>
+
+
+<h2 id="Animations">Personalizar animações</h2>
+
+<p>O Android 5.0 (API de nível 21) inclui novas APIs para criar animações personalizadas no aplicativo. Por exemplo, você pode habilitar transições de atividades e definir uma transição de saída dentro de uma atividade:</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>Ao iniciar outra atividade a partir desta, a transição de saída é ativada.</p>
+
+<p>Para saber mais sobre as novas APIs de animação, consulte <a href="{@docRoot}training/material/animations.html">Como definir animações personalizadas</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/training/material/index.jd b/docs/html-intl/intl/pt-br/training/material/index.jd
new file mode 100644
index 0000000..f51fd71
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/training/material/index.jd
@@ -0,0 +1,55 @@
+page.title=Como criar aplicativos com o Material Design
+page.type=design
+page.image=images/material.png
+page.metaDescription=Saiba como aplicar o Material Design aos seus aplicativos.
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>Dependências e pré-requisitos</h2>
+ <ul>
+ <li>Android 5.0 (API de nível 21)</li>
+ <li>Android Studio 0.8</li>
+ </ul>
+</div>
+</div>
+
+<p>O Material Design é um guia abrangente para design visual, de movimento e de interação para diversas plataformas e dispositivos. Para usar o Material Design nos aplicativos Android, siga as orientações descritas nas <a href="http://www.google.com/design/spec/material-design/introduction.html">especificações do Material Design</a> e use os novos componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21).</p>
+
+<p>Essa lição mostra como criar aplicativos do Material Design com os seguintes elementos:</p>
+
+<ul>
+<li>O tema do Material</li>
+<li>Widgets para cartões e listas</li>
+<li>Sombras personalizadas e recorte de visualizações</li>
+<li>Desenháveis de vetor</li>
+<li>Animações personalizadas</li>
+</ul>
+
+<p>Essa lição também ensina a manter a compatibilidade com versões anteriores ao Android 5.0 (API de nível 21) ao usar recursos do Material Design no aplicativo.</p>
+
+<h2>Lições</h2>
+
+<dl>
+ <dt><a href="{@docRoot}training/material/get-started.html">Como iniciar</a></dt>
+ <dd>Aprenda a atualizar o aplicativo com recursos do Material Design.</dd>
+
+ <dt><a href="{@docRoot}training/material/theme.html">Como usar o tema do Material</a></dt>
+ <dd>Saiba como aplicar estilos do Material Design ao aplicativo.</dd>
+
+ <dt><a href="{@docRoot}training/material/lists-cards.html">Como criar listas e cartões</a></dt>
+ <dd>Aprenda a criar listas e cartões com uma aparência consistente usando widgets do sistema.</dd>
+
+ <dt><a href="{@docRoot}training/material/shadows-clipping.html">Como definir sombras e recortar visualizações</a></dt>
+ <dd>Saiba como definir elevação para as visualizações para criar sombras personalizadas e como recortar visualizações.</dd>
+
+ <dt><a href="{@docRoot}training/material/drawables.html">Como trabalhar com desenháveis</a></dt>
+ <dd>Aprenda a criar desenháveis de vetor e a colorir recursos desenháveis.</dd>
+
+ <dt><a href="{@docRoot}training/material/animations.html">Como definir animações personalizadas</a></dt>
+ <dd>Saiba como criar animações personalizadas para visualizações e transições de atividades com elementos compartilhados.</dd>
+
+ <dt><a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a></dt>
+ <dd>Aprenda a manter a compatibilidade com versões de plataforma anteriores ao Android 5.0.</dd>
+</dl>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/training/material/lists-cards.jd b/docs/html-intl/intl/pt-br/training/material/lists-cards.jd
new file mode 100644
index 0000000..6e84a80
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/training/material/lists-cards.jd
@@ -0,0 +1,223 @@
+page.title=Como criar listas e cartões
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lição ensina a</h2>
+<ol>
+ <li><a href="#RecyclerView">Criar listas</a></li>
+ <li><a href="#CardView">Criar cartões</a></li>
+ <li><a href="#Dependencies">Adicionar dependências</a></li>
+</ol>
+<h2>Você também deve ler</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Para criar listas e cartões complexos com estilos do Material Design no seu aplicativo, você pode usar os widgets {@link android.support.v7.widget.RecyclerView} e {@link android.support.v7.widget.CardView}.</p>
+
+
+<h2 id="RecyclerView">Criar listas</h2>
+
+<p>O widget {@link android.support.v7.widget.RecyclerView} é uma versão mais avançada e flexível do {@link android.widget.ListView}. Essa widget é um contêiner para exibir grandes conjuntos de dados que podem ser rolados com muita eficiência ao manter um número limitado de visualizações. Use o widget {@link android.support.v7.widget.RecyclerView} quando tiver coletas de dados cujos elementos mudam durante a execução baseados na ação do usuário ou em eventos de rede.</p>
+
+<p>A classe {@link android.support.v7.widget.RecyclerView} simplifica a exibição e o tratamento de grandes conjuntos de dados oferecendo:</p>
+
+<ul>
+ <li>Gerenciadores de layout para posicionar itens</li>
+ <li>Animações padrão para operações de item comuns, como remoção ou adição de itens</li>
+</ul>
+
+<p>Você também tem a flexibilidade de definir gerenciadores de layout e animações personalizadas para widgets {@link android.support.v7.widget.RecyclerView}.</p>
+
+<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
+<p class="img-caption">
+<strong>Figura 1</strong>. O widget <code>RecyclerView</code>.
+</p>
+
+<p>Para usar o widget {@link android.support.v7.widget.RecyclerView}, você deve especificar um adaptador e um gerenciador de layout. Para criar um adaptador, amplie a classe {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Os detalhes da implementação dependem das especificações do conjunto de dados e do tipo de visualizações. Para obter mais informações, veja os <a href="#RVExamples">exemplos</a> abaixo.</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>Figura 2</strong> - Listas com <code>RecyclerView</code>.
+</p>
+</div>
+
+<p>Um <strong>gerenciador de layout</strong> posiciona as visualizações de item dentro de um {@link android.support.v7.widget.RecyclerView} e determina quando reutilizar visualizações de item que não estão mais visíveis ao usuário. Para reutilizar (ou <em>reciclar</em>) uma visualização, o gerenciador de layout pode solicitar ao adaptador a substituição do conteúdo da visualização com um elemento diferente do conjunto de dados. Visualizações recicladas dessa maneira aprimoram o desempenho ao evitar a criação de visualizações desnecessárias ou a realização de pesquisas {@link android.app.Activity#findViewById findViewById()} dispendiosas.</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} fornece esses gerenciadores de layout embutidos:</p>
+
+<ul>
+<li>{@link android.support.v7.widget.LinearLayoutManager} exibe itens em uma lista de rolagem vertical ou horizontal.</li>
+<li>{@link android.support.v7.widget.GridLayoutManager} exibe itens em uma grade.</li>
+<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} exibe itens em uma grade escalonada.</li>
+</ul>
+
+<p>Para criar um gerenciador de layout personalizado, amplie a classe {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
+
+<h3>Animações</h3>
+
+<p>As animações para a adição e remoção de itens são habilitadas, por padrão, em {@link android.support.v7.widget.RecyclerView}. Para personalizá-las, amplie a classe {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} e use o método {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}.</p>
+
+<h3 id="RVExamples">Exemplos</h3>
+
+<p>O exemplo de código a seguir demonstra como adicionar o {@link android.support.v7.widget.RecyclerView} a um 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>Ao adicionar um widget {@link android.support.v7.widget.RecyclerView} ao seu layout, obtenha um identificador para o objeto, conecte-o em um gerenciador de layout e anexe um adaptador aos dados que serão exibidos:</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>O adaptador dá acesso aos itens no conjunto de dados, cria visualizações para os itens e substitui o conteúdo de algumas das visualizações por novos itens de dados quando o item original não está mais visível. O exemplo de código a seguir mostra uma implementação simples para um conjunto de dados que consiste em uma matriz de strings exibidas usando widgets {@link android.widget.TextView}:</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>Figura 3</strong>. Exemplos de cartões.
+</p>
+</div>
+
+<h2 id="CardView">Criar cartões</h2>
+
+<p>{@link android.support.v7.widget.CardView} amplia a classe {@link android.widget.FrameLayout} e permite que você exiba informações dentro dos cartões, que têm uma aparência consistente nas diversas plataformas. Os widgets {@link android.support.v7.widget.CardView} podem ter sombras e bordas arredondadas.</p>
+
+<p>Para criar um cartão com sombra, use o atributo <code>card_view:cardElevation</code>. {@link android.support.v7.widget.CardView} usa elevação real e sombras dinâmicas no Android 5.0 (API de nível 21) e em posteriores e volta para uma implementação de sombra programática em versões anteriores. Para obter mais informações, consulte <a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.</p>
+
+<p>Use essas propriedades para personalizar a aparência do widget {@link android.support.v7.widget.CardView}:</p>
+
+<ul>
+ <li>Para definir o raio do canto nos layouts, use o atributo <code>card_view:cardCornerRadius</code>.</li>
+ <li>Para definir o raio do canto no seu código, use o método <code>CardView.setRadius</code>.</li>
+ <li>Para definir a cor de segundo plano de um cartão, use o atributo <code>card_view:cardBackgroundColor</code>.</li>
+</ul>
+
+<p>O exemplo de código a seguir mostra como incluir um widget {@link android.support.v7.widget.CardView} no 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>Para obter mais informações, consulte a referência de API para {@link android.support.v7.widget.CardView}.</p>
+
+
+<h2 id="Dependencies">Adicionar dependências</h2>
+
+<p>Os widgets {@link android.support.v7.widget.RecyclerView} e {@link android.support.v7.widget.CardView} são parte da <a href="{@docRoot}tools/support-library/features.html#v7">Biblioteca de Suporte v7</a>. Para usar esses widgets no projeto, adicione essas <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependências do Gradle</a> ao módulo do aplicativo:</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/training/material/shadows-clipping.jd b/docs/html-intl/intl/pt-br/training/material/shadows-clipping.jd
new file mode 100644
index 0000000..9cdb894
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/training/material/shadows-clipping.jd
@@ -0,0 +1,99 @@
+page.title=Como definir sombras e recortar visualizações
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lição ensina a</h2>
+<ol>
+ <li><a href="#Elevation">Atribuir elevação a visualizações</a></li>
+ <li><a href="#Shadows">Personalizar sombras e contornos de visualizações</a></li>
+ <li><a href="#Clip">Recortar visualizações</a></li>
+</ol>
+<h2>Você também deve ler</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
+</ul>
+</div>
+</div>
+
+<p>O Material Design introduz a elevação em elementos da IU. A elevação ajuda os usuários a entender a importância relativa de cada elemento e concentra a atenção deles nas tarefas à mão.</p>
+
+<p>A elevação de uma visualização, representada pela propriedade Z, determina a aparência visual das sombras: visualizações com valores de Z mais altos lançam sombras maiores e mais suaves. Visualizações com valores de Z mais altos ocultam visualizações com valores de Z mais baixos, contudo, o valor de Z de uma visualização não afeta o tamanho dela.</p>
+
+<p>As sombras são desenhadas pelo parente da visualização elevada e, por isso, estão sujeitas a recortes padrão de visualização, recortadas pelo parente por padrão.</p>
+
+<p>A elevação também é útil para criar animações em que os widgets se elevam temporariamente sobre o plano da visualização ao realizar alguma ação.</p>
+
+<p>Para obter mais informações sobre elevação no Material Design, consulte <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos em espaço 3D</a>.</p>
+
+
+<h2 id="Elevation">Atribuir elevação a visualizações</h2>
+
+<p>O valor de Z para uma visualização tem dois componentes: <ul>
+<li>Elevação: o componente estático.</li>
+<li>Movimentação: o componente dinâmico usado para animações.</li>
+</ul>
+
+<p><code>Z = elevation + translationZ</code></p>
+
+<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
+<p class="img-caption"><strong>Figura 1</strong> - sombras para diferentes elevações de visualização.</p>
+
+<p>Para definir a elevação de uma visualização em uma definição de layout, use o atributo <code>android:elevation</code>. Para definir a elevação de uma visualização no código de uma atividade, use o método {@link android.view.View#setElevation View.setElevation()}.</p>
+
+<p>Para definir a movimentação de uma visualização, use o método {@link android.view.View#setTranslationZ View.setTranslationZ()}.</p>
+
+<p>Os novos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} e {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} permitem animar facilmente a elevação de visualizações. Para obter mais informações, consulte a referência de API para {@link android.view.ViewPropertyAnimator} e o guia do desenvolvedor <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animação de propriedade</a>.</p>
+
+<p>Você também pode usar um {@link android.animation.StateListAnimator} para especificar essas animações de um modo declarativo, o que é especialmente útil para casos em que o estado muda as animações de acionamento, como quando um usuário pressiona um botão. Para obter mais informações, consulte <a href="{@docRoot}training/material/animations.html#ViewState">Mudanças de estado de visualização da animação</a>.</p>
+
+<p>Os valores de Z são medidos em dp (pixels independentes de densidade).</p>
+
+
+<h2 id="Shadows">Personalizar sombras e contornos de visualizações</h2>
+
+<p>Os limites de um desenhável do plano de fundo da visualização determinam a forma padrão da sombra. <strong>Contornos</strong> representam a forma externa de um objeto gráfico e definem a área de ondulação para o feedback de toque.</p>
+
+<p>Analise esta visualização, definida com um desenhável de plano de fundo:</p>
+
+<pre>
+<TextView
+ android:id="@+id/myview"
+ ...
+ android:elevation="2dp"
+ android:background="@drawable/myrect" />
+</pre>
+
+<p>O desenhável do plano de fundo é definido como um retângulo com bordas arredondadas:</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>A visualização lança uma sombra com bordas arredondadas, uma vez que o desenhável de plano de fundo define o contorno da visualização. Fornecer um contorno personalizado neutraliza a forma padrão de uma sombra da visualização.</p>
+
+<p>Para definir um contorno personalizado para uma visualização no seu código:<p>
+
+<ol>
+<li>Amplie a classe {@link android.view.ViewOutlineProvider}.</li>
+<li>Neutralize o método {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
+<li>Atribua o novo fornecedor de contorno à visualização com o método {@link android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
+</ol>
+
+<p>Você pode criar contornos ovais e retangulares com bordas arredondadas usando os métodos na classe {@link android.graphics.Outline}. O fornecedor de contorno padrão para visualizações obtém o contorno a partir do plano de fundo da visualização. Para evitar que uma visualização lance uma sombra, defina o fornecedor de contorno dela como <code>null</code>.</p>
+
+
+<h2 id="Clip">Recortar visualizações</h2>
+
+<p>Recortar visualizações permite mudar facilmente a forma de uma visualização. Você pode recortar visualizações para obter consistência com outros elementos de design ou para mudar a forma de uma visualização em resposta à interação do usuário. Você pode recortar uma visualização na área do contorno usando o método {@link android.view.View#setClipToOutline View.setClipToOutline()} ou o atributo <code>android:clipToOutline</code>. Somente contornos retangulares, circulares e retangulares redondos são compatíveis com recorte, conforme determinado pelo método {@link android.graphics.Outline#canClip Outline.canClip()}.</p>
+
+<p>Para recortar uma visualização na forma de um desenhável, defina o desenhável como o plano de fundo da visualização (conforme exibido acima) e chame o método {@link android.view.View#setClipToOutline View.setClipToOutline()}.</p>
+
+<p>O recorte de visualizações é uma operação dispendiosa, por isso, não anime a forma que você usa para recortar uma visualização. Para atingir esse efeito, use a animação de <a href="{@docRoot}training/material/animations.html#Reveal">Efeito de Revelação</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/pt-br/training/material/theme.jd b/docs/html-intl/intl/pt-br/training/material/theme.jd
new file mode 100644
index 0000000..21ba759
--- /dev/null
+++ b/docs/html-intl/intl/pt-br/training/material/theme.jd
@@ -0,0 +1,107 @@
+page.title=Como usar o tema do Material
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Esta lição ensina a</h2>
+<ol>
+ <li><a href="#ColorPalette">Personalizar a paleta de cores</a></li>
+ <li><a href="#StatusBar">Personalizar a barra de status</a></li>
+ <li><a href="#Inheritance">Atribuir tema a visualizações individuais</a></li>
+</ol>
+<h2>Você também deve ler</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>O novo tema do Material fornece:</p>
+
+<ul>
+ <li>Widgets do sistema que permitem a configuração da paleta de cores</li>
+ <li>Animações de feedback de toque para os widgets do sistema</li>
+ <li>Animações de transição de atividades</li>
+</ul>
+
+<p>É possível personalizar a aparência do tema do Material com uma paleta de cores que você controla, de acordo com a identidade da sua marca. Você pode atribuir cor à barra de ações e à barra de status usando atributos de tema, conforme exibido na <a href="#fig3">Figura 3</a>.</p>
+
+<p>Os widgets de sistema têm um novo design e animações de feedback de toque. Você pode personalizar a paleta de cores, as animações de feedback de toque e as transições de atividades do aplicativo.</p>
+
+<p>O tema do Material é definido como:</p>
+
+<ul>
+ <li><code>@android:style/Theme.Material</code> (versão escura)</li>
+ <li><code>@android:style/Theme.Material.Light</code> (versão clara)</li>
+ <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+</ul>
+
+<p>Para obter uma lista de estilos do Material que podem ser usados, consulte a referência de API para {@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>Figura 1</strong>. Tema escuro do Material</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>Figura 2</strong>. Tema claro do Material</p>
+ </div>
+</div>
+<br style="clear:left">
+</div>
+
+<p class="note">
+<strong>Observação:</strong> O tema do Material só está disponível no Android 5.0 (API de nível 21) e em posteriores. A <a href="{@docRoot}tools/support-library/features.html#v7">Biblioteca de Suporte v7</a> fornece temas com estilos do Material Design para alguns widgets e compatibilidade com a personalização da paleta de cores. Para obter mais informações, consulte <a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.
+</p>
+
+
+<h2 id="ColorPalette">Personalizar a paleta de cores</h2>
+
+<p style="margin-bottom:30px">Para personalizar as cores de base do tema para adequá-lo a sua marca, defina as cores personalizadas usando os atributos de tema ao herdar do tema do Material:</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>Figura 3.</strong> Como personalizar o tema do Material</p>
+</div>
+
+
+<h2 id="StatusBar">Personalizar a barra de status</h2>
+
+<p>O tema do Material permite a fácil personalização da barra de status, para você poder especificar uma cor adequada a sua marca, e fornece contraste suficiente para exibir os ícones de status brancos. Para definir uma cor personalizada para a barra de status, use o atributo <code>android:statusBarColor</code> ao ampliar o tema do Material. Por padrão, <code>android:statusBarColor</code> herda o valor de <code>android:colorPrimaryDark</code>.</p>
+
+<p>Você também pode personalizar a parte de trás da barra de status. Por exemplo, se você quiser mostrar uma barra de status transparente sobre uma foto, com um degradê escuro sutil, para garantir que os ícones de status brancos sejam visíveis, defina o atributo <code>android:statusBarColor</code> como <code>@android:color/transparent</code> e ajuste os marcadores de janela conforme o necessário. Você também pode usar o método {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para animações ou esmaecimento.</p>
+
+<p class="note">
+<strong>Observação:</strong> A barra de status deve ter, quase sempre, um traçado distante da barra de ferramentas principal, exceto em casos em que haja imagens ricas de ponta a ponta, conteúdo de mídia por trás dessas barras e quando se usa degradê, para garantir que os ícones continuem visíveis.
+</p>
+
+<p>Ao personalizar as barras de navegação e de status, deixe-as transparentes ou modifique somente a barra de status. A barra de navegação deve permanecer preta em todos os outros casos.</p>
+
+
+<h2 id="Inheritance">Atribuir tema a visualizações individuais</h3>
+
+<p>Elementos nas definições do layout XML podem especificar o atributo <code>android:theme</code>, que referencia um recurso do tema. Essa atributo modifica o tema do elemento e quaisquer elementos-filho, o que é útil para alterar as paletas de cores do tema em uma parte específica da interface.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/design/material/index.jd b/docs/html-intl/intl/ru/design/material/index.jd
new file mode 100644
index 0000000..c5c0f17
--- /dev/null
+++ b/docs/html-intl/intl/ru/design/material/index.jd
@@ -0,0 +1,43 @@
+page.title=Дизайн
+page.viewport_width=970
+section.landing=true
+meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
+header.hide=1
+footer.hide=1
+
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 0;
+ top: 42px;
+ width: 266px;
+
+}
+#hero-image {
+ padding-left:68px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ <span itemprop="description">Приветствуем вас на странице <strong>Дизайн для Android</strong>! Здесь вы узнаете, как создавать превосходные приложения Android.</span>
+ <br><br>
+ Хотите узнать, какие возможности <strong>Android 5.0</strong> предлагает для разработчиков? Тогда ознакомьтесь с разделом <a href="{@docRoot}design/patterns/new.html">Новые возможности Android</a>.<br><br>
+ <a href="/design/get-started/creative-vision.html" class="landing-page-link">Творческий подход</a>
+ </div>
+ <a id="hero-image" href="/design/get-started/creative-vision.html"> <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">Material Design</h2>
+<p>Android 5.0 предлагает по-новому взглянуть на дизайн: ощущения от использования приложения схожи с теми, что и при работе с бумагой и ручкой.
+</p>
+<p><a class="white" href="{@docRoot}design/material/index.html">Подробнее</a></p>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/training/material/animations.jd b/docs/html-intl/intl/ru/training/material/animations.jd
new file mode 100644
index 0000000..3068c71
--- /dev/null
+++ b/docs/html-intl/intl/ru/training/material/animations.jd
@@ -0,0 +1,456 @@
+page.title=Определение настраиваемой анимации
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Содержание этого урока</h2>
+<ol>
+ <li><a href="#Touch">Настройка реакции на касание</a></li>
+ <li><a href="#Reveal">Применение эффекта появления</a></li>
+ <li><a href="#Transitions">Настройка переходов</a></li>
+ <li><a href="#ViewState">Анимация изменений состояния представления</a></li>
+ <li><a href="#AnimVector">Анимация векторных элементов</a></li>
+</ol>
+<h2>См. также</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Благодаря анимации в Material Design пользователи получают реакцию на выполняемые действия. Кроме того, анимация обеспечивает визуальную связанность при взаимодействии с приложением. Тема Material Design содержит ряд анимаций по умолчанию для кнопок и переходов, а в Android 5.0 (уровень API 21) и более поздних версиях можно настраивать эти анимации и создавать новые:</p>
+
+<ul>
+<li>реакция на касание;</li>
+<li>круговое появление;</li>
+<li>переходы;</li>
+<li>перемещение по кривой;</li>
+<li>изменение состояний представления.</li>
+</ul>
+
+
+<h2 id="Touch">Настройка реакции на касание</h2>
+
+<p>Реакция на касание в Material Design обеспечивает моментальное визуальное подтверждение взаимодействия пользователя с элементами интерфейса в точке касания. В анимации по умолчанию для реакции на нажатие кнопок используется новый класс {@link android.graphics.drawable.RippleDrawable}, обеспечивающий переход между разными состояниями с созданием эффекта ряби.</p>
+
+<p>В большинстве случаев эту возможность следует применять в XML-файле представления, указав фон представления следующим образом:</p>
+
+<ul>
+<li><code>?android:attr/selectableItemBackground</code> для ограниченной области ряби;</li>
+<li><code>?android:attr/selectableItemBackgroundBorderless</code> для ряби, распространяемой за границы представления.</li>
+</ul>
+
+<p class="note"><strong>Примечание.</strong> <code>selectableItemBackgroundBorderless</code> – это новый атрибут, представленный в уровне API 21.</p>
+
+
+<p>Также можно определить {@link android.graphics.drawable.RippleDrawable} в качестве XML-ресурса с помощью элемента <code>ripple</code>.</p>
+
+<p>Можно назначить цвет для объектов {@link android.graphics.drawable.RippleDrawable}. Чтобы изменить цвет реакции на касание, который используется по умолчанию, воспользуйтесь атрибутом темы <code>android:colorControlHighlight</code>.</p>
+
+<p>Дополнительные сведения представлены в справке по API для класса {@link android.graphics.drawable.RippleDrawable}.</p>
+
+
+<h2 id="Reveal">Применение эффекта появления</h2>
+
+<p>Анимация эффекта появления обеспечивает визуальную связанность в действиях пользователя, когда отображается или скрывается группа элементов интерфейса. С помощью метода {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} можно анимировать ограничивающий круг для скрытия или отображения представления.</p>
+
+<p>Отображение ранее скрытого представления с помощью этого эффекта:</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 = Math.max(myView.getWidth(), myView.getHeight());
+
+// create the animator for this view (the start radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
+
+// make the view visible and start the animation
+myView.setVisibility(View.VISIBLE);
+anim.start();
+</pre>
+
+<p>Скрытие ранее отображавшегося представления с помощью этого эффекта:</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">Настройка переходов</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>Рисунок 1.</strong> Переход с общими элементами.</p>
+ <em>Чтобы заново воспроизвести ролик, коснитесь экрана мобильного устройства</em>
+ </div>
+</div>
+
+<p>Переходы в приложениях Material Design обеспечивают визуальные связи между различными состояниями путем движения элементов и преобразований между общими элементами. Можно выбрать настраиваемые анимации для начальных и конечных переходов, а также для переходов общих элементов между операциями.</p>
+
+<ul>
+<li><strong>Начальный</strong> переход определяет порядок появления представлений в операции на экране. Например, в начальном переходе <em>взрыв</em> представления появляются на экране извне и перемещаются по направлению к центру экрана.</li>
+
+<li><strong>Конечный</strong> переход определяет порядок исчезновения представлений с экрана в операции. Например, в конечном переходе <em>взрыв</em> представления исчезают с экрана в направлении из центра к краям.</li>
+
+<li>Переход <strong>общих элементов</strong> определяет порядок перехода представлений, которые используются в обеих операциях, между этими операциями. Например, если в двух операциях используется одно и то же изображение, но в разных позициях и с разными размерами, в случае применения перехода общего элемента <em>changeImageTransform</em> выполняется плавное перемещение и масштабирование изображения между этими операциями.</li>
+</ul>
+
+<p>В Android 5.0 (уровень API 21) поддерживаются следующие начальные и конечные переходы:</p>
+
+<ul>
+<li><em>взрыв</em> – перемещение представлений в центр экрана или из центра;</li>
+<li><em>скольжение</em> – перемещение представлений к одному из краев представления или от него;</li>
+<li><em>наплыв</em> – отображение или скрытие представления на экране путем изменения его прозрачности.</li>
+</ul>
+
+<p>Любой переход, являющийся расширением класса {@link android.transition.Visibility}, поддерживается как начальный или конечный переход. Дополнительные сведения представлены в справке по API для класса {@link android.transition.Transition}.</p>
+
+<p>В Android 5.0 (уровень API 21) также поддерживаются следующие переходы общих элементов:</p>
+
+<ul>
+<li><em>changeBounds</em> – анимация изменений границ макетов целевых представлений.</li>
+<li><em>changeClipBounds</em> – анимация изменений границ обрезки целевых представлений.</li>
+<li><em>changeTransform</em> – анимация изменений параметров масштабирования и поворота целевых представлений.</li>
+<li><em>changeImageTransform</em> – анимация изменений размеров и параметров масштабирования целевых изображений.</li>
+</ul>
+
+<p>Если активировать переходы в приложении, то между начальной и конечной операциями активируется переход «Угасание», используемый по умолчанию.</p>
+
+<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
+<p class="img-caption">
+ <strong>Рисунок 2.</strong> Переход с одним общим элементом.
+</p>
+
+<h3>Настраиваемые переходы</h3>
+
+<p>Сначала необходимо активировать переходы содержимого окна с помощью атрибута <code>android:windowContentTransitions</code> при определении стиля, наследуемого из темы Material Design. В определении стиля можно указать начальный и конечный переходы, а также переходы общих элементов:</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>Переход <code>change_image_transform</code> в этом примере задается следующим образом:</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>Элемент <code>changeImageTransform</code> соответствует классу {@link android.transition.ChangeImageTransform}. Дополнительные сведения представлены в справке по API для {@link android.transition.Transition}.</p>
+
+<p>Чтобы активировать в своем коде переходы содержимого окна, вызовите метод {@link android.view.Window#requestFeature Window.requestFeature()}:</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>Чтобы задать переходы в своем коде, вызовите следующие методы с использованием объекта {@link android.transition.Transition}:</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>Методы {@link android.view.Window#setExitTransition setExitTransition()} и {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} задают конечный переход для вызывающей операции. Методы {@link android.view.Window#setEnterTransition setEnterTransition()} и {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} задают начальный переход для вызываемой операции.</p>
+
+<p>Чтобы в полной мере использовать переход, необходимо активировать переходы содержимого окна как в вызывающей, так и в вызываемой операции. В противном случае вызывающая операция запустит конечный переход, однако будет выполнен переход окна (например, масштабирование или затемнение).</p>
+
+<p>Чтобы запустить начальный переход как можно раньше, используйте в вызываемой операции метод {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}. Это позволит сделать начальные переходы более эффектными.</p>
+
+<h3>Запуск операции с помощью переходов</h3>
+
+<p>Если в приложении активированы переходы и для операции задан конечный переход, переход активируется при запуске другой операции следующим образом:</p>
+
+<pre>
+startActivity(intent,
+ ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
+</pre>
+
+<p>Если для второй операции задан начальный переход, переход также активируется при запуске операции. Чтобы отключить переходы при запуске другой операции, укажите набор параметров <code>null</code>.</p>
+
+<h3>Запуск операции с помощью общего элемента</h3>
+
+<p>Порядок анимации перехода на экране между двумя операциями с общим элементом</p>
+
+<ol>
+<li>Активируйте в своей теме переходы содержимого окна.</li>
+<li>В определении стиля укажите переходы общих элементов.</li>
+<li>Определите свой переход как XML-ресурс.</li>
+<li>Присвойте общим элементам общее имя в обоих макетах, используя для этого атрибут <code>android:transitionName</code>.</li>
+<li>Воспользуйтесь методом {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()}.</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>Для общих динамических представлений, сгенерированных в коде, используйте метод{@link android.view.View#setTransitionName View.setTransitionName()} для задания общего имени элемента в обеих операциях.</p>
+
+<p>Чтобы обратить анимацию перехода по завершении второй операции, вместо {@link android.app.Activity#finish Activity.finish()} вызовите метод {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}.</p>
+
+<h3>Запуск операции с несколькими общими элементами</h3>
+
+<p>Чтобы создать анимацию перехода на экране между двумя операциями с несколькими общими элементами, определите общие элементы в обоих макетах с помощью атрибута <code>android:transitionName</code> (или воспользуйтесь методом {@link android.view.View#setTransitionName View.setTransitionName()} в обеих операциях), а затем создайте объект {@link android.app.ActivityOptions}, как указано ниже.</p>
+
+<pre>
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
+ Pair.create(view1, "agreedName1"),
+ Pair.create(view2, "agreedName2"));
+</pre>
+
+
+<h2 id="CurvedMotion">Использование перемещения по кривой</h2>
+
+<p>При анимации в Material Design используются кривые для интерполяции по времени и схемы перемещения в пространстве. В Android 5.0 (уровень API 21) и более поздних версиях имеется возможность определить для анимаций настраиваемые кривые синхронизации и схемы перемещения по кривой.</p>
+
+<p>Класс {@link android.view.animation.PathInterpolator} – это новый интерполятор на основе кривой Безье или объекта {@link android.graphics.Path}. Данный интерполятор определяет перемещение по кривой в квадрате 1 x 1 с привязкой в точках (0,0) и (1,1), а также с контрольными точками, задаваемыми с помощью аргументов конструктора. Также можно определить интерполятор траектории в качестве XML-ресурса:</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>В системе имеются XML-ресурсы для трех основных кривых в спецификации Material Design:</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>Можно передать объект {@link android.view.animation.PathInterpolator} в метод {@link android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
+
+<p>Класс {@link android.animation.ObjectAnimator} имеет новые конструкторы, с помощью которых можно анимировать координаты вдоль траектории перемещения, используя для этого сразу два или более свойств. Например, следующий аниматор использует объект {@link android.graphics.Path} для анимации свойств представления по осям X и Y:</p>
+
+<pre>
+ObjectAnimator mAnimator;
+mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
+...
+mAnimator.start();
+</pre>
+
+
+<h2 id="ViewState">Анимация изменений состояния представления</h2>
+
+<p>С помощью класса {@link android.animation.StateListAnimator} можно определить аниматоры, которые запускаются при изменении состояния представления. В примере ниже показан порядок определения {@link android.animation.StateListAnimator} в качестве XML-ресурса:</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>Чтобы присоединить к представлению настраиваемые анимации состояния представления, определите аниматор, используя элемент <code>selector</code> в файле XML-ресурса (как в этом примере), а затем назначьте его своему представлению с помощью атрибута <code>android:stateListAnimator</code>. Чтобы в своем коде назначить представлению аниматор списка состояний, используйте метод {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()}, а затем назначьте аниматор своему представлению с помощью метода {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
+
+<p>Когда ваша тема является расширением темы Material Design, по умолчанию у кнопок имеется возможность анимации по оси Z. Чтобы отключить такое поведение для кнопок, задайте для атрибута <code>android:stateListAnimator</code> значение <code>@null</code>.</p>
+
+<p>С помощью класса {@link android.graphics.drawable.AnimatedStateListDrawable} можно создавать элементы, которые служат для отображения анимации между изменениями состояния связанного представления. В Android 5.0 в некоторых системных виджетах такая анимация используется по умолчанию. В примере ниже показан порядок определения {@link android.graphics.drawable.AnimatedStateListDrawable} в качестве XML-ресурса:</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">Анимация векторных элементов</h2>
+
+<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Векторные элементы</a> можно масштабировать без ущерба четкости. Класс {@link android.graphics.drawable.AnimatedVectorDrawable} позволяет анимировать свойства векторного элемента.</p>
+
+<p>Анимированные векторные элементы обычно определяются в трех XML-файлах:</p>
+
+<ul>
+<li>векторный элемент с элементом <code><vector></code> в <code>res/drawable/</code>;</li>
+<li>анимированный векторный элемент с элементом <code><animated-vector></code> в <code>res/drawable/</code>;</li>
+<li>один или несколько аниматоров объектов с элементом <code><objectAnimator></code> в <code>res/anim/</code>.</li>
+</ul>
+
+<p>С помощью анимированных векторных элементов можно анимировать атрибуты элементов <code><group></code> и <code><path></code>. Элемент<code><group></code> определяет набор траекторий или подгрупп, а элемент <code><path></code> – траектории для создания.</p>
+
+<p>При определении векторного элемента, который требуется анимировать, используйте атрибут <code>android:name</code> для назначения уникальных имен группам или траекториям, чтобы на них можно было сослаться в определениях аниматора. Пример:</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>Определение анимированного векторного элемента ссылается на группы и траектории в векторном элементе, используя их имена:</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>Определения анимации представляют объекты {@link android.animation.ObjectAnimator} или {@link android.animation.AnimatorSet}. Первый аниматор в этом примере поворачивает целевую группу на 360 градусов:</p>
+
+<pre>
+<!-- res/anim/rotation.xml -->
+<objectAnimator
+ android:duration="6000"
+ android:propertyName="rotation"
+ android:valueFrom="0"
+ android:valueTo="360" />
+</pre>
+
+<p>Второй аниматор в этом примере преобразует траекторию векторного элемента из одной формы в другую. Для преобразования траектории должны быть совместимы: они должны содержать одинаковое количество команд, а также одинаковое количество параметров для каждой команды.</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>Дополнительные сведения представлены в справке по API для {@link android.graphics.drawable.AnimatedVectorDrawable}.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/training/material/compatibility.jd b/docs/html-intl/intl/ru/training/material/compatibility.jd
new file mode 100644
index 0000000..167f2aa
--- /dev/null
+++ b/docs/html-intl/intl/ru/training/material/compatibility.jd
@@ -0,0 +1,134 @@
+page.title=Обеспечение совместимости
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Содержание этого урока</h2>
+<ol>
+ <li><a href="#Theme">Определение альтернативных стилей</a></li>
+ <li><a href="#Layouts">Предоставление альтернативных макетов</a></li>
+ <li><a href="#SupportLib">Использование вспомогательной библиотеки</a></li>
+ <li><a href="#CheckVersion">Проверка версии системы</a></li>
+</ol>
+<h2>См. также</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Некоторые возможности Material Design, такие как тема Material Design и настраиваемые переходы, доступны только в Android 5.0 (уровень API 21) и более поздних версиях. Однако приложения можно разработать таким образом, чтобы эти функции были доступны при запуске на устройствах, поддерживающих Material Design, сохранив при этом совместимость приложений с устройствами под управлением более ранних выпусков Android.</p>
+
+
+<h2 id="Theme">Определение альтернативных стилей</h2>
+
+<p>Приложение можно настроить на использование темы Material Design на поддерживающих ее устройствах, а также на переключение на более старую тему при запуске этого приложения на устройствах под управлением более ранних версий ОС Android. Ниже описан порядок такой настройки.</p>
+
+<ol>
+<li>В файле <code>res/values/styles.xml</code> определите тему, наследующую более старую тему (например, Holo).</li>
+<li>В файле <code>res/values-v21/styles.xml</code> определите тему с таким же именем, наследующую тему Material Design.</li>
+<li>В файле манифеста укажите эту тему как тему приложения.</li>
+</ol>
+
+<p class="note"><strong>Примечание.</strong> Если в приложении используется тема Material Design, однако в нем отсутствует альтернативная тема, как предлагается выше, ваше приложение не будет запускаться на устройствах под управлением версий Android, предшествующих 5.0.
+</p>
+
+
+<h2 id="Layouts">Предоставление альтернативных макетов</h2>
+
+<p>Если в создаваемых согласно рекомендациям Material Design макетах отсутствуют новые атрибуты XML, представленные в Android 5.0 (уровень API 21), такие макеты поддерживаются в предыдущих версиях ОС Android. В противном случае необходимо предоставить альтернативные макеты. Можно также предоставить альтернативные макеты для настройки внешнего вида приложения в более ранних версиях Android.</p>
+
+<p>Создайте файлы макета для Android 5.0 (уровень API 21) в <code>res/layout-v21/</code>, а также файлы альтернативного макета для более ранних версий Android (в <code>res/layout/</code>). Например, <code>res/layout/my_activity.xml</code> – это альтернативный макет для <code>res/layout-v21/my_activity.xml</code>.</p>
+
+<p>Чтобы сделать код более компактным, определите стили в <code>res/values/</code>, измените стили в <code>res/values-v21/</code> для новых API, а также используйте наследование стилей, определив основные стили в <code>res/values/</code> и задав наследование из них в <code>res/values-v21/</code>.</p>
+
+
+<h2 id="SupportLib">Использование вспомогательной библиотеки</h2>
+
+<p><a href="{@docRoot}tools/support-library/features.html#v7">Вспомогательные библиотеки v7</a> r21 и более поздних версий включают следующие функции Material Design:</p>
+
+<ul>
+<li><a href="{@docRoot}training/material/theme.html">стили Material Design</a> для некоторых системных виджетов в случае применения одной из тем <code>Theme.AppCompat</code>;</li>
+<li><a href="{@docRoot}training/material/theme.html#ColorPalette">атрибуты цветовой палитры темы</a> в темах <code>Theme.AppCompat</code>;</li>
+<li>виджет {@link android.support.v7.widget.RecyclerView} для <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">отображения коллекций данных</a>;</li>
+<li>виджет {@link android.support.v7.widget.CardView} для <a href="{@docRoot}training/material/lists-cards.html#CardView">создания подсказок</a>;</li>
+<li>класс {@link android.support.v7.graphics.Palette} для <a href="{@docRoot}training/material/drawables.html#ColorExtract">извлечения главных цветов на изображениях</a>.</li>
+</ul>
+
+<h3>Системные виджеты</h3>
+
+<p>В темах <code>Theme.AppCompat</code> имеются стили Material Design для следующих виджетов:</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>Цветовая палитра</h3>
+
+<p>Чтобы получить стили Material Design и настроить цветовую палитру с помощью вспомогательной библиотеки Android v7, примените одну из следующих тем <code>Theme.AppCompat</code>:</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>Списки и подсказки</h3>
+
+<p>Виджеты {@link android.support.v7.widget.RecyclerView} и {@link android.support.v7.widget.CardView} имеются в более ранних версиях Android. Они находятся во вспомогательной библиотеке Android v7, и для них существуют следующие ограничения:</p>
+<ul>
+<li>В виджете {@link android.support.v7.widget.CardView} применяется программная реализация тени с помощью дополнительного заполнения.</li>
+<li>Виджет {@link android.support.v7.widget.CardView} не выполняет обрезку своих дочерних представлений, пересекающихся со скругленными углами.</li>
+</ul>
+
+
+<h3>Зависимости</h3>
+
+<p>Чтобы воспользоваться этими возможностями в версиях Android, предшествующих 5.0 (уровень API 21), включите в свой проект вспомогательную библиотеку Android v7 как <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">зависимость Gradle</a>:</p>
+
+<pre>
+dependencies {
+ compile 'com.android.support:appcompat-v7:21.0.+'
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
+
+
+<h2 id="CheckVersion">Проверка версии системы</h2>
+
+<p>Следующие функции доступны только в Android 5.0 (уровень API 21) и более поздних версиях:</p>
+
+<ul>
+<li>переходы;</li>
+<li>реакция на касание;</li>
+<li>анимации появления;</li>
+<li>анимации по траектории;</li>
+<li>векторные элементы;</li>
+<li>Тонирование элементов дизайна.</li>
+</ul>
+
+<p>Чтобы обеспечить совместимость приложения с более ранними версиями Android, проверьте системный параметр {@link android.os.Build.VERSION#SDK_INT version} во время запуска, прежде чем вызвать API любой из этих функций:</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>Примечание.</strong> Чтобы указать версии Android, поддерживаемые вашим приложением, укажите в файле манифеста атрибуты <code>android:minSdkVersion</code> и <code>android:targetSdkVersion</code>. Чтобы использовать функции Material Design, которые имеются в Android 5.0, задайте для атрибута <code>android:targetSdkVersion</code> значение <code>21</code>. Дополнительные сведения представлены в <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">руководстве по API <uses-sdk></a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/training/material/drawables.jd b/docs/html-intl/intl/ru/training/material/drawables.jd
new file mode 100644
index 0000000..a602c99
--- /dev/null
+++ b/docs/html-intl/intl/ru/training/material/drawables.jd
@@ -0,0 +1,105 @@
+page.title=Работа с элементами дизайна
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Содержание этого урока</h2>
+<ol>
+ <li><a href="#DrawableTint">Тонирование элементов дизайна</a></li>
+ <li><a href="#ColorExtract">Извлечение главных цветов на изображении</a></li>
+ <li><a href="#VectorDrawables">Создание векторных элементов</a></li>
+</ol>
+<h2>См. также</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
+</ul>
+</div>
+</div>
+
+<p>Указанные ниже возможности по работе с элементами дизайна позволяют реализовать в приложении элементы Material Design:</p>
+
+<ul>
+<li>тонирование элементов дизайна;</li>
+<li>извлечение главного цвета;</li>
+<li>создание векторных элементов.</li>
+</ul>
+
+<p>В этом уроке рассматривается порядок использования этих функций в приложении.</p>
+
+
+<h2 id="DrawableTint">Тонирование элементов дизайна</h2>
+
+<p>В Android 5.0 (уровень API 21) и более поздних версий можно тонировать растровые изображения и изображения в формате NinePatch, определенные как альфа-маски. Для тонирования можно применять как цветовые ресурсы, так и атрибуты темы, которые разрешаются в цветовые ресурсы (например, <code>?android:attr/colorPrimary</code>). Обычно такие ресурсы создаются только один раз, после чего они автоматически окрашиваются для соответствия цветам темы.</p>
+
+<p>Тонирование можно применить к объектам {@link android.graphics.drawable.BitmapDrawable} и {@link android.graphics.drawable.NinePatchDrawable} с помощью метода {@code setTint()}. Также можно задать цвет и способ тонирования в макетах, используя для этого атрибуты <code>android:tint</code> и <code>android:tintMode</code>.</p>
+
+
+<h2 id="ColorExtract">Извлечение главных цветов на изображении</h2>
+
+<p>Во вспомогательной библиотеке Android r21 и более поздних версий содержится класс {@link android.support.v7.graphics.Palette}, с помощью которого можно извлекать главные цвета на изображении. Данный класс позволяет извлекать следующие главные цвета:</p>
+
+<ul>
+<li>насыщенные цвета;</li>
+<li>насыщенные темные цвета;</li>
+<li>насыщенные светлые цвета;</li>
+<li>приглушенные цвета;</li>
+<li>приглушенные темные цвета;</li>
+<li>приглушенные светлые цвета.</li>
+</ul>
+
+<p>Для извлечения этих цветов передайте объект {@link android.graphics.Bitmap} в статический метод {@link android.support.v7.graphics.Palette#generate Palette.generate()} в фоновом потоке, где вы загружаете изображения. Если невозможно использовать этот поток, вместо этого вызовите метод {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} и укажите прослушиватель.</p>
+
+<p>Извлечь главные цвета на изображении можно также с помощью методов get из класса <code>Palette</code>, таких как <code>Palette.getVibrantColor</code>.</p>
+
+<p>Чтобы использовать класс {@link android.support.v7.graphics.Palette} в своем проекте, добавьте в модуль своего приложения следующую <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">зависимость Gradle</a>:</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:21.0.+'
+}
+</pre>
+
+<p>Дополнительные сведения представлены в справке по API для класса {@link android.support.v7.graphics.Palette}.</p>
+
+
+<h2 id="VectorDrawables">Создание векторных элементов</h2>
+
+<!-- video box -->
+<a class="notice-developers-video"
+href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
+<div>
+ <h3>Видео</h3>
+ <p>Векторная графика в Android</p>
+</div>
+</a>
+
+<p>В Android 5.0 (уровень API 21) и более поздних версий имеется возможность определить векторные элементы, которые можно масштабировать без ущерба для четкости. Для векторного изображения требуется лишь один файл ресурсов, тогда как для растровых изображений требуется отдельный файл ресурсов для каждого разрешения. Чтобы создать векторное изображение, укажите детали формы в XML-элементе <code><vector></code>.</p>
+
+<p>В примере ниже задается векторное изображение в форме сердца:</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>Векторные изображения представлены в Android как объекты {@link android.graphics.drawable.VectorDrawable}. Дополнительные сведения о синтаксисе <code>pathData</code> представлены в <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">справке по траекториям SVG</a>. Дополнительные сведения об анимации свойств векторных элементов см. в разделе <a href="{@docRoot}training/material/animations.html#AnimVector">Анимация векторных элементов</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/training/material/get-started.jd b/docs/html-intl/intl/ru/training/material/get-started.jd
new file mode 100644
index 0000000..545cd16
--- /dev/null
+++ b/docs/html-intl/intl/ru/training/material/get-started.jd
@@ -0,0 +1,147 @@
+page.title=Начало работы
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Содержание этого урока</h2>
+<ol>
+ <li><a href="#ApplyTheme">Применение темы Material Design</a></li>
+ <li><a href="#Layouts">Разработка макетов</a></li>
+ <li><a href="#Depth">Установка высоты представлений</a></li>
+ <li><a href="#ListsCards">Создание списков и подсказок</a></li>
+ <li><a href="#Animations">Настройка анимации</a></li>
+</ol>
+<h2>См. также</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Порядок создания приложения с элементами Material Design</p>
+
+<ol>
+ <li style="margin-bottom:10px">
+ Ознакомьтесь со <a href="http://www.google.com/design/spec">спецификацией Material Design</a>.</li>
+ <li style="margin-bottom:10px">
+ Примените <strong>тему Material Design</strong> к своему приложению.</li>
+ <li style="margin-bottom:10px">
+ Создайте <strong>макеты</strong> в соответствии с рекомендациями Material Design.</li>
+ <li style="margin-bottom:10px">
+ Установите <strong>высоту</strong> своих представлений для отбрасывания теней.</li>
+ <li style="margin-bottom:10px">
+ Используйте системные <strong>виджеты</strong> для списков и подсказок.</li>
+ <li style="margin-bottom:10px">
+ Настройте <strong>анимацию</strong> в своем приложении.</li>
+</ol>
+
+<h3>Обеспечение обратной совместимости</h3>
+
+<p>В приложении можно реализовать множество функций Material Design и одновременно сохранить его совместимость с версиями Android, предшествующими версии 5.0. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.</p>
+
+<h3>Обновление приложения с помощью элементов Material Design</h3>
+
+<p>Чтобы освежить существующее приложение с помощью функций и элементов Material Design, обновите макеты в соответствии с рекомендациями Material Design. Также не забудьте реализовать такие функции, как глубина, реакция на касание и анимация.</p>
+
+<h3>Создание новых приложений с элементами Material Design</h3>
+
+<p>При создании приложений с функциями Material Design следуйте <a href="http://www.google.com/design/spec">рекомендациям Material Design</a>, которые позволят вам получить целостное представление о принципах дизайна. При проектировании и разработке своего приложения следуйте инструкциям и используйте новые функциональные возможности платформы Android.</p>
+
+
+<h2 id="ApplyTheme">Применение темы Material Design</h2>
+
+<p>Чтобы применить тему Material Design в своем приложении, укажите стиль, который наследуется от <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>В теме Material Design содержатся обновленные системные виджеты, для которых можно настраивать цветовую палитру, а также анимации для реакции на касание и переходы. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/theme.html">Использование темы Material Design</a>.</p>
+
+
+<h2 id="Layouts">Разработка макетов</h2>
+
+<p>Помимо применения и настройки темы Material Design, ваши макеты должны быть созданы в соответствии с <a href="http://www.google.com/design/spec">рекомендациями Material Design</a>. Особо внимание при разработке макетов следует обращать на следующие элементы:</p>
+
+<ul>
+<li>сетка базовых линий;</li>
+<li>контуры;</li>
+<li>интервалы;</li>
+<li>размер целевой области касания;</li>
+<li>структура макета.</li>
+</ul>
+
+
+<h2 id="Depth">Установка высоты представлений</h2>
+
+<p>Представления могут отбрасывать тени, и значение высоты определяет размер тени и порядок ее прорисовки. Чтобы установить высоту представления, используйте в макетах атрибут <code>android:elevation</code>:</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>С помощью нового свойства <code>translationZ</code> можно создавать анимации, которые отражают временные изменения в высоте представления. Изменения высоты могут быть полезны при <a href="{@docRoot}training/material/animations.html#ViewState">реагировании на сенсорные жесты</a>.</p>
+
+<p>Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/shadows-clipping.html">Определение теней и обрезка представлений</a>.</p>
+
+
+<h2 id="ListsCards">Создание списков и подсказок</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} представляет собой более гибкую версию {@link android.widget.ListView}. Она поддерживает различные типы макетов и способствует повышению производительности. {@link android.support.v7.widget.CardView} обеспечивает единообразное отображение фрагментов информации внутри подсказок в разных приложениях. В следующем примере демонстрируется, как включить {@link android.support.v7.widget.CardView} в макет:</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>Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/lists-cards.html">Создание списков и подсказок</a>.</p>
+
+
+<h2 id="Animations">Настройка анимации</h2>
+
+<p>В состав Android 5.0 (уровень API 21) входят новые API для создания в приложении настраиваемой анимации. Например, можно активировать переходы между операциями и задавать для операций конечный переход:</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>При запуске другой операции из этой операции активируется конечный переход.</p>
+
+<p>Подробные сведения о новых API для анимации см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой анимации</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/training/material/index.jd b/docs/html-intl/intl/ru/training/material/index.jd
new file mode 100644
index 0000000..1483c51
--- /dev/null
+++ b/docs/html-intl/intl/ru/training/material/index.jd
@@ -0,0 +1,55 @@
+page.title=Создание приложений с помощью Material Design
+page.type=проектирование
+page.image=images/material.png
+page.metaDescription=Узнайте, как применить Material Design к своим приложениям.
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>Зависимости и необходимые компоненты</h2>
+ <ul>
+ <li>Android 5.0 (уровень API 21)</li>
+ <li>Android Studio 0.8</li>
+ </ul>
+</div>
+</div>
+
+<p>Material Design представляет собой полное руководство по созданию визуальных, движущихся и интерактивных элементов для различных платформ и устройств. Чтобы применить элементы Material Design в своих приложениях Android, руководствуйтесь инструкциями в <a href="http://www.google.com/design/spec/material-design/introduction.html">спецификации Material Design</a>, а также воспользуйтесь новыми компонентами и функциями, которые доступны в Android 5.0 (уровень API 21).</p>
+
+<p>Данный курс обучения посвящен созданию приложений Material Design с использованием следующих элементов:</p>
+
+<ul>
+<li>тема Material Design;</li>
+<li>виджеты для подсказок и списков;</li>
+<li>настраиваемые тени и обрезка представлений;</li>
+<li>векторные элементы;</li>
+<li>настраиваемая анимация.</li>
+</ul>
+
+<p>В этом курсе также рассматривается обеспечение обратной совместимости нового приложения, в котором используются функции Material Design, с версиями Android, предшествующими версии 5.0 (уровень API 21).</p>
+
+<h2>Уроки</h2>
+
+<dl>
+ <dt><a href="{@docRoot}training/material/get-started.html">Начало работы</a></dt>
+ <dd>Узнайте, как обновлять приложения с помощью элементов Material Design.</dd>
+
+ <dt><a href="{@docRoot}training/material/theme.html">Использование темы Material Design</a></dt>
+ <dd>Узнайте, как применять стили Material Design в приложениях.</dd>
+
+ <dt><a href="{@docRoot}training/material/lists-cards.html">Создание списков и подсказок</a></dt>
+ <dd>Узнайте, как с помощью системных виджетов создавать единообразные списки и подсказки.</dd>
+
+ <dt><a href="{@docRoot}training/material/shadows-clipping.html">Определение теней и обрезка представлений</a></dt>
+ <dd>Узнайте, как устанавливать высоту представлений для создания настраиваемых теней, а также обрезать представления.</dd>
+
+ <dt><a href="{@docRoot}training/material/drawables.html">Работа с элементами дизайна</a></dt>
+ <dd>Узнайте, как создавать векторные элементы и тонировать элементы дизайна.</dd>
+
+ <dt><a href="{@docRoot}training/material/animations.html">Определение настраиваемой анимации</a></dt>
+ <dd>Узнайте, как создавать настраиваемую анимацию для представлений и переходов между операциями, в которых используются общие элементы.</dd>
+
+ <dt><a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a></dt>
+ <dd>Узнайте, как обеспечить совместимость приложений с версиями платформы, предшествующими Android 5.0.</dd>
+</dl>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/training/material/lists-cards.jd b/docs/html-intl/intl/ru/training/material/lists-cards.jd
new file mode 100644
index 0000000..7f2ab98
--- /dev/null
+++ b/docs/html-intl/intl/ru/training/material/lists-cards.jd
@@ -0,0 +1,223 @@
+page.title=Создание списков и подсказок
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Содержание этого урока</h2>
+<ol>
+ <li><a href="#RecyclerView">Создание списков</a></li>
+ <li><a href="#CardView">Создание подсказок</a></li>
+ <li><a href="#Dependencies">Добавление зависимостей</a></li>
+</ol>
+<h2>См. также</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Для создания в приложениях составных списков и подсказок с помощью стилей Material Design можно использовать виджеты {@link android.support.v7.widget.RecyclerView} и {@link android.support.v7.widget.CardView}.</p>
+
+
+<h2 id="RecyclerView">Создание списков</h2>
+
+<p>Виджет {@link android.support.v7.widget.RecyclerView} представляет собой расширенную и более гибкую версию {@link android.widget.ListView}. Он является контейнером для отображения больших наборов данных, которые можно эффективно прокручивать, сохраняя при этом ограниченное количество представлений. Виджет {@link android.support.v7.widget.RecyclerView} рекомендуется использовать в случаях, когда имеются коллекции данных, элементы которых изменяются во время выполнения на основе действий пользователя или сетевых событий.</p>
+
+<p>Класс {@link android.support.v7.widget.RecyclerView} упрощает отображение и обработку больших наборов данных за счет предоставления:</p>
+
+<ul>
+ <li>менеджеров макетов для размещения элементов;</li>
+ <li>анимации по умолчанию для операций с общими элементами, таких как удаление или добавление элементов.</li>
+</ul>
+
+<p>Также предоставляются гибкие возможности определения настраиваемых менеджеров макетов и анимации для виджетов {@link android.support.v7.widget.RecyclerView}.</p>
+
+<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
+<p class="img-caption">
+<strong>Рисунок 1</strong>. Виджет <code>RecyclerView</code>.
+</p>
+
+<p>Чтобы воспользоваться виджетом {@link android.support.v7.widget.RecyclerView}, необходимо определить адаптер и менеджер макетов. Для создания адаптера следует наследовать класс {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Характеристики реализации зависят от особенностей используемого набора данных и типа представлений. Дополнительные сведения представлены в <a href="#RVExamples">примерах</a> ниже.</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>Рисунок 2</strong>. Список с использованием <code>RecyclerView</code>.
+</p>
+</div>
+
+<p><strong>Менеджер макетов</strong> размещает представления элемента внутри {@link android.support.v7.widget.RecyclerView} и определяет порядок повторного использования представлений элемента, которые более не отображаются для пользователя. Чтобы повторно использовать (или <em>перезапустить</em>) представление, менеджер макетов может запросить адаптер заменить содержимое представления другим элементом из набора данных. Такой перезапуск представлений позволяет повысить производительность за счет того, что исключается создание ненужных представлений и выполнение ресурсоемких операций подстановки {@link android.app.Activity#findViewById findViewById()}.</p>
+
+<p>Виджет {@link android.support.v7.widget.RecyclerView} включает следующие встроенные менеджеры макетов:</p>
+
+<ul>
+<li>{@link android.support.v7.widget.LinearLayoutManager} для отображения элементов в виде списка с вертикальной или горизонтальной прокруткой;</li>
+<li>{@link android.support.v7.widget.GridLayoutManager} для отображения элементов в виде сетки;</li>
+<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} для отображения элементов в виде шахматной сетки.</li>
+</ul>
+
+<p>Для создания менеджера макетов следует наследовать класс {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
+
+<h3>Анимация</h3>
+
+<p>По умолчанию анимация для добавления и удаления элементов включается в виджете {@link android.support.v7.widget.RecyclerView}. Для настройки такой анимации следует наследовать класс {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} и воспользоваться методом {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}.</p>
+
+<h3 id="RVExamples">Примеры</h3>
+
+<p>В следующем примере демонстрируется, как включить в макет виджет {@link android.support.v7.widget.RecyclerView}:</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>После добавления виджета {@link android.support.v7.widget.RecyclerView} подключите дескриптор объекта, подключите его к менеджеру макетов, а затем подключите адаптер к данным, которые будут отображаться:</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>Адаптер обеспечивает доступ к элементам в наборе данных, создает представления для элементов и заменяет содержимое некоторых представлений новыми элементами данных, когда исходный элемент уже не отображается. Пример кода ниже представляет собой простую реализацию для набора данных, который состоит из массива строк, выведенного на экран с помощью виджетов {@link android.widget.TextView}:</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>Рисунок 3</strong>. Примеры подсказок.
+</p>
+</div>
+
+<h2 id="CardView">Создание подсказок</h2>
+
+<p>Виджет {@link android.support.v7.widget.CardView} является расширением класса {@link android.widget.FrameLayout} и позволяет отображать информацию внутри подсказок, которые будут выглядеть одинаково в рамках платформы. Виджеты {@link android.support.v7.widget.CardView} могут отбрасывать тени и иметь закругленные углы.</p>
+
+<p>Чтобы создать подсказку, отбрасывающую тень, воспользуйтесь атрибутом <code>card_view:cardElevation</code>. В Android 5.0 (уровень API 21) и более поздних версий виджет {@link android.support.v7.widget.CardView} использует реальную высоту и динамические тени, а в более ранних версиях виджет возвращается к программным теням. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.</p>
+
+<p>Для настройки внешнего вида виджета {@link android.support.v7.widget.CardView} используйте следующие свойства:</p>
+
+<ul>
+ <li>Чтобы задать радиус скругления углов в макете, используйте атрибут <code>card_view:cardCornerRadius</code>.</li>
+ <li>Чтобы задать радиус скругления углов в программном коде, используйте метод <code>CardView.setRadius</code>.</li>
+ <li>Чтобы задать цвет фона подсказки, используйте атрибут <code>card_view:cardBackgroundColor</code>.</li>
+</ul>
+
+<p>В следующем примере показано, как включить виджет {@link android.support.v7.widget.CardView} в макет:</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>Дополнительные сведения представлены в справке по API для {@link android.support.v7.widget.CardView}.</p>
+
+
+<h2 id="Dependencies">Добавление зависимостей</h2>
+
+<p>Виджеты {@link android.support.v7.widget.RecyclerView} и {@link android.support.v7.widget.CardView} имеются во <a href="{@docRoot}tools/support-library/features.html#v7">вспомогательных библиотеках v7</a>. Чтобы использовать эти виджеты в своем проекте, добавьте в модуль приложения следующие <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">зависимости Gradle</a>:</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/training/material/shadows-clipping.jd b/docs/html-intl/intl/ru/training/material/shadows-clipping.jd
new file mode 100644
index 0000000..fe634d3f
--- /dev/null
+++ b/docs/html-intl/intl/ru/training/material/shadows-clipping.jd
@@ -0,0 +1,99 @@
+page.title=Определение теней и обрезка представлений
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Содержание этого урока</h2>
+<ol>
+ <li><a href="#Elevation">Установка высоты представления</a></li>
+ <li><a href="#Shadows">Настройка теней и контуров представления</a></li>
+ <li><a href="#Clip">Обрезка представления</a></li>
+</ol>
+<h2>См. также</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
+</ul>
+</div>
+</div>
+
+<p>В Material Design представлена возможность настройки высоты элементов интерфейса. Высота позволяет пользователю понять относительную важность каждого элемента и сосредоточиться на выполнении необходимой задачи.</p>
+
+<p>Высота представления, выраженная с помощью свойства Z, определяет внешний вид его тени: представления с более высоким значением Z отбрасывают более мягкие тени большего размера. Представления с более высокими значениями Z перекрывают представления с более низкими значениями Z, однако значение Z не влияет на размер самого представления.</p>
+
+<p>Прорисовка теней выполняется родительским представлением, поэтому к приподнятому представлению можно применять стандартную операцию обрезки представления (по умолчанию представление обрезается своим родительским представлением).</p>
+
+<p>Установка высоты также полезна для создания анимации, когда виджеты временно поднимаются выше плоскости представления при выполнении какого-либо действия.</p>
+
+<p>Дополнительные сведения об установке высоты в Material Design представлены в статье <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objects in 3D space</a>.</p>
+
+
+<h2 id="Elevation">Установка высоты представления</h2>
+
+<p>Значение Z для представления включает два компонента: <ul>
+<li>высота: статический компонент;</li>
+<li>смещение: динамический компонент, используемый для анимации.</li>
+</ul>
+
+<p><code>Z = elevation + translationZ</code></p>
+
+<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
+<p class="img-caption"><strong>Рисунок 1</strong>. Тени для различной высоты представления.</p>
+
+<p>Чтобы установить высоту представления в определении макета, используйте атрибут <code>android:elevation</code>. Чтобы установить высоту представления в программном коде операции, используйте метод{@link android.view.View#setElevation View.setElevation()}.</p>
+
+<p>Чтобы установить смещение представления, используйте метод {@link android.view.View#setTranslationZ View.setTranslationZ()}.</p>
+
+<p>Новые методы {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} и {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} позволяют с легкостью анимировать изменение высоты представления. Дополнительные сведения представлены в справке по API для {@link android.view.ViewPropertyAnimator}, а также в руководстве по <a href="{@docRoot}guide/topics/graphics/prop-animation.html">анимации свойств</a> для разработчиков.</p>
+
+<p>Также можно воспользоваться {@link android.animation.StateListAnimator} для указания этих анимаций описательно. Это особенно полезно в тех случаях, когда состояние изменяется при анимации переключения, например, когда пользователь нажимает на кнопку. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/animations.html#ViewState">Анимация изменений состояния представления</a>.</p>
+
+<p>Значения Z измеряются в dp (пикселы, не зависящие от плотности).</p>
+
+
+<h2 id="Shadows">Настройка теней и контуров представления</h2>
+
+<p>Границы фонового элемента представления определяют форму его тени по умолчанию. <strong>Контуры</strong> – это внешние границы графического объекта, они также определяют область ряби для реакции на касание.</p>
+
+<p>В примере ниже рассматривается это представление, определенное с помощью фонового элемента дизайна:</p>
+
+<pre>
+<TextView
+ android:id="@+id/myview"
+ ...
+ android:elevation="2dp"
+ android:background="@drawable/myrect" />
+</pre>
+
+<p>Фоновый элемент дизайна определен как прямоугольник со скругленными углами:</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>Представление отбрасывает тень с закругленными углами, поскольку фоновый элемент дизайна определяет контур представления. Если указать настраиваемый контур, он будет переопределять форму тени по умолчанию для представления.</p>
+
+<p>Порядок определения настраиваемого контура представления в программном коде<p>
+
+<ol>
+<li>Сначала следует наследовать класс {@link android.view.ViewOutlineProvider}.</li>
+<li>Затем переопределите метод {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
+<li>Наконец, назначьте поставщика контуров для своего представления с помощью метода {@link android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
+</ol>
+
+<p>Можно создавать овальные и прямоугольные контуры со скругленными углами, используя для этого методы класса {@link android.graphics.Outline}. Поставщик контуров по умолчанию получает контуры из фона представления. Чтобы представление не отбрасывало тень, задайте для поставщика контуров значение <code>null</code>.</p>
+
+
+<h2 id="Clip">Обрезка представления</h2>
+
+<p>С помощью обрезки представлений можно с легкостью изменять их форму. Представление можно обрезать для обеспечения единообразия элементов дизайна. Также можно изменить форму представления в ответ на действия пользователя. С помощью метода {@link android.view.View#setClipToOutline View.setClipToOutline()} или атрибута <code>android:clipToOutline</code> представление можно обрезать по его контуру. Обрезать можно только прямоугольники, круги и скругленные прямоугольники, как определено в методе {@link android.graphics.Outline#canClip Outline.canClip()}.</p>
+
+<p>Чтобы обрезать представление по форме элемента дизайна, установите элемент дизайна в качестве фона представления (как показано выше) и вызовите метод {@link android.view.View#setClipToOutline View.setClipToOutline()}.</p>
+
+<p>Обрезка представления – довольно ресурсоемкая операция, поэтому не анимируйте форму, которую вы используете для обрезки представления. Для достижения этого эффекта используйте анимацию <a href="{@docRoot}training/material/animations.html#Reveal">эффекта появления</a>.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/ru/training/material/theme.jd b/docs/html-intl/intl/ru/training/material/theme.jd
new file mode 100644
index 0000000..6b92987
--- /dev/null
+++ b/docs/html-intl/intl/ru/training/material/theme.jd
@@ -0,0 +1,107 @@
+page.title=Использование темы Material Design
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>Содержание этого урока</h2>
+<ol>
+ <li><a href="#ColorPalette">Настройка цветовой палитры</a></li>
+ <li><a href="#StatusBar">Настройка строки состояния</a></li>
+ <li><a href="#Inheritance">Отдельные представления темы</a></li>
+</ol>
+<h2>См. также</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>Новая тема Material Design предоставляет следующие возможности:</p>
+
+<ul>
+ <li>системные виджеты, для которых можно настраивать цветовую палитру;</li>
+ <li>анимация для реакции на касание для системных виджетов;</li>
+ <li>анимация переходов между операциями.</li>
+</ul>
+
+<p>Внешний вид темы Material Design можно настроить с учетом фирменного стиля, воспользовавшись для этого цветовой палитрой. Можно изменить оттенок строки действий и строки состояния, используя атрибуты темы, как показано на <a href="#fig3">рисунке 3</a>.</p>
+
+<p>Системные виджеты отличаются новым дизайном и анимацией для реакции на касание. В своем приложении вы можете настроить цветовую палитру, анимацию реакции на касание и переходы между операциями.</p>
+
+<p>Тема Material Design задается следующими параметрами:</p>
+
+<ul>
+ <li><code>@android:style/Theme.Material</code> (темные цвета);</li>
+ <li><code>@android:style/Theme.Material.Light</code> (светлые цвета);</li>
+ <li><code>@android:style/Theme.Material.Light.DarkActionBar</code>.</li>
+</ul>
+
+<p>Список доступных стилей Material Design представлен в справке по API для {@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>Рисунок 1</strong>. Тема Material Design в темных тонах.</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>Рисунок 2</strong>. Тема Material Design в светлых тонах.</p>
+ </div>
+</div>
+<br style="clear:left">
+</div>
+
+<p class="note">
+<strong>Примечание.</strong> Тема Material Design доступна только в Android 5.0 (уровень API 21) и более поздних версий. Во <a href="{@docRoot}tools/support-library/features.html#v7">вспомогательных библиотеках v7</a> представлены темы со стилями Material Design для некоторых виджетов. Эти библиотеки также обеспечивают поддержку настройки цветовой палитры. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.
+</p>
+
+
+<h2 id="ColorPalette">Настройка цветовой палитры</h2>
+
+<p style="margin-bottom:30px">Для настройки основных цветов в соответствии с фирменным стилем определите настраиваемые цвета с помощью атрибутов темы при наследовании от темы Material Design:</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>Рисунок 3</strong>. Настройка темы Material Design.</p>
+</div>
+
+
+<h2 id="StatusBar">Настройка строки состояния</h2>
+
+<p>В теме Material Design можно с легкостью настроить строку состояния, указав нужный цвет в соответствии с фирменным стилем и задав достаточную контрастность для отображения белых значков состояния. Чтобы задать настраиваемый цвет для строки состояния, воспользуйтесь атрибутом <code>android:statusBarColor</code> при наследовании темы Material Design. По умолчанию параметр <code>android:statusBarColor</code> наследует значение <code>android:colorPrimaryDark</code>.</p>
+
+<p>Кроме того, можно самостоятельно разместить элемент за строкой состояния. Например, если требуется наложить прозрачную строку состояния поверх фотографии, применив еле уловимый темный градиент, чтобы были видны белые значки состояния. Для этого задайте для атрибута <code>android:statusBarColor</code> значение <code>@android:color/transparent</code> и настройте флаги окна требуемым образом. Также можно воспользоваться методом {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} для применения анимации или эффекта постепенного исчезновения.</p>
+
+<p class="note">
+<strong>Примечание.</strong> Строка состояния почти всегда должна иметь четкую границу, отделяющую ее от основной панели инструментов, за исключением случаев, когда за этими панелями от края и до края экрана отображается большое количество изображений или мультимедийный контент, а также в случае, когда вы используете градиент, чтобы обеспечить отображение значков.
+</p>
+
+<p>При настройке панели навигации и строки состояния сделайте их прозрачными либо измените только строку состояния. Во всех остальных случаях панель навигации должна оставаться черной.</p>
+
+
+<h2 id="Inheritance">Отдельные представления темы</h3>
+
+<p>Элементы в определениях макета XML могут задавать атрибут <code>android:theme</code>, который ссылается на ресурс темы. Этот атрибут изменяет тему для элемента и любых дочерних элементов, что удобно для изменения цветовых палитр темы в определенной области интерфейса.</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/design/material/index.jd b/docs/html-intl/intl/zh-cn/design/material/index.jd
new file mode 100644
index 0000000..b0da096
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/design/material/index.jd
@@ -0,0 +1,43 @@
+page.title=设计
+page.viewport_width=970
+section.landing=true
+meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
+header.hide=1
+footer.hide=1
+
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 0;
+ top: 42px;
+ width: 266px;
+
+}
+#hero-image {
+ padding-left:68px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ <span itemprop="description">欢迎来到 <strong>Android 设计</strong>，一个让您学习如何设计卓越 Android 应用的园地。</span>
+ <br><br>
+ 想知道 <strong>Android 5.0</strong> 将为设计师提供些什么吗？请参阅 <a href="{@docRoot}design/patterns/new.html">Android 新增特色</a>。<br><br>
+ <a href="/design/get-started/creative-vision.html" class="landing-page-link">创意视觉</a>
+ </div>
+ <a id="hero-image" href="/design/get-started/creative-vision.html"> <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">材料设计</h2>
+<p>Android 5.0 推出了一项由纸墨所启发的设计隐喻，提供令人倍感心安的触感。
+</p>
+<p><a class="white" href="{@docRoot}design/material/index.html">了解详情</a></p>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/training/material/animations.jd b/docs/html-intl/intl/zh-cn/training/material/animations.jd
new file mode 100644
index 0000000..049bf32
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/training/material/animations.jd
@@ -0,0 +1,456 @@
+page.title=定义定制动画
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本课程将向您展示如何</h2>
+<ol>
+ <li><a href="#Touch">定制触摸反馈</a></li>
+ <li><a href="#Reveal">使用揭露效果</a></li>
+ <li><a href="#Transitions">定制操作行为转换</a></li>
+ <li><a href="#ViewState">为视图状态改变添加动画</a></li>
+ <li><a href="#AnimVector">为矢量图片添加动画</a></li>
+</ol>
+<h2>您也应该阅读</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>材料设计中的动画将为用户提供操作反馈并在用户与您的应用进行互动时提供视觉连续性。材料主题将为按钮与操作行为转换提供一些默认动画，而 Android 5.0 及以上的版本（API 级别 21）可让您定制这些动画，同时也可创建新动画：</p>
+
+<ul>
+<li>触摸反馈</li>
+<li>循环揭露</li>
+<li>操作行为转换</li>
+<li>曲线运动</li>
+<li>视图状态改变</li>
+</ul>
+
+
+<h2 id="Touch">定制触摸反馈</h2>
+
+<p>材料设计中的触摸反馈可在用户与 UI 元素互动时，在接触点上提供即时视觉确认。适用于按钮的默认触摸动画使用全新 {@link android.graphics.drawable.RippleDrawable} 类别，以波纹效果实现不同状态间的转换。</p>
+
+<p>在大多数情况下，您应以下列方式指定视图背景，在您的视图 XML 中应用此功能：</p>
+
+<ul>
+<li><code>?android:attr/selectableItemBackground</code> 指定有界的波纹</li>
+<li><code>?android:attr/selectableItemBackgroundBorderless</code> 指定越界的波纹</li>
+</ul>
+
+<p class="note"><strong>注意：</strong><code>selectableItemBackgroundBorderless</code> 是 API 级别 21 中推出的新属性。</p>
+
+
+<p>此外，您可利用 <code>ripple</code> 元素将 {@link android.graphics.drawable.RippleDrawable} 定义为一个 XML 资源。</p>
+
+<p>您可以为 {@link android.graphics.drawable.RippleDrawable} 对象指定一种颜色。如果要改变默认触摸反馈颜色，请使用主题的 <code>android:colorControlHighlight</code> 属性。</p>
+
+<p>如果要了解更多信息，请参阅 {@link android.graphics.drawable.RippleDrawable} 类别的 API 参考文档。</p>
+
+
+<h2 id="Reveal">使用揭露效果</h2>
+
+<p>当您显示或隐藏一组 UI 元素时，揭露动画可为用户提供视觉连续性。{@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} 方法让您能够为裁剪区域添加动画以揭露或隐藏视图。</p>
+
+<p>如果要使用此效果揭露之前不可见的视图：</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 = Math.max(myView.getWidth(), myView.getHeight());
+
+// create the animator for this view (the start radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
+
+// make the view visible and start the animation
+myView.setVisibility(View.VISIBLE);
+anim.start();
+</pre>
+
+<p>如果要使用此效果隐藏之前可见的视图：</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">定制操作行为转换</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>图 1</strong> - 拥有共享元素的转换。</p>
+ <em>如果要重新播放影片，请单击设备屏幕</em>
+ </div>
+</div>
+
+<p>材料设计应用中的操作行为转换透过通用元素之间的移动和转换提供不同状态之间的视觉连接。您可为进入、退出以及操作行为之间的共享元素转换指定定制动画。</p>
+
+<ul>
+<li><strong>进入</strong>转换将决定操作行为的视图如何进入场景。例如，<em>分解</em>进入转换中，视图将从屏幕外进入场景并飞往屏幕中心。</li>
+
+<li><strong>退出</strong>转换将决定操作行为的视图如何退出场景。例如，<em>分解</em>退出转换中，视图将从屏幕中心退出场景。</li>
+
+<li><strong>共享元素</strong>转换将决定两个操作行为转换之间共享的视图如何在这些操作行为中转换。例如，如果两个操作行为拥有相同的图像，但其位置与大小不同，<em>changeImageTransform</em> 共享元素转换将在这些操作行为之间平滑地转换与缩放图像。</li>
+</ul>
+
+<p>Android 5.0（API 级别 21）支持这些进入与退出转换：</p>
+
+<ul>
+<li><em>分解</em> - 从场景中心移入或移出视图。</li>
+<li><em>滑动</em> - 从场景边缘移入或移出视图。</li>
+<li><em>淡入淡出</em> - 通过调整透明度从场景增添或移除视图。</li>
+</ul>
+
+<p>任何扩展 {@link android.transition.Visibility} 类别的转换均将获得进入或退出转换支持。如果要了解更多信息，请参阅 {@link android.transition.Transition} 类别的 API 参考文档。</p>
+
+<p>Android 5.0（API 级别 21）也支持这些共享元素转换：</p>
+
+<ul>
+<li><em>changeBounds</em> - 为目标视图的布局边界的变化添加动画。</li>
+<li><em>changeClipBounds</em> - 为目标视图的裁剪边界的变化添加动画。</li>
+<li><em>changeTransform</em> - 为目标视图的缩放与旋转变化添加动画。</li>
+<li><em>changeImageTransform</em> - 为目标图像的大小与缩放变化添加动画。</li>
+</ul>
+
+<p>当您在您的应用中启用操作行为转换，默认的交叉淡入淡出转换将在进入与退出操作行为之间激活。</p>
+
+<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
+<p class="img-caption">
+ <strong>图 2</strong> - 拥有一个共享元素的场景转换。
+</p>
+
+<h3>指定定制转换</h3>
+
+<p>首先，在定义您从材料主题继承的风格时，使用 <code>android:windowContentTransitions</code> 属性启用窗口内容转换。您也可在您的风格定义中指定进入、退出以及共享元素转换：</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>此示例中的 <code>change_image_transform</code> 转换定义如下：</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><code>changeImageTransform</code> 元素与 {@link android.transition.ChangeImageTransform} 类别相对应。如果要了解更多信息，请参阅 {@link android.transition.Transition} 的 API 参考文档。</p>
+
+<p>如果要在您的代码中启用窗口内容转换，请调用 {@link android.view.Window#requestFeature Window.requestFeature()} 方法：</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>如果要在您的代码中指定转换，请以 {@link android.transition.Transition} 对象调用这些方法：</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>{@link android.view.Window#setExitTransition setExitTransition()} 与 {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 方法定义正在调用的操作行为的退出转换。{@link android.view.Window#setEnterTransition setEnterTransition()} 与 {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} 方法定义被调用的操作行为的进入转换。</p>
+
+<p>如果要取得转换的完整效果，您必须在正在调用以及被调用的操作行为上启用窗口内容转换。否则，正在调用的操作行为将开始退出转换，但是您将会看到窗口转换（例如缩放或淡入淡出）</p>
+
+<p>如果要尽快开始进入转换，请在被调用的操作行为上使用 {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} 方法。这可以让您实现更生动的进入转换。</p>
+
+<h3>使用转换开始一个操作行为</h3>
+
+<p>如果您启用转换并且为一个操作行为设置退出转换，那么在您启动另一个操作行为时，转换将以下列方式激活：</p>
+
+<pre>
+startActivity(intent,
+ ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
+</pre>
+
+<p>如果您已为第二个操作行为设置进入转换，则转换也将会在操作行为开始时激活。如果要在您开始另一个操作行为时禁用转换，请提供 <code>null</code> 选项包。</p>
+
+<h3>以共享元素开始一个操作行为</h3>
+
+<p>如果要在两个拥有共享元素的操作行为之间安排屏幕转换动画：</p>
+
+<ol>
+<li>请在您的主题中启用窗口内容转换。</li>
+<li>在您的风格中指定一个共享元素转换。</li>
+<li>将您的转换定义为 XML 资源。</li>
+<li>利用 <code>android:transitionName</code> 属性对两个布局中的共享元素指定一个通用名称。</li>
+<li>使用 {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()} 方法。</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>对于在您的代码中生成的共享动态视图，请使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法在两个操作行为中指定一个通用元素名称。</p>
+
+<p>如果要在完成第二项操作行为时反转场景转换动画，请调用 {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} 方法而非 {@link android.app.Activity#finish Activity.finish()}。</p>
+
+<h3>以多个共享元素开始一个操作行为</h3>
+
+<p>如果要在两个拥有多过一个共享元素的操作行为之间安排场景转换动画，请以 <code>android:transitionName</code> 属性（或在两个操作行为中使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法）定义共享元素，并以下列方式创建一个 {@link android.app.ActivityOptions} 对象：</p>
+
+<pre>
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
+ Pair.create(view1, "agreedName1"),
+ Pair.create(view2, "agreedName2"));
+</pre>
+
+
+<h2 id="CurvedMotion">使用曲线运动</h2>
+
+<p>材料设计中的动画利用曲线进行时间内插与空间移动模式。利用 Android 5.0（API 级别 21）及更高版本，您可为动画定义定制时间曲线以及曲线运动模式。</p>
+
+<p>{@link android.view.animation.PathInterpolator} 类别是一个基于贝塞尔曲线或 {@link android.graphics.Path} 对象的全新插入器。此插入器在一个 1x1 的正方形内指定一个运动曲线，定位点位于 (0,0) 以及 (1,1)，而控制点则使用构造函数参数指定。您也可以将路径插入器定义为一个 XML 资源：</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>系统将为材料设计规范中的三种基本曲线提供 XML 资源：</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>您可以将一个 {@link android.view.animation.PathInterpolator} 对象传递给 {@link android.animation.Animator#setInterpolator Animator.setInterpolator()} 方法。</p>
+
+<p>{@link android.animation.ObjectAnimator} 类别拥有新的构造函数，可让您一次使用两个或更多属性在路径上为坐标添加动画。例如，下列的动画使用 {@link android.graphics.Path} 对象为视图的 X 和 Y 属性添加动画：</p>
+
+<pre>
+ObjectAnimator mAnimator;
+mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
+...
+mAnimator.start();
+</pre>
+
+
+<h2 id="ViewState">为视图状态改变添加动画</h2>
+
+<p>{@link android.animation.StateListAnimator} 类别让您能够定义视图状态改变时运行的动画。下列示例显示如何将 {@link android.animation.StateListAnimator} 定义为一个 XML 资源：</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>如果要将定制视图状态动画附加至一个视图，请依照此示例使用 XML 资源文件中的 <code>selector</code> 元素定义一个动画，并使用 <code>android:stateListAnimator</code> 属性将此动画分配给您的视图。如果要将一个状态列表动画分配给您的代码内的一个视图，请使用 {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} 方法，并以{@link android.view.View#setStateListAnimator View.setStateListAnimator()} 方法将动画分配给您的视图。</p>
+
+<p>当您的主题扩展材料主题，在默认情况下按钮将拥有一个 Z 动画。如果要避免您的按钮出现这类行为，请将 <code>android:stateListAnimator</code> 属性设置为 <code>@null</code>。</p>
+
+<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 类别让您能够创建图片，显示相关视图之间的状态变化。Android 5.0 中的某些系统小组件在默认情况下使用这些动画。下列示例显示如何将 {@link android.graphics.drawable.AnimatedStateListDrawable} 定义为一个 XML 资源：</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">为矢量图片添加动画</h2>
+
+<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">矢量图片</a>可在不丢失定义的情况下缩放。{@link android.graphics.drawable.AnimatedVectorDrawable} 类别可让您为矢量图片的属性添加动画。</p>
+
+<p>您通常可以在 3 个 XML 文件中定义添加动画的矢量图片：</p>
+
+<ul>
+<li>在 <code>res/drawable/</code> 中拥有 <code><vector></code> 元素的矢量图片</li>
+<li>在 <code>res/drawable/</code> 中拥有 <code><animated-vector></code> 元素且已添加动画的矢量图片</li>
+<li>在 <code>res/anim/</code> 中拥有 <code><objectAnimator></code> 元素的一个或多个对象动画</li>
+</ul>
+
+<p>添加动画的矢量图片可为 <code><group></code> 以及 <code><path></code> 元素的属性添加动画。<code><group></code> 元素定义路径集或子组，而 <code><path></code> 元素则定义将绘制的路径。</p>
+
+<p>当您定义一个您想要添加动画的矢量图片时，请使用 <code>android:name</code> 属性给这些群组和路径指定一个唯一名称，以便让您能够从您的动画定义中参考这些群组或路径。例如：</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>已添加动画的矢量图片定义指的是矢量图片内按名称分类的群组和路径：</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>动画定义代表着 {@link android.animation.ObjectAnimator} 或 {@link android.animation.AnimatorSet} 对象。此示例中的首个动画为目标群组进行了 360 度旋转：</p>
+
+<pre>
+<!-- res/anim/rotation.xml -->
+<objectAnimator
+ android:duration="6000"
+ android:propertyName="rotation"
+ android:valueFrom="0"
+ android:valueTo="360" />
+</pre>
+
+<p>此示例中的第二个动画为矢量图片的路径进行变形。两个路径均需可兼容变形操作：两个路径均需拥有相同数量的指令，而且每个指令均需拥有相同数量的参数。</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>如果要了解更多信息，请参阅 {@link android.graphics.drawable.AnimatedVectorDrawable} 的 API 参考文档。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/training/material/compatibility.jd b/docs/html-intl/intl/zh-cn/training/material/compatibility.jd
new file mode 100644
index 0000000..6cf228e
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/training/material/compatibility.jd
@@ -0,0 +1,134 @@
+page.title=维护兼容性
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本课程将向您展示如何</h2>
+<ol>
+ <li><a href="#Theme">定义备用样式</a></li>
+ <li><a href="#Layouts">提供备用布局</a></li>
+ <li><a href="#SupportLib">使用支持内容库</a></li>
+ <li><a href="#CheckVersion">检查系统版本</a></li>
+</ol>
+<h2>您也应该阅读</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>有些材料设计功能（例如材料主题和定制操作行为转换）仅在 Android 5.0（API 级别 21）及更高版本中提供。不过，您可为您的应用进行设计，使应用在支持材料设计的设备上运行时可使用这些功能，且同时能够与运行早期版本 Android 的设备兼容。</p>
+
+
+<h2 id="Theme">定义备用样式</h2>
+
+<p>您可为您的应用进行配置，使应用能够在支持它的设备上使用材料主题，并且能够在运行早期版本 Android 的设备上还原至早期版本的主题：</p>
+
+<ol>
+<li>定义一个从 <code>res/values/styles.xml</code> 中的早期版本主题（例如 Holo）继承的主题。</li>
+<li>定义一个从 <code>res/values-v21/styles.xml</code> 中的材料主题继承且拥有相同名称的主题。</li>
+<li>在清单文件中将此主题设置为您的应用主题。</li>
+</ol>
+
+<p class="note"><strong>请注意：</strong>如果您的应用使用材料主题，但没有以这方式提供备用主题，您的应用将无法在 Android 5.0 之前的 Android 版本上运行。
+</p>
+
+
+<h2 id="Layouts">提供备用布局</h2>
+
+<p>如果您根据材料设计指导方针设计的布局没有使用 Android 5.0（API 级别 21）所推出的新 XML 属性，这些布局将能够在早期版本 Android 上运行。或者，您也可以提供备用布局。您也可以提供备用布局以定制应用在早期版本 Android 上的呈现方式。</p>
+
+<p>您可在 <code>res/layout-v21/</code> 内创建用于 Android 5.0（API 级别 21）的布局文件，同时也可在 <code>res/layout/</code> 内创建用于早期版本 Android 的备用布局文件。例如，<code>res/layout/my_activity.xml</code> 是 <code>res/layout-v21/my_activity.xml</code> 的备用布局。</p>
+
+<p>为避免代码重复，请在 <code>res/values/</code> 内定义您的风格，在 <code>res/values-v21/</code> 内为新 API 修改风格，以及使用风格继承（即：在 <code>res/values/</code> 内定义基础风格，然后在 <code>res/values-v21/</code> 内继承这些风格）。</p>
+
+
+<h2 id="SupportLib">使用支持内容库</h2>
+
+<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a> r21 及更高版本包括下列材料设计功能：</p>
+
+<ul>
+<li>应用其中一个 <code>Theme.AppCompat</code> 主题时可取得适用于一些系统小组件的<a href="{@docRoot}training/material/theme.html">材料设计风格</a>。</li>
+<li><code>Theme.AppCompat</code> 主题中拥有<a href="{@docRoot}training/material/theme.html#ColorPalette">配色工具主题属性</a>。</li>
+<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">显示数据集合</a>的 {@link android.support.v7.widget.RecyclerView} 小组件。</li>
+<li><a href="{@docRoot}training/material/lists-cards.html#CardView">创建卡片</a>的 {@link android.support.v7.widget.CardView} 小组件。</li>
+<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">从图像萃取突出颜色</a>的 {@link android.support.v7.graphics.Palette} 类别。</li>
+</ul>
+
+<h3>系统小组件</h3>
+
+<p><code>Theme.AppCompat</code> 主题可为这些小组件提供材料设计风格：</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>配色工具</h3>
+
+<p>如果要利用 Android v7 支持内容库取得材料设计风格以及定制配色工具，请应用其中一个 <code>Theme.AppCompat</code> 主题：</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>列表与卡片</h3>
+
+<p>{@link android.support.v7.widget.RecyclerView} 以及 {@link android.support.v7.widget.CardView} 小组件可通过 Android v7 支持内容库提供给早期版本 Android，但有如下限制：</p>
+<ul>
+<li>{@link android.support.v7.widget.CardView} 使用额外边距返回编程阴影实现。</li>
+<li>{@link android.support.v7.widget.CardView} 不会裁剪其与圆角相交的子视图。</li>
+</ul>
+
+
+<h3>依赖关系</h3>
+
+<p>如果要在 Android 5.0（API 级别 21）之前的 Android 版本使用这些功能，请将 Android v7 支持内容库作为 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 依赖关系</a>包括在您的项目中：</p>
+
+<pre>
+dependencies {
+ compile 'com.android.support:appcompat-v7:21.0.+'
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
+
+
+<h2 id="CheckVersion">检查系统版本</h2>
+
+<p>下列功能仅在 Android 5.0（API 级别 21）及更高版本中提供：</p>
+
+<ul>
+<li>操作行为转换</li>
+<li>触摸反馈</li>
+<li>揭露动画</li>
+<li>基于路径的动画</li>
+<li>矢量图片</li>
+<li>图片着色</li>
+</ul>
+
+<p>如果要保留与早期版本 Android 的兼容性，请您在运行时检查系统 {@link android.os.Build.VERSION#SDK_INT version}，然后再为下列的任何一个功能调用 API：</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>请注意：</strong>如果要指定您的应用所支持的 Android 版本，请使用您的清单文件中的 <code>android:minSdkVersion</code> 以及 <code>android:targetSdkVersion</code> 属性。如果要在 Android 5.0 内使用材料设计功能，请将 <code>android:targetSdkVersion</code> 属性设置为 <code>21</code>。如果要了解更多信息，请参阅 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html"><uses-sdk> API 指南</a>。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/training/material/drawables.jd b/docs/html-intl/intl/zh-cn/training/material/drawables.jd
new file mode 100644
index 0000000..32f1c54
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/training/material/drawables.jd
@@ -0,0 +1,105 @@
+page.title=使用图片
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本课程将向您展示如何</h2>
+<ol>
+ <li><a href="#DrawableTint">为图片资源着色</a></li>
+ <li><a href="#ColorExtract">从图像萃取突出颜色</a></li>
+ <li><a href="#VectorDrawables">创建矢量图片</a></li>
+</ol>
+<h2>您也应该阅读</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
+</ul>
+</div>
+</div>
+
+<p>下列适用于图片的功能将协助您在您的应用中实现材料设计：</p>
+
+<ul>
+<li>图片着色</li>
+<li>突出颜色萃取</li>
+<li>矢量图片</li>
+</ul>
+
+<p>本课程将向您展示如何在您的应用中使用这些功能。</p>
+
+
+<h2 id="DrawableTint">为图片资源着色</h2>
+
+<p>利用 Android 5.0（API 级别 21）及更高版本，您可为位图以及定义为 Alpha 蒙版的点九图着色。您可使用颜色资源或分解为颜色资源（例如 <code>?android:attr/colorPrimary</code>）的主题属性为其着色。通常，您只有一次机会创建这些资产并自动为其上色以符合您的主题。</p>
+
+<p>您可利用 {@code setTint()} 方法为 {@link android.graphics.drawable.BitmapDrawable} 或 {@link android.graphics.drawable.NinePatchDrawable} 对象着色。您也可以利用 <code>android:tint</code> 以及 <code>android:tintMode</code> 属性设置您的布局中的着色颜色和模式。</p>
+
+
+<h2 id="ColorExtract">从图像萃取突出颜色</h2>
+
+<p>Android 支持内容库 r21 及更高版本包括 {@link android.support.v7.graphics.Palette} 类别，可让您从图像萃取突出颜色。此类别将萃取下列突出颜色：</p>
+
+<ul>
+<li>鲜艳</li>
+<li>鲜艳深色</li>
+<li>鲜艳浅色</li>
+<li>低调</li>
+<li>低调深色</li>
+<li>低调浅色</li>
+</ul>
+
+<p>如果要萃取这些颜色，请将 {@link android.graphics.Bitmap} 对象传递给位于您上载图像的背景线程的 {@link android.support.v7.graphics.Palette#generate Palette.generate()} 静态方法。如果您无法使用此线程，请调用 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 方法并提供一个侦听程序。</p>
+
+<p>您可使用 <code>Palette</code> 类别（例如 <code>Palette.getVibrantColor</code>）中的 getter 方法从图像检索突出颜色。</p>
+
+<p>如果要使用您项目中的 {@link android.support.v7.graphics.Palette} 类别，请将下列 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 依赖关系</a>添加至您的应用模块：</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:21.0.+'
+}
+</pre>
+
+<p>如果要了解更多信息，请参阅 {@link android.support.v7.graphics.Palette} 类别的 API 参考文档。</p>
+
+
+<h2 id="VectorDrawables">创建矢量图片</h2>
+
+<!-- video box -->
+<a class="notice-developers-video"
+href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
+<div>
+ <h3>视频</h3>
+ <p>Android 矢量图形</p>
+</div>
+</a>
+
+<p>在 Android 5.0（API 级别 21）及更高版本中，您可定义矢量图片，而且图片可在不丢失定义的情况下缩放。您只需一个资产文件即可创建一个矢量图像，而位图图像则需要为每个屏幕密度提供一个资产文件。如果要创建一个矢量图像，请您在 <code><vector></code> XML 元素中定义形状的详情。</p>
+
+<p>下列示例以心形定义一个矢量图像：</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>矢量图像在 Android 中以 {@link android.graphics.drawable.VectorDrawable} 对象表示。如果要了解更多有关 <code>pathData</code> 语法的信息，请参阅 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 路径参考文档</a>。如果要了解更多有关为矢量图片属性添加动画的信息，请参阅<a href="{@docRoot}training/material/animations.html#AnimVector">为矢量图片添加动画</a>。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/training/material/get-started.jd b/docs/html-intl/intl/zh-cn/training/material/get-started.jd
new file mode 100644
index 0000000..3d5beab
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/training/material/get-started.jd
@@ -0,0 +1,147 @@
+page.title=入门指南
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本课程将向您展示如何</h2>
+<ol>
+ <li><a href="#ApplyTheme">使用材料主题</a></li>
+ <li><a href="#Layouts">设计布局</a></li>
+ <li><a href="#Depth">指定您视图内的高度</a></li>
+ <li><a href="#ListsCards">创建列表与卡片</a></li>
+ <li><a href="#Animations">定制您的动画</a></li>
+</ol>
+<h2>您也应该阅读</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>如果要使用材料设计创建应用：</p>
+
+<ol>
+ <li style="margin-bottom:10px">
+ 请查阅<a href="http://www.google.com/design/spec">材料设计规范</a>。</li>
+ <li style="margin-bottom:10px">
+ 在您的应用中使用材料<strong>主题</strong>。</li>
+ <li style="margin-bottom:10px">
+ 遵循材料设计指导方针创建您的<strong>布局</strong>。</li>
+ <li style="margin-bottom:10px">
+ 指定您视图要投射阴影的<strong>高度</strong>。</li>
+ <li style="margin-bottom:10px">
+ 使用系统<strong>小组件</strong>呈现列表与卡片。</li>
+ <li style="margin-bottom:10px">
+ 定制您的应用中的<strong>动画</strong>。</li>
+</ol>
+
+<h3>维护后向兼容性</h3>
+
+<p>您可将多个材料设计功能添加至您的应用，同时维护与 Android 5.0 之前的 Android 版本的兼容性。如果要了解更多信息，请参阅<a href="{@docRoot}training/material/compatibility.html">维护兼容性</a>。</p>
+
+<h3>使用材料设计更新您的应用</h3>
+
+<p>如果要更新现有应用以纳入材料设计，请遵循材料设计指导方针更新您的布局。同时也须确保纳入深度、触摸反馈和动画。</p>
+
+<h3>使用材料设计创建新应用</h3>
+
+<p>如果您要使用材料设计功能创建新应用，<a href="http://www.google.com/design/spec">材料设计指导方针</a>将为您提供一个紧密结合的设计框架。请遵循这些指导方针并使用 Android 框架中的新功能来设计与开发您的应用。</p>
+
+
+<h2 id="ApplyTheme">使用材料主题</h2>
+
+<p>如果要在您的应用中使用材料主题，请指定一个从 <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>材料主题提供更新的系统小组件，让您能够为触摸反馈以及操作行为转换设置配色工具以及默认动画。有关更多详情，请参阅<a href="{@docRoot}training/material/theme.html">使用材料主题</a>。</p>
+
+
+<h2 id="Layouts">设计布局</h2>
+
+<p>除了应用及定制材料主题，您的布局同时也应符合<a href="http://www.google.com/design/spec">材料设计指导方针</a>。设计布局时，请特别注意下列几点：</p>
+
+<ul>
+<li>基线格点</li>
+<li>关键线</li>
+<li>间距</li>
+<li>触摸目标大小</li>
+<li>布局结构</li>
+</ul>
+
+
+<h2 id="Depth">指定您视图内的高度</h2>
+
+<p>视图可透射阴影，而视图的高度值将决定其阴影的大小以及其显示顺序。如果要设置视图的高度，请使用您的布局中的 <code>android:elevation</code> 属性：</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>新的 <code>translationZ</code> 属性可让您创建反映出视图高度临时变化的动画。高度变化可在<a href="{@docRoot}training/material/animations.html#ViewState">响应触摸手势</a>时发挥作用。</p>
+
+<p>有关更多详情，请参阅<a href="{@docRoot}training/material/shadows-clipping.html">定义阴影与裁剪视图</a>。</p>
+
+
+<h2 id="ListsCards">创建列表与卡片</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} 是 {@link android.widget.ListView} 的可插入版本，支持不同布局类型，具有更高性能。{@link android.support.v7.widget.CardView} 让您能够展示卡片内的各种信息并且在各种应用中实现一致的呈现方式。下列代码示例将展示如何将 {@link android.support.v7.widget.CardView} 包括在您的布局中：</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>如果要了解更多信息，请参阅<a href="{@docRoot}training/material/lists-cards.html">创建列表与卡片</a>。</p>
+
+
+<h2 id="Animations">定制您的动画</h2>
+
+<p>Android 5.0（API 级别 21）包括新 API，可用于在您的应用中创建定制动画。例如，您可启用操作行为转换并定义操作行为内的退出转换：</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>当您从此操作行为开始另一个操作行为时，退出转换将被激活。</p>
+
+<p>如果要了解有关新动画 API 的更多详情，请参阅<a href="{@docRoot}training/material/animations.html">定义定制动画</a>。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/training/material/index.jd b/docs/html-intl/intl/zh-cn/training/material/index.jd
new file mode 100644
index 0000000..0a968df
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/training/material/index.jd
@@ -0,0 +1,55 @@
+page.title=使用材料设计创建应用
+page.type=design
+page.image=images/material.png
+page.metaDescription=学习如何将材料设计运用到您的应用中。
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>依赖关系和先决条件</h2>
+ <ul>
+ <li>Android 5.0（API 级别 21）</li>
+ <li>Android Studio 0.8</li>
+ </ul>
+</div>
+</div>
+
+<p>材料设计是专为设计适用于多个平台和设备的视觉、移动与互动效果而制定的综合指南。如果要在您的 Android 应用中使用材料设计，请遵循<a href="http://www.google.com/design/spec/material-design/introduction.html">材料设计规范</a>内所述的指导方针，并使用 Android 5.0（API 级别 21）所提供的新组件与功能。</p>
+
+<p>本课程将向您介绍如何利用下列元素创建材料设计应用：</p>
+
+<ul>
+<li>材料主题</li>
+<li>用于创建卡片与列表的小组件</li>
+<li>定制阴影以及视图裁剪</li>
+<li>矢量图片</li>
+<li>定制动画</li>
+</ul>
+
+<p>本课程也将向您展示在您的应用中使用材料设计功能时应如何维护与 Android 5.0（API 级别 21）之前的 Android 版本的兼容性。</p>
+
+<h2>课程</h2>
+
+<dl>
+ <dt><a href="{@docRoot}training/material/get-started.html">入门指南</a></dt>
+ <dd>了解如何使用材料设计功能更新您的应用。</dd>
+
+ <dt><a href="{@docRoot}training/material/theme.html">使用材料主题</a></dt>
+ <dd>了解如何在您的应用中使用材料设计风格。</dd>
+
+ <dt><a href="{@docRoot}training/material/lists-cards.html">创建列表与卡片</a></dt>
+ <dd>了解如何使用系统小组件创建拥有一致的呈现方式与风格的列表与卡片。</dd>
+
+ <dt><a href="{@docRoot}training/material/shadows-clipping.html">定义阴影与裁剪视图</a></dt>
+ <dd>了解如何为您的视图设置高度以便创建定制阴影以及如何裁剪视图。</dd>
+
+ <dt><a href="{@docRoot}training/material/drawables.html">使用 Drawables</a></dt>
+ <dd>了解如何创建矢量图片以及如何为资源着色。</dd>
+
+ <dt><a href="{@docRoot}training/material/animations.html">定义定制动画</a></dt>
+ <dd>了解如何为视图以及拥有共享元素的操作行为创建定制动画。</dd>
+
+ <dt><a href="{@docRoot}training/material/compatibility.html">维护兼容性</a></dt>
+ <dd>了解如何维护与 Android 5.0 之前各种平台版本的兼容性。</dd>
+</dl>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/training/material/lists-cards.jd b/docs/html-intl/intl/zh-cn/training/material/lists-cards.jd
new file mode 100644
index 0000000..c17a975
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/training/material/lists-cards.jd
@@ -0,0 +1,223 @@
+page.title=创建列表与卡片
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本课程将向您展示如何</h2>
+<ol>
+ <li><a href="#RecyclerView">创建列表</a></li>
+ <li><a href="#CardView">创建卡片</a></li>
+ <li><a href="#Dependencies">添加依赖关系</a></li>
+</ol>
+<h2>您也应该阅读</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>如果要在您的应用中使用材料设计风格创建复杂列表与卡片，您可使用 {@link android.support.v7.widget.RecyclerView} 以及 {@link android.support.v7.widget.CardView} 小组件。</p>
+
+
+<h2 id="RecyclerView">创建列表</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} 小组件比 {@link android.widget.ListView} 更高级且更具灵活性。此小组件是一个用于显示庞大数据集的容器，可通过保持有限数量的视图进行非常有效的滚动操作。如果您有数据收集任务，且在任务运行过程中其元素将因用户操作或网络事件而发生改变，则请使用 {@link android.support.v7.widget.RecyclerView} 小组件。</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} 类别将通过提供下列功能简化庞大数据集的显示与处理：</p>
+
+<ul>
+ <li>用于项目定位的布局管理器</li>
+ <li>用于通用项目操作（例如删除或添加项目）的默认动画。</li>
+</ul>
+
+<p>您也可灵活选择如何为 {@link android.support.v7.widget.RecyclerView} 小组件定义定制布局管理器与动画。</p>
+
+<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
+<p class="img-caption">
+<strong>图 1</strong>.<code>RecyclerView</code> 小组件。
+</p>
+
+<p>如果要使用 {@link android.support.v7.widget.RecyclerView} 小组件，您必须指定一个适配器和一个布局管理器。如果要创建一个适配器，请扩展 {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 类别。实现的详情将取决于数据集的具体信息以及视图的类型。如果要了解更多信息，请参阅下列<a href="#RVExamples">示例</a>。</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>图 2</strong> - 随附 <code>RecyclerView</code> 的列表。
+</p>
+</div>
+
+<p><strong>布局管理器</strong>将确定 {@link android.support.v7.widget.RecyclerView} 内各项目视图的位置并决定何时重新使用用户已不可见的项目视图。如果要重新使用（或<em>重复使用</em>）一个视图，布局管理器可能会要求适配器以数据集中的另一个元素替换视图的内容。以此方式重复使用视图将可避免创建不必要的视图或执行成本高昂的 {@link android.app.Activity#findViewById findViewById()} 查找，从而改善性能。</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} 提供这些内置布局管理器：</p>
+
+<ul>
+<li>{@link android.support.v7.widget.LinearLayoutManager} 以垂直或水平滚动列表方式显示项目。</li>
+<li>{@link android.support.v7.widget.GridLayoutManager} 在网格中显示项目。</li>
+<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} 在分散对齐网格中显示项目。</li>
+</ul>
+
+<p>如果要创建一个定制布局管理器，请扩展 {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 类别。</p>
+
+<h3>动画</h3>
+
+<p>{@link android.support.v7.widget.RecyclerView} 在默认情况下启用增添与删除项目的动画。如果要定制这些动画，请扩展 {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 类别并使用 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} 方法。</p>
+
+<h3 id="RVExamples">示例</h3>
+
+<p>下列代码示例将展示如何将 {@link android.support.v7.widget.RecyclerView} 添加至布局：</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>将 {@link android.support.v7.widget.RecyclerView} 小组件添加至您的布局后，立即获取对象图柄并将其连接至布局管理器，同时附加一个适配器以便显示数据：</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>适配器可让您存取数据集中的项目，为项目创建视图，并且在原始项目不再可见时以新数据项目替换视图的某些内容。下列代码示例将展示一个简单的实现，目标为一个包含使用 {@link android.widget.TextView} 小组件显示的字符串阵列的数据集：</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>图 3</strong>.卡片示例。
+</p>
+</div>
+
+<h2 id="CardView">创建卡片</h2>
+
+<p>{@link android.support.v7.widget.CardView} 扩展 {@link android.widget.FrameLayout} 类别并让您能够显示卡片内的信息，这些信息在整个平台中拥有一致的呈现方式。{@link android.support.v7.widget.CardView} 小组件可拥有阴影和圆角。</p>
+
+<p>如果要使用阴影创建卡片，请使用 <code>card_view:cardElevation</code> 属性。{@link android.support.v7.widget.CardView} 在 Android 5.0（API 级别 21）及更高版本中使用真实高度与动态阴影，而在早期的 Android 版本中则返回编程阴影实现。如果要了解更多信息，请参阅<a href="{@docRoot}training/material/compatibility.html">维护兼容性</a>。</p>
+
+<p>使用这些属性定制 {@link android.support.v7.widget.CardView} 小组件的外观：</p>
+
+<ul>
+ <li>如果要在您的布局中设置圆角半径，请使用 <code>card_view:cardCornerRadius</code> 属性。</li>
+ <li>如果要在您的代码中设置圆角半径，请使用 <code>CardView.setRadius</code> 方法。</li>
+ <li>如果要设置卡片的背景颜色，请使用 <code>card_view:cardBackgroundColor</code> 属性。</li>
+</ul>
+
+<p>下列代码示例将展示如何将 {@link android.support.v7.widget.CardView} 小组件包括在您的布局中：</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>如果要了解更多信息，请参阅 {@link android.support.v7.widget.CardView} 的 API 参考文档。</p>
+
+
+<h2 id="Dependencies">添加依赖关系</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} 与 {@link android.support.v7.widget.CardView} 小组件为 <a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a>的一部分。如果要在您的项目中使用这些小组件，请将这些 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 依赖关系</a>添加至您的应用模块：</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/training/material/shadows-clipping.jd b/docs/html-intl/intl/zh-cn/training/material/shadows-clipping.jd
new file mode 100644
index 0000000..da58be6
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/training/material/shadows-clipping.jd
@@ -0,0 +1,99 @@
+page.title=定义阴影与裁剪视图
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本课程将向您展示如何</h2>
+<ol>
+ <li><a href="#Elevation">指定视图高度</a></li>
+ <li><a href="#Shadows">定制视图阴影与轮廓</a></li>
+ <li><a href="#Clip">裁剪视图</a></li>
+</ol>
+<h2>您也应该阅读</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
+</ul>
+</div>
+</div>
+
+<p>材料设计为 UI 元素引入高度高度将帮助用户了解每个元素的相对重要性，让他们能够集中于手边的工作。</p>
+
+<p>由 Z 属性所表示的视图高度将决定其阴影的视觉外观：拥有较高 Z 值的视图将投射更大且更柔和的阴影。拥有较高 Z 值的视图将挡住拥有较低 Z 值的视图；不过视图的 Z 值并不影响视图的大小。</p>
+
+<p>阴影是由提升的视图的父项所绘制，因此将受到标准视图裁剪的影响，而在默认情况下裁剪将由父项执行。</p>
+
+<p>此外，在创建其中的小组件在执行某些操作行为时会暂时升至视图平面之上的动画时，高度也很实用。</p>
+
+<p>要了解更多有关材料设计高度的信息，请参阅 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 空间内的对象</a>。</p>
+
+
+<h2 id="Elevation">指定视图高度</h2>
+
+<p>视图的 Z 值包含两个组件： <ul>
+<li>高度：静态组件。</li>
+<li>转换：用于动画的动态组件。</li>
+</ul>
+
+<p><code>Z = elevation + translationZ</code></p>
+
+<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
+<p class="img-caption"><strong>图 1</strong> - 不同视图高度的阴影。</p>
+
+<p>如果要在布局定义中设置视图的高度，请使用 <code>android:elevation</code> 属性。如果要在操作行为的代码中设置视图高度，请使用 {@link android.view.View#setElevation View.setElevation()} 方法。</p>
+
+<p>如果要设置视图转换，请使用 {@link android.view.View#setTranslationZ View.setTranslationZ()} 方法。</p>
+
+<p>全新的 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 与 {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 方法让您能够轻松地为视图高度添加动画。如果要了解更多信息，请参阅 {@link android.view.ViewPropertyAnimator} 的 API 参考文档以及<a href="{@docRoot}guide/topics/graphics/prop-animation.html">属性动画</a>开发指南。</p>
+
+<p>您也可使用 {@link android.animation.StateListAnimator} 以说明性方式指定这些动画。当状态改变会触发动画（例如当用户按下按钮）时，此方法特别有用。如果要了解更多信息，请参阅<a href="{@docRoot}training/material/animations.html#ViewState">为视图状态改变添加动画</a>。</p>
+
+<p>Z 值按 dp（密度独立像素）测量。</p>
+
+
+<h2 id="Shadows">定制视图阴影与轮廓</h2>
+
+<p>视图的背景图片的边界将决定其阴影的默认形状。<strong>轮廓</strong>代表图形对象的外形并定义触摸反馈的波纹区域。</p>
+
+<p>下面举一个以背景图片定义的视图示例：</p>
+
+<pre>
+<TextView
+ android:id="@+id/myview"
+ ...
+ android:elevation="2dp"
+ android:background="@drawable/myrect" />
+</pre>
+
+<p>背景图片被定义为一个拥有圆角的矩形：</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>视图将投射一个带有圆角的阴影，因为背景图片将定义视图的轮廓。如果提供一个定制轮廓，则此轮廓将替代视图阴影的默认形状。</p>
+
+<p>如果要为您的代码中的视图定义定制轮廓：<p>
+
+<ol>
+<li>扩展 {@link android.view.ViewOutlineProvider} 类别。</li>
+<li>替代 {@link android.view.ViewOutlineProvider#getOutline getOutline()} 方法。</li>
+<li>利用 {@link android.view.View#setOutlineProvider View.setOutlineProvider()} 方法向您的视图指定新的轮廓提供程序。</li>
+</ol>
+
+<p>您可使用 {@link android.graphics.Outline} 类别中的方法创建带有圆角的椭圆形和矩形轮廓。视图的默认轮廓提供程序将从视图背景取得轮廓。如果要防止视图投射阴影，请将其轮廓提供程序设置为 <code>null</code>。</p>
+
+
+<h2 id="Clip">裁剪视图</h2>
+
+<p>裁剪视图让您能够轻松改变视图形状。您可以裁剪视图，以便与其他设计元素保持一致，也可以根据用户输入改变视图形状。您可使用 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法或 <code>android:clipToOutline</code> 属性将视图裁剪至其轮廓区域。由 {@link android.graphics.Outline#canClip Outline.canClip()} 方法所决定，仅有矩形、圆形和圆角矩形轮廓支持裁剪。</p>
+
+<p>如果要将视图裁剪至图片的形状，请将图片设置为视图背景（如上所示）并调用 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法。</p>
+
+<p>裁剪视图是一个成本高昂的操作，因此不可为您用于裁剪视图的形状添加动画。如果要实现此效果，请使用<a href="{@docRoot}training/material/animations.html#Reveal">揭露效果</a>动画。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-cn/training/material/theme.jd b/docs/html-intl/intl/zh-cn/training/material/theme.jd
new file mode 100644
index 0000000..e9b5d06
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/training/material/theme.jd
@@ -0,0 +1,107 @@
+page.title=使用材料主题
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本课程将向您展示如何</h2>
+<ol>
+ <li><a href="#ColorPalette">定制配色工具</a></li>
+ <li><a href="#StatusBar">定制状态栏</a></li>
+ <li><a href="#Inheritance">主题个别视图</a></li>
+</ol>
+<h2>您也应该阅读</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>新材料主题将提供：</p>
+
+<ul>
+ <li>让您设置主题配色工具的系统小组件</li>
+ <li>适用于系统小组件的触摸反馈动画</li>
+ <li>操作行为转换动画</li>
+</ul>
+
+<p>您可使用您所控制的配色工具，按照您的品牌形象定制材料主题的外观。您可使用主题属性为操作栏和状态栏着色，如<a href="#fig3">图 3</a> 所示。</p>
+
+<p>系统小组件拥有全新的设计与触摸反馈动画。您可为您的应用定制配色工具、触摸反馈动画以及操作行为转换。</p>
+
+<p>材料主题的定义为：</p>
+
+<ul>
+ <li><code>@android:style/Theme.Material</code>（深色版本）</li>
+ <li><code>@android:style/Theme.Material.Light</code>（浅色版本）</li>
+ <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+</ul>
+
+<p>如果要了解您可使用的材料风格，请参阅 {@link android.R.style R.style} 的 API 参考文档。</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>图 1</strong>.深色材料主题</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>图 2</strong>.浅色材料主题</p>
+ </div>
+</div>
+<br style="clear:left">
+</div>
+
+<p class="note">
+<strong>请注意：</strong>材料主题仅在 Android 5.0（API 级别 21）及更高版本中提供。<a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a>为一些小组件提供附带材料设计风格的主题，同时为配色工具定制提供支持。如果要了解更多信息，请参阅<a href="{@docRoot}training/material/compatibility.html">维护兼容性</a>。
+</p>
+
+
+<h2 id="ColorPalette">定制配色工具</h2>
+
+<p style="margin-bottom:30px">如果要定制主题的基色以符合您的品牌，您可在进行材料主题继承时使用主题属性定义您的定制颜色：</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>图 3.</strong>定制材料主题。</p>
+</div>
+
+
+<h2 id="StatusBar">定制状态栏</h2>
+
+<p>材料主题可让您轻松定制状态栏，因此您可以指定一个符合自己品牌特色且对比度足够高、能够显示白色状态图标的颜色。如果要为状态栏设置定制颜色，您可在扩展材料主题时使用 <code>android:statusBarColor</code> 属性。默认情况下，<code>android:statusBarColor</code> 将继承 <code>android:colorPrimaryDark</code> 的值。</p>
+
+<p>您也可自行将状态栏移到后侧。例如，您想在一个照片上以透明的方式显示状态栏，同时利用细微的深色渐变以确保白色状态图标仍保持可见。如果要执行此操作，请将 <code>android:statusBarColor</code> 属性设置为 <code>@android:color/transparent</code> 并根据需要调整窗口标志。您也可以使用 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 方法进行动画或淡出设置。</p>
+
+<p class="note">
+<strong>请注意：</strong>在多数情况下，状态栏与主工具栏之间应该有一个清楚的分割，您在这些栏的后侧显示全屏的丰富图像或媒体内容以及使用颜色渐变以确保图表仍保持可见的情况除外。
+</p>
+
+<p>定制导航栏和状态栏时，您可选择将导航栏和状态栏变透明或仅修改状态栏。在所有其他情况中，导航栏均应保持黑色。</p>
+
+
+<h2 id="Inheritance">主题个别视图</h3>
+
+<p>XML 布局定义内的元素可指定 <code>android:theme</code> 属性，而该属性将引用一个主题资源。此属性可修改元素以及任何子元素的主题，有助于改变界面中特定部分的主题配色工具。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/design/material/index.jd b/docs/html-intl/intl/zh-tw/design/material/index.jd
new file mode 100644
index 0000000..5613ee8
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/design/material/index.jd
@@ -0,0 +1,43 @@
+page.title=Design
+page.viewport_width=970
+section.landing=true
+meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
+header.hide=1
+footer.hide=1
+
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 0;
+ top: 42px;
+ width: 266px;
+
+}
+#hero-image {
+ padding-left:68px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ <span itemprop="description">歡迎使用 <strong>Android Design</strong>，您在這裡可以學習如何設計特殊的 Android 應用程式。</span>
+ <br><br>
+ 想要知道 <strong>Android 5.0</strong> 提供什麼功能給設計人員嗎？請參閱 <a href="{@docRoot}design/patterns/new.html">Android 中的新功能</a>。<br><br>
+ <a href="/design/get-started/creative-vision.html" class="landing-page-link">創意願景</a>
+ </div>
+ <a id="hero-image" href="/design/get-started/creative-vision.html"> <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">材料設計</h2>
+<p>Android 5.0 從真實的紙墨獲得靈感，引入一種設計隱喻，能提供栩栩如生的觸感。
+</p>
+<p><a class="white" href="{@docRoot}design/material/index.html">深入了解</a></p>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/training/material/animations.jd b/docs/html-intl/intl/zh-tw/training/material/animations.jd
new file mode 100644
index 0000000..02033f5
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/training/material/animations.jd
@@ -0,0 +1,456 @@
+page.title=定義自訂動畫
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本課程示範</h2>
+<ol>
+ <li><a href="#Touch">自訂輕觸回饋</a></li>
+ <li><a href="#Reveal">使用顯示效果</a></li>
+ <li><a href="#Transitions">自訂操作行為轉換</a></li>
+ <li><a href="#ViewState">動畫顯示檢視狀態變更</a></li>
+ <li><a href="#AnimVector">動畫顯示矢量可繪</a></li>
+</ol>
+<h2>您也應該閱讀</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料設計規格</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>材料設計中的動畫讓使用者在進行操作動作之後獲得回饋，並且在使用者與您的應用程式互動時提供視覺上的連續性。材料設計風格針對按鈕和操作行為轉換提供某些預設的動畫，而 Android 5.0 (API 級別 21) 或更新版本則可讓您自訂這些動畫，以及建立新的動畫：</p>
+
+<ul>
+<li>輕觸回饋</li>
+<li>循環顯示</li>
+<li>操作行為轉換</li>
+<li>曲線動作</li>
+<li>檢視狀態變更</li>
+</ul>
+
+
+<h2 id="Touch">自訂輕觸回饋</h2>
+
+<p>當使用者與 UI 元素互動時，材料設計中的輕觸回饋在接觸點提供即時的視覺化確認。按鈕的預設輕觸回饋動畫使用新的 {@link android.graphics.drawable.RippleDrawable} 類別，透過漣漪效果在不同的狀態之間進行轉換。</p>
+
+<p>在大多數情況下，您應該在檢視 XML 中將檢視背景指定為下列項目來套用此功能：</p>
+
+<ul>
+<li>對有邊界的漣漪指定為 <code>?android:attr/selectableItemBackground</code></li>
+<li>對延伸出檢視的漣漪指定為 <code>?android:attr/selectableItemBackgroundBorderless</code></li>
+</ul>
+
+<p class="note"><strong>注意：</strong><code>selectableItemBackgroundBorderless</code> 是 API 級別 21 引入的新屬性。</p>
+
+
+<p>或者，您也可以使用 <code>ripple</code> 元素將 {@link android.graphics.drawable.RippleDrawable} 定義為 XML 資源。</p>
+
+<p>您可以對 {@link android.graphics.drawable.RippleDrawable} 物件指定顏色。如果要變更預設的輕觸回饋顏色，請使用風格主題的 <code>android:colorControlHighlight</code> 屬性。</p>
+
+<p>如需詳細資訊，請參閱 {@link android.graphics.drawable.RippleDrawable} 類別的 API 參考資料。</p>
+
+
+<h2 id="Reveal">使用顯示效果</h2>
+
+<p>當您顯示或隱藏一組 UI 元素時，顯示動畫可提供使用者視覺上的連續性。{@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} 方法可讓您以動畫顯示裁剪的圓形，來顯示或隱藏檢視。</p>
+
+<p>使用下列效果顯示之前看不見的檢視：</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 = Math.max(myView.getWidth(), myView.getHeight());
+
+// create the animator for this view (the start radius is zero)
+Animator anim =
+ ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
+
+// make the view visible and start the animation
+myView.setVisibility(View.VISIBLE);
+anim.start();
+</pre>
+
+<p>使用下列效果隱藏之前看見的檢視：</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">自訂操作行為轉換</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>圖 1</strong> - 使用分享元素的轉換。</p>
+ <em>如果要重播影片，請按一下裝置螢幕</em>
+ </div>
+</div>
+
+<p>材料設計應用程式中的操作行為轉換透過常見元素之間的動作和轉換，在不同的狀態之間提供視覺上的連接效果。您可以針對進入和離開轉換，以及不同操作行為之間分享元素的轉換指定自訂動畫。</p>
+
+<ul>
+<li><strong>進入</strong>轉換決定操作行為中的檢視如何進入場景。例如，在<em>爆炸</em>進入轉換中，檢視會從外面進入場景，然後飛入螢幕的中央。</li>
+
+<li><strong>離開</strong>轉換決定操作行為中的檢視如何離開場景。例如，在<em>爆炸</em>離開轉換中，檢視會從中央離開場景。</li>
+
+<li><strong>分享元素</strong>轉換決定在兩個操作行為轉換之間分享的檢視如何在這些操作行為之間轉換。例如，如果兩個操作行為在不同的位置和大小有相同的影像，<em>changeImageTransform</em> 分享元素轉換會在這些操作行為之間流暢地解譯影像以及調整影像的大小。</li>
+</ul>
+
+<p>Android 5.0 (API 級別 21) 支援下列進入和離開轉換：</p>
+
+<ul>
+<li>爆炸<em></em> - 檢視從場景的中央移入和移出。</li>
+<li>滑動<em></em> - 檢視從場景的其中一邊移入和移出。</li>
+<li>淡化<em></em> - 改變檢視的透明度，將檢視加入場景，或從場景移除檢視。</li>
+</ul>
+
+<p>延伸 {@link android.transition.Visibility} 類別的轉換都可做為進入或離開轉換。如需詳細資訊，請參閱 {@link android.transition.Transition} 類別的 API 參考資料。</p>
+
+<p>Android 5.0 (API 級別 21) 也支援下列分享元素轉換：</p>
+
+<ul>
+<li>changeBounds<em></em> - 動畫顯示目標檢視版面邊界的變更。</li>
+<li>changeClipBounds<em></em> - 動畫顯示目標檢視裁剪邊界的變更。</li>
+<li>changeTransform<em></em> - 動畫顯示目標檢視比例和旋轉方向的變更。</li>
+<li>changeImageTransform<em></em> - 動畫顯示目標影像大小和比例的變更。</li>
+</ul>
+
+<p>當您在應用程式中啟用操作行為轉換時，進入和離開操作行為之間會啟動預設交錯淡化轉換。</p>
+
+<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
+<p class="img-caption">
+ <strong>圖 2</strong> - 使用一個分享元素的場景轉換。
+</p>
+
+<h3>指定自訂轉換</h3>
+
+<p>首先，當您定義一個從材料設計風格繼承而來的樣式時，請使用 <code>android:windowContentTransitions</code> 屬性啟用視窗內容轉換。您也可以在樣式定義中指定進入、離開和分享元素轉換：</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>此範例中的 <code>change_image_transform</code> 轉換定義如下：</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><code>changeImageTransform</code> 元素符合 {@link android.transition.ChangeImageTransform} 類別。如需詳細資訊，請參閱 {@link android.transition.Transition} 的 API 參考資料。</p>
+
+<p>如果要在程式碼中改為啟用視窗內容轉換，請呼叫 {@link android.view.Window#requestFeature Window.requestFeature()} 方法：</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>如果要在程式碼中指定轉換，請搭配 {@link android.transition.Transition} 物件呼叫下列方法：</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>{@link android.view.Window#setExitTransition setExitTransition()} 和 {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 方法定義呼叫操作行為的離開轉換。{@link android.view.Window#setEnterTransition setEnterTransition()} 和 {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} 方法定義被呼叫操作行為的進入轉換。</p>
+
+<p>如果要取得轉換的完整效果，您必須同時對呼叫與被呼叫操作行為啟用視窗內容轉換。否則，呼叫操作行為只會啟動離開轉換，然後您只會看到視窗轉換 (類似調整大小或淡化)。</p>
+
+<p>如果要立即啟動進入轉換，請對被呼叫的操作行為使用 {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} 方法。這樣您就會有更戲劇性的進入轉換。</p>
+
+<h3>使用轉換啟動操作行為</h3>
+
+<p>如果您啟用轉換並且對操作行為設定離開轉換，當您啟動另一個操作行為時就會啟動轉換，如下所示：</p>
+
+<pre>
+startActivity(intent,
+ ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
+</pre>
+
+<p>如果您已經針對第二個操作行為設定進入轉換，當操作行為啟動時，也會啟動轉換。如果要在啟動另一個操作行為時停用轉換，請提供 <code>null</code> 選項組合。</p>
+
+<h3>使用一個分享元素啟動操作行為</h3>
+
+<p>在兩個擁有分享元素的操作行為之間製作螢幕轉換動畫：</p>
+
+<ol>
+<li>在風格主題中啟用視窗內容轉換。</li>
+<li>在樣式中指定分享元素轉換。</li>
+<li>將您的轉換定義為 XML 資源。</li>
+<li>使用 <code>android:transitionName</code> 屬性，對兩個版面配置中的分享元素指定通用名稱。</li>
+<li>使用 {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()} 方法。</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>對於您在程式碼中所產生的分享動態檢視，請使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法，在兩個操作行為中指定通用元素名稱。</p>
+
+<p>如果要在完成第二個操作行為時倒轉場景轉換動畫，請呼叫 {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} 方法而不是 {@link android.app.Activity#finish Activity.finish()}。</p>
+
+<h3>使用多個分享元素啟動操作行為</h3>
+
+<p>如果要在兩個擁有多個分享元素的操作行為之間製作場景轉換動畫，請使用 <code>android:transitionName</code> 屬性在兩個版面配置中定義分享元素 (或在兩個操作行為中使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法)，然後建立 {@link android.app.ActivityOptions} 物件，如下所示：</p>
+
+<pre>
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
+ Pair.create(view1, "agreedName1"),
+ Pair.create(view2, "agreedName2"));
+</pre>
+
+
+<h2 id="CurvedMotion">使用曲線動作</h2>
+
+<p>材料設計中的動畫依據使用時間插值法和空間移動模式的曲線。在 Android 5.0 (API 級別 21) 或更新版本中，您可以為動畫定義自訂時間曲線和曲線動作模式。</p>
+
+<p>{@link android.view.animation.PathInterpolator} 類別是根據貝茲曲線 (Bézier curve) 或 {@link android.graphics.Path} 物件的一種新插值器。這個插值器在一個 1x1 的方格中指定動作曲線，在 (0,0) 和 (1,1) 有兩個錨定點，以及使用建構函式引數指定的控制點。您也可以將路徑插值器定義為 XML 資源：</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>系統在材料設計規格中提供三種基本曲線的 XML 資源：</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>您可以將 {@link android.view.animation.PathInterpolator} 物件傳遞到 {@link android.animation.Animator#setInterpolator Animator.setInterpolator()} 方法。</p>
+
+<p>{@link android.animation.ObjectAnimator} 類別有新的建構函式，可讓您一次使用兩個以上的屬性沿著路徑以動畫顯示座標。例如，下列動畫器使用 {@link android.graphics.Path} 物件，以動畫顯示檢視的 X 和 Y 屬性：</p>
+
+<pre>
+ObjectAnimator mAnimator;
+mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
+...
+mAnimator.start();
+</pre>
+
+
+<h2 id="ViewState">動畫顯示檢視狀態變更</h2>
+
+<p>{@link android.animation.StateListAnimator} 類別可讓您定義檢視狀態變更時所執行的動畫器。下列範例示範如何將 {@link android.animation.StateListAnimator} 定義為 XML 資源：</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>如果要將自訂的檢視狀態動畫連接到檢視，請依照此範例在 XML 資源檔案中使用 <code>selector</code> 元素定義動畫器，然後使用 <code>android:stateListAnimator</code> 屬性將它指派到您的檢視。如果要在程式碼中為檢視指派狀態清單動畫器，請使用 {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} 方法，然後使用 {@link android.view.View#setStateListAnimator View.setStateListAnimator()} 方法將動畫器指派到您的檢視。</p>
+
+<p>當您的風格主題延伸材料設計風格時，按鈕預設會有 Z 動畫。如果要避免在按鈕中出現這類行為，請將 <code>android:stateListAnimator</code> 屬性設定為 <code>@null</code>。</p>
+
+<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 類別可讓您在相關檢視的狀態變更之間，建立顯示動畫的可繪項目。Android 5.0 中的某些系統小工具預設會使用這些動畫。下列範例示範如何將 {@link android.graphics.drawable.AnimatedStateListDrawable} 定義為 XML 資源：</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">動畫顯示矢量可繪</h2>
+
+<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">矢量可繪</a>可以調整大小，但又不會喪失定義。{@link android.graphics.drawable.AnimatedVectorDrawable} 類別可讓您以動畫顯示矢量可繪的屬性。</p>
+
+<p>您通常會在下列三個 XML 檔案中定義能可動矢量可繪：</p>
+
+<ul>
+<li>在 <code>res/drawable/</code> 中有 <code><vector></code> 元素的矢量可繪</li>
+<li>在 <code>res/drawable/</code> 中有 <code><animated-vector></code> 元素的可動矢量可繪</li>
+<li>在 <code>res/anim/</code> 中有 <code><objectAnimator></code> 元素的一或多個物件動畫器</li>
+</ul>
+
+<p>可動的矢量可繪能以動畫顯示 <code><group></code> 和 <code><path></code> 元素的屬性。<code><group></code> 元素定義一組路徑或子群組，而 <code><path></code> 元素則定義要繪製的路徑。</p>
+
+<p>當您定義要可動的矢量可繪時，請使用 <code>android:name</code> 屬性為群組和路徑指派唯一的名稱，以便從您的動畫器定義參考這些群組和路徑。例如：</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>可動的矢量可繪定義是依照名稱來參考矢量可繪中的群組和路徑：</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>動畫定義代表 {@link android.animation.ObjectAnimator} 或 {@link android.animation.AnimatorSet} 物件。此範例中的第一個動畫器會 360 度旋轉目標群組：</p>
+
+<pre>
+<!-- res/anim/rotation.xml -->
+<objectAnimator
+ android:duration="6000"
+ android:propertyName="rotation"
+ android:valueFrom="0"
+ android:valueTo="360" />
+</pre>
+
+<p>此範例中的第二個動畫器會將矢量可繪的路徑從一種形狀變成另外一種形狀。兩個路徑必須相容才能變形：這表示兩個路徑必須有相同數量的命令，每個命令必須有相同數量的參數。</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>如需詳細資訊，請參閱 {@link android.graphics.drawable.AnimatedVectorDrawable} 的 API 參考資料。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/training/material/compatibility.jd b/docs/html-intl/intl/zh-tw/training/material/compatibility.jd
new file mode 100644
index 0000000..35c135f
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/training/material/compatibility.jd
@@ -0,0 +1,134 @@
+page.title=維持相容性
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本課程示範</h2>
+<ol>
+ <li><a href="#Theme">定義替代樣式</a></li>
+ <li><a href="#Layouts">提供替代版面配置</a></li>
+ <li><a href="#SupportLib">使用支援程式庫</a></li>
+ <li><a href="#CheckVersion">檢查系統版本</a></li>
+</ol>
+<h2>您也應該閱讀</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料設計規格</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>某些材料設計功能 (例如材料設計風格和自訂操作行為轉換) 只能在 Android 5.0 (API 級別 21) 以及更新版本中使用。不過，您還是可以將應用程式設計為在支援材料設計的裝置上執行時才使用這些功能，而且仍然與執行舊版 Android 的裝置相容。</p>
+
+
+<h2 id="Theme">定義替代樣式</h2>
+
+<p>您可以設定應用程式在支援材料設計風格的裝置上執行時才予以使用，在執行舊版 Android 的裝置上執行時則轉換成舊版的風格主題：</p>
+
+<ol>
+<li>在 <code>res/values/styles.xml</code> 中定義繼承自舊版風格主題 (例如 Holo) 的風格主題。</li>
+<li>在 <code>res/values-v21/styles.xml</code> 中定義與材料設計風格相同名稱的風格主題。</li>
+<li>在宣示說明檔案中將此風格主題設定為應用程式的風格主題。</li>
+</ol>
+
+<p class="note"><strong>注意：</strong>如果您的應用程式使用材料設計風格，但卻未以此方式提供替代風格主題，您的應用程式將無法在 Android 5.0 以前的版本上執行。
+</p>
+
+
+<h2 id="Layouts">提供替代版面配置</h2>
+
+<p>如果您根據材料設計指南所設計的版面配置沒有使用 Android 5.0 (API 級別 21) 中導入的任何全新 XML 屬性，則這些版面配置就可以在舊版 Android 上運作。或者，您也可以提供替代的版面配置。您也可以提供替代的版面配置來自訂應用程式在舊版 Android 上要如何顯示。</p>
+
+<p>在 <code>res/layout-v21/</code> 內建立 Android 5.0 (API 級別 21) 的版面配置檔案，並在 <code>res/layout/</code> 內建立舊版 Android 的替代版面配置檔案。例如，<code>res/layout/my_activity.xml</code> 是 <code>res/layout-v21/my_activity.xml</code> 的替代版面配置。</p>
+
+<p>為了避免程式碼重複，請在 <code>res/values/</code> 內定義您的樣式，在 <code>res/values-v21/</code> 中針對新的 API 修改樣式，然後使用樣式繼承，在 <code>res/values/</code> 中定義基礎樣式，然後從 <code>res/values-v21/</code> 中的樣式繼承。</p>
+
+
+<h2 id="SupportLib">使用支援程式庫</h2>
+
+<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a> r21 以及更新版本包含下列材料設計功能：</p>
+
+<ul>
+<li>當您套用其中一個 <code>Theme.AppCompat</code> 風格主題時，某些系統小工具的<a href="{@docRoot}training/material/theme.html">材料設計樣式</a>。</li>
+<li>在 <code>Theme.AppCompat</code> 風格主題中的<a href="{@docRoot}training/material/theme.html#ColorPalette">色板風格主題屬性</a>。</li>
+<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">顯示資料集合</a>的 {@link android.support.v7.widget.RecyclerView} 小工具。</li>
+<li><a href="{@docRoot}training/material/lists-cards.html#CardView">建立卡片</a>的 {@link android.support.v7.widget.CardView} 小工具。</li>
+<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">從影像提取顯著顏色</a>的 {@link android.support.v7.graphics.Palette} 類別。</li>
+</ul>
+
+<h3>系統小工具</h3>
+
+<p><code>Theme.AppCompat</code> 風格主題提供下列小工具的材料設計樣式：</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>色板</h3>
+
+<p>如果要取得材料設計樣式並使用 Android v7 支援程式庫自訂色板，請套用其中一個 <code>Theme.AppCompat</code> 風格主題：</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>清單和卡片</h3>
+
+<p>在舊版 Android 中，透過 Android v7 支援程式庫可以使用 {@link android.support.v7.widget.RecyclerView} 和 {@link android.support.v7.widget.CardView} 小工具，但是有下列限制：</p>
+<ul>
+<li>{@link android.support.v7.widget.CardView} 只能使用額外的填補方式，有計畫地實作陰影。</li>
+<li>{@link android.support.v7.widget.CardView} 不會裁剪與圓形邊角重疊的下方檢視。</li>
+</ul>
+
+
+<h3>相依性</h3>
+
+<p>如果要在 Android 5.0 (API 級別 21) 以前的版本中使用這些功能，請在您的專案中包含 Android v7 支援程式庫做為 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：</p>
+
+<pre>
+dependencies {
+ compile 'com.android.support:appcompat-v7:21.0.+'
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
+
+
+<h2 id="CheckVersion">檢查系統版本</h2>
+
+<p>下列功能只能在 Android 5.0 (API 級別 21) 以及更新版本中使用：</p>
+
+<ul>
+<li>操作行為轉換</li>
+<li>輕觸回饋</li>
+<li>顯示動畫</li>
+<li>路徑型動畫</li>
+<li>矢量可繪</li>
+<li>繪製著色</li>
+</ul>
+
+<p>如果要維持與舊版 Android 的相容性，在您呼叫這些功能的 API 之前，請先在執行期間檢查系統 {@link android.os.Build.VERSION#SDK_INT version}：</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>注意：</strong>如果要指定應用程式支援的 Android 版本，請在您的宣示說明檔案中使用 <code>android:minSdkVersion</code> 和 <code>android:targetSdkVersion</code> 屬性。如果要在 Android 5.0 中使用材料設計功能，請將 <code>android:targetSdkVersion</code> 屬性設定為 <code>21</code>。如需詳細資訊，請參閱 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html"><uses-sdk> API 指南</a>。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/training/material/drawables.jd b/docs/html-intl/intl/zh-tw/training/material/drawables.jd
new file mode 100644
index 0000000..316df07
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/training/material/drawables.jd
@@ -0,0 +1,105 @@
+page.title=使用可繪項目
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本課程示範</h2>
+<ol>
+ <li><a href="#DrawableTint">為可繪項目資源著色</a></li>
+ <li><a href="#ColorExtract">從影像提取顯著顏色</a></li>
+ <li><a href="#VectorDrawables">建立矢量可繪</a></li>
+</ol>
+<h2>您也應該閱讀</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料設計規格</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li>
+</ul>
+</div>
+</div>
+
+<p>下列可繪項目功能可以幫助您在應用程式中運用材料設計：</p>
+
+<ul>
+<li>繪製著色</li>
+<li>顯著顏色提取</li>
+<li>矢量可繪</li>
+</ul>
+
+<p>本課程示範如何在應用程式中使用這些功能。</p>
+
+
+<h2 id="DrawableTint">為可繪項目資源著色</h2>
+
+<p>如果使用 Android 5.0 (API 級別 21) 或更新版本，您可以對點陣圖和定義為 Alpha 遮罩的九宮格影像著色。您可以使用顏色資源或解析為顏色資源的風格主題屬性 (例如 <code>?android:attr/colorPrimary</code>) 為圖片著色。這些資產您通常只會建立一次，然後自動著色以符合您的風格主題。</p>
+
+<p>您可以使用 {@code setTint()} 方法對 {@link android.graphics.drawable.BitmapDrawable} 或 {@link android.graphics.drawable.NinePatchDrawable} 物件套用著色。您也可以使用 <code>android:tint</code> 和 <code>android:tintMode</code> 屬性，設定版面配置中的著色顏色和模式。</p>
+
+
+<h2 id="ColorExtract">從影像提取顯著顏色</h2>
+
+<p>Android 支援程式庫 r21 和更新版本包含 {@link android.support.v7.graphics.Palette} 類別，可讓您從影像提取出顯著的顏色。此類別會提取下列顯著顏色：</p>
+
+<ul>
+<li>鮮明</li>
+<li>鮮明 (深色)</li>
+<li>鮮明 (淺色)</li>
+<li>柔和</li>
+<li>柔和 (深色)</li>
+<li>柔和 (淺色)</li>
+</ul>
+
+<p>如果要提取這些顏色，請將 {@link android.graphics.Bitmap} 物件傳遞到載入影像之背景執行緒中的 {@link android.support.v7.graphics.Palette#generate Palette.generate()} 靜態方法。如果您無法使用該執行緒，請改為呼叫 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 方法並提供接聽器。</p>
+
+<p>您可以使用 <code>Palette</code> 類別中的 getter 方法 (例如 <code>Palette.getVibrantColor</code>) 從影像擷取顯著顏色。</p>
+
+<p>如果要在專案中使用 {@link android.support.v7.graphics.Palette} 類別，請在應用程式的模組中加入下列 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:21.0.+'
+}
+</pre>
+
+<p>如需詳細資訊，請參閱 {@link android.support.v7.graphics.Palette} 類別的 API 參考資料。</p>
+
+
+<h2 id="VectorDrawables">建立矢量可繪</h2>
+
+<!-- video box -->
+<a class="notice-developers-video"
+href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
+<div>
+ <h3>影片</h3>
+ <p>Android Vector Graphics</p>
+</div>
+</a>
+
+<p>在 Android 5.0 (API 級別 21) 或更新版本中，您可以定義矢量可繪，這種圖形可以調整大小但不會遺失定義。一個矢量影像只需要一個資產檔案，但是點陣圖影像的每一種螢幕密度都需要一個資產檔案。如果要建立矢量影像，您必須在 <code><vector></code> XML 元素內定義圖形的詳細資料。</p>
+
+<p>下列範例定義一個具有心形圖案的矢量影像：</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>在 Android 中，矢量影像是以 {@link android.graphics.drawable.VectorDrawable} 物件代表。如需有關 <code>pathData</code> 語法的詳細資訊，請參閱 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 路徑參考資料</a>。如需有關繪製矢量可繪的屬性，請參閱<a href="{@docRoot}training/material/animations.html#AnimVector">動畫顯示矢量可繪</a>。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/training/material/get-started.jd b/docs/html-intl/intl/zh-tw/training/material/get-started.jd
new file mode 100644
index 0000000..a7449b6
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/training/material/get-started.jd
@@ -0,0 +1,147 @@
+page.title=開始使用
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本課程示範</h2>
+<ol>
+ <li><a href="#ApplyTheme">套用材料設計風格</a></li>
+ <li><a href="#Layouts">設計版面配置</a></li>
+ <li><a href="#Depth">指定在檢視中的高度</a></li>
+ <li><a href="#ListsCards">建立清單和卡片</a></li>
+ <li><a href="#Animations">自訂動畫</a></li>
+</ol>
+<h2>您也應該閱讀</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料設計規格</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>如果要使用材料設計建立應用程式：</p>
+
+<ol>
+ <li style="margin-bottom:10px">
+ 請閱讀<a href="http://www.google.com/design/spec">材料設計規格</a>。</li>
+ <li style="margin-bottom:10px">
+ 對應用程式套用材料設計<strong>風格</strong>。</li>
+ <li style="margin-bottom:10px">
+ 依照材料設計指南建立<strong>版面配置</strong>。</li>
+ <li style="margin-bottom:10px">
+ 指定檢視的<strong>高度</strong>來投射出陰影。</li>
+ <li style="margin-bottom:10px">
+ 使用系統<strong>小工具</strong>製作清單和卡片。</li>
+ <li style="margin-bottom:10px">
+ 自訂應用程式中的<strong>動畫</strong>。</li>
+</ol>
+
+<h3>維持向下相容性</h3>
+
+<p>您可以在應用程式中加入多種材料設計功能，同時維持與 Android 5.0 之前版本的相容性。如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。</p>
+
+<h3>更新應用程式以納入材料設計功能</h3>
+
+<p>如果要更新現有應用程式以納入材料設計功能，請依照下列材料設計指南更新版面配置。然後再加入深度、輕觸回饋和動畫。</p>
+
+<h3>使用材料設計建立新應用程式</h3>
+
+<p>如果您要使用材料設計功能建立新應用程式，<a href="http://www.google.com/design/spec">材料設計指南</a>可以提供您一致性的設計架構。請依照下列指南，使用 Android 架構中的新功能來設計和開發應用程式。</p>
+
+
+<h2 id="ApplyTheme">套用材料設計風格</h2>
+
+<p>如果要在應用程式中套用材料設計風格，請指定一個繼承自 <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>材料設計風格提供更新過的系統小工具，可以讓您設定小工具的色板和預設動畫做為輕觸回饋與操作行為轉換。如需詳細資訊，請參閱<a href="{@docRoot}training/material/theme.html">使用材料設計風格</a>。</p>
+
+
+<h2 id="Layouts">設計版面配置</h2>
+
+<p>除了套用和自訂材料設計風格之外，您的版面配置也必須遵守<a href="http://www.google.com/design/spec">材料設計指南</a>。當您設計版面配置時，請注意下列事項：</p>
+
+<ul>
+<li>基準線網格</li>
+<li>邊線</li>
+<li>間距</li>
+<li>輕觸目標大小</li>
+<li>版面配置結構</li>
+</ul>
+
+
+<h2 id="Depth">指定在檢視中的高度</h2>
+
+<p>檢視可以投射出陰影，因此檢視的高度值會決定陰影的大小及其繪製順序。如果要設定檢視的高度，請在版面配置中使用 <code>android:elevation</code> 屬性：</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>您可以使用新的 <code>translationZ</code> 屬性建立動畫，來反映檢視高度的短暫變化。高度變化可以用來<a href="{@docRoot}training/material/animations.html#ViewState">回應輕觸手勢</a>。</p>
+
+<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a>。</p>
+
+
+<h2 id="ListsCards">建立清單和卡片</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} 是一個更容易插入的 {@link android.widget.ListView}，能支援不同的版面配置類型，並且提供更好的效能。{@link android.support.v7.widget.CardView} 可讓您在不同的應用程式之間，以一致的外觀顯示卡片內部的資訊。下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView}：</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>如需詳細資訊，請參閱<a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a>。</p>
+
+
+<h2 id="Animations">自訂動畫</h2>
+
+<p>Android 5.0 (API 級別 21) 包含許多新的 API 可在應用程式中建立自訂動畫。例如，您可以啟用操作行為轉換，然後在操作行為內部定義離開轉換：</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>當您從這個操作行為開始另一個操作行為時，就會啟動離開轉換。</p>
+
+<p>如需深入了解新的動畫 API，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/training/material/index.jd b/docs/html-intl/intl/zh-tw/training/material/index.jd
new file mode 100644
index 0000000..ff17ee7
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/training/material/index.jd
@@ -0,0 +1,55 @@
+page.title=使用材料設計建立應用程式
+page.type=design
+page.image=images/material.png
+page.metaDescription=了解如何對應用程式套用材料設計。
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>相依性和先決條件</h2>
+ <ul>
+ <li>Android 5.0 (API 級別 21)</li>
+ <li>Android Studio 0.8</li>
+ </ul>
+</div>
+</div>
+
+<p>材料設計是一份廣泛綜合性的指南，引導您跨平台、跨裝置進行視覺、動態和互動的設計。如果要在 Android 應用程式中使用材料設計，請依照<a href="http://www.google.com/design/spec/material-design/introduction.html">材料設計規格</a>中的指示，使用 Android 5.0 (API 級別 21) 中的新元件和新功能。</p>
+
+<p>本課程示範如何使用下列元素建立材料設計應用程式：</p>
+
+<ul>
+<li>材料設計風格</li>
+<li>卡片和清單的小工具</li>
+<li>自訂陰影和裁剪檢視</li>
+<li>矢量可繪</li>
+<li>自訂動畫</li>
+</ul>
+
+<p>本課程也示範當您在應用程式中使用材料設計功能時，如何與 Android 5.0 (API 級別 21) 之前的版本維持相容性。</p>
+
+<h2>課程</h2>
+
+<dl>
+ <dt><a href="{@docRoot}training/material/get-started.html">開始使用</a></dt>
+ <dd>了解如何更新應用程式以納入材料設計功能。</dd>
+
+ <dt><a href="{@docRoot}training/material/theme.html">使用材料設計風格</a></dt>
+ <dd>了解如何對應用程式套用材料設計樣式。</dd>
+
+ <dt><a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a></dt>
+ <dd>了解如何使用系統小工具，建立外觀和操作方式一致的清單和卡片。</dd>
+
+ <dt><a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a></dt>
+ <dd>了解如何對檢視設定高度建立自訂陰影，以及如何裁剪檢視。</dd>
+
+ <dt><a href="{@docRoot}training/material/drawables.html">使用可繪項目</a></dt>
+ <dd>了解如何建立矢量可繪項目，以及如何對可繪資源著色。</dd>
+
+ <dt><a href="{@docRoot}training/material/animations.html">定義自訂動畫</a></dt>
+ <dd>了解如何使用分享元素對檢視建立自訂動畫和操作行為轉換。</dd>
+
+ <dt><a href="{@docRoot}training/material/compatibility.html">維持相容性</a></dt>
+ <dd>了解如何與 Android 5.0 之前的平台版本維持相容性。</dd>
+</dl>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/training/material/lists-cards.jd b/docs/html-intl/intl/zh-tw/training/material/lists-cards.jd
new file mode 100644
index 0000000..f5dca5f
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/training/material/lists-cards.jd
@@ -0,0 +1,223 @@
+page.title=建立清單和卡片
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本課程示範</h2>
+<ol>
+ <li><a href="#RecyclerView">建立清單</a></li>
+ <li><a href="#CardView">建立卡片</a></li>
+ <li><a href="#Dependencies">新增相依性</a></li>
+</ol>
+<h2>您也應該閱讀</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料設計規格</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>如果要在應用程式中使用材料設計樣式建立複雜的清單和卡片，可以使用 {@link android.support.v7.widget.RecyclerView} 和 {@link android.support.v7.widget.CardView} 小工具。</p>
+
+
+<h2 id="RecyclerView">建立清單</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} 小工具是比較進階和彈性的 {@link android.widget.ListView} 版本。這個小工具是一個用來顯示大型資料集的容器，只要維護少數幾個檢視，就可以非常有效率地捲動資料集。如果您的資料集元素在執行期間會根據使用者操作動作或網路事件而變更，就可以使用 {@link android.support.v7.widget.RecyclerView} 小工具。</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} 類別會提供下列項目，簡化大型資料集的顯示和處理方式：</p>
+
+<ul>
+ <li>版面配置管理員，用來將項目定位</li>
+ <li>常見項目操作 (例如移除或新增項目) 的預設動畫</li>
+</ul>
+
+<p>您也可以針對 {@link android.support.v7.widget.RecyclerView} 小工具定義自訂的版面配置管理員。</p>
+
+<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
+<p class="img-caption">
+<strong>圖 1.</strong><code>RecyclerView</code> 小工具。
+</p>
+
+<p>如果要使用 {@link android.support.v7.widget.RecyclerView} 小工具，您就必須指定配接器和版面配置管理員。如果要建立配接器，請延伸 {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 類別。實作的詳細情形則根據您的資料集和檢視類型而定。如需詳細資訊，請參閱下面的<a href="#RVExamples">範例</a>。</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>圖 2</strong> - 使用 <code>RecyclerView</code> 的清單。
+</p>
+</div>
+
+<p><strong>版面配置管理員</strong>會將 {@link android.support.v7.widget.RecyclerView} 內的項目檢視定位，然後判斷何時要重複使用使用者不會再看到的項目檢視。如果要重複使用 (或者「回收」<em></em>) 某個檢視，版面配置管理員會要求配接器使用資料集中不同的元素取代檢視的內容。使用此方式回收檢視可以增進效能，避免建立不必要的檢視或執行耗費資源的 {@link android.app.Activity#findViewById findViewById()} 查詢。</p>
+
+<p>{@link android.support.v7.widget.RecyclerView} 提供下列內建的版面配置管理員：</p>
+
+<ul>
+<li>{@link android.support.v7.widget.LinearLayoutManager} 會在垂直或水平捲動清單中顯示項目。</li>
+<li>{@link android.support.v7.widget.GridLayoutManager} 會在網格中顯示項目。</li>
+<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} 會在交錯網格中顯示項目。</li>
+</ul>
+
+<p>如果要建立自訂版面配置管理員，請延伸 {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 類別。</p>
+
+<h3>動畫</h3>
+
+<p>在 {@link android.support.v7.widget.RecyclerView} 中，預設已啟用新增和移除項目的動畫。如果要自訂這些動畫，請延伸 {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 類別並使用 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} 方法。</p>
+
+<h3 id="RVExamples">範例</h3>
+
+<p>下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.RecyclerView}：</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>在版面配置中加入 {@link android.support.v7.widget.RecyclerView} 小工具之後，取得該物件的控制代碼、將控制代碼連線到版面配置管理員，然後連接配接器以便顯示資料：</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>配接器可以存取資料集中的項目、建立項目的檢視，並在原來的項目無法再顯示時，使用新的資料項目取代某些檢視的內容。下列程式碼範例簡單實作一個由使用 {@link android.widget.TextView} 小工具顯示的字串陣列所組成的資料集：</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>圖 3.</strong>卡片範例。
+</p>
+</div>
+
+<h2 id="CardView">建立卡片</h2>
+
+<p>{@link android.support.v7.widget.CardView} 會延伸 {@link android.widget.FrameLayout} 類別，可讓您跨平台以一致的外觀顯示卡片內部的資訊。{@link android.support.v7.widget.CardView} 小工具可以有陰影和圓形邊角。</p>
+
+<p>如果要建立有陰影的卡片，請使用 <code>card_view:cardElevation</code> 屬性。在 Android 5.0 (API 級別 21) 以及更新版本上，{@link android.support.v7.widget.CardView} 使用實際高度和動態陰影，但是在較舊的版本上則只能有計畫地實作陰影。如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。</p>
+
+<p>使用下列屬性可自訂 {@link android.support.v7.widget.CardView} 小工具的外觀：</p>
+
+<ul>
+ <li>如果要在版面配置中設定圓角的半徑，請使用 <code>card_view:cardCornerRadius</code> 屬性。</li>
+ <li>如果要在程式碼中設定圓角的半徑，請使用 <code>CardView.setRadius</code> 方法。</li>
+ <li>如果要設定卡片的背景顏色，請使用 <code>card_view:cardBackgroundColor</code> 屬性。</li>
+</ul>
+
+<p>下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView} 小工具：</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>如需詳細資訊，請參閱 {@link android.support.v7.widget.CardView} 的 API 參考資料。</p>
+
+
+<h2 id="Dependencies">新增相依性</h2>
+
+<p>{@link android.support.v7.widget.RecyclerView} 和 {@link android.support.v7.widget.CardView} 小工具都屬於 <a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a>。如果要在專案中使用這些小工具，請在應用程式的模組中加入下列 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：</p>
+
+<pre>
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:21.0.+'
+ compile 'com.android.support:recyclerview-v7:21.0.+'
+}
+</pre>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/training/material/shadows-clipping.jd b/docs/html-intl/intl/zh-tw/training/material/shadows-clipping.jd
new file mode 100644
index 0000000..54a8ece
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/training/material/shadows-clipping.jd
@@ -0,0 +1,99 @@
+page.title=定義陰影和裁剪檢視
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本課程示範</h2>
+<ol>
+ <li><a href="#Elevation">指定檢視的高度</a></li>
+ <li><a href="#Shadows">自訂檢視陰影和外框</a></li>
+ <li><a href="#Clip">裁剪檢視</a></li>
+</ol>
+<h2>您也應該閱讀</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料設計規格</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li>
+</ul>
+</div>
+</div>
+
+<p>材料設計為 UI 元素引入高度的概念。高度可以幫助使用者了解每個元素的相對重要性，然後讓使用者把焦點放在手邊的工作上。</p>
+
+<p>檢視的高度以 Z 屬性表示，判斷其陰影的視覺外觀：Z 值越高的檢視投射範圍越大，陰影就越柔和。Z 值較高的檢視會遮住 Z 值較低的檢視。不過，檢視的 Z 值不會影響檢視的大小。</p>
+
+<p>陰影是由較高的上層檢視繪製，因此也和標準檢視裁剪一樣，預設由上層檢視裁剪陰影。</p>
+
+<p>當小工具在執行某些操作動作而暫時升高到檢視平面的上方時，高度對於建立動畫也非常有用。</p>
+
+<p>如需有關材料設計高度的詳細資訊，請參閱 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 空間中的物件</a>。</p>
+
+
+<h2 id="Elevation">指派高度到您的檢視</h2>
+
+<p>檢視的 Z 值有兩個部分： <ul>
+<li>高度：靜態部分。</li>
+<li>解譯：用在動畫的動態部分。</li>
+</ul>
+
+<p><code>Z = elevation + translationZ</code></p>
+
+<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
+<p class="img-caption"><strong>圖 1</strong> - 不同檢視高度的陰影。</p>
+
+<p>如果要在版面配置定義中設定檢視的高度，請使用 <code>android:elevation</code> 屬性。如果要在操作行為的程式碼中設定檢視的高度，請使用 {@link android.view.View#setElevation View.setElevation()} 方法。</p>
+
+<p>如果要設定檢視的解譯，請使用 {@link android.view.View#setTranslationZ View.setTranslationZ()} 方法。</p>
+
+<p>新的 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 和 {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 方法可以很輕易地賦予檢視高度栩栩如生的質感。如需詳細資訊，請參閱 {@link android.view.ViewPropertyAnimator} 的 API 參考資料和<a href="{@docRoot}guide/topics/graphics/prop-animation.html">屬性動畫</a>開發人員指南。</p>
+
+<p>您也可以使用 {@link android.animation.StateListAnimator} 以宣告的方式指定這些動畫。當狀態變更觸發動畫時 (例如當使用者按下了按鈕)，這會特別有用。如需詳細資訊，請參閱<a href="{@docRoot}training/material/animations.html#ViewState">動畫顯示檢視狀態變更</a>。</p>
+
+<p>Z 值的測量單位為 dp (密度獨立像素)。</p>
+
+
+<h2 id="Shadows">自訂檢視陰影和外框</h2>
+
+<p>檢視背景可繪項目的邊界決定檢視陰影的預設形狀。<strong>外框</strong>代表圖形物件的外部形狀，而且會定義輕觸回饋的漣漪區域。</p>
+
+<p>我們來看看這個使用背景可繪項目定義的檢視：</p>
+
+<pre>
+<TextView
+ android:id="@+id/myview"
+ ...
+ android:elevation="2dp"
+ android:background="@drawable/myrect" />
+</pre>
+
+<p>背景可繪項目定義為有圓形邊角的長方形：</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>因為背景可繪項目定義了檢視的外框，所以檢視投射出有圓形邊角的陰影。如果提供自訂的外框，則會覆寫檢視陰影的預設形狀。</p>
+
+<p>在程式碼中定義檢視的自訂外框：<p>
+
+<ol>
+<li>延伸 {@link android.view.ViewOutlineProvider} 類別。</li>
+<li>覆寫 {@link android.view.ViewOutlineProvider#getOutline getOutline()} 方法。</li>
+<li>使用 {@link android.view.View#setOutlineProvider View.setOutlineProvider()} 方法對檢視指定新的外框提供者。</li>
+</ol>
+
+<p>您可以使用 {@link android.graphics.Outline} 類別中的方法，建立橢圓形外框和有圓形邊角的長方形外框。檢視的預設外框提供者會從檢視的背景取得外框。如果要避免檢視投射出陰影，請將檢視的外框提供者設定為 <code>null</code>。</p>
+
+
+<h2 id="Clip">裁剪檢視</h2>
+
+<p>裁剪檢視可以讓您輕鬆地變更檢視的形狀。您可以裁剪檢視，讓檢視與其他設計元素有一致的外觀，或者變更檢視的形狀來回應使用者的輸入。您可以使用 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法或 <code>android:clipToOutline</code> 屬性，將檢視裁剪為其外框區域。依照 {@link android.graphics.Outline#canClip Outline.canClip()} 方法的定義，只有長方形、圓形和圓角長方形的外框才支援裁剪。</p>
+
+<p>如果要將檢視裁剪為可繪項目的形狀，請將可繪項目設定為檢視的背景 (如上所示)，然後呼叫 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法。</p>
+
+<p>裁剪檢視是一種耗費資源的操作，所以請不要將您用來裁剪檢視的形狀做成動畫。如果想要達到這種效果，請使用<a href="{@docRoot}training/material/animations.html#Reveal">顯示效果</a>動畫。</p>
\ No newline at end of file
diff --git a/docs/html-intl/intl/zh-tw/training/material/theme.jd b/docs/html-intl/intl/zh-tw/training/material/theme.jd
new file mode 100644
index 0000000..8e36827
--- /dev/null
+++ b/docs/html-intl/intl/zh-tw/training/material/theme.jd
@@ -0,0 +1,107 @@
+page.title=使用材料設計風格
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+<h2>本課程示範</h2>
+<ol>
+ <li><a href="#ColorPalette">自訂色板</a></li>
+ <li><a href="#StatusBar">自訂狀態列</a></li>
+ <li><a href="#Inheritance">風格主題個別檢視</a></li>
+</ol>
+<h2>您也應該閱讀</h2>
+<ul>
+ <li><a href="http://www.google.com/design/spec">材料設計規格</a></li>
+ <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li>
+</ul>
+</div>
+</div>
+
+
+<p>新的材料設計風格提供：</p>
+
+<ul>
+ <li>可設定其色板的系統小工具</li>
+ <li>系統小工具的輕觸回饋動畫</li>
+ <li>操作行為轉換動畫</li>
+</ul>
+
+<p>您可以根據品牌特性，使用您控制的色板來自訂材料設計風格的外觀。您可以使用風格主題屬性，為行為欄和狀態列著色，如<a href="#fig3">圖 3</a> 所示。</p>
+
+<p>系統小工具經過全新設計，有輕觸回饋動畫。您可以為應用程式自訂色板、輕觸回饋動畫，以及操作行為轉換。</p>
+
+<p>材料設計風格定義為：</p>
+
+<ul>
+ <li><code>@android:style/Theme.Material</code> (深色版本)</li>
+ <li><code>@android:style/Theme.Material.Light</code> (淺色版本)</li>
+ <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
+</ul>
+
+<p>如需您可以使用的材料樣式清單，請參閱 {@link android.R.style R.style} 的 API 參考資料。</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>圖 1.</strong>深色材料設計風格</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>圖 2.</strong>淺色材料設計風格</p>
+ </div>
+</div>
+<br style="clear:left">
+</div>
+
+<p class="note">
+<strong>注意：</strong>材料設計風格只能在 Android 5.0 (API 級別 21) 以及更新版本中使用。<a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a>針對某些小工具提供使用材料設計樣式的風格主題，並且支援自訂色板。如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。
+</p>
+
+
+<h2 id="ColorPalette">自訂色板</h2>
+
+<p style="margin-bottom:30px">如果要自訂風格主題的基礎顏色來搭配您的品牌，在繼承材料設計風格時，請使用風格主題屬性定義您的自訂顏色：</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>圖 3.</strong>自訂材料設計風格。</p>
+</div>
+
+
+<h2 id="StatusBar">自訂狀態列</h2>
+
+<p>材料設計風格可以讓您輕鬆自訂狀態列，因此您可以指定符合品牌的顏色，並且提供足夠的對比來顯示白色的狀態圖示。如果要設定狀態列的自訂顏色，請在延伸材料設計風格時使用 <code>android:statusBarColor</code> 屬性。<code>android:statusBarColor</code> 預設會繼承 <code>android:colorPrimaryDark</code> 的值。</p>
+
+<p>您也可以自行繪製狀態列。例如，如果您想要在相片上面顯示透明的狀態列，但是搭配一點深色的漸層，確保可以看見白色的狀態圖示。請將 <code>android:statusBarColor</code> 屬性設定為 <code>@android:color/transparent</code>，並且視需要調整視窗標幟。您也可以使用 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 方法顯示動畫或進行淡化。</p>
+
+<p class="note">
+<strong>注意：</strong>狀態列必須與主要工具列有清楚區分的輪廓，除非您要在這些列後面顯示全版的豐富圖像或媒體內容，或者使用漸層來確保圖示清晰可見。
+</p>
+
+<p>當您自訂導覽列和狀態列時，請讓兩者都變成透明，或者只修改狀態列。在其他所有狀況下，導覽列都必須保持黑色。</p>
+
+
+<h2 id="Inheritance">風格主題個別檢視</h3>
+
+<p>XML 版面配置定義中的元素可以指定 <code>android:theme</code> 屬性，參考風格主題資源。這個屬性會修改元素和所有子元素的風格主題，這在改變介面特定部份的風格主題色板時很有用。</p>
\ No newline at end of file