100 lines
3.9 KiB
Plaintext
100 lines
3.9 KiB
Plaintext
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> |