1 page.title=Material Design para Android 2 page.tags=Material,design 3 page.type=design 4 page.image=images/cards/design-material-for-android_2x.jpg 5 6 @jd:body 7 8 <!-- developer docs box --> 9 <a class="notice-developers right" href="{@docRoot}training/material/index.html"> 10 <div> 11 <h3>Documentos para desarrolladores</h3> 12 <p>Creacin de aplicaciones con Material Design</p> 13 </div> 14 </a> 15 16 <!-- video box --> 17 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw"> 18 <div> 19 <h3>Video</h3> 20 <p>Introduccin a Material Design</p> 21 </div> 22 </a> 23 24 <!-- video box --> 25 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw"> 26 <div> 27 <h3>Video</h3> 28 <p>Papel y tinta: los materiales ms importantes</p> 29 </div> 30 </a> 31 32 <!-- video box --> 33 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc"> 34 <div> 35 <h3>Video</h3> 36 <p>Material Design en la aplicacin Google I/O</p> 37 </div> 38 </a> 39 40 41 42 <p itemprop="description">Material Design es una gua integral para el diseo visual, de movimientos y 43 de interaccin en distintas plataformas y dispositivos. Android ahora es compatible con las aplicaciones de 44 Material Design. Para usar Material Design en tus aplicaciones de Android, sigue las pautas descritas 45 en la <a href="http://www.google.com/design/spec">especificacin de Material Design</a> y usa los 46 nuevos componentes y funcionalidades disponibles en Android 5.0 (nivel de API 21) y versiones posteriores.</p> 47 48 <p>En Android, se proporcionan los siguientes elementos que te permitirn crear aplicaciones en Material Design:</p> 49 50 <ul> 51 <li>un tema nuevo;</li> 52 <li>nuevos widgets para vistas complejas;</li> 53 <li>nuevas API (interfaces de programacin de aplicaciones) para sombras y animaciones personalizadas.</li> 54 </ul> 55 56 <p>Para obtener ms informacin sobre la implementacin de Material Design en Android, consulta 57 <a href="{@docRoot}training/material/index.html">Creacin de aplicaciones con Material Design</a>.</p> 58 59 60 <h3>Tema Material</h3> 61 62 <p>El tema Material te ofrece un nuevo estilo para tu aplicacin, widgets del sistema que te permiten configurar 63 la paleta de colores y animaciones predeterminadas para informacin tctil y transiciones de actividades.</p> 64 65 <!-- two columns --> 66 <div style="width:700px;margin-top:25px;margin-bottom:20px"> 67 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 68 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" /> 69 <div style="width:140px;margin:0 auto"> 70 <p style="margin-top:8px">Tema Dark Material</p> 71 </div> 72 </div> 73 <div style="float:left;width:250px;margin-right:0px;"> 74 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" /> 75 <div style="width:140px;margin:0 auto"> 76 <p style="margin-top:8px">Tema Light Material</p> 77 </div> 78 </div> 79 <br style="clear:left"/> 80 </div> 81 82 <p>Para obtener ms informacin, consulta <a href="{@docRoot}training/material/theme.html">Uso del tema 83 Material</a>.</p> 84 85 86 <h3>Listas y tarjetas</h3> 87 88 <p>Android proporciona dos widgets nuevos para mostrar listas y tarjetas con estilos y 89 animaciones de Material Design:</p> 90 91 <!-- two columns --> 92 <div style="width:700px;margin-top:25px;margin-bottom:20px"> 93 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 94 <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" /> 95 <p>El nuevo widget <code>RecyclerView</code> es una versin ms acoplable de <code>ListView</code> 96 que admite diferentes tipos de diseos y proporciona mejoras en el rendimiento.</p> 97 </div> 98 <div style="float:left;width:250px;margin-right:0px;"> 99 <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" /> 100 <p>El nuevo widget <code>CardView</code> te permite mostrar extractos de informacin importante dentro de 101 tarjetas que tienen apariencia y estilo coherentes.</p> 102 </div> 103 <br style="clear:left"/> 104 </div> 105 106 <p>Para obtener ms informacin, consulta <a href="{@docRoot}training/material/lists-cards.html">Creacin de listas 107 y tarjetas</a>.</p> 108 109 110 <h3>Visualizacin de sombras</h3> 111 112 <p>Adems de las propiedades X e Y, las vistas de Android ahora poseen una 113 propiedad Z. Esta propiedad nueva representa la elevacin de una vista, que determina lo siguiente:</p> 114 115 <ul> 116 <li>El tamao de la sombra: las vistas con valores Z ms elevados proyectan sombras ms grandes.</li> 117 <li>El orden del dibujo: las vistas con valores Z ms elevados aparecen sobre las otras vistas.</li> 118 </ul> 119 120 <div style="width:290px;margin-left:35px;float:right"> 121 <div class="framed-nexus5-port-span-5"> 122 <video class="play-on-hover" autoplay> 123 <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/> 124 <source src="{@docRoot}design/videos/ContactsAnim.webm"/> 125 <source src="{@docRoot}design/videos/ContactsAnim.ogv"/> 126 </video> 127 </div> 128 <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> 129 <em>Para volver a reproducir la pelcula, haz clic en la pantalla del dispositivo.</em> 130 </div> 131 </div> 132 133 <p>Para obtener ms informacin, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definicin 134 de vistas de recorte y sombras</a>.</p> 135 136 137 <h3>Animaciones</h3> 138 139 <p>Las nuevas API de animaciones te permiten crear animaciones personalizadas para la informacin tctil en los controles de IU, 140 adems de realizar cambios en el estado de las vistas y transiciones entre actividades.</p> 141 142 <p>Estas API te permiten hacer lo siguiente:</p> 143 144 <ul> 145 <li style="margin-bottom:15px"> 146 responder a los eventos tctiles de tus vistas mediante animaciones de <strong>informacin tctil</strong>; 147 </li> 148 <li style="margin-bottom:15px"> 149 ocultar y mostrar vistas con animaciones con <strong>efecto circular</strong>; 150 </li> 151 <li style="margin-bottom:15px"> 152 alternar entre actividades con animaciones personalizadas de <strong>transicin de actividades</strong>; 153 </li> 154 <li style="margin-bottom:15px"> 155 crear animaciones ms naturales con <strong>movimiento curvo</strong>; 156 </li> 157 <li style="margin-bottom:15px"> 158 animar los cambios en una o ms propiedades de las vistas con las animaciones de <strong>cambio de estado de la vista</strong>; 159 </li> 160 <li style="margin-bottom:15px"> 161 mostrar animaciones en los <strong>elementos de diseo de la lista de estados</strong> entre los cambios de estado de las vistas. 162 </li> 163 </ul> 164 165 <p>Las animaciones de la informacin tctil se concentran en diferentes vistas estndar, como los botones. Las nuevas API 166 te permiten personalizar estas animaciones y agregarlas a tus vistas personalizadas.</p> 167 168 <p>Para obtener ms informacin, consulta <a href="{@docRoot}training/material/animations.html">Definicin de animaciones 169 personalizadas</a>.</p> 170 171 172 <h3>Elementos de diseo</h3> 173 174 <p>Estas nuevas capacidades para los elementos de diseo te permiten implementar aplicaciones de Material Design:</p> 175 176 <ul> 177 <li>Los <strong>dibujables en vector</strong> se pueden escalar sin perder definicin y son perfectos 178 para los iconos de las aplicaciones de un solo color.</li> 179 <li>El <strong>teido de los dibujables</strong> te permite definir mapas de bits como mscaras alfa y pintarlos con 180 un color durante el tiempo de ejecucin.</li> 181 <li>La <strong>extraccin de color</strong> te permite extraer automticamente colores prominentes de una 182 imagen del mapa de bits.</li> 183 </ul> 184 185 <p>Para obtener ms informacin, consulta <a href="{@docRoot}training/material/drawables.html">Trabajo con 186 elementos de diseo</a>.</p> 187
