diff options
Diffstat (limited to 'docs/html/preview/material')
17 files changed, 1087 insertions, 0 deletions
diff --git a/docs/html/preview/material/animations.jd b/docs/html/preview/material/animations.jd new file mode 100644 index 0000000..cee782a --- /dev/null +++ b/docs/html/preview/material/animations.jd @@ -0,0 +1,378 @@ +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 +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> + +<ul> +<li>Touch feedback</li> +<li>Reveal effect</li> +<li>Activity transitions</li> +<li>Curved motion</li> +<li>View state changes</li> +</ul> + + +<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 +effect.</p> + +<p>To use this functionality in your custom views, create a <code>RippleDrawable</code> and set +it as the background of your view. You can define a <code>RippleDrawable</code> as an XML resource +using the <code>ripple</code> element.</p> + + +<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> + +<p>To reveal a previously invisible view using this effect:</p> + +<pre> +// previously invisible view +View myView = findViewById(R.id.my_view); + +// get the center for the clipping circle +int cx = (myView.getLeft() + myView.getRight()) / 2; +int cy = (myView.getTop() + myView.getBottom()) / 2; + +// get the final radius for the clipping circle +int finalRadius = myView.getWidth(); + +// create and start the animator for this view +// (the start radius is zero) +ValueAnimator anim = myView.createRevealAnimator(cx, cy, 0, finalRadius); +anim.start(); +</pre> + +<p>To hide a previously visible view using this effect:</p> + +<pre> +// previously visible view +final View myView = findViewById(R.id.my_view); + +// get the center for the clipping circle +int cx = (myView.getLeft() + myView.getRight()) / 2; +int cy = (myView.getTop() + myView.getBottom()) / 2; + +// get the initial radius for the clipping circle +int initialRadius = myView.getWidth(); + +// create the animation (the final radius is zero) +ValueAnimator anim = myView.createRevealAnimator(cx, cy, initialRadius, 0); + +// make the view invisible when the animation is done +anim.addListener(new AnimatorListenerAdapter() { + @Override + public void onAnimationEnd(Animator animation) { + super.onAnimationEnd(animation); + myView.setVisibility(View.INVISIBLE); + } +}); + +// start the animation +anim.start(); +</pre> + + +<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 +transitions of shared elements between activities.</p> + +<ul> + <li>An <strong>enter</strong> transition determines how views in an activity enter the scene. + For example, in the <em>explode</em> enter transition the views enter the scene from outside + and fly in towards the center of the screen.</li> + + <li>An <strong>exit</strong> transition determines how views in an activity exit the scene. For + example, in the <em>explode</em> exit transition the views exit the scene away from the + center.</li> + + <li>A <strong>shared elements</strong> transition determines how views that are shared between + two activities transition between these activities. For example, if two activities have the same + image in different positions and sizes, the <em>moveImage</em> shared element transition + translates and scales the image smoothly between these activities.</li> +</ul> + +<img src="/preview/material/images/SceneTransition.png" alt="" + id="figure1" style="width:600px;margin-top:20px"/> +<p class="img-caption"> + <strong>Figure 1</strong> - A scene transition with one shared element. +</p> + +<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> + +<pre> +<style name="BaseAppTheme" parent="android:Theme.Material"> + <!-- enable window content transitions --> + <item name="android:windowContentTransitions">true</item> + + <!-- specify enter and exit transitions --> + <item name="android:windowEnterTransition">@transition/explode</item> + <item name="android:windowExitTransition">@transition/explode</item> + + <!-- specify shared element transitions --> + <item name="android:windowSharedElementEnterTransition"> + @transition/move_image</item> + <item name="android:windowSharedElementExitTransition"> + @transition/move_image</item> +</style> +</pre> + +<p>You can also specify enter, exit, and shared element transitions in your style definition. +The <code>move_image</code> transition in this example is defined as follows:</p> + +<pre> +<!-- res/transition/move_image.xml --> +<!-- (see also Shared Transitions below) --> +<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> + <moveImage> + <targets> + <!-- shared view in the first activity --> + <target android:targetId="@id/image_small" /> + <!-- shared view in the second activity --> + <target android:targetId="@id/image_big" /> + </targets> + </moveImage> +</transitionSet> +</pre> + +<p>The <code>moveImage</code> element corresponds to the <code>android.transition.MoveImage</code> +class. For more information, see the API reference for <code>android.transition.Transition</code>. +</p> + +<p>To enable window content transitions in your code instead, call the +<code>Window.requestFeature</code> method:</p> + +<pre> +// inside your activity +getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); + +// set an exit transition +getWindow().setExitTransition(new Explode()); +</pre> + +<p>To specify transitions in your code, call these methods with a <code>Transition</code> +object:</p> + +<ul> + <li><code>Window.setEnterTransition</code></li> + <li><code>Window.setExitTransition</code></li> + <li><code>Window.setSharedElementEnterTransition</code></li> + <li><code>Window.setSharedElementExitTransition</code></li> +</ul> + +<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>Shared elements transitions</h3> + +<p>To make a screne transition animation between two activities that have a shared element:</p> + +<ol> +<li>Enable window content transitions in your style.</li> +<li>Specify a shared elements transition in your style.</li> +<li>Define your transition as an XML resource specifying the IDs of the target views.</li> +<li>Assign a common name to the shared elements in both layouts with the + <code>android:viewName</code> attribute.</li> +<li>Use the <code>ActivityOptions.makeSceneTransitionAnimation</code> method.</li> +</ol> + +<pre> +// get the element that receives the click event +final View imgContainerView = findViewById(R.id.img_container); + +// get the common element for the transition in this activity +final View androidRobotView = findViewById(R.id.android_robot_img); + +// define a click listener +imgContainerView.setOnClickListener(new View.OnClickListener() { + @Override + public void onClick(View view) { + Intent intent = new Intent(this, Activity2.class); + // create the transition animation - the images in the layouts + // of both activities are defined with android:viewName="robot" + ActivityOptions options = ActivityOptions + .makeSceneTransitionAnimation(this, androidRobotView, "robot"); + // start the new activity + startActivity(intent, options.toBundle()); + } +}); +</pre> + +<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>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> +attribute (or use the <code>View.setViewName</code> in both activities), and create an +<code>ActivityOptions</code> object as follows:</p> + +<pre> +ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, + new Pair[] { + Pair.create(view1, "agreedName1"), + Pair.create(view2, "agreedName2"), + ... + } +); +</pre> + + +<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 +timing curves and curved motion patterns for animations.</p> + +<p>The <code>PathInterpolator</code> class is a new interpolator based on a Bézier curve or a +<code>Path</code> object. This interpolator specifies a motion curve in a 1x1 square, with anchor +points at (0,0) and (1,1) and control points as specified using the constructor arguments. You can +also define a <code>PathInterpolator</code> as an XML resource:</p> + +<pre> +<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" + android:controlX1="0.4" + android:controlY1="0" + android:controlX2="1" + android:controlY2="1"/> +</pre> + +<p>The Android L Developer Preview provides XML resources for the three basic curves in the +material design specification:</p> + +<ul> + <li><code>@interpolator/fast_out_linear_in.xml</code></li> + <li><code>@interpolator/fast_out_slow_in.xml</code></li> + <li><code>@interpolator/linear_out_slow_in.xml</code></li> +</ul> + +<p>You can pass a <code>PathInterpolator</code> object to the +<code>Animation.setInterpolation</code> method.</p> + +<p>The <code>ObjectAnimator</code> class has new constructors that enable you to animate +coordinates along a path using two or more properties at once. For example, the following animator +uses a <code>Path</code> object to animate the X and Y properties of a view:</p> + +<pre> +ObjectAnimator mAnimator; +mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); +... +mAnimator.start(); +</pre> + + +<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 +an XML resource:</p> + +<pre> +<!-- animate the elevation property of a view when pressed --> +<selector xmlns:android="http://schemas.android.com/apk/res/android"> + <item android:state_pressed="true"> + <set> + <objectAnimator android:propertyName="elevation" + android:duration="100" + android:valueTo="60" + android:valueType="floatType"/> + <!-- you could have other objectAnimator elements + here for "x" and "y", or other properties --> + </set> + </item> + <item android:state_enabled="true" + android:state_pressed="false" + android:state_focused="true"> + <set> + <objectAnimator android:propertyName="elevation" + android:duration="100" + android:valueTo="10" + android:valueType="floatType"/> + </set> + </item> +</selector> +</pre> + +<p>The new <code>AnimatedStateListDrawable</code> class lets you create drawables that show +animations between state changes of the associated view. Some of the system widgets in the +Android L Developer Preview use these animations by default. The following example shows how +to define an <code>AnimatedStateListDrawable</code> as an XML resource:</p> + +<pre> +<!-- res/drawable/myanimstatedrawable.xml --> +<animated-selector + xmlns:android="http://schemas.android.com/apk/res/android"> + + <!-- provide a different drawable for each state--> + <item android:id="@+id/pressed" android:drawable="@drawable/drawableP" + android:state-pressed="true"/> + <item android:id="@+id/focused" android:drawable="@drawable/drawableF" + android:state-focused="true"/> + <item android:id="@id/default" + android:drawable="@drawable/drawableD"/> + + <!-- specify a transition --> + <transition android:fromId="@+id/default" android:toId="@+id/pressed"> + <animation-list> + <item android:duration="15" android:drawable="@drawable/dt1"/> + <item android:duration="15" android:drawable="@drawable/dt2"/> + ... + </animation-list> + </transition> + ... +</animated-selector> +</pre> + + +<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 +create these assets only once and color them automatically to match your theme.</p> + +<p>To apply a tint to a bitmap in your code, use the <code>setTint</code> method in these +classes:</p> + +<ul> +<li><code>PaintDrawable</code></li> +<li><code>NinePatchDrawable</code></li> +<li><code>RippleDrawable</code></li> +</ul> + +<p>In your layouts, use the <code>android:tint</code> attribute instead.</p> + +<p>The <code>setTint</code> method also lets you set the tint blending mode for +<code>NinePatchDrawable</code> and <code>RippleDrawable</code> objects in your code. To set the +tint mode in your layouts, use the <code>android:tintMode</code> attribute.</p> diff --git a/docs/html/preview/material/compatibility.jd b/docs/html/preview/material/compatibility.jd new file mode 100644 index 0000000..ce04e9e --- /dev/null +++ b/docs/html/preview/material/compatibility.jd @@ -0,0 +1,63 @@ +page.title=Compatibility + +@jd:body + +<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 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 +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 +<code>res/values-v21/styles.xml</code>.</li> +<li>Set this theme as your app's theme in the manifest file.</li> +</ol> + +<p class="note"><strong>Note:</strong> If you do not provide an alternative theme in this manner, +your app will not run on earlier versions of Android.</p> + + +<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 +versions of Android. Otherwise, you can provide alternative layouts. You can also provide +alternative layouts to customize how your app looks on earlier versions of Android.</p> + +<p>Create your layout files for the Android L Developer Preview inside <code>res/layout-v21/</code> +and your alternative layout files for earlier versions of Android inside <code>res/layout/</code>. +Alternative layouts have the same file name.</p> + + +<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 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 +you invoke these APIs.</p>
\ No newline at end of file diff --git a/docs/html/preview/material/get-started.jd b/docs/html/preview/material/get-started.jd new file mode 100644 index 0000000..9c0e55d --- /dev/null +++ b/docs/html/preview/material/get-started.jd @@ -0,0 +1,146 @@ +page.title=Get Started + +@jd:body + +<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 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>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>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 id="applytheme">Apply the Material Theme</h2> + +<p>To apply the material theme in your app, specify a style that inherits from +<code>android:theme.Material</code>:</p> + +<pre> +<!-- res/values/styles.xml --> +<resources> + <!-- your app's theme inherits from the Material theme --> + <style name="AppTheme" parent="android:Theme.Material"> + <!-- theme customizations --> + </style> +</resources> +</pre> + +<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> + + +<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> +</ul> + +<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> + + +<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> +<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> +<android.support.v7.widget.CardView + android:id="@+id/card_view" + android:layout_width="200dp" + android:layout_height="200dp" + card_view:cardCornerRadius="3dp"> + ... +</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>
\ No newline at end of file diff --git a/docs/html/preview/material/images/MaterialDark.png b/docs/html/preview/material/images/MaterialDark.png Binary files differnew file mode 100644 index 0000000..6a72280 --- /dev/null +++ b/docs/html/preview/material/images/MaterialDark.png diff --git a/docs/html/preview/material/images/MaterialLight.png b/docs/html/preview/material/images/MaterialLight.png Binary files differnew file mode 100644 index 0000000..0e85528 --- /dev/null +++ b/docs/html/preview/material/images/MaterialLight.png diff --git a/docs/html/preview/material/images/RecyclerView.png b/docs/html/preview/material/images/RecyclerView.png Binary files differnew file mode 100644 index 0000000..364951d --- /dev/null +++ b/docs/html/preview/material/images/RecyclerView.png diff --git a/docs/html/preview/material/images/SceneTransition.png b/docs/html/preview/material/images/SceneTransition.png Binary files differnew file mode 100644 index 0000000..ecaf472 --- /dev/null +++ b/docs/html/preview/material/images/SceneTransition.png diff --git a/docs/html/preview/material/images/ThemeColors.png b/docs/html/preview/material/images/ThemeColors.png Binary files differnew file mode 100644 index 0000000..bbcecf2 --- /dev/null +++ b/docs/html/preview/material/images/ThemeColors.png diff --git a/docs/html/preview/material/images/card_travel.png b/docs/html/preview/material/images/card_travel.png Binary files differnew file mode 100644 index 0000000..a804ca0 --- /dev/null +++ b/docs/html/preview/material/images/card_travel.png diff --git a/docs/html/preview/material/images/list_mail.png b/docs/html/preview/material/images/list_mail.png Binary files differnew file mode 100644 index 0000000..ca53ee1 --- /dev/null +++ b/docs/html/preview/material/images/list_mail.png diff --git a/docs/html/preview/material/index.jd b/docs/html/preview/material/index.jd new file mode 100644 index 0000000..b7abcb4 --- /dev/null +++ b/docs/html/preview/material/index.jd @@ -0,0 +1,117 @@ +page.title=Material Design +page.type=design + +@jd:body + +<p itemprop="description">The Android L Developer Preview includes support for material design apps. Material design +is a comprehensive guide for visual, motion, and interaction design across platforms and devices. +To use material design in your Android apps, follow the guidelines defined in the +<a href="">material design specification</a> and use the new components and functionality +available in the Android L Developer Preview.</p> + +<p>The Android L Developer Preview provides the following elements for you to build material +design apps:</p> + +<ul> + <li>A new theme</li> + <li>New widgets for complex views</li> + <li>New APIs for custom shadows and animations</li> +</ul> + + +<h3>Material Theme</h3> + +<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 --> +<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/MaterialDark.png" style="width:250px;"/> + <div style="width:140px;margin:0 auto"> + <p style="margin-top:8px">Dark Material theme</p> + </div> +</div> +<div style="float:left;width:250px;margin-right:0px;"> + <img src="{@docRoot}preview/material/images/MaterialLight.png" style="width:250px;"/> + <div style="width:140px;margin:0 auto"> + <p style="margin-top:8px">Light Material theme</p> + </div> +</div> +<br style="clear:left"/> +</div> + + +<h3>New Widgets</h3> + +<p>The Android L Developer Preview includes two new widgets for displaying complex views:</p> + +<!-- two columns --> +<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 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;"/> + <p>The new <code>CardView</code> widget lets you display important pieces of information inside + cards that have a consistent look and feel.</p> +</div> +<br style="clear:left"/> +</div> + + +<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> + +<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"/> + <source src="/preview/material/videos/ContactsAnim.webm"/> + <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> + +<h3>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> + +<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>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 +once and color each instance to match your theme.</p> 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 diff --git a/docs/html/preview/material/ui-widgets.jd b/docs/html/preview/material/ui-widgets.jd new file mode 100644 index 0000000..f18bff9 --- /dev/null +++ b/docs/html/preview/material/ui-widgets.jd @@ -0,0 +1,197 @@ +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 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 +<code>RecyclerView</code> widget when you have lists with elements that change dynamically.</p> + +<p><code>RecyclerView</code> is easy to use, because it provides:</p> + +<ul> + <li>A set of layout managers for positioning items</li> + <li>Default animations for common item operations</li> +</ul> + +<p>You also have the flexibility to define custom layout managers and animations for this +widget.</p> + +<p>To use the <code>RecyclerView</code> widget, you have to specify an adapter and a layout +manager. An <strong>adapter</strong> provides a binding from a dataset to views that are displayed +within a <code>RecyclerView</code>. For example, if your dataset is an array of strings displayed +as <code>TextView</code> items, the layout manager asks the adapter to: +</p> + +<ul> + <li>Set the text of an existing <code>TextView</code> to one of the strings in the dataset</li> + <li>Create new <code>TextView</code> objects</li> + <li>Determine the size of the dataset</li> +</ul> + +<p>To create an adapter, you extend the <code>RecyclerView.Adapter</code> class. The details of +the implementation depend on the specifics of your dataset and the type of views. Fore more +information, see the examples below.</p> + +<img src="/preview/material/images/RecyclerView.png" alt="" id="figure1" style="width:550px"/> +<p class="img-caption"> + <strong>Figure 1</strong> - The <code>RecyclerView</code> widget. +</p> + +<p>A <strong>layout manager</strong> positions item views inside a <code>RecyclerView</code> and +determines when to reuse item views that are no longer visible to the user. To reuse (or +<em>recycle</em>) a view, a layout manager may ask the adapter to replace the content of the +view with a different element from the dataset. Recycling views in this manner improves +performance by avoiding the creation of unnecessary views or performing expensive +<code>findViewById</code> lookups. +</p> + +<p><code>RecyclerView</code> provides two layout managers you can use:</p> + +<ul> + <li><code>LinearLayoutManager</code> shows the items in a vertically scrolling list.</li> + <li><code>GridLayoutManager</code> shows the items in a rectangular grid.</li> +</ul> + +<p>To create a custom layout, you extend the <code>RecyclerView.LayoutManager</code> class.</p> + +<h3>Examples</h3> + +<p>To include a <code>RecyclerView</code> in your layout:</p> + +<pre> +<!-- A RecyclerView with some commonly used attributes --> +<android.support.v7.widget.RecyclerView + android:id="@+id/my_recycler_view" + android:scrollbars="vertical" + android:layout_width="match_parent" + android:layout_height="match_parent"/> +</pre> + +<p>To get the <code>RecyclerView</code> object in your activity:</p> + +<pre> +public class MyActivity extends ActionBarActivity { + private RecyclerView mRecyclerView; + private RecyclerView.Adapter mAdapter; + private RecyclerView.LayoutManager mLayoutManager; + + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.my_activity); + mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view); + + // improve performance if the size is fixed + mRecyclerView.setHasFixedSize(true); + + // use a linear layout manager + mLayoutManager = new LinearLayoutManager(this); + mRecyclerView.setLayoutManager(mLayoutManager); + + // specify an adapter (see also next example) + mAdapter = new MyAdapter(myDataset); + mRecyclerView.setAdapter(mAdapter); + } + ... +} +</pre> + +<p>To create a simple adapter:</p> + +<pre> +public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { + private String[] mDataset; + + // Provide a reference to the type of views that you are using + // (custom viewholder) + public static class ViewHolder extends RecyclerView.ViewHolder { + public TextView mTextView; + public ViewHolder(TextView v) { + super(v); + mTextView = v; + } + } + + // Provide a suitable constructor (depends on the kind of dataset) + public MyAdapter(String[] myDataset) { + mDataset = myDataset; + } + + // Create new views (invoked by the layout manager) + @Override + public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, + int viewType) { + // create a new view + View v = new TextView(parent.getContext()); + // set the view's size, margins, paddings and layout parameters + ... + ViewHolder vh = new ViewHolder(v); + return vh; + } + + // Replace the contents of a view (invoked by the layout manager) + @Override + public void onBindViewHolder(ViewHolder holder, int position) { + // - get element from your dataset at this position + // - replace the contents of the view with that element + holder.mTextView.setText(mDataset[position]); + + } + + // Return the size of your dataset (invoked by the layout manager) + @Override + public int getItemCount() { + return mDataset.length; + } +} +</pre> + + +<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> + +<ul> + <li>To set the corner radius in your layouts, use the <code>android:cardCornerRadius</code> + attribute.</li> + <li>To set the corner radius in your code, use the <code>CardView.setRadius</code> method.</li> +</ul> + +<p>To set the background color of a card, use the <code>android:cardBackgroundColor</code> +attribute.</p> + +<p>To include a <code>CardView</code> in your layout:</p> + +<pre> +<!-- A CardView that contains a TextView --> +<android.support.v7.widget.CardView + android:id="@+id/card_view" + android:layout_gravity="center" + android:layout_width="200dp" + android:layout_height="200dp" + card_view:cardCornerRadius="4dp"> + + <TextView + android:id="@+id/info_text" + android:layout_width="match_parent" + android:layout_height="match_parent" /> +</android.support.v7.widget.CardView> +</pre>
\ No newline at end of file diff --git a/docs/html/preview/material/videos/ContactsAnim.mp4 b/docs/html/preview/material/videos/ContactsAnim.mp4 Binary files differnew file mode 100644 index 0000000..073f9dc --- /dev/null +++ b/docs/html/preview/material/videos/ContactsAnim.mp4 diff --git a/docs/html/preview/material/videos/ContactsAnim.ogv b/docs/html/preview/material/videos/ContactsAnim.ogv Binary files differnew file mode 100644 index 0000000..c5e751b --- /dev/null +++ b/docs/html/preview/material/videos/ContactsAnim.ogv diff --git a/docs/html/preview/material/videos/ContactsAnim.webm b/docs/html/preview/material/videos/ContactsAnim.webm Binary files differnew file mode 100644 index 0000000..2a15ff5 --- /dev/null +++ b/docs/html/preview/material/videos/ContactsAnim.webm diff --git a/docs/html/preview/material/views-shadows.jd b/docs/html/preview/material/views-shadows.jd new file mode 100644 index 0000000..c5884d6 --- /dev/null +++ b/docs/html/preview/material/views-shadows.jd @@ -0,0 +1,86 @@ +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 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 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> + +<p><code>Z = elevation + translationZ</code></p> + +<p>To set the elevation of a view:</p> + +<ul> + <li>In a layout definition, use the <code>android:elevation</code> attribute.</li> + <li>In the code of an activity, use the <code>View.setElevation</code> method.</li> +</ul> + +<p>To set the translation of a view, use the <code>View.setTranslationZ</code> method.</p> + +<p>The Z values are measured in the same units as the X and Y values (like <code>dp</code> or +<code>px</code>).</p> + + +<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> + +<pre> +View v = findViewById(R.id.my_view); + +// add 10px to the static elevation +v.setTranslationZ(10); + +// set an oval shadow +Outline outline = new Outline(); +outline.setOval(v.getLeft(), v.getTop(), v.getRight(), v.getBottom()); +myView.setOutline(outline); +</pre> + +<p>An <code>Outline</code> represents the outer shape of a graphics object. You can create +<code>Outline</code> objects as in this example, or you can obtain the outline from a +<code>Drawable</code> object with the <code>getOutline</code> method.</p> + +<p>The outline of a view also defines the ripple area for touch feedback.</p> + +<p>To prevent a view from casting a shadow, set its outline to <code>null</code>.</p> + + +<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 +support clipping, as determined by the <code>Outline.canClip</code> method.</p> + +<p>To determine if a view has been clipped, use the <code>View.getClipToOutline</code> method.</p> + +<pre> +// clip a view to an oval +View v = findViewById(R.id.my_view); +outline.setOval(v.getLeft(), v.getTop(), v.getRight(), v.getBottom()); +myView.setOutline(outline); + +// if the view is not already clipped +if (v.getClipToOutline() == false) { + v.setClipToOutline(true); +} +</pre>
\ No newline at end of file |
