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