Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge "docs: Material design doc fixes from editorial review." into klp-modular-dev

Browse Source
This commit is contained in:
Robert Ly
2014-06-16 22:50:40 +00:00
committed by Android (Google) Code Review
parent 13bc25bf4c d9a70a7aaa
commit f5135c283f
11 changed files with 322 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/html/preview/material/animations.jd
View File

@@ -2,9 +2,22 @@ page.title=Animations
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#touch">Touch Feedback</a></li>
<li><a href="#reveal">Reveal Effect</a></li>
<li><a href="#transitions">Activity Transitions</a></li>
<li><a href="#curvedmotion">Curved Motion</a></li>
<li><a href="#viewstate">View State Changes</a></li>
<li><a href="#drawabletint">Drawable Tinting</a></li>
</ol>
</div>
</div>
<p>Animations in material design give users feedback on their actions and provide visual
continuity as users interact with your app. The Material theme provides some default animations
continuity as users interact with your app. The material theme provides some default animations
for buttons and activity transitions, and the Android L Developer Preview provides additional
APIs that let you customize these animations and create new ones:</p>
@@ -17,7 +30,7 @@ APIs that let you customize these animations and create new ones:</p>
</ul>
<h2 style="margin-top:35px">Touch Feedback</h2>
<h2 id="touch">Touch Feedback</h2>
<p>In the Android L Developer Preview the default touch feedback animations for buttons use the new
<code>RippleDrawable</code> class, which transitions between different states with a ripple
@@ -28,7 +41,7 @@ it as the background of your view. You can define a <code>RippleDrawable</code>
using the <code>ripple</code> element.</p>
<h2 style="margin-top:35px">Reveal Effect</h2>
<h2 id="reveal">Reveal Effect</h2>
<p>The <code>View.createRevealAnimator</code> method enables you to animate a clipping circle
to reveal or hide a view.</p>
@@ -82,7 +95,7 @@ anim.start();
</pre>
<h2 style="margin-top:35px">Activity Transitions</h2>
<h2 id="transitions">Activity Transitions</h2>
<p>The Android L Developer Preview enables your app to customize the default animations for
activity transitions. You can specify custom animations for enter and exit transitions and for
@@ -109,10 +122,10 @@ transitions of shared elements between activities.</p>
  <strong>Figure 1</strong> - A scene transition with one shared element.
</p>
<h3 style="margin-top:30px">Specify custom transitions</h3>
<h3>Specify custom transitions</h3>
<p>First, enable window content transitions with the <code>android:windowContentTransitions</code>
attribute when you define a style that inherits from the Material theme:</p>
attribute when you define a style that inherits from the material theme:</p>
<pre>
&lt;style name="BaseAppTheme" parent="android:Theme.Material">
@@ -174,14 +187,14 @@ object:</p>
<li><code>Window.setSharedElementExitTransition</code></li>
</ul>
<h3 style="margin-top:30px">Start an activity using transitions</h3>
<h3>Start an activity using transitions</h3>
<p>If you enable transitions and set an exit transition for an activity, the transition is activated
when you launch another activity with the <code>startActivity</code> method. If you have set an
enter transition for the second activity, the transition is also activated when the activity
starts.</p>
<h3 style="margin-top:30px">Shared elements transitions</h3>
<h3>Shared elements transitions</h3>
<p>To make a screne transition animation between two activities that have a shared element:</p>
@@ -219,7 +232,7 @@ imgContainerView.setOnClickListener(new View.OnClickListener() {
<p>For shared dynamic views that you generate in your code, use the <code>View.setViewName</code>
method to specify a common element name in both activities.</p>
<h3 style="margin-top:30px">Multiple shared elements</h3>
<h3>Multiple shared elements</h3>
<p>To make a scene transition animation between two activities that have more than one shared
element, define the shared elements in both layouts with the <code>android:viewName</code>
@@ -237,7 +250,7 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
</pre>
<h2 style="margin-top:35px">Curved Motion</h2>
<h2 id="curvedmotion">Curved Motion</h2>
<p>Animations in material design rely on curves for time interpolation and spatial movement
patterns. The Android L Developer Preview provides new APIs that enable you to define custom
@@ -280,7 +293,7 @@ mAnimator.start();
</pre>
<h2 style="margin-top:35px">View State Changes</h2>
<h2 id="viewstate">View State Changes</h2>
<p>The new <code>StateListAnimator</code> class lets you define animators that run when the state
of a view changes. The following example shows how to define an <code>StateListAnimator</code> as
@@ -343,7 +356,7 @@ to define an <code>AnimatedStateListDrawable</code> as an XML resource:</p>
</pre>
<h2 style="margin-top:35px">Drawable Tinting</h2>
<h2 id="drawabletint">Drawable Tinting</h2>
<p>The Android L Developer Preview enables you to define bitmaps as an alpha mask and to tint
them using a color resource or a theme attribute that resolves to a color resource. You can

28
docs/html/preview/material/compatibility.jd
View File

@@ -2,22 +2,34 @@ page.title=Compatibility
@jd:body
<p>The new material design features (like the Material theme and custom animations) are only
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#materialtheme">Material Theme</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#widgets">UI Widgets</a></li>
<li><a href="#animation">Animation APIs</a></li>
</ol>
</div>
</div>
<p>The new material design features (like the material theme and custom animations) are only
available in the Android L Developer Preview. However, you can design your apps to make use of
these features when running on devices with the Android L Developer Preview and still be
compatible with previous releases of Android.</p>
<h2 style="margin-top:35px">Material Theme</h2>
<h2 id="materialtheme">Material Theme</h2>
<p>The Material theme is only available in the Android L Developer Preview. To configure your
app to use the Material theme on devices running the Android L Developer Preview and an older
<p>The material theme is only available in the Android L Developer Preview. To configure your
app to use the material theme on devices running the Android L Developer Preview and an older
theme on devices running earlier versions of Android:</p>
<ol>
<li>Define a theme that inherits from an older theme (like Holo) in
<code>res/values/styles.xml</code>.</li>
<li>Define a theme with the same name that inherits from the Material theme in
<li>Define a theme with the same name that inherits from the material theme in
<code>res/values-v21/styles.xml</code>.</li>
<li>Set this theme as your app's theme in the manifest file.</li>
</ol>
@@ -26,7 +38,7 @@ theme on devices running earlier versions of Android:</p>
your app will not run on earlier versions of Android.</p>
<h2 style="margin-top:35px">Layouts</h2>
<h2 id="layouts">Layouts</h2>
<p>If the layouts that you design according to the material design guidelines do not use any
of the new XML attributes from the Android L Developer Preview, they will work on previous
@@ -38,13 +50,13 @@ and your alternative layout files for earlier versions of Android inside <code>r
Alternative layouts have the same file name.</p>
<h2 style="margin-top:35px">UI Widgets</h2>
<h2 id="widgets">UI Widgets</h2>
<p>The <code>RecyclerView</code> and <code>CardView</code> widgets are included in the Android L
Developer Preview Support Library, so they are available in earlier versions of Android.</p>
<h2 style="margin-top:35px">Animation APIs</h2>
<h2 id="animation">Animation APIs</h2>
<p>The new APIs for custom animations are only available in the Android L Developer Preview. To
preserve compatibility with earlier verisons of Android, check the system version at runtime before

216
docs/html/preview/material/get-started.jd
View File

@@ -2,135 +2,145 @@ page.title=Get Started
@jd:body
<p>To create material design apps on Android:</p>
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#applytheme">Apply the Material Theme</a></li>
<li><a href="#layouts">Design Your Layouts</a></li>
<li><a href="#depth">Specify Depth in Your Views</a></li>
<li><a href="#widgets">Use the New UI Widgets</a></li>
<li><a href="#apis">Use the New APIs</a></li>
</ol>
</div>
</div>
<p>To create apps with material design:</p>
<ol>
<li>Take a look at the <a href="">material design specification</a>.</li>
<li>Apply the Material <strong>theme</strong> to your app.</li>
<li>Define additional <strong>styles</strong> to customize the Material theme.</li>
<li>Create your <strong>layouts</strong> following material design guidelines.</li>
<li>Specify the <strong>depth</strong> of each component in your layouts to cast appropriate shadows.</li>
<li>Use the new <strong>widgets</strong> for complex views, such as lists and cards.</li>
<li>Use the new <strong>APIs</strong> to customize 3D views and animations in your app.</li>
<li style="margin-bottom:10px">
Take a look at the <a href="">material design specification</a>.</li>
<li style="margin-bottom:10px">
Apply the material <strong>theme</strong> to your app.</li>
<li style="margin-bottom:10px">
Define additional <strong>styles</strong> to customize the material theme.</li>
<li style="margin-bottom:10px">
Create your <strong>layouts</strong> following material design guidelines.</li>
<li style="margin-bottom:10px">
Specify the <strong>depth</strong> for views to cast appropriate shadows.</li>
<li style="margin-bottom:10px">
Use the new <strong>widgets</strong> for complex views, such as lists and cards.</li>
<li style="margin-bottom:10px">
Use the new <strong>APIs</strong> to customize the animations in your app.</li>
</ol>
<h3 style="margin-top:25px;">Update Your App for the Android L Developer Preview</h3>
<h3>Update Your App for the Android L Developer Preview</h3>
<p>To update an existing app for the Android L Developer Preview, design new layouts following
material design guidelines and consider how you can improve the user experience for your app by
incorporating depth, touch feedback and animations in your UI.</p>
<h3 style="margin-top:25px;">Create New Apps for the Android L Developer Preview</h3>
<h3>Create New Apps for the Android L Developer Preview</h3>
<p>If you are creating a new app for the Android L Developer Preview, the material design
guidelines provide you with a solid design framework for your app. Follow these guidelines and
use the new functionality in the Android framework to design and develop your app.</p>
<h2 style="margin-top:35px">Material Theme</h2>
<h2 id="applytheme">Apply the Material Theme</h2>
<div style="float:right;margin-left: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 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>
<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>
<h3 style="margin-top:25px;">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>
<h3 style="margin-top:25px;">Customize the Status Bar</h3>
<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>
<h2 style="margin-top:35px">Material Design</h2>
<p>In addition to applying the Material theme, you also have to:</p>
<ul>
<li>Customize the theme's base colors to fit your brand.</li>
<li>Design your layouts according to material design guidelines.</li>
</ul>
<p>The Android L Developer Preview provides new attributes to make it easy to customize the
Material theme:</p>
<p>To apply the material theme in your app, specify a style that inherits from
<code>android:theme.Material</code>:</p>
<pre>
&lt;!-- res/values/styles.xml -->
&lt;resources>
&lt;!-- inherit from the Material theme -->
&lt;style name="BaseAppTheme" 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:colorBackground">@color/background&lt;/item>
&lt;item name="android:colorAccent">@color/accent&lt;/item>
&lt;item name="android:colorButtonNormal">@color/button_normal&lt;/item>
&lt;item name="android:colorControlHighlight">@color/button_chigh&lt;/item>
&lt;item name="android:windowBackground">@color/wbackground&lt;/item>
&lt!-- your app's theme inherits from the Material theme -->
&lt;style name="AppTheme" parent="android:Theme.Material">
&lt!-- theme customizations -->
&lt;/style>
&lt;/resources>
</pre>
<p>Ensure that you follow material design guidelines when choosing colors for your app.</p>
<p>The material theme provides new system widgets that let you set their color palette and default
animations for touch feedback and activity transitions. For more details, see
<a href="{@docRoot}preview/material/theme.html">Material Theme</a>.</p>
<p>Design your layouts according to the material design specification. In particular, pay
attention to:</p>
<h2 id="layouts">Design Your Layouts</h2>
<p>In addition to applying and customizing the material theme, your layouts should conform to
the material design guidelines. When you design your layouts, pay special attention to the
following:</p>
<ul>
<li>Baseline grids</li>
<li>Keylines</li>
<li>Spacing</li>
<li>Touch target size</li>
<li>Layout structure</li>
<li>Baseline grids</li>
<li>Keylines</li>
<li>Spacing</li>
<li>Touch target size</li>
<li>Layout structure</li>
</ul>
<p>You still define layouts inside XML files using the standard tools from the Android framework.
To specify the depth level of each view in your layout, use the <code>android:elevation</code>
attribute.</p>
For details on the material design guidelines, see the <a href="">material design
specification</a>.</p>
<h2 id="depth">Specify Depth in Your Views</h2>
<p>In the Android L Developer Preview, views can cast shadows. The elevation value of a view
determines the size of its shadow. To set the elevation of a view, use the
<code>android:elevation</code> attribute in your layouts:</p>
<pre>
&lt;Button
android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
<strong>android:elevation</strong>="10dp" />
</pre>
<p>For more details, see <a href="{@docRoot}preview/material/views-shadows.html">Views and
Shadows</a>.</p>
<h2 id="widgets">Use the New UI Widgets</h2>
<p>The Android L Developer Preview includes two new UI widgets for complex views,
<code>RecyclerView</code> and <code>CardView</code>. <code>RecyclerView</code> is a more advanced
version of <code>ListView</code> that provides performance improvements and is easier to use.
<code>CardView</code> lets you show pieces of information inside cards with a consistent look
across apps. To include a <code>CardView</code> in your layout:</p>
<pre>
&lt;android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
&lt;/android.support.v7.widget.CardView>
</pre>
<p>For more information, see <a href="{@docRoot}preview/material/ui-widgets.html">UI Widgets</a>.</p>
<h2 id="apis">Use the APIs to Customize Your Animations</h2>
<p>The Android L Developer Preview includes new APIs to create custom animations in your app.
For example, you can enable activity transitions and define an exit transition inside an
activity:</p>
<pre>
// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
</pre>
<p>When you start another activity from this activity, the exit transition is activated.</p>
<p>To learn about all the features in the new APIs, see <a
href="{@docRoot}preview/material/animations.html">Animations</a>.</p>

91
docs/html/preview/material/index.jd
View File

@@ -19,9 +19,9 @@ design apps:</p>
</ul>
<h3 style="margin-top:30px">Material Theme</h3>
<h3>Material Theme</h3>
<p>The Material theme provides a new style for your app, system widgets that let you set
<p>The material theme provides a new style for your app, system widgets that let you set
their color palette, and default animations for touch feedback and activity transitions.</p>
<!-- two columns -->
@@ -42,7 +42,7 @@ their color palette, and default animations for touch feedback and activity tran
</div>
<h3 style="margin-top:30px">New Widgets</h3>
<h3>New Widgets</h3>
<p>The Android L Developer Preview includes two new widgets for displaying complex views:</p>
@@ -50,8 +50,8 @@ their color palette, and default animations for touch feedback and activity tran
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}preview/material/images/list_mail.png" style="width:250px;"/>
<p>The new <code>RecyclerView</code> widget is a container for large sets of views that can be
recycled and scrolled very efficiently.</p>
<p>The new <code>RecyclerView</code> widget is a more advanced version of <code>ListView</code>
provides performance improvements for dynamic views and is easier to use.</p>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}preview/material/images/card_travel.png" style="width:250px;"/>
@@ -62,21 +62,13 @@ their color palette, and default animations for touch feedback and activity tran
</div>
<h3 style="margin-top:30px">3D Views and Shadows</h3>
<h3>View Shadows</h3>
<p>In addition to the X and Y components, views in the Android L Developer Preview have a Z
component. This new component represents the elevation of a view, which determines the size of
its shadow: views with higher Z values cast bigger shadows.</p>
<h3 style="margin-top:30px">Animations</h3>
<p>The Android L Developer Preview provides new APIs that let you create custom animations for
touch feedback in UI controls, view state changes, and activity transitions.</p>
<!-- two columns -->
<div style="width:700px;margin-left:12px;margin-top:25px;margin-bottom:5px">
<div style="float:left;width:340px;margin-left:0px;margin-right:0px;">
<div style="width:290px;margin-left:35px;float:right">
<div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay>
<source src="/preview/material/videos/ContactsAnim.mp4"/>
@@ -84,52 +76,41 @@ touch feedback in UI controls, view state changes, and activity transitions.</p>
<source src="/preview/material/videos/ContactsAnim.ogv"/>
</video>
</div>
</div>
<div style="float:left;width:340px;margin-right:0px;">
<div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay>
<source src="/preview/material/videos/Dial.mp4"/>
<source src="/preview/material/videos/Dial.webm"/>
<source src="/preview/material/videos/Dial.ogv"/>
</video>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<em>Click on the device screen to replay the movie</em>
</div>
</div>
<br style="clear:left"/>
</div>
<div style="text-align:center;font-size:10pt;margin-right:35px">
<em>Click on the device screen to replay the movie</em>
</div>
<h3>Animations</h3>
<!-- three columns -->
<div style="width:700px;margin-top:25px;margin-bottom:0px">
<div style="float:left;width:200px;margin-left:0px;margin-right:0px;">
<p>Respond to touch events in your views with <strong>touch feedback</strong> animations.</p>
</div>
<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
<p>Hide and show views with <strong>reveal effect</strong> animations.</p>
</div>
<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
<p>Switch between activities with custom <strong>activity transition</strong> animations.</p>
</div>
<br style="clear:left"/>
</div>
<!-- three columns -->
<div style="width:700px;margin-top:0px;margin-bottom:20px">
<div style="float:left;width:200px;margin-left:0px;margin-right:0px;">
<p>Create custom animation patterns with <strong>curved motion</strong>.</p>
</div>
<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
<p>Animate changes in one or more view properties with <strong>view state change</strong> animations.</p>
</div>
<div style="float:left;margin-left:25px;width:200px;margin-right:0px;">
<p>Show animations in <strong>state list drawables</strong> between view state changes.</p>
</div>
<br style="clear:left"/>
</div>
<p>The Android L Developer Preview provides new APIs that let you create custom animations for
touch feedback in UI controls, view state changes, and activity transitions.</p>
<p>The new animation APIs in the Android L Developer Preview let you:</p>
<ul>
<li style="margin-bottom:15px">
Respond to touch events in your views with <strong>touch feedback</strong> animations.
</li>
<li style="margin-bottom:15px">
Hide and show views with <strong>reveal effect</strong> animations.
</li>
<li style="margin-bottom:15px">
Switch between activities with custom <strong>activity transition</strong> animations.
</li>
<li style="margin-bottom:15px">
Create custom animation patterns with <strong>curved motion</strong>.
</li>
<li style="margin-bottom:15px">
Animate changes in one or more view properties with <strong>view state change</strong> animations.
</li>
<li style="margin-bottom:15px">
Show animations in <strong>state list drawables</strong> between view state changes.
</li>
</ul>
<h3 style="margin-top:30px">New Capabilities for Drawables</h3>
<h3>New Capabilities for Drawables</h3>
<p>The Android L Developer Preview supports <strong>drawable tinting</strong>: you can define
bitmaps as an alpha mask and tint them using a color resource. You can create these assets only

100
docs/html/preview/material/theme.jd Normal file
View File

@@ -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>
&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>

15
docs/html/preview/material/ui-widgets.jd
View File

@@ -2,13 +2,22 @@ page.title=UI Widgets
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#recyclerview">RecyclerView</a></li>
<li><a href="#cardview">CardView</a></li>
</ol>
</div>
</div>
<p>The support library in the Android L Developer Preview contains two new widgets,
<code>RecyclerView</code> and <code>CardView</code>. Use these widgets to show complex lists
and cards in your app. These widgets have material design styles and animations by default.</p>
<h2 style="margin-top:35px">RecyclerView</h2>
<h2 id="recyclerview">RecyclerView</h2>
<p><code>RecyclerView</code> is a more advanced version of <code>ListView</code>. This widget is
a container for large sets of views that can be recycled and scrolled very efficiently. Use the
@@ -62,7 +71,7 @@ performance by avoiding the creation of unnecessary views or performing expensiv
<p>To create a custom layout, you extend the <code>RecyclerView.LayoutManager</code> class.</p>
<h3 style="margin-top:30px">Examples</h3>
<h3>Examples</h3>
<p>To include a <code>RecyclerView</code> in your layout:</p>
@@ -155,7 +164,7 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
</pre>
<h2 style="margin-top:35px">CardView</h2>
<h2 id="cardview">CardView</h2>
<p><code>CardView</code> extends the <code>FrameLayout</code> class and lets you show information
inside a card with optional rounded corners:</p>

BIN
docs/html/preview/material/videos/Dial.mp4
View File

Binary file not shown.

BIN
docs/html/preview/material/videos/Dial.ogv
View File

Binary file not shown.

BIN
docs/html/preview/material/videos/Dial.webm
View File

Binary file not shown.

18
docs/html/preview/material/views-shadows.jd
View File

@@ -2,14 +2,24 @@ page.title=Views and Shadows
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#elevation">View Elevation</a></li>
<li><a href="#shadows">Shadows and Outlines</a></li>
<li><a href="#clip">Clipping Views</a></li>
</ol>
</div>
</div>
<p>In material design apps, depth has meaning. You should assign higher elevation values to more
<p>In apps with material design, depth has meaning. You should assign higher elevation values to more
important UI elements in your app. The elevation value of a view determines the size of its
shadow: views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane
under an orthographic projection (the views do not scale for different values of Z).</p>
<h2 style="margin-top:35px">View Elevation</h2>
<h2 id="elevation">View Elevation</h2>
<p>The Z value for a view has two components, elevation and translation. The elevation is the
static component, and the translation is used for animations:</p>
@@ -29,7 +39,7 @@ static component, and the translation is used for animations:</p>
<code>px</code>).</p>
<h2 style="margin-top:35px">Shadows and Outlines</h2>
<h2 id="shadows">Shadows and Outlines</h2>
<p>The bounds of a view's background drawable determine the default shape of its shadow. To define
a custom shape for a shadow, such as an oval, use the <code>View.setOutline</code> method:</p>
@@ -55,7 +65,7 @@ myView.setOutline(outline);
<p>To prevent a view from casting a shadow, set its outline to <code>null</code>.</p>
<h2 style="margin-top:35px">Clipping Views</h2>
<h2 id="clip">Clipping Views</h2>
<p>The Android L Developer Preview lets you clip a view to its outline area using the
<code>View.setClipToOutline</code> method. Only rectangle, circle, and round rectangle outlines

3
docs/html/preview/preview_toc.cs
View File

@@ -19,6 +19,7 @@
</a></div>
<ul>
<li><a href="<?cs var:toroot ?>preview/material/get-started.html">Get Started</a></li>
<li><a href="<?cs var:toroot ?>preview/material/theme.html">Material Theme</a></li>
<li><a href="<?cs var:toroot ?>preview/material/ui-widgets.html">UI Widgets</a></li>
<li><a href="<?cs var:toroot ?>preview/material/views-shadows.html">Views and Shadows</a></li>
<li><a href="<?cs var:toroot ?>preview/material/animations.html">Animations</a></li>
@@ -83,4 +84,4 @@
<a href="<?cs var:toroot ?>preview/tos.html">Terms of Service</a>
</div>
</li>
</ul>
</ul>