-Figure 1. Customizing the Material theme.
-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: -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.
The View.createRevealAnimator method enables you to animate a clipping circle
to reveal or hide a view.
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. -First, enable window content transitions with the android:windowContentTransitions
-attribute when you define a style that inherits from the Material theme:
<style name="BaseAppTheme" parent="android:Theme.Material"> @@ -174,14 +187,14 @@ object:
Window.setSharedElementExitTransitionIf 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.
To make a screne transition animation between two activities that have a shared element:
@@ -219,7 +232,7 @@ imgContainerView.setOnClickListener(new View.OnClickListener() {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 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,
-
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(); -
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:
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.
-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:
res/values/styles.xml.res/values-v21/styles.xml.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.
The RecyclerView and CardView widgets are included in the Android L
Developer Preview Support Library, so they are available in earlier versions of Android.
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 -
To create material design apps on Android:
+To create apps with material design:
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.
-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.
-
-Figure 1. Customizing the Material theme.
-The new Material theme provides:
- -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.
- -The Material theme is defined as:
- -@android:style/Theme.Material (dark version)@android:style/Theme.Material.Light (light version)@android:style/Theme.Material.Light.DarkActionBarFor 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. -
- -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.
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.
In addition to applying the Material theme, you also have to:
- -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:
+ +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:
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.
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:
+<Button + android:id="@+id/my_button" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@string/next" + android:elevation="10dp" /> ++ +
For more details, see Views and +Shadows.
+ + +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:
+<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.
+ + +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: -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 -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
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.
- -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.
- - -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:
+ +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 + +
The new material theme provides:
+ +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.
+ +The material theme is defined as:
+ +@android:style/Theme.Material (dark version)@android:style/Theme.Material.Light (light version)@android:style/Theme.Material.Light.DarkActionBarFor 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. +
+ + +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> ++ + +
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. +
+ + +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.
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 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.
To include a RecyclerView in your layout:
CardView extends the FrameLayout class and lets you show information
inside a card with optional rounded corners:
In material design apps, depth has meaning. You should assign higher elevation values to more +
In apps with material design, depth has meaning. You should assign higher elevation values to more important UI elements in your app. The elevation value of a view determines the size of its shadow: views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane under an orthographic projection (the views do not scale for different values of Z).
-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:
@@ -29,7 +39,7 @@ static component, and the translation is used for animations:px).
-The bounds of a view's background drawable determine the default shape of its shadow. To define
a custom shape for a shadow, such as an oval, use the View.setOutline method:
To prevent a view from casting a shadow, set its outline to null.
The Android L Developer Preview lets you clip a view to its outline area using the
View.setClipToOutline method. Only rectangle, circle, and round rectangle outlines
diff --git a/docs/html/preview/preview_toc.cs b/docs/html/preview/preview_toc.cs
index 72d62c3623aa1..5920eccdbef05 100644
--- a/docs/html/preview/preview_toc.cs
+++ b/docs/html/preview/preview_toc.cs
@@ -19,6 +19,7 @@