diff options
Diffstat (limited to 'docs/html/preview/material/theme.jd')
| -rw-r--r-- | docs/html/preview/material/theme.jd | 100 |
1 files changed, 100 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..b954960 --- /dev/null +++ b/docs/html/preview/material/theme.jd @@ -0,0 +1,100 @@ +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 Inheritance</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>The Android L Developer Preview lets you easily customize the look of the material theme +according to your brand identity with a color palette you control. You can tint the app bar and +the status bar using theme attributes, as shown in Figure 1.</p> + +<div style="float:right;margin-left:25px;margin-top:-25px"> +<img src="{@docRoot}preview/material/images/ThemeColors.png" style="width:250px"/> +<p class="img-caption"><strong>Figure 1.</strong> Customizing the material theme.</p> +</div> + +<p>The system widgets have a new design and touch feedback animations. Activity transitions help +users navigate your app by providing visual continuity. 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.styles</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>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 contextual app bars) --> + <item name="android:colorPrimaryDark">@color/primary_dark</item> + + <!-- other theme colors --> + <item name="android:colorButtonNormal">@color/button_normal</item> + <item name="android:windowBackground">@color/wbackground</item> + </style> +</resources> +</pre> + + +<h2 id="statusbar">Customize the Status Bar</h2> + +<p>The material theme lets you easily customize the status bar, so you can specify a +color which 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.</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>. 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> + + +<h2 id="inheritance">Theme Inheritance</h3> + +<p>In the Android L Developer Preview, 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 |