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>
&lt;resources>
  &lt;!-- inherit from the material theme -->
  &lt;style name="AppTheme" parent="android:Theme.Material">
    &lt;!-- Main theme colors -->
    &lt;!--   your app's branding color (for the app bar) -->
    &lt;item name="android:colorPrimary">@color/primary&lt;/item>
    &lt;!--   darker variant of colorPrimary (for contextual app bars) -->
    &lt;item name="android:colorPrimaryDark">@color/primary_dark&lt;/item>

    &lt;!-- other theme colors -->
    &lt;item name="android:colorButtonNormal">@color/button_normal&lt;/item>
    &lt;item name="android:windowBackground">@color/wbackground&lt;/item>
  &lt;/style>
&lt;/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>&#64;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>