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 do desenvolvedor</h3> 12 <p>Criao 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>Vdeo</h3> 20 <p>Introduo 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>Vdeo</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>Vdeo</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 43 interao para diversas plataformas e dispositivos. O Android agora compatvel com 44 aplicativos do Material Design. Para usar o Material Design nos aplicativos Android, siga as orientaes definidas 45 nas <a href="http://www.google.com/design/spec">especificaes do Material Design</a> e use os novos 46 componentes e funcionalidades disponveis no Android 5.0 (API de nvel 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 animaes personalizadas</li> 54 </ul> 55 56 <p>Para obter mais informaes sobre a implementao do Material Design no Android, consulte 57 <a href="{@docRoot}training/material/index.html">Criao 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 63 definir a paleta de cores e as animaes padro para feedback de toque e transies 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 informaes, consulte <a href="{@docRoot}training/material/theme.html">Como usar o tema 83 do Material</a>.</p> 84 85 86 <h3>Listas e cartes</h3> 87 88 <p>O Android fornece dois novos widgets para exibir cartes e listas com estilos e animaes do 89 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>O novo widget <code>RecyclerView</code> uma verso 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 informaes importantes dentro de 101 cartes que tm aparncia consistente.</p> 102 </div> 103 <br style="clear:left"/> 104 </div> 105 106 <p>Para obter mais informaes, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar 107 listas e cartes</a>.</p> 108 109 110 <h3>Sombras de vistas</h3> 111 112 <p>Alm das propriedades X e Y, vistas no Android agora tm uma propriedade 113 Z. Essa nova propriedade representa a elevao de uma vista, que determina:</p> 114 115 <ul> 116 <li>O tamanho da sombra: vistas com valores maiores de Z lanam 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 informaes, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como 134 definir sombras e recortar visualizaes</a>.</p> 135 136 137 <h3>Animaes</h3> 138 139 <p>As novas APIs de animao permitem criar animaes personalizadas para feedback de toque em controles de IU, 140 mudanas no estado da vista e transies de atividades.</p> 141 142 <p>Essas APIs permitem:</p> 143 144 <ul> 145 <li style="margin-bottom:15px"> 146 Responder a eventos de toque nas vistas com animaes de <strong>feedback de toque</strong>. 147 </li> 148 <li style="margin-bottom:15px"> 149 Ocultar e exibir vistas com animaes de <strong>revelao circular</strong>. 150 </li> 151 <li style="margin-bottom:15px"> 152 Alternar entre atividades com animaes de <strong>transio de atividades</strong>. 153 </li> 154 <li style="margin-bottom:15px"> 155 Criar animaes mais naturais com <strong>movimento curvado</strong>. 156 </li> 157 <li style="margin-bottom:15px"> 158 Animar mudanas em uma ou mais propriedades da vista com animaes de <strong>mudana de estado da vista</strong>. 159 </li> 160 <li style="margin-bottom:15px"> 161 Exibir animaes em <strong>desenhveis da lista de estado</strong> entre mudanas de estado da vista. 162 </li> 163 </ul> 164 165 <p>Animaes de feedback de toque so integradas em vrias vistas padro, como botes. As novas APIs 166 permitem personalizar essas animaes e adicion-las s vistas personalizadas.</p> 167 168 <p>Para obter mais informaes, consulte <a href="{@docRoot}training/material/animations.html">Como definir 169 animaes personalizadas</a>.</p> 170 171 172 <h3>Desenhveis</h3> 173 174 <p>Essas novas capacidades dos desenhveis ajudam na implementao de aplicativos do Material Design:</p> 175 176 <ul> 177 <li><strong>Desenhveis de vetor</strong> so dimensionveis sem perder definio e so perfeitos 178 para cones de uma cor dentro do aplicativo.</li> 179 <li><strong>Tingimento desenhvel</strong> permite definir mapas de bits como uma mscara alfa e tingi-los com 180 uma cor em tempo de execuo.</li> 181 <li><strong>Extrao de cor</strong> permite extrair automaticamente cores proeminentes de uma 182 imagem de mapa de bits.</li> 183 </ul> 184 185 <p>Para obter mais informaes, consulte <a href="{@docRoot}training/material/drawables.html">Como trabalhar 186 com desenhveis</a>.</p> 187
