diff options
Diffstat (limited to 'docs/html/preview/material')
17 files changed, 1193 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..b8d063b --- /dev/null +++ b/docs/html/preview/material/animations.jd @@ -0,0 +1,441 @@ +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">Animating View State Changes</a></li> + <li><a href="#drawabletint">Drawable Tinting</a></li> + <li><a href="#colorextract">Extracting Colors from an Image</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>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>In most cases, this functionality should be applied in your view XML by specifying the +background as <code>?android:attr/selectableItemBackground</code> for a bounded ripple or +<code>?android:attr/selectableItemBackgroundBorderless</code> for a ripple that extends beyond +the view bounds. You can also create a <code>RippleDrawable</code> and set +it as the background of your view. Alternatively, you can define a <code>RippleDrawable</code> +as an XML resource using the <code>ripple</code> element. The +Android L Developer Preview animates the selection color with a ripple effect.</p> + +<p>You can assign a color to <code>RippleDrawable</code> objects. To change the default touch +feedback color, use the theme's <code>android:colorControlHighlight</code> attribute.</p> + + +<h2 id="reveal">Reveal Effect</h2> + +<p>The <code>ViewAnimationUtils.createCircularReveal</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 = + ViewAnimationUtils.createCircularReveal(myView, 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 = + ViewAnimationUtils.createCircularReveal(myView, 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>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 the 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> + +<p>The Android L Developer Preview supports these enter and exit transitions:</p> + +<ul> +<li><em>explode</em> - Moves views in or out from the center of the scene.</li> +<li><em>slide</em> - Moves views in or out from one of the edges of the scene.</li> +<li><em>fade</em> - Mades views in or out of the scene.</li> +</ul> + +<p>Any transition that extends the <code>android.transition.Visibility</code> class is supported +as an enter or exit transition. For more information, see the API reference for the +<code>android.transition.Transition</code> class.</p> + +<p>The Android L Developer Preview also supports these shared elements transitions:</p> + +<ul> +<li><em>changeBounds</em> - Animates the changes in layout bounds of target views.</li> +<li><em>changeClipBounds</em> - Animates the changes in clip bounds of target views.</li> +<li><em>changeTransform</em> - Animates the changes in scale and rotation of target views.</li> +<li><em>moveImage</em> - Animates changes in size and scale type for an image view.</li> +</ul> + +<p>When you enable activity transitions in your app, the default cross-fading transition is +activated between the entering and exiting activities.</p> + +<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. You can also specify +enter, exit, and shared element transitions in your style definition:</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>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/> +</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 (if you did not enable transitions in your theme) +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> + +<p>The <code>setExitTransition</code> and <code>setSharedElementExitTransition</code> methods +define the exit transition for the calling activity. The <code>setEnterTransition</code> and +<code>setSharedElementEnterTransition</code> methods define the enter transition for the called +activity.</p> + +<p>To get the full effect of a transition, you must enable window content transitions on both the +calling and called activities. Otherwise, the calling activity will start the exit transition, +but then you'll see a window transition (like scale or fade).</p> + +<p>To start an enter transition as soon as possible, use the +<code>Window.setAllowEnterTransitionOverlap</code> method on the called activity. This lets you +have more dramatic enter transitions. The same applies for the calling activity and exit +transitions with the <code>Window.setAllowExitTransitionOverlap</code> method.</p> + +<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.</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.image_small); + +// 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> + +<p>To reverse the scene transition animation when you finish the second activity, call the +<code>Activity.finishAfterTransition</code> method instead of <code>Activity.finish</code>.</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, + 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>Animator.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">Animating 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 translationZ 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="translationZ" + android:duration="100" + android:valueTo="2" + 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="translationZ" + android:duration="100" + android:valueTo="2" + android:valueType="floatType"/> + </set> + </item> +</selector> +</pre> + +<p class="note"><strong>Note:</strong> There is a known issue in the L Developer Preview release +that requires valueFrom values to be provided in StateListAnimator animations to get the correct +behavior.</p> + +<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 or nine-patches as alpha masks and +to tint them using a color resource or a theme attribute that resolves to a color resource (for +example, <code>?android:attr/colorPrimary</code>). You can create these assets only once and color them +automatically to match your theme.</p> + +<p>To apply a tint to a bitmap, use the <code>setTint</code> method or the <code>android:tint</code> +attribute for <code>BitmapDrawable</code> and <code>NinePatchDrawable</code>.</p> + +<p>The <code>setTint</code> method also lets you set the Porter-Duff mode used to blend the +tint color for <code>NinePatchDrawable</code> and <code>BitmapDrawable</code> objects in your code. +To set the tint mode in your layouts, use the <code>android:tintMode</code> attribute.</p> + + +<h2 id="colorextract">Extracting Prominent Colors from an Image</h2> + +<p>The Android L Developer Preview Support Library includes the <code>Palette</code> class, +which lets you extract prominent colors from an image. This class extracts the following +prominent colors:</p> + +<ul> +<li>Vibrant</li> +<li>Vibrant dark</li> +<li>Vibrant light</li> +<li>Muted</li> +<li>Muted dark</li> +<li>Muted light</li> +</ul> + +<p>To extract these colors, pass a <code>Bitmap</code> object to the +<code>Palette.generate</code> static method in the background thread where you load your images. +If you can't use that thread, call the <code>Palette.generateAsync</code> method instead and +provide a listener.</p> + +<p>To retrieve the prominent colors from the image, use the getter methods in the +<code>Palette</code> class, such as <code>Palette.getVibrantColor</code>.</p> + +<p>For more information, see the API reference for the +<code>android.support.v7.graphics.Palette</code> class.</p>
\ No newline at end of file diff --git a/docs/html/preview/material/compatibility.jd b/docs/html/preview/material/compatibility.jd new file mode 100644 index 0000000..fb97112 --- /dev/null +++ b/docs/html/preview/material/compatibility.jd @@ -0,0 +1,82 @@ +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 activity transitions) 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> + +<p>To avoid duplication of code, define your styles inside <code>res/values/</code> and modify the +styles in <code>res/values-v21/</code> for the new APIs.</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 with +these limitations:</p> + +<ul> +<li><code>CardView</code> falls back to a programmatic shadow implementation using additional padding.</li> +<li><code>CardView</code> does not clip its children views that intersect with rounded corners.</li> +</ul> + +<p>These limitations do not apply to the Android L Developer Preview.</p> + + +<h2 id="animation">Animation APIs</h2> + +<p>The following new APIs are only available in the Android L Developer Preview:</p> + +<ul> +<li>Activity transitions</li> +<li>Touch feedback</li> +<li>Reveal animations</li> +<li>Path-based animations</li> +</ul> + +<p>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..7d0625e --- /dev/null +++ b/docs/html/preview/material/get-started.jd @@ -0,0 +1,147 @@ +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 Elevation in Your Views</a></li> + <li><a href="#widgets">Use the New UI Widgets</a></li> + <li><a href="#animations">Customize Your Animations</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="http://www.google.com/design/spec">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>elevation</strong> of your 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 APIs to customize the <strong>animations</strong> 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 <a +href="http://www.google.com/design/spec">material design guidelines</a> provide you with a +cohesive 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 <a href="http://www.google.com/design/spec">material design guidelines</a>. 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> + + +<h2 id="depth">Specify Elevation in Your Views</h2> + +<p>Views can cast shadows, and the elevation value of a view +determines the size of its shadow and its drawing order. To set the elevation of a view, use the +<code>android:elevation</code> attribute in your layouts:</p> + +<pre> +<TextView + android:id="@+id/my_textview" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@string/next" + android:background="@color/white" + <strong>android:elevation</strong>="5dp" /> +</pre> + +<p>The new <code>translationZ</code> property lets you create animations that reflect temporary +changes in the elevation of a view. For example, this is useful to respond to touch gestures.</p> + +<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><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="animations">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..f1018af --- /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..4ed7d5c --- /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..19752a8 --- /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..bd107ff --- /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..d9a276f --- /dev/null +++ b/docs/html/preview/material/index.jd @@ -0,0 +1,128 @@ +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="http://www.google.com/design/spec">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" width="500" height="238"/> + <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" width="500" height="238"/> + <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" width="500" height="426"/> + <p>The new <code>RecyclerView</code> widget is a more advanced version of <code>ListView</code> + that 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" width="500" height="426"/> + <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 properties, views in the Android L Developer Preview have a Z +property. This new property represents the elevation of a view, which determines:</p> + +<ul> +<li>The size of the shadow - Views with higher Z values cast bigger shadows.</li> +<li>The drawing order - Views with higher Z values appear on top of other views.</li> +</ul> + +<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 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 more natural animations 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> + +<p>Touch feedback animations are built into several standard views, such as buttons. The new APIs +let you customize these animations and add animations to your custom views.</p> + + +<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 create these assets only +once and color each instance to match your theme. Drawables also now support specifying most XML +properties as <strong>theme attributes</strong>.</p> + +<p>The Android L Developer Preview Support Library includes a <strong>color extraction</strong> +library that lets you automatically extract prominent colors from a bitmap image.</p>
\ No newline at end of file diff --git a/docs/html/preview/material/theme.jd b/docs/html/preview/material/theme.jd new file mode 100644 index 0000000..740bf56 --- /dev/null +++ b/docs/html/preview/material/theme.jd @@ -0,0 +1,102 @@ +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 Individual Views</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>You can customize the look of the material theme +according to your brand identity with a color palette you control. You can tint the action bar and +the status bar using theme attributes, as shown in Figure 1.</p> + +<div style="float:right;margin-left:25px;margin-top:-50px"> +<img src="{@docRoot}preview/material/images/ThemeColors.png" style="width:250px"/> +<p class="img-caption" style="margin-bottom:0px"> +<strong>Figure 1.</strong> Customizing the material theme.</p> +</div> + +<p>The system widgets have a new design and touch feedback animations. 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.style</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 style="margin-bottom:30px">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 status bar, contextual app bars) --> + <item name="android:colorPrimaryDark">@color/primary_dark</item> + <!-- theme UI controls like checkboxes and text fields --> + <item name="android:colorAccent">@color/accent</item> + </style> +</resources> +</pre> + + +<h2 id="statusbar">Customize the Status and Navigation Bar</h2> + +<p>The material theme lets you easily customize the status bar, so you can specify a +color that 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. By default, <code>android:statusBarColor</code> inherits the +value of <code>android:colorPrimaryDark</code>.</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> and adjust the window flags as required. 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> + +<p>When customizing the navigation and status bars, make them both transparent or modify only +the status bar. The navigation bar should remain black in all other cases.</p> + + +<h2 id="inheritance">Theme Individual Views</h3> + +<p>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..31604d6 --- /dev/null +++ b/docs/html/preview/material/ui-widgets.jd @@ -0,0 +1,198 @@ +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 style by default.</p> + + +<h2 id="recyclerview">RecyclerView</h2> + +<p><code>RecyclerView</code> is a more advanced and flexible 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 layout manager 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. 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. For more +information, see the <a href="#rvexamples">examples</a> 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 <code>LinearLayoutManager</code>, which shows the items in a +vertical or horizontal scrolling list. To create a custom layout, you extend the +<code>RecyclerView.LayoutManager</code> class.</p> + +<h3>Animations</h3> + +<p>Animations for adding and removing items are enabled by default in <code>RecyclerView</code>. +To customize these animations, extend the <code>RecyclerView.ItemAnimator</code> class and use +the <code>RecyclerView.setItemAnimator</code> method.</p> + +<h3 id="rvexamples">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 Activity { + 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 you know that changes in content + // do not change the size of the RecyclerView + 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 = LayoutInflater.from(parent.getContext()) + .inflate(R.layout.my_text_view, null); + // 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 cards that have a consistent look on any app. <code>CardView</code> widgets can have +shadows and rounded corners.</p> + +<p>To create a card with a shadow, use the <code>android:elevation</code> attribute. +<code>CardView</code> uses real elevation and dynamic shadows +and falls back to a programmatic shadow implementation on earlier versions. For more information, +see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.</p> + +<p>Here's how to specify properties of <code>CardView</code>:</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> + <li>To set the background color of a card, use the <code>android:cardBackgroundColor</code> +attribute.</li> +</ul> + +<p>To include a <code>CardView</code> in your layout:</p> + +<pre> +<!-- A CardView that contains a TextView --> +<android.support.v7.widget.CardView + xmlns:card_view="http://schemas.android.com/apk/res-auto" + 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..f7682f5 --- /dev/null +++ b/docs/html/preview/material/views-shadows.jd @@ -0,0 +1,95 @@ +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>The elevation 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> + +<p>Elevation is also useful to create animations where widgets temporarily rise above the +view plane when performing some action.</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 new <code>ViewPropertyAnimator.z</code> and <code>ViewPropertyAnimator.translationZ</code> +methods enable you to easily animate the elevation of views. For more information, see +the API reference for <code>ViewPropertyAnimator</code> and the <a +href="{@docRoot}guide/topics/graphics/prop-animation.html#object-animator">Property Animation</a> +developer guide.</p> + +<p>The Z values are measured in the same units as the X and Y values.</p> + + +<h2 id="shadows">Shadows and Outlines</h2> + +<p>The bounds of a view's background drawable determine the default shape of its shadow. +<strong>Outlines</strong> represent the outer shape of a graphics object and define the ripple +area for touch feedback.</p> + +<p>For example, if you define a view with a background drawable:</p> + +<pre> +<TextView + android:id="@+id/myview" + ... + android:elevation="2dp" + android:background="@drawable/myrect" /> +</pre> + +<p>where the background drawable is defined as a rectangle with rounded corners:</p> + +<pre> +<!-- res/drawable/myrect.xml --> +<shape xmlns:android="http://schemas.android.com/apk/res/android" + android:shape="rectangle"> + <solid android:color="#42000000" /> + <corners android:radius="5dp" /> +</shape> +</pre> + +<p>Then this view and drawable cast the appropiate shadow.</p> + +<p>You can also create outlines in your code using the methods in the <code>Outline</code> class, +and you can assign them to views with the <code>View.setOutline</code> method.</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>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 clip a view to the shape of a drawable, set the drawable as the background of the view +(as shown above) and call the <code>View.setClipToOutline</code> method.</p> + +<p>Because clipping views is an expensive operation, don't animate the shape you use to +clip a view. To achieve this effect, use a <a +href="{@docRoot}preview/material/animations.html#reveal">Reveal Effect</a> animation.</p>
\ No newline at end of file |
