| page.title=Material Theme |
| |
| @jd:body |
| |
| <div id="qv-wrapper"> |
| <div id="qv"> |
| <h2>In this document</h2> |
| <ol> |
| <li><a href="#colorpalette">Customize the Color Palette</a></li> |
| <li><a href="#statusbar">Customize the Status Bar</a></li> |
| <li><a href="#inheritance">Theme Individual Views</a></li> |
| </ol> |
| </div> |
| </div> |
| |
| <p>The new material theme provides:</p> |
| |
| <ul> |
| <li>System widgets that let you set their color palette</li> |
| <li>Touch feedback animations for the system widgets</li> |
| <li>Activity transition animations</li> |
| </ul> |
| |
| <p>You can customize the look of the material theme |
| according to your brand identity with a color palette you control. You can tint the action bar and |
| the status bar using theme attributes, as shown in Figure 1.</p> |
| |
| <div style="float:right;margin-left:25px;margin-top:-50px"> |
| <img src="{@docRoot}preview/material/images/ThemeColors.png" style="width:250px"/> |
| <p class="img-caption" style="margin-bottom:0px"> |
| <strong>Figure 1.</strong> Customizing the material theme.</p> |
| </div> |
| |
| <p>The system widgets have a new design and touch feedback animations. You can customize the |
| color palette, the touch feedback animations, and the activity transitions for your app.</p> |
| |
| <p>The material theme is defined as:</p> |
| |
| <ul> |
| <li><code>@android:style/Theme.Material</code> (dark version)</li> |
| <li><code>@android:style/Theme.Material.Light</code> (light version)</li> |
| <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> |
| </ul> |
| |
| <p>For a list of material styles that you can use, see the API reference for |
| <code>android.R.style</code>.</p> |
| |
| <p class="note"> |
| <strong>Note:</strong> The material theme is only available in the Android L Developer Preview. |
| For more information, see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>. |
| </p> |
| |
| |
| <h2 id="colorpalette">Customize the Color Palette</h2> |
| |
| <p style="margin-bottom:30px">To customize the theme's base colors to fit your brand, define |
| your custom colors using theme attributes when you inherit from the material theme:</p> |
| |
| <pre> |
| <resources> |
| <!-- inherit from the material theme --> |
| <style name="AppTheme" parent="android:Theme.Material"> |
| <!-- Main theme colors --> |
| <!-- your app's branding color (for the app bar) --> |
| <item name="android:colorPrimary">@color/primary</item> |
| <!-- darker variant of colorPrimary (for status bar, contextual app bars) --> |
| <item name="android:colorPrimaryDark">@color/primary_dark</item> |
| <!-- theme UI controls like checkboxes and text fields --> |
| <item name="android:colorAccent">@color/accent</item> |
| </style> |
| </resources> |
| </pre> |
| |
| |
| <h2 id="statusbar">Customize the Status and Navigation Bar</h2> |
| |
| <p>The material theme lets you easily customize the status bar, so you can specify a |
| color that fits your brand and provides enough contrast to show the white status icons. To |
| set a custom color for the status bar, use the <code>android:statusBarColor</code> attribute when |
| you extend the material theme. By default, <code>android:statusBarColor</code> inherits the |
| value of <code>android:colorPrimaryDark</code>.</p> |
| |
| <p>To handle the color of the status bar yourself (for example, by adding a gradient in the |
| background), set the <code>android:statusBarColor</code> attribute to |
| <code>@android:color/transparent</code> and adjust the window flags as required. You can |
| also use the <code>Window.setStatusBarColor</code> method for animations or fading.</p> |
| |
| <p class="note"><strong>Note:</strong> |
| The status bar should almost always have a clear delineation from the primary toolbar, except for |
| full-bleed imagery cases and when you use a gradient as a protection. |
| </p> |
| |
| <p>When customizing the navigation and status bars, make them both transparent or modify only |
| the status bar. The navigation bar should remain black in all other cases.</p> |
| |
| |
| <h2 id="inheritance">Theme Individual Views</h3> |
| |
| <p>Elements in XML layout definitions can specify the <code>android:theme</code> attribute, |
| which references a theme resource. This attribute modifies the theme for the element and any |
| elements inflated below it, which is useful to alter theme color palettes in a specific portion |
| of an interface.</p> |