Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit d9a70a7a authored by Ricardo Cervera's avatar Ricardo Cervera
Browse files

docs: Material design doc fixes from editorial review. 

Change-Id: I2a7a9d39e85cc9c9d5f19f7265aaa6dc8c5dba12
parent d3843038

docs/html/preview/material/animations.jd

+25 −12
Original line number Diff line number Diff line
@@ -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

docs/html/preview/material/compatibility.jd

+20 −8
Original line number Diff line number Diff line
@@ -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

docs/html/preview/material/get-started.jd

+101 −91
Original line number Diff line number Diff line
@@ -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>To apply the material theme in your app, specify a style that inherits from

<code>android:theme.Material</code>:</p>



<p>The new Material theme provides:</p>

<pre>

&lt;!-- res/values/styles.xml -->

&lt;resources>

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



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

<h2 id="layouts">Design Your Layouts</h2>



<p>The Material theme is defined as:</p>

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

<li>Baseline grids</li>

<li>Keylines</li>

<li>Spacing</li>

<li>Touch target size</li>

<li>Layout structure</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>You still define layouts inside XML files using the standard tools from the Android framework.

For details on the material design guidelines, see the <a href="">material design

specification</a>.</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>

<h2 id="depth">Specify Depth in Your Views</h2>



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

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



<h3 style="margin-top:25px;">Customize the Status Bar</h3>

<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>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>For more details, see <a href="{@docRoot}preview/material/views-shadows.html">Views and

Shadows</a>.</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 id="widgets">Use the New UI Widgets</h2>



<h2 style="margin-top:35px">Material Design</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>



<p>In addition to applying the Material theme, you also have to:</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>



<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>For more information, see <a href="{@docRoot}preview/material/ui-widgets.html">UI Widgets</a>.</p>



<p>The Android L Developer Preview provides new attributes to make it easy to customize the

Material theme:</p>



<pre>

&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;/style>

&lt;/resources>

</pre>

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



<p>Ensure that you follow material design guidelines when choosing colors for your app.</p>

<pre>

// inside your activity

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);



<p>Design your layouts according to the material design specification. In particular, pay

attention to:</p>

// set an exit transition

getWindow().setExitTransition(new Explode());

</pre>



<ul>

  <li>Baseline grids</li>

  <li>Keylines</li>

  <li>Spacing</li>

  <li>Touch target size</li>

  <li>Layout structure</li>

</ul>

<p>When you start another activity from this activity, the exit transition is activated.</p>



<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>
 
 No newline at end of file
 
<p>To learn about all the features in the new APIs, see <a

href="{@docRoot}preview/material/animations.html">Animations</a>.</p>
 
 No newline at end of file

docs/html/preview/material/index.jd

+36 −55
Original line number Diff line number Diff line
@@ -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 style="font-size:10pt;margin-left:20px;margin-bottom:30px">

    <em>Click on the device screen to replay the movie</em>

  </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>

</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

docs/html/preview/material/theme.jd

0 → 100644
+100 −0

File added.

Preview size limit exceeded, changes collapsed.