-
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd
index 27e3169cc4fbf..47e8d268cef8c 100644
--- a/docs/html/design/index.jd
+++ b/docs/html/design/index.jd
@@ -28,20 +28,20 @@ footer.hide=1
Welcome to Android Design, your place for
learning how to design exceptional Android apps.
- A new theme +
- New widgets for complex views +
- New APIs for custom shadows and animations +
- The size of the shadow: views with higher Z values cast bigger shadows. +
- The drawing order: views with higher Z values appear on top of other views. +
- +Respond to touch events in your views with touch feedback animations. + +
- +Hide and show views with circular reveal animations. + +
- +Switch between activities with custom activity transition animations. + +
- +Create more natural animations with curved motion. + +
- +Animate changes in one or more view properties with view state change animations. + +
- +Show animations in state list drawables between view state changes. + +
- Vector drawables are scalable without losing definition and are perfect +for single-color in-app icons. +
- Drawable tinting lets you define bitmaps as an alpha mask and tint them with +a color at runtime. +
- Color extraction lets you automatically extract prominent colors from a +bitmap image. +
- Touch feedback -
- Reveal effect -
- Activity transitions -
- Curved motion -
- View state changes -
- An enter transition determines how views in an activity enter the scene. -For example, in the explode enter transition, the views enter the scene from the outside -and fly in towards the center of the screen. - -
- An exit transition determines how views in an activity exit the scene. For - example, in the explode exit transition, the views exit the scene away from the -center. - -
- A shared elements 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 moveImage shared element transition -translates and scales the image smoothly between these activities. -
- explode - Moves views in or out from the center of the scene. -
- slide - Moves views in or out from one of the edges of the scene. -
- fade - Moves views in or out of the scene. -
- changeBounds - Animates the changes in layout bounds of target views. -
- changeClipBounds - Animates the changes in clip bounds of target views. -
- changeTransform - Animates the changes in scale and rotation of target views. -
- moveImage - Animates changes in size and scale type for an image view. -
Window.setEnterTransition
- Window.setExitTransition
- Window.setSharedElementEnterTransition
- Window.setSharedElementExitTransition
-- Enable window content transitions in your style. -
- Specify a shared elements transition in your style. -
- Define your transition as an XML resource. -
- Assign a common name to the shared elements in both layouts with the
-
android:viewNameattribute.
- - Use the
ActivityOptions.makeSceneTransitionAnimationmethod.
- @interpolator/fast_out_linear_in.xml
- @interpolator/fast_out_slow_in.xml
- @interpolator/linear_out_slow_in.xml
-- Vibrant -
- Vibrant dark -
- Vibrant light -
- Muted -
- Muted dark -
- Muted light -
- Material Theme -
- Layouts -
- UI Widgets -
- Animation APIs -
- Define a theme that inherits from an older theme (like Holo) in
-
res/values/styles.xml.
- - Define a theme with the same name that inherits from the material theme in
-
res/values-v21/styles.xml.
- - Set this theme as your app's theme in the manifest file. -
CardViewfalls back to a programmatic shadow implementation using additional padding.
-CardViewdoes not clip its children views that intersect with rounded corners.
-- Activity transitions -
- Touch feedback -
- Reveal animations -
- Path-based animations -
- - Take a look at the material design - specification. -
- - Apply the material theme to your app. -
- - Define additional styles to customize the material theme. -
- - Create your layouts following material design guidelines. -
- - Specify the elevation of your views to cast appropriate shadows. -
- - Use the new widgets for complex views, such as lists and cards. -
- - Use the new APIs to customize the animations in your app. -
- Baseline grids -
- Keylines -
- Spacing -
- Touch target size -
- Layout structure -
- A new theme -
- New widgets for complex views -
- New APIs for custom shadows and animations -
- The size of the shadow - Views with higher Z values cast bigger shadows. -
- The drawing order - Views with higher Z values appear on top of other views. -
- -Respond to touch events in your views with touch feedback animations. - -
- -Hide and show views with reveal effect animations. - -
- -Switch between activities with custom activity transition animations. - -
- -Create more natural animations with curved motion. - -
- -Animate changes in one or more view properties with view state change animations. - -
- -Show animations in state list drawables between view state changes. - -
- System widgets that let you set their color palette -
- Touch feedback animations for the system widgets -
- Activity transition animations -
@android:style/Theme.Material(dark version)
- @android:style/Theme.Material.Light(light version)
- @android:style/Theme.Material.Light.DarkActionBar
-- RecyclerView -
- CardView -
- A layout manager for positioning items -
- Default animations for common item operations -
- To set the corner radius in your layouts, use the
card_view:cardCornerRadius- attribute.
- - To set the corner radius in your code, use the
CardView.setRadiusmethod.
- - To set the background color of a card, use the
card_view:cardBackgroundColor-attribute.
- - In a layout definition, use the
android:elevationattribute.
- - In the code of an activity, use the
View.setElevationmethod.
- - Customize Touch Feedback +
- Use the Reveal Effect +
- Customize Activity Transitions +
- Animate View State Changes +
- Animate Vector Drawables +
- Touch feedback +
- Circular Reveal +
- Activity transitions +
- Curved motion +
- View state changes +
?android:attr/selectableItemBackgroundfor a bounded ripple
+?android:attr/selectableItemBackgroundBorderlessfor a ripple that extends beyond +the view
+- An enter transition determines how views in an activity enter the scene. +For example, in the explode enter transition, the views enter the scene from the outside +and fly in towards the center of the screen. + +
- An exit transition determines how views in an activity exit the scene. For + example, in the explode exit transition, the views exit the scene away from the +center. + +
- A shared elements 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 changeImageTransform shared element transition +translates and scales the image smoothly between these activities. +
- explode - Moves views in or out from the center of the scene. +
- slide - Moves views in or out from one of the edges of the scene. +
- fade - Adds or removes a view from the scene by changing its opacity. +
- changeBounds - Animates the changes in layout bounds of target views. +
- changeClipBounds - Animates the changes in clip bounds of target views. +
- changeTransform - Animates the changes in scale and rotation of target views. +
- changeImageTransform - Animates changes in size and scale of target images. +
- {@link android.view.Window#setEnterTransition Window.setEnterTransition()} +
- {@link android.view.Window#setExitTransition Window.setExitTransition()} +
- {@link android.view.Window#setSharedElementEnterTransition + Window.setSharedElementEnterTransition()} +
- {@link android.view.Window#setSharedElementExitTransition + Window.setSharedElementExitTransition()} +
- Enable window content transitions in your theme. +
- Specify a shared elements transition in your style. +
- Define your transition as an XML resource. +
- Assign a common name to the shared elements in both layouts with the
+
android:transitionNameattribute.
+ - Use the {@link android.app.ActivityOptions#makeSceneTransitionAnimation +ActivityOptions.makeSceneTransitionAnimation()} method. +
@interpolator/fast_out_linear_in.xml
+ @interpolator/fast_out_slow_in.xml
+ @interpolator/linear_out_slow_in.xml
+- A vector drawable with the
<vector>element in +res/drawable/
+ - An animated vector drawable with the
<animated-vector>element in +res/drawable/
+ - One or more object animators with the
<objectAnimator>element in +res/anim/
+ - Define Alternative Styles +
- Provide Alternative Layouts +
- Use the Support Library +
- Check the System Version +
- Define a theme that inherits from an older theme (like Holo) in
+
res/values/styles.xml.
+ - Define a theme with the same name that inherits from the material theme in
+
res/values-v21/styles.xml.
+ - Set this theme as your app's theme in the manifest file. +
- Material design styles for some system
+ widgets when you apply one of the
Theme.AppCompatthemes.
+ - Color palette theme attributes
+ in the
Theme.AppCompatthemes.
+ - The {@link android.support.v7.widget.RecyclerView} widget to display data + collections. +
- The {@link android.support.v7.widget.CardView} widget to create cards. +
- The {@link android.support.v7.graphics.Palette} class to extract prominent colors from + images. +
- {@link android.widget.EditText} +
- {@link android.widget.Spinner} +
- {@link android.widget.CheckBox} +
- {@link android.widget.RadioButton} +
- {@link android.support.v7.widget.SwitchCompat} +
- {@link android.widget.CheckedTextView} +
- {@link android.support.v7.widget.CardView} falls back to a programmatic shadow implementation + using additional padding. +
- {@link android.support.v7.widget.CardView} does not clip its children views that intersect + with rounded corners. +
- Activity transitions +
- Touch feedback +
- Reveal animations +
- Path-based animations +
- Vector drawables +
- Drawable tinting +
- Drawable tinting +
- Prominent color extraction +
- Vector drawables +
- Vibrant +
- Vibrant dark +
- Vibrant light +
- Muted +
- Muted dark +
- Muted light +
- Apply the Material Theme +
- Design Your Layouts +
- Specify Elevation in Your Views +
- Create Lists and Cards +
- Customize Your Animations +
- + Review the material design specification. +
- + Apply the material theme to your app. +
- + Create your layouts following material design guidelines. +
- + Specify the elevation of your views to cast shadows. +
- + Use system widgets for lists and cards. +
- + Customize the animations in your app. +
- Baseline grids +
- Keylines +
- Spacing +
- Touch target size +
- Layout structure +
- Android 5.0 (API level 21) +
- Android Studio 0.8 +
- The material theme +
- Widgets for cards and lists +
- Custom shadows and view clipping +
- Vector drawables +
- Custom animations +
- Getting Started +
- Learn how to update your app with material design features. + +
- Using the Material Theme +
- Learn how to apply material design styles to your app. + +
- Creating Lists and Cards +
- Learn how to create lists and cards with a consistent look and feel using system widgets. + +
- Defining Shadows and Clipping Views +
- Learn how to set elevation for your views to create custom shadows and how to clip views. + +
- Working with Drawables +
- Learn how to create vector drawables and how to tint drawable resources. + +
- Defining Custom Animations +
- Learn how to create custom animations for views and activity transitions with shared elements. + +
- Maintaining Compatibility +
- Learn how to maintain compatibility with platform versions earlier than Android 5.0. +
- Create Lists +
- Create Cards +
- Add Dependencies +
- Layout managers for positioning items +
- Default animations for common item operations, such as removal or addition of items +
- {@link android.support.v7.widget.LinearLayoutManager} shows items in a vertical or horizontal +scrolling list. +
- {@link android.support.v7.widget.GridLayoutManager} shows items in a grid. +
- {@link android.support.v7.widget.StaggeredGridLayoutManager} shows items in a staggered grid. +
- To set the corner radius in your layouts, use the
card_view:cardCornerRadius+ attribute.
+ - To set the corner radius in your code, use the
CardView.setRadiusmethod.
+ - To set the background color of a card, use the
card_view:cardBackgroundColor+attribute.
+ - Extend the {@link android.view.ViewOutlineProvider} class. +
- Override the {@link android.view.ViewOutlineProvider#getOutline getOutline()} method. +
- Assign the new outline provider to your view with the {@link +android.view.View#setOutlineProvider View.setOutlineProvider()} method. +
- System widgets that let you set their color palette +
- Touch feedback animations for the system widgets +
- Activity transition animations +
@android:style/Theme.Material(dark version)
+ @android:style/Theme.Material.Light(light version)
+ @android:style/Theme.Material.Light.DarkActionBar
+
- Want to know what Android 4.4 KitKat has for designers? See New in Android.
+ Want to know what Android 5.0 has for designers? See New in Android.
Creative Vision -
+ 
L Developer Preview
-The next version of Android uses a design -metaphor inspired by paper and ink that provides a reassuring sense of tactility. Before it arrives for users, you can get an early -look at the new Material design. +
Material Design
+Android 5.0 introduces a design +metaphor inspired by paper and ink that provides a reassuring sense of tactility.
- +Material design is a comprehensive guide for visual, motion, and +interaction design across platforms and devices. Android now includes support for +material design apps. To use material design in your Android apps, follow the guidelines defined +in the material design specification and use the +new components and functionality available in Android 5.0 (API level 21) and above.
+ +Android provides the following elements for you to build material design apps:
+ +-
+
For more information about implementing material design on Android, see +Creating Apps with Material Design.
+ + +Material Theme
+ +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.
+ + +
+ Dark material theme
+
+ Light material theme
++
For more information, see Using the Material +Theme.
+ + +Lists and Cards
+ +Android provides two new widgets for displaying cards and lists with material design styles +and animations:
+ + +
+ The new RecyclerView widget is a more pluggable version of ListView
+ that supports different layout types and provides performance improvements.
+ The new CardView widget lets you display important pieces of information inside
+ cards that have a consistent look and feel.
+
For more information, see Creating Lists +and Cards.
+ + +View Shadows
+ +In addition to the X and Y properties, views in Android now have a Z +property. This new property represents the elevation of a view, which determines:
+ +-
+
For more information, see Defining +Shadows and Clipping Views.
+ + +Animations
+ +The new animation APIs let you create custom animations for touch feedback in UI controls, +changes in view state, and activity transitions.
+ +These APIs let you:
+ +-
+
Touch feedback animations are built into several standard views, such as buttons. The new APIs +let you customize these animations and add them to your custom views.
+ +For more information, see Defining Custom +Animations.
+ + +Drawables
+ +These new capabilities for drawables help you implement material design apps:
+ +-
+
For more information, see Working with +Drawables.
diff --git a/docs/html/preview/material/videos/ContactsAnim.mp4 b/docs/html/design/material/videos/ContactsAnim.mp4 similarity index 100% rename from docs/html/preview/material/videos/ContactsAnim.mp4 rename to docs/html/design/material/videos/ContactsAnim.mp4 diff --git a/docs/html/preview/material/videos/ContactsAnim.ogv b/docs/html/design/material/videos/ContactsAnim.ogv similarity index 100% rename from docs/html/preview/material/videos/ContactsAnim.ogv rename to docs/html/design/material/videos/ContactsAnim.ogv diff --git a/docs/html/preview/material/videos/ContactsAnim.webm b/docs/html/design/material/videos/ContactsAnim.webm similarity index 100% rename from docs/html/preview/material/videos/ContactsAnim.webm rename to docs/html/design/material/videos/ContactsAnim.webm diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png index 078eb4debb401..36d3828f7d089 100644 Binary files a/docs/html/design/media/index_landing_page.png and b/docs/html/design/media/index_landing_page.png differ diff --git a/docs/html/design/media/index_landing_page_2x.png b/docs/html/design/media/index_landing_page_2x.png new file mode 100644 index 0000000000000..1cd97abf700ab Binary files /dev/null and b/docs/html/design/media/index_landing_page_2x.png differ diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd index d672e46992fbd..1523ceac3f8c1 100644 --- a/docs/html/design/patterns/new.jd +++ b/docs/html/design/patterns/new.jd @@ -3,7 +3,24 @@ page.tags=KitKat,Android 4.4 @jd:body -A quick look at the new patterns and styles you can use to build beautiful Android apps… +
A quick look at the new patterns and styles you can use to build beautiful Android apps… + + +
Android 5.0 Lollipop
+ +Material design
+ +Material design is a comprehensive guide for +visual, motion, and interaction design across platforms and devices. Android 5.0 provides a new +theme, new widgets for complex views, and new APIs for shadows and animations that help you +implement material design patterns in your apps.
+ +Notifications
+ +Notifications receive important +updates in Android 5.0, with material design visual changes, notification availability in the +lockscreen, priority notifications, and cloud-synced notifications.
+Android 4.4 KitKat
@@ -30,7 +47,7 @@ page.tags=KitKat,Android 4.4 see it in every screen of your app.- Your Branding highlights + Your Branding highlights these and other pointers on how to incorporate elements of your brand into your app's visual language — highly encouraged!
@@ -60,7 +77,7 @@ page.tags=KitKat,Android 4.4
- Full screen + Full screen
@@ -73,7 +90,7 @@ page.tags=KitKat,Android 4.4
- Gestures + Gestures
In this document
- -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:
- --
-
Touch Feedback
- -The default touch feedback animations for buttons use the new
-RippleDrawable class, which transitions between different states with a ripple
-effect.
In most cases, this functionality should be applied in your view XML by specifying the
-background as ?android:attr/selectableItemBackground for a bounded ripple or
-?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond
-the view bounds. You can also create a RippleDrawable and set
-it as the background of your view. Alternatively, you can define a RippleDrawable
-as an XML resource using the ripple element. The
-Android L Developer Preview animates the selection color with a ripple effect.
You can assign a color to RippleDrawable objects. To change the default touch
-feedback color, use the theme's android:colorControlHighlight attribute.
Reveal Effect
- -The ViewAnimationUtils.createCircularReveal method enables you to animate a
-clipping circle to reveal or hide a view.
To reveal a previously invisible view using this effect:
- --// 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(); -- -
To hide a previously visible view using this effect:
- -
-// 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();
-
-
-
-Activity Transitions
- -You can specify custom animations for enter and exit transitions and for -transitions of shared elements between activities.
- --
-
The Android L Developer Preview supports these enter and exit transitions:
- --
-
Any transition that extends the android.transition.Visibility class is supported
-as an enter or exit transition. For more information, see the API reference for the
-android.transition.Transition class.
The Android L Developer Preview also supports these shared elements transitions:
- --
-
When you enable activity transitions in your app, the default cross-fading transition is -activated between the entering and exiting activities.
- -
-- Figure 1 - A scene transition with one shared element. -
- -Specify custom transitions
- -First, enable window content transitions with the android:windowContentTransitions
-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:
-<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> -- -
The move_image transition in this example is defined as follows:
-<!-- res/transition/move_image.xml --> -<!-- (see also Shared Transitions below) --> -<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> - <moveImage/> -</transitionSet> -- -
The moveImage element corresponds to the android.transition.MoveImage
-class. For more information, see the API reference for android.transition.Transition.
-
To enable window content transitions in your code instead, call the
-Window.requestFeature method:
-// 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()); -- -
To specify transitions in your code, call these methods with a Transition
-object:
-
-
The setExitTransition and setSharedElementExitTransition methods
-define the exit transition for the calling activity. The setEnterTransition and
-setSharedElementEnterTransition methods define the enter transition for the called
-activity.
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).
- -To start an enter transition as soon as possible, use the
-Window.setAllowEnterTransitionOverlap 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 Window.setAllowExitTransitionOverlap method.
Start an activity using transitions
- -If you enable transitions and set an exit transition for an activity, the transition is activated
-when you launch another activity with the startActivity method. If you have set an
-enter transition for the second activity, the transition is also activated when the activity
-starts.
Shared elements transitions
- -To make a screen transition animation between two activities that have a shared element:
- --
-
-// 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());
- }
-});
-
-
-For shared dynamic views that you generate in your code, use the View.setViewName
-method to specify a common element name in both activities.
To reverse the scene transition animation when you finish the second activity, call the
-Activity.finishAfterTransition method instead of Activity.finish.
Multiple shared elements
- -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 android:viewName
-attribute (or use the View.setViewName in both activities), and create an
-ActivityOptions object as follows:
-ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, - Pair.create(view1, "agreedName1"), - Pair.create(view2, "agreedName2")); -- - -
Curved Motion
- -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.
- -The PathInterpolator class is a new interpolator based on a Bézier curve or a
-Path 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 PathInterpolator as an XML resource:
-<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" - android:controlX1="0.4" - android:controlY1="0" - android:controlX2="1" - android:controlY2="1"/> -- -
The Android L Developer Preview provides XML resources for the three basic curves in the -material design specification:
- --
-
You can pass a PathInterpolator object to the
-Animator.setInterpolation method.
The ObjectAnimator 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 Path object to animate the X and Y properties of a view:
-ObjectAnimator mAnimator; -mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); -... -mAnimator.start(); -- - -
Animating View State Changes
- -The new StateListAnimator class lets you define animators that run when the state
-of a view changes. The following example shows how to define an StateListAnimator as
-an XML resource:
-<!-- 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> -- -
Note: 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.
- -The new AnimatedStateListDrawable 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 AnimatedStateListDrawable as an XML resource:
-<!-- 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> -- - -
Drawable Tinting
- -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, ?android:attr/colorPrimary). You can create these assets only once and color them
-automatically to match your theme.
To apply a tint to a bitmap, use the setTint method or the android:tint
-attribute for BitmapDrawable and NinePatchDrawable.
The setTint method also lets you set the Porter-Duff mode used to blend the
-tint color for NinePatchDrawable and BitmapDrawable objects in your code.
-To set the tint mode in your layouts, use the android:tintMode attribute.
Extracting Prominent Colors from an Image
- -The Android L Developer Preview Support Library includes the Palette class,
-which lets you extract prominent colors from an image. This class extracts the following
-prominent colors:
-
-
To extract these colors, pass a Bitmap object to the
-Palette.generate static method in the background thread where you load your images.
-If you can't use that thread, call the Palette.generateAsync method instead and
-provide a listener.
To retrieve the prominent colors from the image, use the getter methods in the
-Palette class, such as Palette.getVibrantColor.
For more information, see the API reference for the
-android.support.v7.graphics.Palette class.
In this document
--
-
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.
- - -Material Theme
- -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:
- --
-
Note: If you do not provide an alternative theme in this manner, -your app will not run on earlier versions of Android.
- - -Layouts
- -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.
- -Create your layout files for the Android L Developer Preview inside res/layout-v21/
-and your alternative layout files for earlier versions of Android inside res/layout/.
-Alternative layouts have the same file name.
To avoid duplication of code, define your styles inside res/values/ and modify the
-styles in res/values-v21/ for the new APIs.
UI Widgets
- -The RecyclerView and CardView widgets are included in the Android L
-Developer Preview Support Library, so they are available in earlier versions of Android with
-these limitations:
-
-
These limitations do not apply to the Android L Developer Preview.
- - -Animation APIs
- -The following new APIs are only available in the Android L Developer Preview:
- --
-
To preserve compatibility with earlier versions of Android, check the system version at -runtime before you invoke these APIs.
\ No newline at end of file diff --git a/docs/html/preview/material/get-started.jd b/docs/html/preview/material/get-started.jd deleted file mode 100644 index 7d0625e5b88c6..0000000000000 --- a/docs/html/preview/material/get-started.jd +++ /dev/null @@ -1,147 +0,0 @@ -page.title=Get Started - -@jd:body - -In this document
- -To create apps with material design:
- --
-
Update Your App for the Android L Developer Preview
- -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.
- -Create New Apps for the Android L Developer Preview
- -If you are creating a new app for the Android L Developer Preview, the material design guidelines 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.
- - -Apply the Material Theme
- -To apply the material theme in your app, specify a style that inherits from
-android:Theme.Material:
-<!-- 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> -- -
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 -Material Theme.
- - -Design Your Layouts
- -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:
- --
-
Specify Elevation in Your Views
- -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
-android:elevation attribute in your layouts:
-<TextView - android:id="@+id/my_textview" - android:layout_width="wrap_content" - android:layout_height="wrap_content" - android:text="@string/next" - android:background="@color/white" - android:elevation="5dp" /> -- -
The new translationZ 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.
For more details, see Views and -Shadows.
- - -Use the New UI Widgets
- -RecyclerView is a more advanced version of ListView that provides
-performance improvements and is easier to use. CardView lets you show pieces of
-information inside cards with a consistent look across apps. To include a CardView
-in your layout:
-<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> -- -
For more information, see UI Widgets.
- - -Customize Your Animations
- -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:
- --// inside your activity -getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); - -// set an exit transition -getWindow().setExitTransition(new Explode()); -- -
When you start another activity from this activity, the exit transition is activated.
- -To learn about all the features in the new APIs, see Animations.
\ No newline at end of file diff --git a/docs/html/preview/material/images/SceneTransition.png b/docs/html/preview/material/images/SceneTransition.png deleted file mode 100644 index ecaf47289c17b..0000000000000 Binary files a/docs/html/preview/material/images/SceneTransition.png and /dev/null differ diff --git a/docs/html/preview/material/index.jd b/docs/html/preview/material/index.jd deleted file mode 100644 index 9628e3ab796e4..0000000000000 --- a/docs/html/preview/material/index.jd +++ /dev/null @@ -1,130 +0,0 @@ -page.title=Material Design -page.type=design -page.image=images/material.png -page.metaDescription=Learn how to apply material design to your apps. - -@jd:body - -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 material design specification and use the -new components and functionality available in the Android L Developer Preview.
- -The Android L Developer Preview provides the following elements for you to build material -design apps:
- --
-
Material Theme
- -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.
- - -
- Dark Material theme
-
- Light Material theme
--
New Widgets
- -The Android L Developer Preview includes two new widgets for displaying complex views:
- - -
- The new RecyclerView widget is a more advanced version of ListView
- that provides performance improvements for dynamic views and is easier to use.
- The new CardView widget lets you display important pieces of information inside
- cards that have a consistent look and feel.
-
View Shadows
- -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:
- --
-
Animations
- -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.
- -The new animation APIs let you:
- --
-
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.
- - -New Capabilities for Drawables
- -The Android L Developer Preview supports drawable tinting: 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 theme attributes.
- -The Android L Developer Preview Support Library includes a color extraction -library that lets you automatically extract prominent colors from a bitmap image.
\ No newline at end of file diff --git a/docs/html/preview/material/theme.jd b/docs/html/preview/material/theme.jd deleted file mode 100644 index dceeb47623fb1..0000000000000 --- a/docs/html/preview/material/theme.jd +++ /dev/null @@ -1,102 +0,0 @@ -page.title=Material Theme - -@jd:body - -In this document
- -The new material theme provides:
- --
-
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.
- -
--Figure 1. Customizing the material theme.
-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.
- -The material theme is defined as:
- --
-
For a list of material styles that you can use, see the API reference for
-android.R.style.
-Note: The material theme is only available in the Android L Developer Preview. -For more information, see Compatibility. -
- - -Customize the Color Palette
- -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:
- --<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> -- - -
Customize the Status and Navigation Bar
- -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 android:statusBarColor attribute when
-you extend the material theme. By default, android:statusBarColor inherits the
-value of android:colorPrimaryDark.
To handle the color of the status bar yourself (for example, by adding a gradient in the
-background), set the android:statusBarColor attribute to
-@android:color/transparent and adjust the window flags as required. You can
-also use the Window.setStatusBarColor method for animations or fading.
Note: -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. -
- -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.
- - -Theme Individual Views - -
Elements in XML layout definitions can specify the android:theme 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.
In this document
--
-
The support library in the Android L Developer Preview contains two new widgets,
-RecyclerView and CardView. Use these widgets to show complex lists
-and cards in your app. These widgets have material design style by default.
RecyclerView
- -RecyclerView is a more advanced and flexible version of ListView.
-This widget is a container for large sets of views that can be recycled and scrolled very
-efficiently. Use the RecyclerView widget when you have lists with elements that
-change dynamically.
RecyclerView is easy to use, because it provides:
-
-
You also have the flexibility to define custom layout managers and animations for this -widget.
- -To use the RecyclerView widget, you have to specify an adapter and a layout
-manager. To create an adapter, you extend the RecyclerView.Adapter class. The details
-of the implementation depend on the specifics of your dataset and the type of views. For more
-information, see the examples below.
-
- Figure 1 - The RecyclerView widget.
-
A layout manager positions item views inside a RecyclerView and
-determines when to reuse item views that are no longer visible to the user. To reuse (or
-recycle) 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
-findViewById lookups.
-
RecyclerView provides LinearLayoutManager, which shows the items in a
-vertical or horizontal scrolling list. To create a custom layout, you extend the
-RecyclerView.LayoutManager class.
Animations
- -Animations for adding and removing items are enabled by default in RecyclerView.
-To customize these animations, extend the RecyclerView.ItemAnimator class and use
-the RecyclerView.setItemAnimator method.
Examples
- -To include a RecyclerView in your layout:
-<!-- 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"/> -- -
To get the RecyclerView object in your activity:
-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);
- }
- ...
-}
-
-
-To create a simple adapter:
- -
-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, parent, false);
- // 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;
- }
-}
-
-
-
-CardView
- -CardView extends the FrameLayout class and lets you show information
-inside cards that have a consistent look on any app. CardView widgets can have
-shadows and rounded corners.
To create a card with a shadow, use the android:elevation attribute.
-CardView uses real elevation and dynamic shadows
-and falls back to a programmatic shadow implementation on earlier versions. For more information,
-see Compatibility.
Here's how to specify properties of CardView:
-
-
To include a CardView in your layout:
-<!-- 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> -\ No newline at end of file diff --git a/docs/html/preview/material/views-shadows.jd b/docs/html/preview/material/views-shadows.jd deleted file mode 100644 index 78c0062f681b8..0000000000000 --- a/docs/html/preview/material/views-shadows.jd +++ /dev/null @@ -1,95 +0,0 @@ -page.title=Views and Shadows - -@jd:body - -
In this document
- -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).
- -Elevation is also useful to create animations where widgets temporarily rise above the -view plane when performing some action.
- - -View Elevation
- -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:
- -Z = elevation + translationZ
To set the elevation of a view:
- --
-
To set the translation of a view, use the View.setTranslationZ method.
The new ViewPropertyAnimator.z and ViewPropertyAnimator.translationZ
-methods enable you to easily animate the elevation of views. For more information, see
-the API reference for ViewPropertyAnimator and the Property Animation
-developer guide.
The Z values are measured in the same units as the X and Y values.
- - -Shadows and Outlines
- -The bounds of a view's background drawable determine the default shape of its shadow. -Outlines represent the outer shape of a graphics object and define the ripple -area for touch feedback.
- -For example, if you define a view with a background drawable:
- --<TextView - android:id="@+id/myview" - ... - android:elevation="2dp" - android:background="@drawable/myrect" /> -- -
where the background drawable is defined as a rectangle with rounded corners:
- --<!-- 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> -- -
Then this view and drawable cast the appropriate shadow.
- -You can also create outlines in your code using the methods in the Outline class,
-and you can assign them to views with the View.setOutline method.
To prevent a view from casting a shadow, set its outline to null.
Clipping Views
- -Clip a view to its outline area using the
-View.setClipToOutline method. Only rectangle, circle, and round rectangle outlines
-support clipping, as determined by the Outline.canClip method.
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 View.setClipToOutline method.
Because clipping views is an expensive operation, don't animate the shape you use to -clip a view. To achieve this effect, use a Reveal Effect animation.
\ No newline at end of file diff --git a/docs/html/training/material/animations.jd b/docs/html/training/material/animations.jd new file mode 100644 index 0000000000000..e8291b8301f5c --- /dev/null +++ b/docs/html/training/material/animations.jd @@ -0,0 +1,548 @@ +page.title=Defining Custom Animations + +@jd:body + +This lesson teaches you to
+-
+
You should also read
+ +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 Android 5.0 (API level 21) and above lets you customize +these animations and create new ones:
+ +-
+
Customize Touch Feedback
+ +Touch feedback in material design provides an instantaneous visual confirmation at the +point of contact when users interact with UI elements. The default touch feedback animations +for buttons use the new {@link android.graphics.drawable.RippleDrawable} class, which transitions +between different states with a ripple effect.
+ +In most cases, you should apply this functionality in your view XML by specifying the view +background as:
+ +-
+
Note: selectableItemBackgroundBorderless is a new
+attribute introduced in API level 21.
Alternatively, you can define a {@link android.graphics.drawable.RippleDrawable}
+as an XML resource using the ripple element.
You can assign a color to {@link android.graphics.drawable.RippleDrawable} objects. To change
+the default touch feedback color, use the theme's android:colorControlHighlight
+attribute.
For more information, see the API reference for the {@link +android.graphics.drawable.RippleDrawable} class.
+ + +Use the Reveal Effect
+ +Reveal animations provide users visual continuity when you show or hide a group of UI +elements. The {@link android.view.ViewAnimationUtils#createCircularReveal +ViewAnimationUtils.createCircularReveal()} method enables you to animate a clipping circle to +reveal or hide a view.
+ +To reveal a previously invisible view using this effect:
+ ++// 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) +Animator anim = + ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); +anim.start(); ++ +
To hide a previously visible view using this effect:
+ +
+// 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)
+Animator 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();
+
+
+
+Customize Activity Transitions
+ + +Figure 1 - A + transition with shared elements.
+ To replay the movie, click on the device screen +Activity transitions in material design apps provide visual connections between different states +through motion and transformations between common elements. You can specify custom animations for +enter and exit transitions and for transitions of shared elements between activities.
+ +-
+
Android 5.0 (API level 21) supports these enter and exit transitions:
+ +-
+
Any transition that extends the {@link android.transition.Visibility} class is supported +as an enter or exit transition. For more information, see the API reference for the +{@link android.transition.Transition} class.
+ +Android 5.0 (API level 21) also supports these shared elements transitions:
+ +-
+
When you enable activity transitions in your app, the default cross-fading transition is +activated between the entering and exiting activities.
+ +
++ Figure 2 - A scene transition with one shared element. +
+ +Specify custom transitions
+ +First, enable window content transitions with the android:windowContentTransitions
+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:
+<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/change_image_transform</item> + <item name="android:windowSharedElementExitTransition"> + @transition/change_image_transform</item> +</style> ++ +
The change_image_transform transition in this example is defined as follows:
+<!-- res/transition/change_image_transform.xml --> +<!-- (see also Shared Transitions below) --> +<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> + <changeImageTransform/> +</transitionSet> ++ +
The changeImageTransform element corresponds to the
+{@link android.transition.ChangeImageTransform} class. For more information, see the API
+reference for {@link android.transition.Transition}.
To enable window content transitions in your code instead, call the +{@link android.view.Window#requestFeature Window.requestFeature()} method:
+ ++// 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()); ++ +
To specify transitions in your code, call these methods with a {@link +android.transition.Transition} object:
+ +-
+
The {@link android.view.Window#setExitTransition setExitTransition()} and {@link +android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} methods define +the exit transition for the calling activity. The {@link android.view.Window#setEnterTransition +setEnterTransition()} and {@link android.view.Window#setSharedElementEnterTransition +setSharedElementEnterTransition()} methods define the enter transition for the called activity.
+ +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).
+ +To start an enter transition as soon as possible, use the +{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} +method on the called activity. This lets you have more dramatic enter transitions.
+ +Start an activity using transitions
+ +If you enable transitions and set an exit transition for an activity, the transition is activated +when you launch another activity as follows:
+ ++startActivity(intent, + ActivityOptions.makeSceneTransitionAnimation(this).toBundle()); ++ +
If you have set an enter transition for the second activity, the transition is also activated
+when the activity starts. To disable transitions when you start another activity, provide
+a null options bundle.
Start an activity with a shared element
+ +To make a screen transition animation between two activities that have a shared element:
+ +-
+
+// 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:transitionName="robot"
+ ActivityOptions options = ActivityOptions
+ .makeSceneTransitionAnimation(this, androidRobotView, "robot");
+ // start the new activity
+ startActivity(intent, options.toBundle());
+ }
+});
+
+
+For shared dynamic views that you generate in your code, use the +{@link android.view.View#setTransitionName View.setTransitionName()} method to specify a common +element name in both activities.
+ +To reverse the scene transition animation when you finish the second activity, call the +{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} +method instead of {@link android.app.Activity#finish Activity.finish()}.
+ +Start an activity with multiple shared elements
+ +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 android:transitionName
+attribute (or use the {@link android.view.View#setTransitionName View.setTransitionName()} method
+in both activities), and create an {@link android.app.ActivityOptions} object as follows:
+ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, + Pair.create(view1, "agreedName1"), + Pair.create(view2, "agreedName2")); ++ + +
Use Curved Motion
+ +Animations in material design rely on curves for time interpolation and spatial movement +patterns. With Android 5.0 (API level 21) and above, you can define custom timing curves and +curved motion patterns for animations.
+ +The {@link android.view.animation.PathInterpolator} class is a new interpolator based on a +Bézier curve or a {@link android.graphics.Path} 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 path interpolator as an XML resource:
+ ++<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" + android:controlX1="0.4" + android:controlY1="0" + android:controlX2="1" + android:controlY2="1"/> ++ +
The system provides XML resources for the three basic curves in the material design +specification:
+ +-
+
You can pass a {@link android.view.animation.PathInterpolator} object to the {@link +android.animation.Animator#setInterpolator Animator.setInterpolator()} method.
+ +The {@link android.animation.ObjectAnimator} 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 {@link android.graphics.Path} object to animate the X and Y properties of a view:
+ ++ObjectAnimator mAnimator; +mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); +... +mAnimator.start(); ++ + +
Animate View State Changes
+ +The {@link android.animation.StateListAnimator} class lets you define animators that run when +the state of a view changes. The following example shows how to define an {@link +android.animation.StateListAnimator} as an XML resource:
+ ++<!-- 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="@android:integer/config_shortAnimTime" + android:valueTo="2dp" + 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="0" + android:valueType="floatType"/> + </set> + </item> +</selector> ++ +
To attach custom view state animations to a view, define an animator using the
+selector element in an XML resource file as in this example, and assign it to your
+view with the android:stateListAnimator attribute. To assign a state list animator
+to a view in your code, use the {@link android.animation.AnimatorInflater#loadStateListAnimator
+AnimationInflater.loadStateListAnimator()} method, and assign the animator to your view with the
+{@link android.view.View#setStateListAnimator View.setStateListAnimator()} method.
When your theme extends the material theme, buttons have a Z animation by default. To avoid this
+behavior in your buttons, set the android:stateListAnimator attribute to
+@null.
The {@link android.graphics.drawable.AnimatedStateListDrawable} class lets you create drawables +that show animations between state changes of the associated view. Some of the system widgets in +Android 5.0 use these animations by default. The following example shows how +to define an {@link android.graphics.drawable.AnimatedStateListDrawable} as an XML resource:
+ ++<!-- 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> ++ + +
Animate Vector Drawables
+ +Vector Drawables are +scalable without losing definition. The {@link android.graphics.drawable.AnimatedVectorDrawable} +class lets you animate the properties of a vector drawable.
+ +You normally define animated vector drawables in three XML files:
+ +-
+
Animated vector drawables can animate the attributes of the <group> and
+<path> elements. The <group> elements defines a set of
+paths or subgroups, and the <path> element defines paths to be drawn.
When you define a vector drawable that you want to animate, use the android:name
+attribute to assign a unique name to groups and paths, so you can refer to them from your animator
+definitions. For example:
+<!-- res/drawable/vectordrawable.xml --> +<vector xmlns:android="http://schemas.android.com/apk/res/android" + android:height="64dp" + android:width="64dp" + android:viewportHeight="600" + android:viewportWidth="600"> + <group + android:name="rotationGroup" + android:pivotX="300.0" + android:pivotY="300.0" + android:rotation="45.0" > + <path + android:name="v" + android:fillColor="#000000" + android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> + </group> +</vector> ++ +
The animated vector drawable definition refers to the groups and paths in the vector drawable +by their names:
+ ++<!-- res/drawable/animvectordrawable.xml --> +<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" + android:drawable="@drawable/vectordrawable" > + <target + android:name="rotationGroup" + android:animation="@anim/rotation" /> + <target + android:name="v" + android:animation="@anim/path_morph" /> +</animated-vector> ++ +
The animation definitions represent {@link android.animation.ObjectAnimator} or {@link +android.animation.AnimatorSet} objects. The first animator in this example rotates the target +group 360 degrees:
+ ++<!-- res/anim/rotation.xml --> +<objectAnimator + android:duration="6000" + android:propertyName="rotation" + android:valueFrom="0" + android:valueTo="360" /> ++ +
The second animator in this example morphs the vector drawable's path from one shape to +another. Both paths must be compatible for morphing: they must have the same number of commands +and the same number of parameters for each command.
+ ++<!-- res/anim/path_morph.xml --> +<set xmlns:android="http://schemas.android.com/apk/res/android"> + <objectAnimator + android:duration="3000" + android:propertyName="pathData" + android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" + android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" + android:valueType="pathType" /> +</set> ++ +
For more information, see the API reference for {@link +android.graphics.drawable.AnimatedVectorDrawable}.
diff --git a/docs/html/training/material/compatibility.jd b/docs/html/training/material/compatibility.jd new file mode 100644 index 0000000000000..5e03450a19106 --- /dev/null +++ b/docs/html/training/material/compatibility.jd @@ -0,0 +1,172 @@ +page.title=Maintaining Compatibility + +@jd:body + +This lesson teaches you to
+-
+
You should also read
+ +Some material design features like the material theme and custom activity transitions are +only available on Android 5.0 (API level 21) and above. However, you can design your apps to make +use of these features when running on devices that support material design and still be compatible +with devices running previous releases of Android.
+ + +Define Alternative Styles
+ +You can configure your app to use the material theme on devices that support it and revert +to an older theme on devices running earlier versions of Android:
+ +-
+
Note: +If your app uses the material theme but does not provide an alternative theme in this manner, +your app will not run on versions of Android earlier than 5.0. +
+ + +Provide Alternative Layouts
+ +If the layouts that you design according to the material design guidelines do not use any of +the new XML attributes introduced in Android 5.0 (API level 21), 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.
+ +Create your layout files for Android 5.0 (API level 21) inside res/layout-v21/ and
+your alternative layout files for earlier versions of Android inside res/layout/.
+For example, res/layout/my_activity.xml is an alternative layout for
+res/layout-v21/my_activity.xml.
To avoid duplication of code, define your styles inside res/values/, modify the
+styles in res/values-v21/ for the new APIs, and use style inheritance, defining base
+styles in res/values/ and inheriting from those in res/values-v21/.
Use the Support Library
+ +The v7 Support Libraries +r21 and above includes the following material design features:
+ +-
+
System widgets
+ +The Theme.AppCompat themes provide material design styles for these widgets:
-
+
Color Palette
+ +To obtain material design styles and customize the color palette with the Android v7 Support
+Library, apply one of the Theme.AppCompat themes:
+<!-- extend one of the Theme.AppCompat themes --> +<style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> + <!-- customize the color palette --> + <item name="colorPrimary">@color/material_blue_500</item> + <item name="colorPrimaryDark">@color/material_blue_700</item> + <item name="colorAccent">@color/material_green_A200</item> +</style> ++ +
Lists and Cards
+ +The {@link android.support.v7.widget.RecyclerView} and {@link +android.support.v7.widget.CardView} widgets are available in earlier versions of Android through +the Android v7 Support Library with these limitations:
+-
+
Dependencies
+ +To use these features in versions of Android earlier than 5.0 (API level 21), include the +Android v7 Support Library in your project as a Gradle dependency:
+ +
+dependencies {
+ compile 'com.android.support:appcompat-v7:+'
+ compile 'com.android.support:cardview-v7:+'
+ compile 'com.android.support:recyclerview-v7:+'
+}
+
+
+
+Check the System Version
+ +The following features are available only in Android 5.0 (API level 21) and above:
+ +-
+
To preserve compatibility with earlier versions of Android, check the system {@link +android.os.Build.VERSION#SDK_INT version} at runtime before you invoke the APIs for any of these +features:
+ +
+// Check if we're running on Android 5.0 or higher
+if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+ // Call some material design APIs here
+} else {
+ // Implement this feature without material design
+}
+
+
+Note: To specify which versions of Android your app supports,
+use the android:minSdkVersion and android:targetSdkVersion
+attributes in your manifest file. To use the material design features in Android 5.0, set
+the android:targetSdkVersion attribute to 21. For more information, see
+the <uses-sdk> API
+guide.
This lesson teaches you to
+ +You should also read
+ +The following capabilities for drawables help you implement material design in your apps:
+ +-
+
This lesson shows you how to use these features in your app.
+ + +Tint Drawable Resources
+ +With Android 5.0 (API level 21) and above, you can tint bitmaps and nine-patches defined as
+alpha masks. You can tint them with color resources or theme attributes that resolve to color
+resources (for example, ?android:attr/colorPrimary). Usually, you create these assets
+only once and color them automatically to match your theme.
You can apply a tint to {@link android.graphics.drawable.BitmapDrawable} or {@link
+android.graphics.drawable.NinePatchDrawable} objects with the {@code setTint()} method. You can
+also set the tint color and mode in your layouts with the android:tint and
+android:tintMode attributes.
Extract Prominent Colors from an Image
+ +The Android Support Library r21 and above includes the {@link +android.support.v7.graphics.Palette} class, which lets you extract prominent colors from an image. +This class extracts the following prominent colors:
+ +-
+
To extract these colors, pass a {@link android.graphics.Bitmap} object to the +{@link android.support.v7.graphics.Palette#generate Palette.generate()} static method in the +background thread where you load your images. If you can't use that thread, call the +{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} method and +provide a listener instead.
+ +You can retrieve the prominent colors from the image using the getter methods in the
+Palette class, such as Palette.getVibrantColor.
To use the {@link android.support.v7.graphics.Palette} class in your project, add the following +Gradle dependency to your +app's module:
+ +
+dependencies {
+ ...
+ compile 'com.android.support:palette-v7:+'
+}
+
+
+For more information, see the API reference for the {@link android.support.v7.graphics.Palette} +class.
+ + +Create Vector Drawables
+ +In Android 5.0 (API Level 21) and above, you can define vector drawables, which scale without
+losing definition. You need only one asset file for a vector image, as opposed to an asset file for
+each screen density in the case of bitmap images. To create a vector image, you define the details
+of the shape inside a <vector> XML element.
The following example defines a vector image with the shape of a heart:
+ ++<!-- res/drawable/heart.xml --> +<vector xmlns:android="http://schemas.android.com/apk/res/android" + <!-- intrinsic size of the drawable --> + android:height="256dp" + android:width="256dp" + <!-- size of the virtual canvas --> + android:viewportWidth="32" + android:viewportHeight="32"> + + <!-- draw a path --> + <path android:fillColor="#8fff" + android:pathData="M20.5,9.5 + c-1.955,0,-3.83,1.268,-4.5,3 + c-0.67,-1.732,-2.547,-3,-4.5,-3 + C8.957,9.5,7,11.432,7,14 + c0,3.53,3.793,6.257,9,11.5 + c5.207,-5.242,9,-7.97,9,-11.5 + C25,11.432,23.043,9.5,20.5,9.5z" /> +</vector> ++ +
Vector images are represented in Android as {@link android.graphics.drawable.VectorDrawable}
+objects. For more information about the pathData syntax, see the SVG Path reference. For more information
+about animating the properties of vector drawables, see
+Animating Vector Drawables.
This lesson teaches you to
+-
+
You should also read
+ +To create apps with material design:
+ +-
+
Maintain backward compatibility
+ +You can add many material design features to your app while maintaining compatibility with +versions of Android earlier than 5.0. For more information, see +Maintaining Compatibility.
+ +Update your app with material design
+ +To update an existing app to incorporate material design, update your layouts following +material design guidelines. Also make sure to incorporate depth, touch feedback, and +animations.
+ +Create new apps with material design
+ +If you are creating a new app with material design features, the material design guidelines provide you with a +cohesive design framework. Follow those guidelines and use the new functionality in the Android +framework to design and develop your app.
+ + +Apply the Material Theme
+ +To apply the material theme in your app, specify a style that inherits from
+android:Theme.Material:
+<!-- res/values/styles.xml --> +<resources> + <!-- your theme inherits from the material theme --> + <style name="AppTheme" parent="android:Theme.Material"> + <!-- theme customizations --> + </style> +</resources> ++ +
The material theme provides updated system widgets that let you set their color palette and +default animations for touch feedback and activity transitions. For more details, see +Using the Material Theme.
+ + +Design Your Layouts
+ +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:
+ +-
+
Specify Elevation in Your Views
+ +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
+android:elevation attribute in your layouts:
+<TextView + android:id="@+id/my_textview" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@string/next" + android:background="@color/white" + android:elevation="5dp" /> ++ +
The new translationZ property lets you create animations that reflect temporary
+changes in the elevation of a view. Elevation changes can be useful when
+responding to touch
+gestures.
For more details, see Defining +Shadows and Clipping Views.
+ + +Create Lists and Cards
+ +{@link android.support.v7.widget.RecyclerView} is a more pluggable version of {@link +android.widget.ListView} that supports different layout types and provides performance improvements. +{@link android.support.v7.widget.CardView} lets you show pieces of information inside cards with +a consistent look across apps. The following code example demonstrates how to include a +{@link android.support.v7.widget.CardView} in your layout:
+ ++<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> ++ +
For more information, see Creating Lists +and Cards.
+ + +Customize Your Animations
+ +Android 5.0 (API level 21) 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:
+ +
+public class MyActivity extends Activity {
+
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ // enable transitions
+ getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
+ setContentView(R.layout.activity_my);
+ }
+
+ public void onSomeButtonClicked(View view) {
+ getWindow().setExitTransition(new Explode());
+ Intent intent = new Intent(this, MyOtherActivity.class);
+ startActivity(intent,
+ ActivityOptions
+ .makeSceneTransitionAnimation(this).toBundle());
+ }
+}
+
+
+When you start another activity from this activity, the exit transition is activated.
+ +To learn more about the new animation APIs, see Defining Custom Animations.
diff --git a/docs/html/preview/material/images/RecyclerView.png b/docs/html/training/material/images/RecyclerView.png similarity index 100% rename from docs/html/preview/material/images/RecyclerView.png rename to docs/html/training/material/images/RecyclerView.png diff --git a/docs/html/training/material/images/SceneTransition.png b/docs/html/training/material/images/SceneTransition.png new file mode 100644 index 0000000000000..ae82820837e04 Binary files /dev/null and b/docs/html/training/material/images/SceneTransition.png differ diff --git a/docs/html/preview/material/images/ThemeColors.png b/docs/html/training/material/images/ThemeColors.png similarity index 85% rename from docs/html/preview/material/images/ThemeColors.png rename to docs/html/training/material/images/ThemeColors.png index 53f695dd63e7f..b3c570b16acd6 100644 Binary files a/docs/html/preview/material/images/ThemeColors.png and b/docs/html/training/material/images/ThemeColors.png differ diff --git a/docs/html/training/material/images/shadows-depth.png b/docs/html/training/material/images/shadows-depth.png new file mode 100644 index 0000000000000..26b6b4a3b1134 Binary files /dev/null and b/docs/html/training/material/images/shadows-depth.png differ diff --git a/docs/html/training/material/index.jd b/docs/html/training/material/index.jd new file mode 100644 index 0000000000000..682926e7e8843 --- /dev/null +++ b/docs/html/training/material/index.jd @@ -0,0 +1,58 @@ +page.title=Creating Apps with Material Design + +@jd:body + +Dependencies and Prerequisites
+-
+
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 +described in the +material design +specification and use the new components and functionality available in Android 5.0 +(API level 21).
+ +This class shows you how to create material design apps with the following elements:
+ +-
+
This class also teaches you how to maintain compatibility with versions of Android earlier than +5.0 (API level 21) when you use material design features in your app.
+ +Lessons
+ +-
+
This lesson teaches you to
+-
+
You should also read
+ +To create complex lists and cards with material design styles in your apps, you can use the +{@link android.support.v7.widget.RecyclerView} and {@link android.support.v7.widget.CardView} +widgets.
+ + +Create Lists
+ +The {@link android.support.v7.widget.RecyclerView} widget is a more advanced and flexible +version of {@link android.widget.ListView}. This widget is a container for displaying large data +sets that can be scrolled very efficiently by maintaining a limited number of views. Use the +{@link android.support.v7.widget.RecyclerView} widget when you have data collections whose elements +change at runtime based on user action or network events.
+ +The {@link android.support.v7.widget.RecyclerView} class simplifies the display and handling of +large data sets by providing:
+ +-
+
You also have the flexibility to define custom layout managers and animations for {@link +android.support.v7.widget.RecyclerView} widgets.
+ +
+
+Figure 1. The RecyclerView widget.
+
To use the {@link android.support.v7.widget.RecyclerView} widget, you have to specify an +adapter and a layout manager. To create an adapter, extend the {@link +android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} class. The details +of the implementation depend on the specifics of your dataset and the type of views. For more +information, see the examples below.
+ +
+
+Figure 2 - Lists with RecyclerView.
+
A layout manager positions item views inside a {@link +android.support.v7.widget.RecyclerView} and determines when to reuse item views that are no +longer visible to the user. To reuse (or recycle) a view, a layout manager may ask the +adapter to replace the contents 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 {@link android.app.Activity#findViewById findViewById()} lookups.
+ +{@link android.support.v7.widget.RecyclerView} provides these built-in layout managers:
+ +-
+
To create a custom layout manager, extend the {@link +android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} class.
+ +Animations
+ +Animations for adding and removing items are enabled by default in {@link +android.support.v7.widget.RecyclerView}. To customize these animations, extend the +{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} class and use +the {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} +method.
+ +Examples
+ +The following code example demonstrates how to add the +{@link android.support.v7.widget.RecyclerView} to a layout:
+ ++<!-- 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"/> ++ +
Once you have added a {@link android.support.v7.widget.RecyclerView} widget to your layout, +obtain a handle to the object, connect it to a layout manager, and attach an adapter for the data +to be displayed:
+ +
+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);
+
+ // use this setting to improve performance if you know that changes
+ // in content do not change the layout 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);
+ }
+ ...
+}
+
+
+The adapter provides access to the items in your data set, creates views for items, and +replaces the content of some of the views with new data items when the original item is no longer +visible. The following code example shows a simple implementation for a data set that consists +of an array of strings displayed using {@link android.widget.TextView} widgets:
+ +
+public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
+ private String[] mDataset;
+
+ // Provide a reference to the views for each data item
+ // Complex data items may need more than one view per item, and
+ // you provide access to all the views for a data item in a view holder
+ public static class ViewHolder extends RecyclerView.ViewHolder {
+ // each data item is just a string in this case
+ 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, parent, false);
+ // 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;
+ }
+}
+
+
+
+
++Figure 3. Card examples. +
+Create Cards
+ +{@link android.support.v7.widget.CardView} extends the {@link android.widget.FrameLayout} class +and lets you show information inside cards that have a consistent look across the platform. {@link +android.support.v7.widget.CardView} widgets can have shadows and rounded corners.
+ +To create a card with a shadow, use the card_view:cardElevation attribute.
+{@link android.support.v7.widget.CardView} uses real elevation and dynamic shadows on Android 5.0
+(API level 21) and above and falls back to a programmatic shadow implementation on earlier versions.
+For more information, see Maintaining
+Compatibility.
Use these properties to customize the appearance of the +{@link android.support.v7.widget.CardView} widget:
+ +-
+
The following code example shows you how to include a {@link android.support.v7.widget.CardView} +widget in your layout:
+ ++<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" + xmlns:tools="http://schemas.android.com/tools" + xmlns:card_view="http://schemas.android.com/apk/res-auto" + ... > + <!-- 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> +</LinearLayout> ++ +
For more information, see the API reference for {@link android.support.v7.widget.CardView}.
+ + +Add Dependencies
+ +The {@link android.support.v7.widget.RecyclerView} and {@link android.support.v7.widget.CardView} +widgets are part of the v7 Support +Libraries. To use these widgets in your project, add these +Gradle dependencies to your +app's module:
+ +
+dependencies {
+ ...
+ compile 'com.android.support:cardview-v7:+'
+ compile 'com.android.support:recyclerview-v7:+'
+}
+
diff --git a/docs/html/training/material/shadows-clipping.jd b/docs/html/training/material/shadows-clipping.jd
new file mode 100644
index 0000000000000..f58d7802a8472
--- /dev/null
+++ b/docs/html/training/material/shadows-clipping.jd
@@ -0,0 +1,127 @@
+page.title=Defining Shadows and Clipping Views
+
+@jd:body
+
+This lesson teaches you to
+ +You should also read
+ +Material design introduces depth for UI elements. Depth helps users understand the relative +importance of each element and focus their attention to the task at hand.
+ +The elevation of a view, represented by the Z property, determines the size of its shadow: +views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane; they +don't cast shadows on other views placed below them and above the Z=0 plane.
+ +Views with higher Z values occlude views with lower Z values. However, the Z value of a view +does not affect the view's size.
+ +Elevation is also useful to create animations where widgets temporarily rise above the +view plane when performing some action.
+ + +Assign Elevation to Your Views
+ +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:
+ +Z = elevation + translationZ
+Figure 1 - Shadows for different view elevations.
+ +To set the elevation of a view in a layout definition, use the android:elevation
+attribute. To set the elevation of a view in the code of an activity, use the
+{@link android.view.View#setElevation View.setElevation()} method.
To set the translation of a view, use the {@link android.view.View#setTranslationZ +View.setTranslationZ()} method.
+ +The new {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} and {@link +android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} methods enable +you to easily animate the elevation of views. For more information, see the API reference for +{@link android.view.ViewPropertyAnimator} and the Property Animation developer +guide.
+ +You can also use a {@link android.animation.StateListAnimator} to +specify these animations in a declarative way. This is especially useful for cases where state +changes trigger animations, like when a user presses a button. For more information, see +Animate View State Changes
. + +The Z values are measured in the same units as the X and Y values.
+ + +Customize View Shadows and Outlines
+ +The bounds of a view's background drawable determine the default shape of its shadow. +Outlines represent the outer shape of a graphics object and define the ripple +area for touch feedback.
+ +Consider this view, defined with a background drawable:
+ ++<TextView + android:id="@+id/myview" + ... + android:elevation="2dp" + android:background="@drawable/myrect" /> ++ +
The background drawable is defined as a rectangle with rounded corners:
+ ++<!-- 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> ++ +
The view casts a shadow with rounded corners, since the background drawable defines the +view's outline. Providing a custom outline overrides the default shape of a view's shadow.
+ +To define a custom outline for a view in your code:
+ +
-
+
You can create oval and rectangular outlines with rounded corners using the methods in the
+{@link android.graphics.Outline} class. The default outline provider for views obtains the outline
+from the view's background. To prevent a view from casting a shadow, set its outline provider
+to null.
Clip Views
+ +Clipping views enables you to easily change the shape of a view. You can clip views for
+consistency with other design elements or to change the shape of a view in response to user input.
+You can clip a view to its outline area using the {@link android.view.View#setClipToOutline
+View.setClipToOutline()} method or the android:clipToOutline attribute. Only
+rectangle, circle, and round rectangle outlines support clipping, as determined by the
+{@link android.graphics.Outline#canClip Outline.canClip()} method.
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 {@link android.view.View#setClipToOutline View.setClipToOutline()} +method.
+ +Clipping views is an expensive operation, so don't animate the shape you use to +clip a view. To achieve this effect, use the Reveal Effect animation.
diff --git a/docs/html/training/material/theme.jd b/docs/html/training/material/theme.jd new file mode 100644 index 0000000000000..17894f6c1516d --- /dev/null +++ b/docs/html/training/material/theme.jd @@ -0,0 +1,131 @@ +page.title=Using the Material Theme + +@jd:body + +This lesson teaches you to
+ +You should also read
+ +The new material theme provides:
+ +-
+
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 3.
+ +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.
+ +The material theme is defined as:
+ +-
+
For a list of material styles that you can use, see the API reference for +{@link android.R.style R.style}.
+ + +
+ Figure 1. Dark material theme
+
+ Figure 2. Light material theme
++
+Note: The material theme is only available in Android 5.0 (API level 21) and +above. The v7 Support Libraries +provide themes with material design styles for some widgets and support for customizing the color +palette. For more information, see +Maintaining Compatibility. +
+ + +Customize the Color Palette
+ +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:
+ ++<resources> + <!-- inherit from the material theme --> + <style name="AppTheme" parent="android:Theme.Material"> + <!-- Main theme colors --> + <!-- your app branding color for the app bar --> + <item name="android:colorPrimary">@color/primary</item> + <!-- darker variant for the status bar and 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> ++ +
++Figure 3. Customizing the material theme.
+Customize the Status Bar
+ +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 android:statusBarColor attribute when
+you extend the material theme. By default, android:statusBarColor inherits the
+value of android:colorPrimaryDark.
You can also draw behind the status bar yourself. For example, if you want to show
+the status bar transparently over a photo, with a subtle dark gradient to ensure the white
+status icons are visible. To do so, set the android:statusBarColor attribute to
+@android:color/transparent and adjust the window flags as required. You can
+also use the {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} method for
+animations or fading.
+Note: The status bar should almost always have a clear delineation from the +primary toolbar, except for cases where you show edge-to-edge rich imagery or media content behind +these bars and when you use a gradient to ensure that the icons are still visible. +
+ +When you customize the navigation and status bars, either make them both transparent or modify +only the status bar. The navigation bar should remain black in all other cases.
+ + +Theme Individual Views + +
Elements in XML layout definitions can specify the android:theme attribute,
+which references a theme resource. This attribute modifies the theme for the element and any
+child elements, which is useful for altering theme color palettes in a specific portion
+of an interface.