diff options
Diffstat (limited to 'docs/html-intl/intl/pt-br/design/material/index.jd')
-rw-r--r-- | docs/html-intl/intl/pt-br/design/material/index.jd | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/docs/html-intl/intl/pt-br/design/material/index.jd b/docs/html-intl/intl/pt-br/design/material/index.jd new file mode 100644 index 0000000..60289a3 --- /dev/null +++ b/docs/html-intl/intl/pt-br/design/material/index.jd @@ -0,0 +1,186 @@ +page.title=Material Design +page.tags=Material,design +page.type=design +page.image=design/material/images/MaterialLight.png + +@jd:body + +<!-- developer docs box --> +<a class="notice-developers right" href="{@docRoot}training/material/index.html"> + <div> + <h3>Documentos do desenvolvedor</h3> + <p>Criação de aplicativos com o Material Design</p> + </div> +</a> + +<!-- video box --> +<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw"> +<div> + <h3>Vídeo</h3> + <p>Introdução ao Material Design</p> +</div> +</a> + +<!-- video box --> +<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw"> +<div> + <h3>Vídeo</h3> + <p>Papel e tinta: Os materiais que importam</p> +</div> +</a> + +<!-- video box --> +<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc"> +<div> + <h3>Vídeo</h3> + <p>Material Design no aplicativo Google I/O</p> +</div> +</a> + + + +<p itemprop="description">O Material Design é um guia abrangente para design visual, de movimento e de +interação para diversas plataformas e dispositivos. O Android agora é compatível com +aplicativos do Material Design. Para usar o Material Design nos aplicativos Android, siga as orientações definidas +nas <a href="http://www.google.com/design/spec">especificações do Material Design</a> e use os novos +componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21) e em posteriores.</p> + +<p>O Android fornece os seguintes elementos para criar aplicativos do Material Design:</p> + +<ul> + <li>Um novo tema</li> + <li>Novos widgets para vistas complexas</li> + <li>Novas APIs para sombras e animações personalizadas</li> +</ul> + +<p>Para obter mais informações sobre a implementação do Material Design no Android, consulte +<a href="{@docRoot}training/material/index.html">Criação de aplicativos com o Material Design</a>.</p> + + +<h3>Tema do Material</h3> + +<p>O tema do Material fornece um novo estilo para o seu aplicativo, widgets de sistema que permitem +definir a paleta de cores e as animações padrão para feedback de toque e transições de atividades.</p> + +<!-- two columns --> +<div style="width:700px;margin-top:25px;margin-bottom:20px"> +<div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> + <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" /> + <div style="width:140px;margin:0 auto"> + <p style="margin-top:8px">Tema escuro do Material</p> + </div> +</div> +<div style="float:left;width:250px;margin-right:0px;"> + <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" /> + <div style="width:140px;margin:0 auto"> + <p style="margin-top:8px">Tema claro do Material</p> + </div> +</div> +<br style="clear:left"/> +</div> + +<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/theme.html">Como usar o tema +do Material</a>.</p> + + +<h3>Listas e cartões</h3> + +<p>O Android fornece dois novos widgets para exibir cartões e listas com estilos e animações do +Material Design:</p> + +<!-- two columns --> +<div style="width:700px;margin-top:25px;margin-bottom:20px"> +<div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> + <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" /> + <p>O novo widget <code>RecyclerView</code> é uma versão mais completa de <code>ListView</code> + com suporte para diferentes tipos de layout e melhorias no desempenho.</p> +</div> +<div style="float:left;width:250px;margin-right:0px;"> + <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" /> + <p>O novo widget <code>CardView</code> permite exibir informações importantes dentro de + cartões que têm aparência consistente.</p> +</div> +<br style="clear:left"/> +</div> + +<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar +listas e cartões</a>.</p> + + +<h3>Sombras de vistas</h3> + +<p>Além das propriedades X e Y, vistas no Android agora têm uma propriedade +Z. Essa nova propriedade representa a elevação de uma vista, que determina:</p> + +<ul> +<li>O tamanho da sombra: vistas com valores maiores de Z lançam sombras maiores.</li> +<li>A ordem de desenho: vistas com valores maiores de Z aparecem sobre outras vistas.</li> +</ul> + +<div style="width:290px;margin-left:35px;float:right"> + <div class="framed-nexus5-port-span-5"> + <video class="play-on-hover" autoplay> + <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/> + <source src="{@docRoot}design/videos/ContactsAnim.webm"/> + <source src="{@docRoot}design/videos/ContactsAnim.ogv"/> + </video> + </div> + <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> + <em>Para reproduzir o filme, clique na tela do dispositivo</em> + </div> +</div> + +<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como +definir sombras e recortar visualizações</a>.</p> + + +<h3>Animações</h3> + +<p>As novas APIs de animação permitem criar animações personalizadas para feedback de toque em controles de IU, +mudanças no estado da vista e transições de atividades.</p> + +<p>Essas APIs permitem:</p> + +<ul> +<li style="margin-bottom:15px"> +Responder a eventos de toque nas vistas com animações de <strong>feedback de toque</strong>. +</li> +<li style="margin-bottom:15px"> +Ocultar e exibir vistas com animações de <strong>revelação circular</strong>. +</li> +<li style="margin-bottom:15px"> +Alternar entre atividades com animações de <strong>transição de atividades</strong>. +</li> +<li style="margin-bottom:15px"> +Criar animações mais naturais com <strong>movimento curvado</strong>. +</li> +<li style="margin-bottom:15px"> +Animar mudanças em uma ou mais propriedades da vista com animações de <strong>mudança de estado da vista</strong>. +</li> +<li style="margin-bottom:15px"> +Exibir animações em <strong>desenháveis da lista de estado</strong> entre mudanças de estado da vista. +</li> +</ul> + +<p>Animações de feedback de toque são integradas em várias vistas padrões, como botões. As novas APIs +permitem personalizar essas animações e adicioná-las às vistas personalizadas.</p> + +<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/animations.html">Como definir +animações personalizadas</a>.</p> + + +<h3>Desenháveis</h3> + +<p>Essas novas capacidades dos desenháveis ajudam na implementação de aplicativos do Material Design:</p> + +<ul> +<li><strong>Desenháveis de vetor</strong> são dimensionáveis sem perder definição e são perfeitos +para ícones de uma cor dentro do aplicativo.</li> +<li><strong>Tingimento desenhável</strong> permite definir mapas de bits como uma máscara alfa e tingi-los com +uma cor em tempo de execução.</li> +<li><strong>Extração de cor</strong> permite extrair automaticamente cores proeminentes de uma +imagem de mapa de bits.</li> +</ul> + +<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/drawables.html">Como trabalhar +com desenháveis</a>.</p> |