1page.title=Material Design para Android
2page.tags=Material,design
3page.type=design
4page.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>Creación 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>Introducción 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 más 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 aplicación Google I/O</p>
37</div>
38</a>
39
40
41
42<p itemprop="description">Material Design es una guía integral para el diseño visual, de movimientos y
43de interacción en distintas plataformas y dispositivos. Android ahora es compatible con las aplicaciones de
44Material Design. Para usar Material Design en tus aplicaciones de Android, sigue las pautas descritas
45en la <a href="http://www.google.com/design/spec">especificación de Material Design</a> y usa los
46nuevos 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 permitirán 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 programación de aplicaciones) para sombras y animaciones personalizadas.</li>
54</ul>
55
56<p>Para obtener más información sobre la implementación de Material Design en Android, consulta
57<a href="{@docRoot}training/material/index.html">Creación 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 aplicación, widgets del sistema que te permiten configurar
63la paleta de colores y animaciones predeterminadas para información táctil 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 más información, consulta <a href="{@docRoot}training/material/theme.html">Uso del tema
83Material</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
89animaciones 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 versión más acoplable de <code>ListView</code>
96 que admite diferentes tipos de diseños 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 información 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 más información, consulta <a href="{@docRoot}training/material/lists-cards.html">Creación de listas
107y tarjetas</a>.</p>
108
109
110<h3>Visualización de sombras</h3>
111
112<p>Además de las propiedades X e Y, las vistas de Android ahora poseen una
113propiedad Z. Esta propiedad nueva representa la elevación de una vista, que determina lo siguiente:</p>
114
115<ul>
116<li>El tamaño de la sombra: las vistas con valores Z más elevados proyectan sombras más grandes.</li>
117<li>El orden del dibujo: las vistas con valores Z más 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 película, haz clic en la pantalla del dispositivo.</em>
130  </div>
131</div>
132
133<p>Para obtener más información, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definición
134de 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 información táctil en los controles de IU,
140además 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">
146responder a los eventos táctiles de tus vistas mediante animaciones de <strong>información táctil</strong>;
147</li>
148<li style="margin-bottom:15px">
149ocultar y mostrar vistas con animaciones con <strong>efecto circular</strong>;
150</li>
151<li style="margin-bottom:15px">
152alternar entre actividades con animaciones personalizadas de <strong>transición de actividades</strong>;
153</li>
154<li style="margin-bottom:15px">
155crear animaciones más naturales con <strong>movimiento curvo</strong>;
156</li>
157<li style="margin-bottom:15px">
158animar los cambios en una o más propiedades de las vistas con las animaciones de <strong>cambio de estado de la vista</strong>;
159</li>
160<li style="margin-bottom:15px">
161mostrar animaciones en los <strong>elementos de diseño 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 información táctil se concentran en diferentes vistas estándar, como los botones. Las nuevas API
166te permiten personalizar estas animaciones y agregarlas a tus vistas personalizadas.</p>
167
168<p>Para obtener más información, consulta <a href="{@docRoot}training/material/animations.html">Definición de animaciones
169personalizadas</a>.</p>
170
171
172<h3>Elementos de diseño</h3>
173
174<p>Estas nuevas capacidades para los elementos de diseño te permiten implementar aplicaciones de Material Design:</p>
175
176<ul>
177<li>Los <strong>dibujables en vector</strong> se pueden escalar sin perder definición y son perfectos
178para los iconos de las aplicaciones de un solo color.</li>
179<li>El <strong>teñido de los dibujables</strong> te permite definir mapas de bits como máscaras alfa y pintarlos con
180un color durante el tiempo de ejecución.</li>
181<li>La <strong>extracción de color</strong> te permite extraer automáticamente colores prominentes de una
182imagen del mapa de bits.</li>
183</ul>
184
185<p>Para obtener más información, consulta <a href="{@docRoot}training/material/drawables.html">Trabajo con
186elementos de diseño</a>.</p>
187