Merge "Docs: Updating Spanish translation for material-design docs." into mnc-docs

page.title=Material Design

page.title=Material Design para Android

page.tags=Material,design

page.type=design

page.image=design/material/images/MaterialLight.png

page.image=images/cards/design-material-for-android_2x.jpg

@jd:body

<p itemprop="description">Material Design es una guía integral para el diseño visual, de movimientos y

de interacción en distintas plataformas y dispositivos. Android ahora es compatible con las aplicaciones de

Material Design. Para usar Material Design en sus aplicaciones de Android, siga las pautas descritas

en la <a href="http://www.google.com/design/spec">especificación de Material Design</a> y use los

Material Design. Para usar Material Design en tus aplicaciones de Android, sigue las pautas descritas

en la <a href="http://www.google.com/design/spec">especificación de Material Design</a> y usa los

nuevos componentes y funcionalidades disponibles en Android 5.0 (nivel de API 21) y versiones posteriores.</p>

<p>En Android, se proporcionan los siguientes elementos que le permitirán crear aplicaciones en Material Design:</p>

<p>En Android, se proporcionan los siguientes elementos que te permitirán crear aplicaciones en Material Design:</p>

<ul>

  <li>un tema nuevo;</li>

  <li>nuevas API (interfaces de programación de aplicaciones) para sombras y animaciones personalizadas.</li>

</ul>

<p>Para obtener más información sobre la implementación de Material Design en Android, consulte

<p>Para obtener más información sobre la implementación de Material Design en Android, consulta

<a href="{@docRoot}training/material/index.html">Creación de aplicaciones con Material Design</a>.</p>

<h3>Tema Material</h3>

<p>El tema Material le ofrece un nuevo estilo para su aplicación, widgets del sistema que le permiten configurar

<p>El tema Material te ofrece un nuevo estilo para tu aplicación, widgets del sistema que te permiten configurar

la paleta de colores y animaciones predeterminadas para información táctil y transiciones de actividades.</p>

<!-- two columns -->

<br style="clear:left"/>

</div>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/theme.html">Uso del tema

<p>Para obtener más información, consulta <a href="{@docRoot}training/material/theme.html">Uso del tema

Material</a>.</p>

</div>

<div style="float:left;width:250px;margin-right:0px;">

  <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />

  <p>El nuevo widget <code>CardView</code> le permite mostrar extractos de información importante dentro de

  <p>El nuevo widget <code>CardView</code> te permite mostrar extractos de información importante dentro de

 tarjetas que tienen apariencia y estilo coherentes.</p>

</div>

<br style="clear:left"/>

</div>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/lists-cards.html">Creación de listas

<p>Para obtener más información, consulta <a href="{@docRoot}training/material/lists-cards.html">Creación de listas

y tarjetas</a>.</p>

  </video>

  </div>

  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">

    <em>Para volver a reproducir la película, haga clic en la pantalla del dispositivo.</em>

    <em>Para volver a reproducir la película, haz clic en la pantalla del dispositivo.</em>

  </div>

</div>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Definición

<p>Para obtener más información, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definición

de vistas de recorte y sombras</a>.</p>

<h3>Animaciones</h3>

<p>Las nuevas API de animaciones le permiten crear animaciones personalizadas para la información táctil en los controles de IU,

<p>Las nuevas API de animaciones te permiten crear animaciones personalizadas para la información táctil en los controles de IU,

además de realizar cambios en el estado de las vistas y transiciones entre actividades.</p>

<p>Estas API le permiten hacer lo siguiente:</p>

<p>Estas API te permiten hacer lo siguiente:</p>

<ul>

<li style="margin-bottom:15px">

responder a los eventos táctiles de sus vistas mediante animaciones de <strong>información táctil</strong>;

responder a los eventos táctiles de tus vistas mediante animaciones de <strong>información táctil</strong>;

</li>

<li style="margin-bottom:15px">

ocultar y mostrar vistas con animaciones con <strong>efecto circular</strong>;

</ul>

<p>Las animaciones de la información táctil se concentran en diferentes vistas estándar, como los botones. Las nuevas API

le permiten personalizar estas animaciones y agregarlas a sus vistas personalizadas.</p>

te permiten personalizar estas animaciones y agregarlas a tus vistas personalizadas.</p>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/animations.html">Definición de animaciones

<p>Para obtener más información, consulta <a href="{@docRoot}training/material/animations.html">Definición de animaciones

personalizadas</a>.</p>

<h3>Elementos de diseño</h3>

<p>Estas nuevas capacidades para los elementos de diseño le permiten implementar aplicaciones de Material Design:</p>

<p>Estas nuevas capacidades para los elementos de diseño te permiten implementar aplicaciones de Material Design:</p>

<ul>

<li>Los <strong>dibujables en vector</strong> se pueden escalar sin perder definición y son perfectos

para los iconos de las aplicaciones de un solo color.</li>

<li>El <strong>teñido de los dibujables</strong> le permite definir mapas de bits como máscaras alfa y pintarlos con

<li>El <strong>teñido de los dibujables</strong> te permite definir mapas de bits como máscaras alfa y pintarlos con

un color durante el tiempo de ejecución.</li>

<li>La <strong>extracción de color</strong> le permite extraer automáticamente colores prominentes de una

<li>La <strong>extracción de color</strong> te permite extraer automáticamente colores prominentes de una

imagen del mapa de bits.</li>

</ul>

<p>Para obtener más información, consulte <a href="{@docRoot}training/material/drawables.html">Trabajo con

<p>Para obtener más información, consulta <a href="{@docRoot}training/material/drawables.html">Trabajo con

elementos de diseño</a>.</p>

<div id="tb-wrapper">

<div id="tb">

<h2>Esta lección te enseña a</h2>

<h2>Esta lección te enseña a realizar lo siguiente:</h2>

<ol>

  <li><a href="#Theme">Definir estilos alternativos</a></li>

  <li><a href="#Layouts">Proporcionar diseños alternativos</a></li>

</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>

<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 (API nivel 21) y superior. Sin embargo, puedes diseñar tus aplicaciones para

usar estas características cuando se ejecutan 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>

<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>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 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>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 (API nivel 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>Crea tus archivos de diseño para Android 5.0 (API nivel 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>

<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, definiendo estilos

base en <code>res/values/</code> y heredando de los que están 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>

<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><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>

<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>

<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>

<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 -->

<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>

<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>

<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>

<p>Para usar estas características en versiones de Android anteriores a la 5.0 (API nivel 21), incluye

en tu proyecto la Biblioteca de soporte v7 de Android como una <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">dependencia de Gradle</a>:</p>

<pre>

dependencies {

<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>

<p>Para conservar la compatibilidad con versiones anteriores de Android, comprueba la {@link

android.os.Build.VERSION#SDK_INT version} del sistema 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

}

</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 &lt;uses-sdk&gt; de la API</a>.</p> 

 No newline at end of file

<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> en <code>21</code>. Para más información, consulta

la <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">guía de &lt;uses-sdk&gt; de la

API</a>.</p>

<div id="tb-wrapper">

<div id="tb">

<h2>Esta lección te enseña a</h2>

<h2>Esta lección te enseña a realizar lo siguiente:</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>

<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>Con Android 5.0 (API nivel 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 recursos

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>

<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>

<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>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>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 en

segundo plano 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 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>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>

<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.+'

    compile 'com.android.support:palette-v7:21.0.0'

}

</pre>

<p>Para más información, consulta la referencia de la API para la clase {@link android.support.v7.graphics.Palette}.</p>

<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">

<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>&lt;vector&gt;</code>.</p>

<p>En Android 5.0 (API nivel 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>&lt;vector&gt;</code>.</p>

<p>El siguiente ejemplo define una imagen en vector con la forma de un corazón:</p>

</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

<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>