1page.title=Material Design 2page.tags=Material,design 3page.type=design 4page.image=design/material/images/MaterialLight.png 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 do desenvolvedor</h3> 12 <p>Criação de aplicativos com o 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>Vídeo</h3> 20 <p>Introdução ao 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>Vídeo</h3> 28 <p>Papel e tinta: Os materiais que importam</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>Vídeo</h3> 36 <p>Material Design no aplicativo Google I/O</p> 37</div> 38</a> 39 40 41 42<p itemprop="description">O Material Design é um guia abrangente para design visual, de movimento e de 43interação para diversas plataformas e dispositivos. O Android agora é compatível com 44aplicativos do Material Design. Para usar o Material Design nos aplicativos Android, siga as orientações definidas 45nas <a href="http://www.google.com/design/spec">especificações do Material Design</a> e use os novos 46componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21) e em posteriores.</p> 47 48<p>O Android fornece os seguintes elementos para criar aplicativos do Material Design:</p> 49 50<ul> 51 <li>Um novo tema</li> 52 <li>Novos widgets para vistas complexas</li> 53 <li>Novas APIs para sombras e animações personalizadas</li> 54</ul> 55 56<p>Para obter mais informações sobre a implementação do Material Design no Android, consulte 57<a href="{@docRoot}training/material/index.html">Criação de aplicativos com o Material Design</a>.</p> 58 59 60<h3>Tema do Material</h3> 61 62<p>O tema do Material fornece um novo estilo para o seu aplicativo, widgets de sistema que permitem 63definir a paleta de cores e as animações padrão para feedback de toque e transições de atividades.</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 escuro do 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 claro do Material</p> 77 </div> 78</div> 79<br style="clear:left"/> 80</div> 81 82<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/theme.html">Como usar o tema 83do Material</a>.</p> 84 85 86<h3>Listas e cartões</h3> 87 88<p>O Android fornece dois novos widgets para exibir cartões e listas com estilos e animações do 89Material 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>O novo widget <code>RecyclerView</code> é uma versão mais completa de <code>ListView</code> 96 com suporte para diferentes tipos de layout e melhorias no desempenho.</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>O novo widget <code>CardView</code> permite exibir informações importantes dentro de 101 cartões que têm aparência consistente.</p> 102</div> 103<br style="clear:left"/> 104</div> 105 106<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar 107listas e cartões</a>.</p> 108 109 110<h3>Sombras de vistas</h3> 111 112<p>Além das propriedades X e Y, vistas no Android agora têm uma propriedade 113Z. Essa nova propriedade representa a elevação de uma vista, que determina:</p> 114 115<ul> 116<li>O tamanho da sombra: vistas com valores maiores de Z lançam sombras maiores.</li> 117<li>A ordem de desenho: vistas com valores maiores de Z aparecem sobre outras 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 reproduzir o filme, clique na tela do dispositivo</em> 130 </div> 131</div> 132 133<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como 134definir sombras e recortar visualizações</a>.</p> 135 136 137<h3>Animações</h3> 138 139<p>As novas APIs de animação permitem criar animações personalizadas para feedback de toque em controles de IU, 140mudanças no estado da vista e transições de atividades.</p> 141 142<p>Essas APIs permitem:</p> 143 144<ul> 145<li style="margin-bottom:15px"> 146Responder a eventos de toque nas vistas com animações de <strong>feedback de toque</strong>. 147</li> 148<li style="margin-bottom:15px"> 149Ocultar e exibir vistas com animações de <strong>revelação circular</strong>. 150</li> 151<li style="margin-bottom:15px"> 152Alternar entre atividades com animações de <strong>transição de atividades</strong>. 153</li> 154<li style="margin-bottom:15px"> 155Criar animações mais naturais com <strong>movimento curvado</strong>. 156</li> 157<li style="margin-bottom:15px"> 158Animar mudanças em uma ou mais propriedades da vista com animações de <strong>mudança de estado da vista</strong>. 159</li> 160<li style="margin-bottom:15px"> 161Exibir animações em <strong>desenháveis da lista de estado</strong> entre mudanças de estado da vista. 162</li> 163</ul> 164 165<p>Animações de feedback de toque são integradas em várias vistas padrões, como botões. As novas APIs 166permitem personalizar essas animações e adicioná-las às vistas personalizadas.</p> 167 168<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/animations.html">Como definir 169animações personalizadas</a>.</p> 170 171 172<h3>Desenháveis</h3> 173 174<p>Essas novas capacidades dos desenháveis ajudam na implementação de aplicativos do Material Design:</p> 175 176<ul> 177<li><strong>Desenháveis de vetor</strong> são dimensionáveis sem perder definição e são perfeitos 178para ícones de uma cor dentro do aplicativo.</li> 179<li><strong>Tingimento desenhável</strong> permite definir mapas de bits como uma máscara alfa e tingi-los com 180uma cor em tempo de execução.</li> 181<li><strong>Extração de cor</strong> permite extrair automaticamente cores proeminentes de uma 182imagem de mapa de bits.</li> 183</ul> 184 185<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/drawables.html">Como trabalhar 186com desenháveis</a>.</p> 187
