1page.title=Como usar o tema do Material 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>Esta lição ensina a</h2> 8<ol> 9 <li><a href="#ColorPalette">Personalizar a paleta de cores</a></li> 10 <li><a href="#StatusBar">Personalizar a barra de status</a></li> 11 <li><a href="#Inheritance">Atribuir tema a visualizações individuais</a></li> 12</ol> 13<h2>Você também deve ler</h2> 14<ul> 15 <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li> 17</ul> 18</div> 19</div> 20 21 22<p>O novo tema do Material fornece:</p> 23 24<ul> 25 <li>Widgets do sistema que permitem a configuração da paleta de cores</li> 26 <li>Animações de feedback de toque para os widgets do sistema</li> 27 <li>Animações de transição de atividades</li> 28</ul> 29 30<p>É possível personalizar a aparência do tema do Material com 31uma paleta de cores que você controla, de acordo com a identidade da sua marca. Você pode atribuir cor à barra de ações e 32à barra de status usando atributos de tema, conforme exibido na <a href="#fig3">Figura 3</a>.</p> 33 34<p>Os widgets de sistema têm um novo design e animações de feedback de toque. Você pode personalizar a 35paleta de cores, as animações de feedback de toque e as transições de atividades do aplicativo.</p> 36 37<p>O tema do Material é definido como:</p> 38 39<ul> 40 <li><code>@android:style/Theme.Material</code> (versão escura)</li> 41 <li><code>@android:style/Theme.Material.Light</code> (versão clara)</li> 42 <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> 43</ul> 44 45<p>Para obter uma lista de estilos do Material que podem ser usados, consulte a referência de API para 46{@link android.R.style R.style}.</p> 47 48<!-- two columns, dark/light material theme example --> 49<div style="width:700px;margin-top:25px;margin-bottom:10px"> 50<div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 51 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238"> 52 <div style="width:170px;margin:0 auto"> 53 <p style="margin-top:8px;font-size:12px"><strong>Figura 1</strong>. Tema escuro do Material</p> 54 </div> 55</div> 56<div style="float:left;width:250px;margin-right:0px;"> 57 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238"> 58 <div style="width:170px;margin:0 auto"> 59 <p style="margin-top:8px;font-size:12px"><strong>Figura 2</strong>. Tema claro do Material</p> 60 </div> 61</div> 62<br style="clear:left"> 63</div> 64 65<p class="note"> 66<strong>Observação:</strong> o tema do Material só está disponível no Android 5.0 (API de nível 21) e 67posteriores. A <a href="{@docRoot}tools/support-library/features.html#v7">Biblioteca de Suporte v7</a> 68fornece temas com estilos do Material Design para alguns widgets e compatibilidade com a personalização da 69paleta de cores. Para obter mais informações, consulte 70<a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>. 71</p> 72 73 74<h2 id="ColorPalette">Personalizar a paleta de cores</h2> 75 76<p style="margin-bottom:30px">Para personalizar as cores de base do tema para adequá-lo à sua marca, defina 77as cores personalizadas usando os atributos de tema ao herdar do tema do Material:</p> 78 79<pre> 80<resources> 81 <!-- inherit from the material theme --> 82 <style name="AppTheme" parent="android:Theme.Material"> 83 <!-- Main theme colors --> 84 <!-- your app branding color for the app bar --> 85 <item name="android:colorPrimary">@color/primary</item> 86 <!-- darker variant for the status bar and contextual app bars --> 87 <item name="android:colorPrimaryDark">@color/primary_dark</item> 88 <!-- theme UI controls like checkboxes and text fields --> 89 <item name="android:colorAccent">@color/accent</item> 90 </style> 91</resources> 92</pre> 93 94<div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3"> 95<img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" /> 96<p class="img-caption" style="margin-bottom:0px"> 97<strong>Figura 3.</strong> Como personalizar o tema do Material</p> 98</div> 99 100 101<h2 id="StatusBar">Personalizar a barra de status</h2> 102 103<p>O tema do Material permite a fácil personalização da barra de status, para você poder 104especificar uma cor adequada à sua marca, e fornece contraste suficiente para exibir os ícones de status brancos. Para 105definir uma cor personalizada para a barra de status, use o atributo <code>android:statusBarColor</code> ao 106ampliar o tema do Material. Por padrão, <code>android:statusBarColor</code> herda o 107valor de <code>android:colorPrimaryDark</code>.</p> 108 109<p>Você também pode personalizar a parte de trás da barra de status. Por exemplo, se você quiser mostrar 110uma barra de status transparente sobre uma foto, com um degradê escuro sutil, para garantir que os ícones de status 111brancos sejam visíveis, defina o atributo <code>android:statusBarColor</code> como 112<code>@android:color/transparent</code> e ajuste os marcadores de janela conforme necessário. Você também 113pode usar o método {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para 114animações ou esmaecimento.</p> 115 116<p class="note"> 117<strong>Observação:</strong> a barra de status deve ter, quase sempre, um traçado distante da barra de ferramentas 118principal, exceto em casos em que haja imagens ricas de ponta a ponta, conteúdo de mídia por trás 119dessas barras e quando se usa degradê, para garantir que os ícones continuem visíveis. 120</p> 121 122<p>Ao personalizar as barras de navegação e de status, deixe-as transparentes ou modifique 123somente a barra de status. A barra de navegação deve permanecer preta em todos os outros casos.</p> 124 125 126<h2 id="Inheritance">Atribuir tema a visualizações individuais</h3> 127 128<p>Elementos nas definições do layout XML podem especificar o atributo <code>android:theme</code>, 129que referencia um recurso do tema. Esse atributo modifica o tema do elemento e quaisquer 130elementos-filho, o que é útil para alterar as paletas de cores do tema em uma parte específica 131de uma interface.</p> 132
