Animations in material design give users feedback on their actions and provide visual
-continuity as users interact with your app. The Material theme provides some default animations
+continuity as users interact with your app. The material theme provides some default animations
for buttons and activity transitions, and the Android L Developer Preview provides additional
APIs that let you customize these animations and create new ones:
@@ -17,7 +30,7 @@ APIs that let you customize these animations and create new ones:
-
Touch Feedback
+
Touch Feedback
In the Android L Developer Preview the default touch feedback animations for buttons use the new
RippleDrawable class, which transitions between different states with a ripple
@@ -28,7 +41,7 @@ it as the background of your view. You can define a RippleDrawable
using the ripple element.
-
Reveal Effect
+
Reveal Effect
The View.createRevealAnimator method enables you to animate a clipping circle
to reveal or hide a view.
@@ -82,7 +95,7 @@ anim.start();
-
Activity Transitions
+
Activity Transitions
The Android L Developer Preview enables your app to customize the default animations for
activity transitions. You can specify custom animations for enter and exit transitions and for
@@ -109,10 +122,10 @@ transitions of shared elements between activities.
Figure 1 - A scene transition with one shared element.
-
Specify custom transitions
+
Specify custom transitions
First, enable window content transitions with the android:windowContentTransitions
-attribute when you define a style that inherits from the Material theme:
+attribute when you define a style that inherits from the material theme:
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
+
Shared elements transitions
To make a screne transition animation between two activities that have a shared element:
For shared dynamic views that you generate in your code, use the View.setViewName
method to specify a common element name in both activities.
-
Multiple shared elements
+
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
@@ -237,7 +250,7 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
-
Curved Motion
+
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
@@ -280,7 +293,7 @@ mAnimator.start();
-
View State Changes
+
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
@@ -343,7 +356,7 @@ to define an AnimatedStateListDrawable as an XML resource:
-
Drawable Tinting
+
Drawable Tinting
The Android L Developer Preview enables you to define bitmaps as an alpha mask and to tint
them using a color resource or a theme attribute that resolves to a color resource. You can
diff --git a/docs/html/preview/material/compatibility.jd b/docs/html/preview/material/compatibility.jd
index b5555ad2f5524..ce04e9e8f8b3a 100644
--- a/docs/html/preview/material/compatibility.jd
+++ b/docs/html/preview/material/compatibility.jd
@@ -2,22 +2,34 @@ page.title=Compatibility
@jd:body
-
The new material design features (like the Material theme and custom animations) are only
+
The new material design features (like the material theme and custom animations) are only
available in the Android L Developer Preview. However, you can design your apps to make use of
these features when running on devices with the Android L Developer Preview and still be
compatible with previous releases of Android.
-
Material Theme
+
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
+
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:
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
+
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.
@@ -26,7 +38,7 @@ theme on devices running earlier versions of Android:
your app will not run on earlier versions of Android.
-
Layouts
+
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
@@ -38,13 +50,13 @@ and your alternative layout files for earlier versions of Android inside r
Alternative layouts have the same file name.
-
UI Widgets
+
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.
-
Animation APIs
+
Animation APIs
The new APIs for custom animations are only available in the Android L Developer Preview. To
preserve compatibility with earlier verisons of Android, check the system version at runtime before
diff --git a/docs/html/preview/material/get-started.jd b/docs/html/preview/material/get-started.jd
index c527550484e0e..9c0e55d6f0d69 100644
--- a/docs/html/preview/material/get-started.jd
+++ b/docs/html/preview/material/get-started.jd
@@ -2,135 +2,145 @@ page.title=Get Started
@jd:body
-
+ Define additional styles to customize the material theme.
+
+ Create your layouts following material design guidelines.
+
+ Specify the depth for 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.
-
Update Your App for the Android L Developer Preview
+
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
+
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 solid design framework for your app. Follow these guidelines and
use the new functionality in the Android framework to design and develop your app.
-
Material Theme
+
Apply the Material Theme
-
-
-
Figure 1. Customizing the Material theme.
-
-
-
The new Material theme provides:
-
-
-
System widgets that let you set their color palette
-
Touch feedback animations for the system widgets
-
Activity transition animations
-
-
-
The Android L Developer Preview lets you easily customize the look of the Material theme
-according to your brand identity with a color palette you control. You can tint the app bar and
-the status bar using theme attributes, as shown in Figure 1.
-
-
The system widgets have a new design and touch feedback animations. Activity transitions help
-users navigate your app by providing visual continuity. You can customize the color palette,
-the touch feedback animations, and the activity transitions for your app.
For a list of material styles that you can use, see the API reference for
-android.R.styles.
-
-
-Note: The Material theme is only available in the Android L Developer Preview.
-For more information, see Compatibility.
-
-
-
Theme Inheritance
-
-
In the Android L Developer Preview, 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.
-
-
Customize the Status Bar
-
-
The Material theme lets you easily customize the status bar, so you can specify a
-color which fits your brand and provides enough contrast to show the white status icons. To
-set a custom color for the status bar, use the android:statusBarColor attribute when
-you extend the Material theme.
-
-
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. You can also use the
-Window.setStatusBarColor method for animations or fading.
-
-
-
Material Design
-
-
In addition to applying the Material theme, you also have to:
-
-
-
Customize the theme's base colors to fit your brand.
-
Design your layouts according to material design guidelines.
-
-
-
The Android L Developer Preview provides new attributes to make it easy to customize 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>
- <!-- inherit from the Material theme -->
- <style name="BaseAppTheme" parent="android:Theme.Material">
- <!-- Main theme colors -->
- <!-- your app's branding color (for the app bar) -->
- <item name="android:colorPrimary">@color/primary</item>
- <!-- darker variant of colorPrimary (for contextual app bars) -->
- <item name="android:colorPrimaryDark">@color/primary_dark</item>
-
- <!-- other theme colors -->
- <item name="android:colorBackground">@color/background</item>
- <item name="android:colorAccent">@color/accent</item>
- <item name="android:colorButtonNormal">@color/button_normal</item>
- <item name="android:colorControlHighlight">@color/button_chigh</item>
- <item name="android:windowBackground">@color/wbackground</item>
+ <!-- your app's theme inherits from the Material theme -->
+ <style name="AppTheme" parent="android:Theme.Material">
+ <!-- theme customizations -->
</style>
</resources>
-
Ensure that you follow material design guidelines when choosing colors for your app.
+
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 according to the material design specification. In particular, pay
-attention to:
+
+
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:
-
Baseline grids
-
Keylines
-
Spacing
-
Touch target size
-
Layout structure
+
Baseline grids
+
Keylines
+
Spacing
+
Touch target size
+
Layout structure
You still define layouts inside XML files using the standard tools from the Android framework.
-To specify the depth level of each view in your layout, use the android:elevation
-attribute.
\ No newline at end of file
+For details on the material design guidelines, see the material design
+specification.
+
+
+
Specify Depth in Your Views
+
+
In the Android L Developer Preview, views can cast shadows. The elevation value of a view
+determines the size of its shadow. To set the elevation of a view, use the
+android:elevation attribute in your layouts:
The Android L Developer Preview includes two new UI widgets for complex views,
+RecyclerView and CardView. 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:
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/index.jd b/docs/html/preview/material/index.jd
index 468e4bd9d6ddc..b7abcb4db0de7 100644
--- a/docs/html/preview/material/index.jd
+++ b/docs/html/preview/material/index.jd
@@ -19,9 +19,9 @@ design apps:
-
Material Theme
+
Material Theme
-
The Material theme provides a new style for your app, system widgets that let you set
+
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.
@@ -42,7 +42,7 @@ their color palette, and default animations for touch feedback and activity tran
-
New Widgets
+
New Widgets
The Android L Developer Preview includes two new widgets for displaying complex views:
@@ -50,8 +50,8 @@ their color palette, and default animations for touch feedback and activity tran
-
The new RecyclerView widget is a container for large sets of views that can be
- recycled and scrolled very efficiently.
+
The new RecyclerView widget is a more advanced version of ListView
+ provides performance improvements for dynamic views and is easier to use.
@@ -62,21 +62,13 @@ their color palette, and default animations for touch feedback and activity tran
-
3D Views and Shadows
+
View Shadows
In addition to the X and Y components, views in the Android L Developer Preview have a Z
component. This new component represents the elevation of a view, which determines the size of
its shadow: views with higher Z values cast bigger shadows.
-
-
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.
-
-
-
-
+
-
-
-
-
+
+ Click on the device screen to replay the movie
-
-
-
-Click on the device screen to replay the movie
-
+
Animations
-
-
-
-
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 custom animation patterns 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.
-
-
-
+
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 in the Android L Developer Preview let you:
+
+
+
+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 custom animation patterns 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.
+
+
-
New Capabilities for Drawables
+
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 can create these assets only
diff --git a/docs/html/preview/material/theme.jd b/docs/html/preview/material/theme.jd
new file mode 100644
index 0000000000000..b954960b8979b
--- /dev/null
+++ b/docs/html/preview/material/theme.jd
@@ -0,0 +1,100 @@
+page.title=Material Theme
+
+@jd:body
+
+
System widgets that let you set their color palette
+
Touch feedback animations for the system widgets
+
Activity transition animations
+
+
+
The Android L Developer Preview lets you easily customize the look of the material theme
+according to your brand identity with a color palette you control. You can tint the app bar and
+the status bar using theme attributes, as shown in Figure 1.
+
+
+
+
Figure 1. Customizing the material theme.
+
+
+
The system widgets have a new design and touch feedback animations. Activity transitions help
+users navigate your app by providing visual continuity. You can customize the color palette,
+the touch feedback animations, and the activity transitions for your app.
For a list of material styles that you can use, see the API reference for
+android.R.styles.
+
+
+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 contextual app bars) -->
+ <item name="android:colorPrimaryDark">@color/primary_dark</item>
+
+ <!-- other theme colors -->
+ <item name="android:colorButtonNormal">@color/button_normal</item>
+ <item name="android:windowBackground">@color/wbackground</item>
+ </style>
+</resources>
+
+
+
+
Customize the Status Bar
+
+
The material theme lets you easily customize the status bar, so you can specify a
+color which fits your brand and provides enough contrast to show the white status icons. To
+set a custom color for the status bar, use the android:statusBarColor attribute when
+you extend the material theme.
+
+
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. 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.
+
+
+
+
Theme Inheritance
+
+
In the Android L Developer Preview, 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.
\ No newline at end of file
diff --git a/docs/html/preview/material/ui-widgets.jd b/docs/html/preview/material/ui-widgets.jd
index 5c12a1af96927..f18bff9e52b9d 100644
--- a/docs/html/preview/material/ui-widgets.jd
+++ b/docs/html/preview/material/ui-widgets.jd
@@ -2,13 +2,22 @@ page.title=UI Widgets
@jd:body
+
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 styles and animations by default.
-
RecyclerView
+
RecyclerView
RecyclerView is a more advanced version of ListView. This widget is
a container for large sets of views that can be recycled and scrolled very efficiently. Use the
@@ -62,7 +71,7 @@ performance by avoiding the creation of unnecessary views or performing expensiv
To create a custom layout, you extend the RecyclerView.LayoutManager class.
-
Examples
+
Examples
To include a RecyclerView in your layout:
@@ -155,7 +164,7 @@ public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
-
CardView
+
CardView
CardView extends the FrameLayout class and lets you show information
inside a card with optional rounded corners: