1 page.title=Como usar o tema do Material 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Esta lio 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 visualizaes individuais</a></li> 12 </ol> 13 <h2>Voc tambm deve ler</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Especificaes 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 configurao da paleta de cores</li> 26 <li>Animaes de feedback de toque para os widgets do sistema</li> 27 <li>Animaes de transio de atividades</li> 28 </ul> 29 30 <p> possvel personalizar a aparncia do tema do Material com 31 uma paleta de cores que voc controla, de acordo com a identidade da sua marca. Voc pode atribuir cor barra de aes 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 tm um novo design e animaes de feedback de toque. Voc pode personalizar a 35 paleta de cores, as animaes de feedback de toque e as transies 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> (verso escura)</li> 41 <li><code>@android:style/Theme.Material.Light</code> (verso 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 referncia 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>Observao:</strong> o tema do Material s est disponvel no Android 5.0 (API de nvel 21) e 67 posteriores. A <a href="{@docRoot}tools/support-library/features.html#v7">Biblioteca de Suporte v7</a> 68 fornece temas com estilos do Material Design para alguns widgets e compatibilidade com a personalizao da 69 paleta de cores. Para obter mais informaes, 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 77 as 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 fcil personalizao da barra de status, para voc poder 104 especificar uma cor adequada sua marca, e fornece contraste suficiente para exibir os cones de status brancos. Para 105 definir uma cor personalizada para a barra de status, use o atributo <code>android:statusBarColor</code> ao 106 ampliar o tema do Material. Por padro, <code>android:statusBarColor</code> herda o 107 valor de <code>android:colorPrimaryDark</code>.</p> 108 109 <p>Voc tambm pode personalizar a parte de trs da barra de status. Por exemplo, se voc quiser mostrar 110 uma barra de status transparente sobre uma foto, com um degrad escuro sutil, para garantir que os cones de status 111 brancos sejam visveis, defina o atributo <code>android:statusBarColor</code> como 112 <code>@android:color/transparent</code> e ajuste os marcadores de janela conforme necessrio. Voc tambm 113 pode usar o mtodo {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para 114 animaes ou esmaecimento.</p> 115 116 <p class="note"> 117 <strong>Observao:</strong> a barra de status deve ter, quase sempre, um traado distante da barra de ferramentas 118 principal, exceto em casos em que haja imagens ricas de ponta a ponta, contedo de mdia por trs 119 dessas barras e quando se usa degrad, para garantir que os cones continuem visveis. 120 </p> 121 122 <p>Ao personalizar as barras de navegao e de status, deixe-as transparentes ou modifique 123 somente a barra de status. A barra de navegao deve permanecer preta em todos os outros casos.</p> 124 125 126 <h2 id="Inheritance">Atribuir tema a visualizaes individuais</h3> 127 128 <p>Elementos nas definies do layout XML podem especificar o atributo <code>android:theme</code>, 129 que referencia um recurso do tema. Esse atributo modifica o tema do elemento e quaisquer 130 elementos-filho, o que til para alterar as paletas de cores do tema em uma parte especfica 131 de uma interface.</p> 132
