1 page.title=Usar el tema Material 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Esta leccin te ensea a realizar lo siguiente:</h2> 8 <ol> 9 <li><a href="#ColorPalette">Personalizar la paleta de colores</a></li> 10 <li><a href="#StatusBar">Personalizar la barra de estado</a></li> 11 <li><a href="#Inheritance">Cambiar el tema de vistas individuales</a></li> 12 </ol> 13 <h2>Tambin deberas leer</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Especificacin de Material Design</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li> 17 </ul> 18 </div> 19 </div> 20 21 22 <p>El nuevo tema material proporciona:</p> 23 24 <ul> 25 <li>Widgets del sistema que te permiten establecer la paleta de colores.</li> 26 <li>Animaciones para la respuesta tctil de los widgets del sistema.</li> 27 <li>Animaciones para transiciones de actividades</li> 28 </ul> 29 30 <p>Puedes personalizar la apariencia del tema material 31 segn la identidad de tu marca, con una paleta de colores que est bajo tu control. Puedes cambiar el matiz de la barra de accin y 32 la barra de estado mediante atributos de temas, como se muestra en la <a href="#fig3">figura 3</a>.</p> 33 34 <p>Los widgets del sistema tienen un nuevo diseo y animaciones para respuesta tctil. Puedes personalizar tu aplicacin cambiando su 35 paleta de colores, las animaciones de la respuesta tctil y sus transiciones de actividades.</p> 36 37 <p>El tema material se define como:</p> 38 39 <ul> 40 <li><code>@android:style/Theme.Material</code> (versin oscura)</li> 41 <li><code>@android:style/Theme.Material.Light</code> (versin clara)</li> 42 <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> 43 </ul> 44 45 <p>Para obtener una lista de estilos de Material, consulta la referencia de la API para 46 {@link android.R.style R.style}.</p> 47 48 <!-- two columns, dark/light material theme example --> 49 <div style="width:700px;margin-top:25px;margin-bottom:10px"> 50 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 51 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238"> 52 <div style="width:170px;margin:0 auto"> 53 <p style="margin-top:8px;font-size:12px"><strong>Figura 1</strong>. Tema Material oscuro</p> 54 </div> 55 </div> 56 <div style="float:left;width:250px;margin-right:0px;"> 57 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238"> 58 <div style="width:170px;margin:0 auto"> 59 <p style="margin-top:8px;font-size:12px"><strong>Figura 2</strong>. Tema Material claro</p> 60 </div> 61 </div> 62 <br style="clear:left"> 63 </div> 64 65 <p class="note"> 66 <strong>Nota:</strong> El tema material solo est disponible en Android 5.0 (API nivel 21) y 67 superior. Las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a> 68 proporcionan temas con estilos de Material Design para algunos widgets y admiten la personalizacin de la paleta de 69 colores. Para ms informacin, consulta 70 <a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>. 71 </p> 72 73 74 <h2 id="ColorPalette">Personalizar la paleta de colores</h2> 75 76 <p style="margin-bottom:30px">Si deseas personalizar los colores base del tema para que se adapten a tu marca, define 77 tus colores personalizados mediante los atributos de temas cuando heredes del tema material:</p> 78 79 <pre> 80 <resources> 81 <!-- inherit from the material theme --> 82 <style name="AppTheme" parent="android:Theme.Material"> 83 <!-- Main theme colors --> 84 <!-- your app branding color for the app bar --> 85 <item name="android:colorPrimary">@color/primary</item> 86 <!-- darker variant for the status bar and contextual app bars --> 87 <item name="android:colorPrimaryDark">@color/primary_dark</item> 88 <!-- theme UI controls like checkboxes and text fields --> 89 <item name="android:colorAccent">@color/accent</item> 90 </style> 91 </resources> 92 </pre> 93 94 <div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3"> 95 <img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" /> 96 <p class="img-caption" style="margin-bottom:0px"> 97 <strong>Figura 3</strong>. Personalizar el tema material.</p> 98 </div> 99 100 101 <h2 id="StatusBar">Personalizar la barra de estado</h2> 102 103 <p>El tema material te permite personalizar fcilmente la barra de estado, especifica un 104 color que se adapte a tu marca y proporciona suficiente contraste para mostrar los conos de estado en blanco. Si 105 quieres establecer un color personalizado para la barra de estado, usa el atributo <code>android:statusBarColor</code> 106 cuando extiendas el tema material. <code>android:statusBarColor</code> hereda el 107 valor de <code>android:colorPrimaryDark</code> en forma predeterminada.</p> 108 109 <p>Tambin puedes dibujar por detrs de la barra de estado. Por ejemplo, si quieres que la barra de estado se 110 muestre en forma transparente sobre una foto, aplica un sutil degradado oscuro para garantizar que los conos 111 de estado blancos sigan visibles. Para hacerlo, establece el atributo <code>android:statusBarColor</code> en 112 <code>@android:color/transparent</code> y ajusta los indicadores de la ventana segn lo requerido. Tambin puedes 113 usar el mtodo {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para 114 las animaciones o el difuminado.</p> 115 116 <p class="note"> 117 <strong>Nota:</strong> La barra de estado casi siempre debe estar delimitada claramente de la 118 barra de herramientas principal, excepto para los casos en donde muestres imgenes de un extremo a otro o contenido multimedia detrs 119 de estas barras, y tambin cuando uses un degradado para garantizar que los conos an sean visibles. 120 </p> 121 122 <p>Cuando personalizas la barra de navegacin y la barra de estado, haz que ambas sean transparentes o modifica 123 solo la barra de estado. La barra de navegacin debe permanecer de color negro en todos los otros casos.</p> 124 125 126 <h2 id="Inheritance">Vistas individuales del tema</h3> 127 128 <p>Los elementos en las definiciones de diseo XML pueden especificar el atributo <code>android:theme</code>, 129 que hace referencia al recurso del tema. Este atributo modifica el tema para el elemento y cualquier 130 elemento secundario, y esto es til para modificar las paletas de colores de los temas en una porcin especfica 131 de una interfaz.</p> 132
