diff options
Diffstat (limited to 'docs/html/preview/material/theme.jd')
| -rw-r--r-- | docs/html/preview/material/theme.jd | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/docs/html/preview/material/theme.jd b/docs/html/preview/material/theme.jd new file mode 100644 index 0000000..740bf56 --- /dev/null +++ b/docs/html/preview/material/theme.jd @@ -0,0 +1,102 @@ +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 Colot 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>
\ No newline at end of file |