am 2e57c2c9: Merge "docs: Migrating material design info from the Preview site" into lmp-dev
* commit '2e57c2c956588b3f08111c323e811d4cbe46dabd': docs: Migrating material design info from the Preview site
This commit is contained in:
Ricardo Cervera
@@ -8,6 +8,10 @@
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/material/index.html">Material Design</a></div>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header"><a href="<?cs var:toroot ?>design/devices.html">Devices</a></div>
|
||||
<ul>
|
||||
|
||||
@@ -28,20 +28,20 @@ footer.hide=1
|
||||
<span itemprop="description">Welcome to <strong>Android Design</strong>, your place for
|
||||
learning how to design exceptional Android apps.</span>
|
||||
<br><br>
|
||||
Want to know what <strong>Android 4.4 KitKat</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br>
|
||||
Want to know what <strong>Android 5.0</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br>
|
||||
<a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
|
||||
</div>
|
||||
<a id="hero-image" href="/design/get-started/creative-vision.html">
|
||||
<img src="/design/media/index_landing_page.png">
|
||||
<img src="{@docRoot}design/media/index_landing_page.png" width="760" height="600" alt=""
|
||||
srcset="{@docRoot}design/media/index_landing_page_2x.png 2x"/>
|
||||
</a>
|
||||
|
||||
<div style="background: hsl(8, 70%, 54%); margin: 0; padding: 20px 20px 10px 20px;color: #fff; position: absolute;top: 255px;width: 179px;">
|
||||
<h2 style="color: #fff;margin:0 0 10px; font-size:18px" class="norule">L Developer Preview</h2>
|
||||
<p> 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.
|
||||
<h2 style="color: #fff;margin:0 0 10px; font-size:18px" class="norule">Material Design</h2>
|
||||
<p>Android 5.0 introduces a design
|
||||
metaphor inspired by paper and ink that provides a reassuring sense of tactility.
|
||||
</p>
|
||||
<p><a class="white" href="{@docRoot}preview/material/index.html">Learn more about Material</a></p>
|
||||
<p><a class="white" href="{@docRoot}design/material/index.html">Learn more</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 404 KiB After Width: | Height: | Size: 404 KiB |
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 186 KiB |
150
docs/html/design/material/index.jd
Normal file
150
docs/html/design/material/index.jd
Normal file
@@ -0,0 +1,150 @@
|
||||
page.title=Material Design
|
||||
page.tags=Material,design
|
||||
|
||||
@jd:body
|
||||
|
||||
<p itemprop="description">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 <a href="http://www.google.com/design/spec">material design specification</a> and use the
|
||||
new components and functionality available in Android 5.0 (API level 21) and above.</p>
|
||||
|
||||
<p>Android provides the following elements for you to build material design apps:</p>
|
||||
|
||||
<ul>
|
||||
<li>A new theme</li>
|
||||
<li>New widgets for complex views</li>
|
||||
<li>New APIs for custom shadows and animations</li>
|
||||
</ul>
|
||||
|
||||
<p>For more information about implementing material design on Android, see
|
||||
<a href="{@docRoot}training/material/index.html">Creating Apps with Material Design</a>.</p>
|
||||
|
||||
|
||||
<h3>Material Theme</h3>
|
||||
|
||||
<p>The material theme provides a new style for your app, system widgets that let you set
|
||||
their color palette, and default animations for touch feedback and activity transitions.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238"/>
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Dark material theme</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238"/>
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Light material theme</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>For more information, see <a href="{@docRoot}training/material/theme.html">Using the Material
|
||||
Theme</a>.</p>
|
||||
|
||||
|
||||
<h3>Lists and Cards</h3>
|
||||
|
||||
<p>Android provides two new widgets for displaying cards and lists with material design styles
|
||||
and animations:</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426"/>
|
||||
<p>The new <code>RecyclerView</code> widget is a more pluggable version of <code>ListView</code>
|
||||
that supports different layout types and provides performance improvements.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426"/>
|
||||
<p>The new <code>CardView</code> widget lets you display important pieces of information inside
|
||||
cards that have a consistent look and feel.</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>For more information, see <a href="{@docRoot}training/material/lists-cards.html">Creating Lists
|
||||
and Cards</a>.</p>
|
||||
|
||||
|
||||
<h3>View Shadows</h3>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<ul>
|
||||
<li>The size of the shadow: views with higher Z values cast bigger shadows.</li>
|
||||
<li>The drawing order: views with higher Z values appear on top of other views.</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>To replay the movie, click on the device screen</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>For more information, see <a href="{@docRoot}training/material/shadows-clipping.html">Defining
|
||||
Shadows and Clipping Views</a>.</p>
|
||||
|
||||
|
||||
<h3>Animations</h3>
|
||||
|
||||
<p>The new animation APIs let you create custom animations for touch feedback in UI controls,
|
||||
changes in view state, and activity transitions.</p>
|
||||
|
||||
<p>These APIs let you:</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
Respond to touch events in your views with <strong>touch feedback</strong> animations.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Hide and show views with <strong>circular reveal</strong> animations.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Switch between activities with custom <strong>activity transition</strong> animations.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Create more natural animations with <strong>curved motion</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Animate changes in one or more view properties with <strong>view state change</strong> animations.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Show animations in <strong>state list drawables</strong> between view state changes.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Touch feedback animations are built into several standard views, such as buttons. The new APIs
|
||||
let you customize these animations and add them to your custom views.</p>
|
||||
|
||||
<p>For more information, see <a href="{@docRoot}training/material/animations.html">Defining Custom
|
||||
Animations</a>.</p>
|
||||
|
||||
|
||||
<h3>Drawables</h3>
|
||||
|
||||
<p>These new capabilities for drawables help you implement material design apps:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Vector drawables</strong> are scalable without losing definition and are perfect
|
||||
for single-color in-app icons.</li>
|
||||
<li><strong>Drawable tinting</strong> lets you define bitmaps as an alpha mask and tint them with
|
||||
a color at runtime.</li>
|
||||
<li><strong>Color extraction</strong> lets you automatically extract prominent colors from a
|
||||
bitmap image.</li>
|
||||
</ul>
|
||||
|
||||
<p>For more information, see <a href="{@docRoot}training/material/drawables.html">Working with
|
||||
Drawables</a>.</p>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 175 KiB After Width: | Height: | Size: 209 KiB |
BIN
docs/html/design/media/index_landing_page_2x.png
Normal file
BIN
docs/html/design/media/index_landing_page_2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 809 KiB |
@@ -3,7 +3,24 @@ page.tags=KitKat,Android 4.4
|
||||
@jd:body
|
||||
|
||||
|
||||
<p>A quick look at the new patterns and styles you can use to build beautiful Android apps…
|
||||
<p>A quick look at the new patterns and styles you can use to build beautiful Android apps…
|
||||
|
||||
|
||||
<h2 id="Android5">Android 5.0 Lollipop</h2>
|
||||
|
||||
<h3>Material design</h3>
|
||||
|
||||
<p><a href="{@docRoot}design/material/index.html">Material design</a> 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.</p>
|
||||
|
||||
<h3>Notifications</h3>
|
||||
|
||||
<p><a href="{@docRoot}design/patterns/notifications.html">Notifications</a> receive important
|
||||
updates in Android 5.0, with material design visual changes, notification availability in the
|
||||
lockscreen, priority notifications, and cloud-synced notifications.</p>
|
||||
|
||||
|
||||
<h2 id="kitkat">Android 4.4 KitKat</h2>
|
||||
|
||||
@@ -30,7 +47,7 @@ page.tags=KitKat,Android 4.4
|
||||
see it in every screen of your app.
|
||||
</p>
|
||||
<p>
|
||||
<a href="{@docRoot}design/style/branding.html">Your Branding</a> highlights
|
||||
<a href="{@docRoot}design/style/branding.html">Your Branding</a> highlights
|
||||
these and other pointers on how to incorporate elements of your brand into your
|
||||
app's visual language — highly encouraged!
|
||||
</p>
|
||||
@@ -60,7 +77,7 @@ page.tags=KitKat,Android 4.4
|
||||
<img src="{@docRoot}design/media/touch_feedback_reaction_response.png" style="padding-top:1em;">
|
||||
|
||||
<h3>
|
||||
Full screen
|
||||
Full screen
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
@@ -73,7 +90,7 @@ page.tags=KitKat,Android 4.4
|
||||
<img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
|
||||
|
||||
<h3>
|
||||
Gestures
|
||||
Gestures
|
||||
</h3>
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-6">
|
||||
|
||||
@@ -1,441 +0,0 @@
|
||||
page.title=Animations
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="qv-wrapper">
|
||||
<div id="qv">
|
||||
<h2>In this document</h2>
|
||||
<ol>
|
||||
<li><a href="#touch">Touch Feedback</a></li>
|
||||
<li><a href="#reveal">Reveal Effect</a></li>
|
||||
<li><a href="#transitions">Activity Transitions</a></li>
|
||||
<li><a href="#curvedmotion">Curved Motion</a></li>
|
||||
<li><a href="#viewstate">Animating View State Changes</a></li>
|
||||
<li><a href="#drawabletint">Drawable Tinting</a></li>
|
||||
<li><a href="#colorextract">Extracting Colors from an Image</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Animations in material design give users feedback on their actions and provide visual
|
||||
continuity as users interact with your app. The material theme provides some default animations
|
||||
for buttons and activity transitions, and the Android L Developer Preview provides additional
|
||||
APIs that let you customize these animations and create new ones:</p>
|
||||
|
||||
<ul>
|
||||
<li>Touch feedback</li>
|
||||
<li>Reveal effect</li>
|
||||
<li>Activity transitions</li>
|
||||
<li>Curved motion</li>
|
||||
<li>View state changes</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id="touch">Touch Feedback</h2>
|
||||
|
||||
<p>The default touch feedback animations for buttons use the new
|
||||
<code>RippleDrawable</code> class, which transitions between different states with a ripple
|
||||
effect.</p>
|
||||
|
||||
<p>In most cases, this functionality should be applied in your view XML by specifying the
|
||||
background as <code>?android:attr/selectableItemBackground</code> for a bounded ripple or
|
||||
<code>?android:attr/selectableItemBackgroundBorderless</code> for a ripple that extends beyond
|
||||
the view bounds. You can also create a <code>RippleDrawable</code> and set
|
||||
it as the background of your view. Alternatively, you can define a <code>RippleDrawable</code>
|
||||
as an XML resource using the <code>ripple</code> element. The
|
||||
Android L Developer Preview animates the selection color with a ripple effect.</p>
|
||||
|
||||
<p>You can assign a color to <code>RippleDrawable</code> objects. To change the default touch
|
||||
feedback color, use the theme's <code>android:colorControlHighlight</code> attribute.</p>
|
||||
|
||||
|
||||
<h2 id="reveal">Reveal Effect</h2>
|
||||
|
||||
<p>The <code>ViewAnimationUtils.createCircularReveal</code> method enables you to animate a
|
||||
clipping circle to reveal or hide a view.</p>
|
||||
|
||||
<p>To reveal a previously invisible view using this effect:</p>
|
||||
|
||||
<pre>
|
||||
// previously invisible view
|
||||
View myView = findViewById(R.id.my_view);
|
||||
|
||||
// get the center for the clipping circle
|
||||
int cx = (myView.getLeft() + myView.getRight()) / 2;
|
||||
int cy = (myView.getTop() + myView.getBottom()) / 2;
|
||||
|
||||
// get the final radius for the clipping circle
|
||||
int finalRadius = myView.getWidth();
|
||||
|
||||
// create and start the animator for this view
|
||||
// (the start radius is zero)
|
||||
ValueAnimator anim =
|
||||
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
|
||||
anim.start();
|
||||
</pre>
|
||||
|
||||
<p>To hide a previously visible view using this effect:</p>
|
||||
|
||||
<pre>
|
||||
// previously visible view
|
||||
final View myView = findViewById(R.id.my_view);
|
||||
|
||||
// get the center for the clipping circle
|
||||
int cx = (myView.getLeft() + myView.getRight()) / 2;
|
||||
int cy = (myView.getTop() + myView.getBottom()) / 2;
|
||||
|
||||
// get the initial radius for the clipping circle
|
||||
int initialRadius = myView.getWidth();
|
||||
|
||||
// create the animation (the final radius is zero)
|
||||
ValueAnimator anim =
|
||||
ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
|
||||
|
||||
// make the view invisible when the animation is done
|
||||
anim.addListener(new AnimatorListenerAdapter() {
|
||||
@Override
|
||||
public void onAnimationEnd(Animator animation) {
|
||||
super.onAnimationEnd(animation);
|
||||
myView.setVisibility(View.INVISIBLE);
|
||||
}
|
||||
});
|
||||
|
||||
// start the animation
|
||||
anim.start();
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="transitions">Activity Transitions</h2>
|
||||
|
||||
<p>You can specify custom animations for enter and exit transitions and for
|
||||
transitions of shared elements between activities.</p>
|
||||
|
||||
<ul>
|
||||
<li>An <strong>enter</strong> transition determines how views in an activity enter the scene.
|
||||
For example, in the <em>explode</em> enter transition, the views enter the scene from the outside
|
||||
and fly in towards the center of the screen.</li>
|
||||
|
||||
<li>An <strong>exit</strong> transition determines how views in an activity exit the scene. For
|
||||
example, in the <em>explode</em> exit transition, the views exit the scene away from the
|
||||
center.</li>
|
||||
|
||||
<li>A <strong>shared elements</strong> transition determines how views that are shared between
|
||||
two activities transition between these activities. For example, if two activities have the same
|
||||
image in different positions and sizes, the <em>moveImage</em> shared element transition
|
||||
translates and scales the image smoothly between these activities.</li>
|
||||
</ul>
|
||||
|
||||
<p>The Android L Developer Preview supports these enter and exit transitions:</p>
|
||||
|
||||
<ul>
|
||||
<li><em>explode</em> - Moves views in or out from the center of the scene.</li>
|
||||
<li><em>slide</em> - Moves views in or out from one of the edges of the scene.</li>
|
||||
<li><em>fade</em> - Moves views in or out of the scene.</li>
|
||||
</ul>
|
||||
|
||||
<p>Any transition that extends the <code>android.transition.Visibility</code> class is supported
|
||||
as an enter or exit transition. For more information, see the API reference for the
|
||||
<code>android.transition.Transition</code> class.</p>
|
||||
|
||||
<p>The Android L Developer Preview also supports these shared elements transitions:</p>
|
||||
|
||||
<ul>
|
||||
<li><em>changeBounds</em> - Animates the changes in layout bounds of target views.</li>
|
||||
<li><em>changeClipBounds</em> - Animates the changes in clip bounds of target views.</li>
|
||||
<li><em>changeTransform</em> - Animates the changes in scale and rotation of target views.</li>
|
||||
<li><em>moveImage</em> - Animates changes in size and scale type for an image view.</li>
|
||||
</ul>
|
||||
|
||||
<p>When you enable activity transitions in your app, the default cross-fading transition is
|
||||
activated between the entering and exiting activities.</p>
|
||||
|
||||
<img src="/preview/material/images/SceneTransition.png" alt=""
|
||||
id="figure1" style="width:600px;margin-top:20px"/>
|
||||
<p class="img-caption">
|
||||
<strong>Figure 1</strong> - A scene transition with one shared element.
|
||||
</p>
|
||||
|
||||
<h3>Specify custom transitions</h3>
|
||||
|
||||
<p>First, enable window content transitions with the <code>android:windowContentTransitions</code>
|
||||
attribute when you define a style that inherits from the material theme. You can also specify
|
||||
enter, exit, and shared element transitions in your style definition:</p>
|
||||
|
||||
<pre>
|
||||
<style name="BaseAppTheme" parent="android:Theme.Material">
|
||||
<!-- enable window content transitions -->
|
||||
<item name="android:windowContentTransitions">true</item>
|
||||
|
||||
<!-- specify enter and exit transitions -->
|
||||
<item name="android:windowEnterTransition">@transition/explode</item>
|
||||
<item name="android:windowExitTransition">@transition/explode</item>
|
||||
|
||||
<!-- specify shared element transitions -->
|
||||
<item name="android:windowSharedElementEnterTransition">
|
||||
@transition/move_image</item>
|
||||
<item name="android:windowSharedElementExitTransition">
|
||||
@transition/move_image</item>
|
||||
</style>
|
||||
</pre>
|
||||
|
||||
<p>The <code>move_image</code> transition in this example is defined as follows:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/transition/move_image.xml -->
|
||||
<!-- (see also Shared Transitions below) -->
|
||||
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<moveImage/>
|
||||
</transitionSet>
|
||||
</pre>
|
||||
|
||||
<p>The <code>moveImage</code> element corresponds to the <code>android.transition.MoveImage</code>
|
||||
class. For more information, see the API reference for <code>android.transition.Transition</code>.
|
||||
</p>
|
||||
|
||||
<p>To enable window content transitions in your code instead, call the
|
||||
<code>Window.requestFeature</code> method:</p>
|
||||
|
||||
<pre>
|
||||
// inside your activity (if you did not enable transitions in your theme)
|
||||
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
|
||||
|
||||
// set an exit transition
|
||||
getWindow().setExitTransition(new Explode());
|
||||
</pre>
|
||||
|
||||
<p>To specify transitions in your code, call these methods with a <code>Transition</code>
|
||||
object:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>Window.setEnterTransition</code></li>
|
||||
<li><code>Window.setExitTransition</code></li>
|
||||
<li><code>Window.setSharedElementEnterTransition</code></li>
|
||||
<li><code>Window.setSharedElementExitTransition</code></li>
|
||||
</ul>
|
||||
|
||||
<p>The <code>setExitTransition</code> and <code>setSharedElementExitTransition</code> methods
|
||||
define the exit transition for the calling activity. The <code>setEnterTransition</code> and
|
||||
<code>setSharedElementEnterTransition</code> methods define the enter transition for the called
|
||||
activity.</p>
|
||||
|
||||
<p>To get the full effect of a transition, you must enable window content transitions on both the
|
||||
calling and called activities. Otherwise, the calling activity will start the exit transition,
|
||||
but then you'll see a window transition (like scale or fade).</p>
|
||||
|
||||
<p>To start an enter transition as soon as possible, use the
|
||||
<code>Window.setAllowEnterTransitionOverlap</code> method on the called activity. This lets you
|
||||
have more dramatic enter transitions. The same applies for the calling activity and exit
|
||||
transitions with the <code>Window.setAllowExitTransitionOverlap</code> method.</p>
|
||||
|
||||
<h3>Start an activity using transitions</h3>
|
||||
|
||||
<p>If you enable transitions and set an exit transition for an activity, the transition is activated
|
||||
when you launch another activity with the <code>startActivity</code> method. If you have set an
|
||||
enter transition for the second activity, the transition is also activated when the activity
|
||||
starts.</p>
|
||||
|
||||
<h3>Shared elements transitions</h3>
|
||||
|
||||
<p>To make a screen transition animation between two activities that have a shared element:</p>
|
||||
|
||||
<ol>
|
||||
<li>Enable window content transitions in your style.</li>
|
||||
<li>Specify a shared elements transition in your style.</li>
|
||||
<li>Define your transition as an XML resource.</li>
|
||||
<li>Assign a common name to the shared elements in both layouts with the
|
||||
<code>android:viewName</code> attribute.</li>
|
||||
<li>Use the <code>ActivityOptions.makeSceneTransitionAnimation</code> method.</li>
|
||||
</ol>
|
||||
|
||||
<pre>
|
||||
// get the element that receives the click event
|
||||
final View imgContainerView = findViewById(R.id.img_container);
|
||||
|
||||
// get the common element for the transition in this activity
|
||||
final View androidRobotView = findViewById(R.id.image_small);
|
||||
|
||||
// define a click listener
|
||||
imgContainerView.setOnClickListener(new View.OnClickListener() {
|
||||
@Override
|
||||
public void onClick(View view) {
|
||||
Intent intent = new Intent(this, Activity2.class);
|
||||
// create the transition animation - the images in the layouts
|
||||
// of both activities are defined with android:viewName="robot"
|
||||
ActivityOptions options = ActivityOptions
|
||||
.makeSceneTransitionAnimation(this, androidRobotView, "robot");
|
||||
// start the new activity
|
||||
startActivity(intent, options.toBundle());
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
|
||||
<p>For shared dynamic views that you generate in your code, use the <code>View.setViewName</code>
|
||||
method to specify a common element name in both activities.</p>
|
||||
|
||||
<p>To reverse the scene transition animation when you finish the second activity, call the
|
||||
<code>Activity.finishAfterTransition</code> method instead of <code>Activity.finish</code>.</p>
|
||||
|
||||
<h3>Multiple shared elements</h3>
|
||||
|
||||
<p>To make a scene transition animation between two activities that have more than one shared
|
||||
element, define the shared elements in both layouts with the <code>android:viewName</code>
|
||||
attribute (or use the <code>View.setViewName</code> in both activities), and create an
|
||||
<code>ActivityOptions</code> object as follows:</p>
|
||||
|
||||
<pre>
|
||||
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
|
||||
Pair.create(view1, "agreedName1"),
|
||||
Pair.create(view2, "agreedName2"));
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="curvedmotion">Curved Motion</h2>
|
||||
|
||||
<p>Animations in material design rely on curves for time interpolation and spatial movement
|
||||
patterns. The Android L Developer Preview provides new APIs that enable you to define custom
|
||||
timing curves and curved motion patterns for animations.</p>
|
||||
|
||||
<p>The <code>PathInterpolator</code> class is a new interpolator based on a Bézier curve or a
|
||||
<code>Path</code> object. This interpolator specifies a motion curve in a 1x1 square, with anchor
|
||||
points at (0,0) and (1,1) and control points as specified using the constructor arguments. You can
|
||||
also define a <code>PathInterpolator</code> as an XML resource:</p>
|
||||
|
||||
<pre>
|
||||
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:controlX1="0.4"
|
||||
android:controlY1="0"
|
||||
android:controlX2="1"
|
||||
android:controlY2="1"/>
|
||||
</pre>
|
||||
|
||||
<p>The Android L Developer Preview provides XML resources for the three basic curves in the
|
||||
material design specification:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>@interpolator/fast_out_linear_in.xml</code></li>
|
||||
<li><code>@interpolator/fast_out_slow_in.xml</code></li>
|
||||
<li><code>@interpolator/linear_out_slow_in.xml</code></li>
|
||||
</ul>
|
||||
|
||||
<p>You can pass a <code>PathInterpolator</code> object to the
|
||||
<code>Animator.setInterpolation</code> method.</p>
|
||||
|
||||
<p>The <code>ObjectAnimator</code> class has new constructors that enable you to animate
|
||||
coordinates along a path using two or more properties at once. For example, the following animator
|
||||
uses a <code>Path</code> object to animate the X and Y properties of a view:</p>
|
||||
|
||||
<pre>
|
||||
ObjectAnimator mAnimator;
|
||||
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
|
||||
...
|
||||
mAnimator.start();
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="viewstate">Animating View State Changes</h2>
|
||||
|
||||
<p>The new <code>StateListAnimator</code> class lets you define animators that run when the state
|
||||
of a view changes. The following example shows how to define an <code>StateListAnimator</code> as
|
||||
an XML resource:</p>
|
||||
|
||||
<pre>
|
||||
<!-- animate the translationZ property of a view when pressed -->
|
||||
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<item android:state_pressed="true">
|
||||
<set>
|
||||
<objectAnimator android:propertyName="translationZ"
|
||||
android:duration="100"
|
||||
android:valueTo="2"
|
||||
android:valueType="floatType"/>
|
||||
<!-- you could have other objectAnimator elements
|
||||
here for "x" and "y", or other properties -->
|
||||
</set>
|
||||
</item>
|
||||
<item android:state_enabled="true"
|
||||
android:state_pressed="false"
|
||||
android:state_focused="true">
|
||||
<set>
|
||||
<objectAnimator android:propertyName="translationZ"
|
||||
android:duration="100"
|
||||
android:valueTo="2"
|
||||
android:valueType="floatType"/>
|
||||
</set>
|
||||
</item>
|
||||
</selector>
|
||||
</pre>
|
||||
|
||||
<p class="note"><strong>Note:</strong> There is a known issue in the L Developer Preview release
|
||||
that requires valueFrom values to be provided in StateListAnimator animations to get the correct
|
||||
behavior.</p>
|
||||
|
||||
<p>The new <code>AnimatedStateListDrawable</code> class lets you create drawables that show
|
||||
animations between state changes of the associated view. Some of the system widgets in the
|
||||
Android L Developer Preview use these animations by default. The following example shows how
|
||||
to define an <code>AnimatedStateListDrawable</code> as an XML resource:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/drawable/myanimstatedrawable.xml -->
|
||||
<animated-selector
|
||||
xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
|
||||
<!-- provide a different drawable for each state-->
|
||||
<item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
|
||||
android:state_pressed="true"/>
|
||||
<item android:id="@+id/focused" android:drawable="@drawable/drawableF"
|
||||
android:state_focused="true"/>
|
||||
<item android:id="@id/default"
|
||||
android:drawable="@drawable/drawableD"/>
|
||||
|
||||
<!-- specify a transition -->
|
||||
<transition android:fromId="@+id/default" android:toId="@+id/pressed">
|
||||
<animation-list>
|
||||
<item android:duration="15" android:drawable="@drawable/dt1"/>
|
||||
<item android:duration="15" android:drawable="@drawable/dt2"/>
|
||||
...
|
||||
</animation-list>
|
||||
</transition>
|
||||
...
|
||||
</animated-selector>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="drawabletint">Drawable Tinting</h2>
|
||||
|
||||
<p>The Android L Developer Preview enables you to define bitmaps or nine-patches as alpha masks and
|
||||
to tint them using a color resource or a theme attribute that resolves to a color resource (for
|
||||
example, <code>?android:attr/colorPrimary</code>). You can create these assets only once and color them
|
||||
automatically to match your theme.</p>
|
||||
|
||||
<p>To apply a tint to a bitmap, use the <code>setTint</code> method or the <code>android:tint</code>
|
||||
attribute for <code>BitmapDrawable</code> and <code>NinePatchDrawable</code>.</p>
|
||||
|
||||
<p>The <code>setTint</code> method also lets you set the Porter-Duff mode used to blend the
|
||||
tint color for <code>NinePatchDrawable</code> and <code>BitmapDrawable</code> objects in your code.
|
||||
To set the tint mode in your layouts, use the <code>android:tintMode</code> attribute.</p>
|
||||
|
||||
|
||||
<h2 id="colorextract">Extracting Prominent Colors from an Image</h2>
|
||||
|
||||
<p>The Android L Developer Preview Support Library includes the <code>Palette</code> class,
|
||||
which lets you extract prominent colors from an image. This class extracts the following
|
||||
prominent colors:</p>
|
||||
|
||||
<ul>
|
||||
<li>Vibrant</li>
|
||||
<li>Vibrant dark</li>
|
||||
<li>Vibrant light</li>
|
||||
<li>Muted</li>
|
||||
<li>Muted dark</li>
|
||||
<li>Muted light</li>
|
||||
</ul>
|
||||
|
||||
<p>To extract these colors, pass a <code>Bitmap</code> object to the
|
||||
<code>Palette.generate</code> static method in the background thread where you load your images.
|
||||
If you can't use that thread, call the <code>Palette.generateAsync</code> method instead and
|
||||
provide a listener.</p>
|
||||
|
||||
<p>To retrieve the prominent colors from the image, use the getter methods in the
|
||||
<code>Palette</code> class, such as <code>Palette.getVibrantColor</code>.</p>
|
||||
|
||||
<p>For more information, see the API reference for the
|
||||
<code>android.support.v7.graphics.Palette</code> class.</p>
|
||||
@@ -1,82 +0,0 @@
|
||||
page.title=Compatibility
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="qv-wrapper">
|
||||
<div id="qv">
|
||||
<h2>In this document</h2>
|
||||
<ol>
|
||||
<li><a href="#materialtheme">Material Theme</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
<li><a href="#widgets">UI Widgets</a></li>
|
||||
<li><a href="#animation">Animation APIs</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The new material design features (like the material theme and activity transitions) are only
|
||||
available in the Android L Developer Preview. However, you can design your apps to make use of
|
||||
these features when running on devices with the Android L Developer Preview and still be
|
||||
compatible with previous releases of Android.</p>
|
||||
|
||||
|
||||
<h2 id="materialtheme">Material Theme</h2>
|
||||
|
||||
<p>The material theme is only available in the Android L Developer Preview. To configure your
|
||||
app to use the material theme on devices running the Android L Developer Preview and an older
|
||||
theme on devices running earlier versions of Android:</p>
|
||||
|
||||
<ol>
|
||||
<li>Define a theme that inherits from an older theme (like Holo) in
|
||||
<code>res/values/styles.xml</code>.</li>
|
||||
<li>Define a theme with the same name that inherits from the material theme in
|
||||
<code>res/values-v21/styles.xml</code>.</li>
|
||||
<li>Set this theme as your app's theme in the manifest file.</li>
|
||||
</ol>
|
||||
|
||||
<p class="note"><strong>Note:</strong> If you do not provide an alternative theme in this manner,
|
||||
your app will not run on earlier versions of Android.</p>
|
||||
|
||||
|
||||
<h2 id="layouts">Layouts</h2>
|
||||
|
||||
<p>If the layouts that you design according to the material design guidelines do not use any
|
||||
of the new XML attributes from the Android L Developer Preview, they will work on previous
|
||||
versions of Android. Otherwise, you can provide alternative layouts. You can also provide
|
||||
alternative layouts to customize how your app looks on earlier versions of Android.</p>
|
||||
|
||||
<p>Create your layout files for the Android L Developer Preview inside <code>res/layout-v21/</code>
|
||||
and your alternative layout files for earlier versions of Android inside <code>res/layout/</code>.
|
||||
Alternative layouts have the same file name.</p>
|
||||
|
||||
<p>To avoid duplication of code, define your styles inside <code>res/values/</code> and modify the
|
||||
styles in <code>res/values-v21/</code> for the new APIs.</p>
|
||||
|
||||
|
||||
<h2 id="widgets">UI Widgets</h2>
|
||||
|
||||
<p>The <code>RecyclerView</code> and <code>CardView</code> widgets are included in the Android L
|
||||
Developer Preview Support Library, so they are available in earlier versions of Android with
|
||||
these limitations:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>CardView</code> falls back to a programmatic shadow implementation using additional padding.</li>
|
||||
<li><code>CardView</code> does not clip its children views that intersect with rounded corners.</li>
|
||||
</ul>
|
||||
|
||||
<p>These limitations do not apply to the Android L Developer Preview.</p>
|
||||
|
||||
|
||||
<h2 id="animation">Animation APIs</h2>
|
||||
|
||||
<p>The following new APIs are only available in the Android L Developer Preview:</p>
|
||||
|
||||
<ul>
|
||||
<li>Activity transitions</li>
|
||||
<li>Touch feedback</li>
|
||||
<li>Reveal animations</li>
|
||||
<li>Path-based animations</li>
|
||||
</ul>
|
||||
|
||||
<p>To preserve compatibility with earlier versions of Android, check the system version at
|
||||
runtime before you invoke these APIs.</p>
|
||||
@@ -1,147 +0,0 @@
|
||||
page.title=Get Started
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="qv-wrapper">
|
||||
<div id="qv">
|
||||
<h2>In this document</h2>
|
||||
<ol>
|
||||
<li><a href="#applytheme">Apply the Material Theme</a></li>
|
||||
<li><a href="#layouts">Design Your Layouts</a></li>
|
||||
<li><a href="#depth">Specify Elevation in Your Views</a></li>
|
||||
<li><a href="#widgets">Use the New UI Widgets</a></li>
|
||||
<li><a href="#animations">Customize Your Animations</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>To create apps with material design:</p>
|
||||
|
||||
<ol>
|
||||
<li style="margin-bottom:10px">
|
||||
Take a look at the <a href="http://www.google.com/design/spec">material design
|
||||
specification</a>.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Apply the material <strong>theme</strong> to your app.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Define additional <strong>styles</strong> to customize the material theme.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Create your <strong>layouts</strong> following material design guidelines.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Specify the <strong>elevation</strong> of your views to cast appropriate shadows.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Use the new <strong>widgets</strong> for complex views, such as lists and cards.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Use the new APIs to customize the <strong>animations</strong> in your app.</li>
|
||||
</ol>
|
||||
|
||||
<h3>Update Your App for the Android L Developer Preview</h3>
|
||||
|
||||
<p>To update an existing app for the Android L Developer Preview, design new layouts following
|
||||
material design guidelines and consider how you can improve the user experience for your app by
|
||||
incorporating depth, touch feedback and animations in your UI.</p>
|
||||
|
||||
<h3>Create New Apps for the Android L Developer Preview</h3>
|
||||
|
||||
<p>If you are creating a new app for the Android L Developer Preview, the <a
|
||||
href="http://www.google.com/design/spec">material design guidelines</a> provide you with a
|
||||
cohesive design framework for your app. Follow these guidelines and
|
||||
use the new functionality in the Android framework to design and develop your app.</p>
|
||||
|
||||
|
||||
<h2 id="applytheme">Apply the Material Theme</h2>
|
||||
|
||||
<p>To apply the material theme in your app, specify a style that inherits from
|
||||
<code>android:Theme.Material</code>:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/values/styles.xml -->
|
||||
<resources>
|
||||
<!-- your app's theme inherits from the Material theme -->
|
||||
<style name="AppTheme" parent="android:Theme.Material">
|
||||
<!-- theme customizations -->
|
||||
</style>
|
||||
</resources>
|
||||
</pre>
|
||||
|
||||
<p>The material theme provides new system widgets that let you set their color palette and default
|
||||
animations for touch feedback and activity transitions. For more details, see
|
||||
<a href="{@docRoot}preview/material/theme.html">Material Theme</a>.</p>
|
||||
|
||||
|
||||
<h2 id="layouts">Design Your Layouts</h2>
|
||||
|
||||
<p>In addition to applying and customizing the material theme, your layouts should conform to
|
||||
the <a href="http://www.google.com/design/spec">material design guidelines</a>. When you design
|
||||
your layouts, pay special attention to the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>Baseline grids</li>
|
||||
<li>Keylines</li>
|
||||
<li>Spacing</li>
|
||||
<li>Touch target size</li>
|
||||
<li>Layout structure</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id="depth">Specify Elevation in Your Views</h2>
|
||||
|
||||
<p>Views can cast shadows, and the elevation value of a view
|
||||
determines the size of its shadow and its drawing order. To set the elevation of a view, use the
|
||||
<code>android:elevation</code> attribute in your layouts:</p>
|
||||
|
||||
<pre>
|
||||
<TextView
|
||||
android:id="@+id/my_textview"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="@string/next"
|
||||
android:background="@color/white"
|
||||
<strong>android:elevation</strong>="5dp" />
|
||||
</pre>
|
||||
|
||||
<p>The new <code>translationZ</code> property lets you create animations that reflect temporary
|
||||
changes in the elevation of a view. For example, this is useful to respond to touch gestures.</p>
|
||||
|
||||
<p>For more details, see <a href="{@docRoot}preview/material/views-shadows.html">Views and
|
||||
Shadows</a>.</p>
|
||||
|
||||
|
||||
<h2 id="widgets">Use the New UI Widgets</h2>
|
||||
|
||||
<p><code>RecyclerView</code> is a more advanced version of <code>ListView</code> that provides
|
||||
performance improvements and is easier to use. <code>CardView</code> lets you show pieces of
|
||||
information inside cards with a consistent look across apps. To include a <code>CardView</code>
|
||||
in your layout:</p>
|
||||
|
||||
<pre>
|
||||
<android.support.v7.widget.CardView
|
||||
android:id="@+id/card_view"
|
||||
android:layout_width="200dp"
|
||||
android:layout_height="200dp"
|
||||
card_view:cardCornerRadius="3dp">
|
||||
...
|
||||
</android.support.v7.widget.CardView>
|
||||
</pre>
|
||||
|
||||
<p>For more information, see <a href="{@docRoot}preview/material/ui-widgets.html">UI Widgets</a>.</p>
|
||||
|
||||
|
||||
<h2 id="animations">Customize Your Animations</h2>
|
||||
|
||||
<p>The Android L Developer Preview includes new APIs to create custom animations in your app.
|
||||
For example, you can enable activity transitions and define an exit transition inside an
|
||||
activity:</p>
|
||||
|
||||
<pre>
|
||||
// inside your activity
|
||||
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
|
||||
|
||||
// set an exit transition
|
||||
getWindow().setExitTransition(new Explode());
|
||||
</pre>
|
||||
|
||||
<p>When you start another activity from this activity, the exit transition is activated.</p>
|
||||
|
||||
<p>To learn about all the features in the new APIs, see <a
|
||||
href="{@docRoot}preview/material/animations.html">Animations</a>.</p>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 201 KiB |
@@ -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
|
||||
|
||||
<p itemprop="description">The Android L Developer Preview includes support for material design
|
||||
apps. Material design is a comprehensive guide for visual, motion, and interaction design across
|
||||
platforms and devices. To use material design in your Android apps, follow the guidelines defined
|
||||
in the <a href="http://www.google.com/design/spec">material design specification</a> and use the
|
||||
new components and functionality available in the Android L Developer Preview.</p>
|
||||
|
||||
<p>The Android L Developer Preview provides the following elements for you to build material
|
||||
design apps:</p>
|
||||
|
||||
<ul>
|
||||
<li>A new theme</li>
|
||||
<li>New widgets for complex views</li>
|
||||
<li>New APIs for custom shadows and animations</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Material Theme</h3>
|
||||
|
||||
<p>The material theme provides a new style for your app, system widgets that let you set
|
||||
their color palette, and default animations for touch feedback and activity transitions.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}preview/material/images/MaterialDark.png" width="500" height="238"/>
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Dark Material theme</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}preview/material/images/MaterialLight.png" width="500" height="238"/>
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Light Material theme</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>New Widgets</h3>
|
||||
|
||||
<p>The Android L Developer Preview includes two new widgets for displaying complex views:</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}preview/material/images/list_mail.png" width="500" height="426"/>
|
||||
<p>The new <code>RecyclerView</code> widget is a more advanced version of <code>ListView</code>
|
||||
that provides performance improvements for dynamic views and is easier to use.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}preview/material/images/card_travel.png" width="500" height="426"/>
|
||||
<p>The new <code>CardView</code> widget lets you display important pieces of information inside
|
||||
cards that have a consistent look and feel.</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>View Shadows</h3>
|
||||
|
||||
<p>In addition to the X and Y properties, views in the Android L Developer Preview have a Z
|
||||
property. This new property represents the elevation of a view, which determines:</p>
|
||||
|
||||
<ul>
|
||||
<li>The size of the shadow - Views with higher Z values cast bigger shadows.</li>
|
||||
<li>The drawing order - Views with higher Z values appear on top of other views.</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="/preview/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="/preview/material/videos/ContactsAnim.webm"/>
|
||||
<source src="/preview/material/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>Click on the device screen to replay the movie</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Animations</h3>
|
||||
|
||||
<p>The Android L Developer Preview provides new APIs that let you create custom animations for
|
||||
touch feedback in UI controls, view state changes, and activity transitions.</p>
|
||||
|
||||
<p>The new animation APIs let you:</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
Respond to touch events in your views with <strong>touch feedback</strong> animations.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Hide and show views with <strong>reveal effect</strong> animations.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Switch between activities with custom <strong>activity transition</strong> animations.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Create more natural animations with <strong>curved motion</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Animate changes in one or more view properties with <strong>view state change</strong> animations.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Show animations in <strong>state list drawables</strong> between view state changes.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Touch feedback animations are built into several standard views, such as buttons. The new APIs
|
||||
let you customize these animations and add animations to your custom views.</p>
|
||||
|
||||
|
||||
<h3>New Capabilities for Drawables</h3>
|
||||
|
||||
<p>The Android L Developer Preview supports <strong>drawable tinting</strong>: you can define
|
||||
bitmaps as an alpha mask and tint them using a color resource. You create these assets only
|
||||
once and color each instance to match your theme. Drawables also now support specifying most XML
|
||||
properties as <strong>theme attributes</strong>.</p>
|
||||
|
||||
<p>The Android L Developer Preview Support Library includes a <strong>color extraction</strong>
|
||||
library that lets you automatically extract prominent colors from a bitmap image.</p>
|
||||
@@ -1,102 +0,0 @@
|
||||
page.title=Material Theme
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="qv-wrapper">
|
||||
<div id="qv">
|
||||
<h2>In this document</h2>
|
||||
<ol>
|
||||
<li><a href="#colorpalette">Customize the Color Palette</a></li>
|
||||
<li><a href="#statusbar">Customize the Status Bar</a></li>
|
||||
<li><a href="#inheritance">Theme Individual Views</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The new material theme provides:</p>
|
||||
|
||||
<ul>
|
||||
<li>System widgets that let you set their color palette</li>
|
||||
<li>Touch feedback animations for the system widgets</li>
|
||||
<li>Activity transition animations</li>
|
||||
</ul>
|
||||
|
||||
<p>You can customize the look of the material theme
|
||||
according to your brand identity with a color palette you control. You can tint the action bar and
|
||||
the status bar using theme attributes, as shown in Figure 1.</p>
|
||||
|
||||
<div style="float:right;margin-left:25px;margin-top:-50px">
|
||||
<img src="{@docRoot}preview/material/images/ThemeColors.png" style="width:250px"/>
|
||||
<p class="img-caption" style="margin-bottom:0px">
|
||||
<strong>Figure 1.</strong> Customizing the material theme.</p>
|
||||
</div>
|
||||
|
||||
<p>The system widgets have a new design and touch feedback animations. You can customize the
|
||||
color palette, the touch feedback animations, and the activity transitions for your app.</p>
|
||||
|
||||
<p>The material theme is defined as:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>@android:style/Theme.Material</code> (dark version)</li>
|
||||
<li><code>@android:style/Theme.Material.Light</code> (light version)</li>
|
||||
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
|
||||
</ul>
|
||||
|
||||
<p>For a list of material styles that you can use, see the API reference for
|
||||
<code>android.R.style</code>.</p>
|
||||
|
||||
<p class="note">
|
||||
<strong>Note:</strong> The material theme is only available in the Android L Developer Preview.
|
||||
For more information, see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.
|
||||
</p>
|
||||
|
||||
|
||||
<h2 id="colorpalette">Customize the Color Palette</h2>
|
||||
|
||||
<p style="margin-bottom:30px">To customize the theme's base colors to fit your brand, define
|
||||
your custom colors using theme attributes when you inherit from the material theme:</p>
|
||||
|
||||
<pre>
|
||||
<resources>
|
||||
<!-- inherit from the material theme -->
|
||||
<style name="AppTheme" parent="android:Theme.Material">
|
||||
<!-- Main theme colors -->
|
||||
<!-- your app's branding color (for the app bar) -->
|
||||
<item name="android:colorPrimary">@color/primary</item>
|
||||
<!-- darker variant of colorPrimary (for status bar, contextual app bars) -->
|
||||
<item name="android:colorPrimaryDark">@color/primary_dark</item>
|
||||
<!-- theme UI controls like checkboxes and text fields -->
|
||||
<item name="android:colorAccent">@color/accent</item>
|
||||
</style>
|
||||
</resources>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="statusbar">Customize the Status and Navigation Bar</h2>
|
||||
|
||||
<p>The material theme lets you easily customize the status bar, so you can specify a
|
||||
color that fits your brand and provides enough contrast to show the white status icons. To
|
||||
set a custom color for the status bar, use the <code>android:statusBarColor</code> attribute when
|
||||
you extend the material theme. By default, <code>android:statusBarColor</code> inherits the
|
||||
value of <code>android:colorPrimaryDark</code>.</p>
|
||||
|
||||
<p>To handle the color of the status bar yourself (for example, by adding a gradient in the
|
||||
background), set the <code>android:statusBarColor</code> attribute to
|
||||
<code>@android:color/transparent</code> and adjust the window flags as required. You can
|
||||
also use the <code>Window.setStatusBarColor</code> method for animations or fading.</p>
|
||||
|
||||
<p class="note"><strong>Note:</strong>
|
||||
The status bar should almost always have a clear delineation from the primary toolbar, except for
|
||||
full-bleed imagery cases and when you use a gradient as a protection.
|
||||
</p>
|
||||
|
||||
<p>When customizing the navigation and status bars, make them both transparent or modify only
|
||||
the status bar. The navigation bar should remain black in all other cases.</p>
|
||||
|
||||
|
||||
<h2 id="inheritance">Theme Individual Views</h3>
|
||||
|
||||
<p>Elements in XML layout definitions can specify the <code>android:theme</code> attribute,
|
||||
which references a theme resource. This attribute modifies the theme for the element and any
|
||||
elements inflated below it, which is useful to alter theme color palettes in a specific portion
|
||||
of an interface.</p>
|
||||
@@ -1,198 +0,0 @@
|
||||
page.title=UI Widgets
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="qv-wrapper">
|
||||
<div id="qv">
|
||||
<h2>In this document</h2>
|
||||
<ol>
|
||||
<li><a href="#recyclerview">RecyclerView</a></li>
|
||||
<li><a href="#cardview">CardView</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The support library in the Android L Developer Preview contains two new widgets,
|
||||
<code>RecyclerView</code> and <code>CardView</code>. Use these widgets to show complex lists
|
||||
and cards in your app. These widgets have material design style by default.</p>
|
||||
|
||||
|
||||
<h2 id="recyclerview">RecyclerView</h2>
|
||||
|
||||
<p><code>RecyclerView</code> is a more advanced and flexible version of <code>ListView</code>.
|
||||
This widget is a container for large sets of views that can be recycled and scrolled very
|
||||
efficiently. Use the <code>RecyclerView</code> widget when you have lists with elements that
|
||||
change dynamically.</p>
|
||||
|
||||
<p><code>RecyclerView</code> is easy to use, because it provides:</p>
|
||||
|
||||
<ul>
|
||||
<li>A layout manager for positioning items</li>
|
||||
<li>Default animations for common item operations</li>
|
||||
</ul>
|
||||
|
||||
<p>You also have the flexibility to define custom layout managers and animations for this
|
||||
widget.</p>
|
||||
|
||||
<p>To use the <code>RecyclerView</code> widget, you have to specify an adapter and a layout
|
||||
manager. To create an adapter, you extend the <code>RecyclerView.Adapter</code> class. The details
|
||||
of the implementation depend on the specifics of your dataset and the type of views. For more
|
||||
information, see the <a href="#rvexamples">examples</a> below.</p>
|
||||
|
||||
<img src="/preview/material/images/RecyclerView.png" alt="" id="figure1" style="width:550px"/>
|
||||
<p class="img-caption">
|
||||
<strong>Figure 1</strong> - The <code>RecyclerView</code> widget.
|
||||
</p>
|
||||
|
||||
<p>A <strong>layout manager</strong> positions item views inside a <code>RecyclerView</code> and
|
||||
determines when to reuse item views that are no longer visible to the user. To reuse (or
|
||||
<em>recycle</em>) a view, a layout manager may ask the adapter to replace the content of the
|
||||
view with a different element from the dataset. Recycling views in this manner improves
|
||||
performance by avoiding the creation of unnecessary views or performing expensive
|
||||
<code>findViewById</code> lookups.
|
||||
</p>
|
||||
|
||||
<p><code>RecyclerView</code> provides <code>LinearLayoutManager</code>, which shows the items in a
|
||||
vertical or horizontal scrolling list. To create a custom layout, you extend the
|
||||
<code>RecyclerView.LayoutManager</code> class.</p>
|
||||
|
||||
<h3>Animations</h3>
|
||||
|
||||
<p>Animations for adding and removing items are enabled by default in <code>RecyclerView</code>.
|
||||
To customize these animations, extend the <code>RecyclerView.ItemAnimator</code> class and use
|
||||
the <code>RecyclerView.setItemAnimator</code> method.</p>
|
||||
|
||||
<h3 id="rvexamples">Examples</h3>
|
||||
|
||||
<p>To include a <code>RecyclerView</code> in your layout:</p>
|
||||
|
||||
<pre>
|
||||
<!-- A RecyclerView with some commonly used attributes -->
|
||||
<android.support.v7.widget.RecyclerView
|
||||
android:id="@+id/my_recycler_view"
|
||||
android:scrollbars="vertical"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"/>
|
||||
</pre>
|
||||
|
||||
<p>To get the <code>RecyclerView</code> object in your activity:</p>
|
||||
|
||||
<pre>
|
||||
public class MyActivity extends Activity {
|
||||
private RecyclerView mRecyclerView;
|
||||
private RecyclerView.Adapter mAdapter;
|
||||
private RecyclerView.LayoutManager mLayoutManager;
|
||||
|
||||
@Override
|
||||
protected void onCreate(Bundle savedInstanceState) {
|
||||
super.onCreate(savedInstanceState);
|
||||
setContentView(R.layout.my_activity);
|
||||
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
|
||||
|
||||
// improve performance if you know that changes in content
|
||||
// do not change the size of the RecyclerView
|
||||
mRecyclerView.setHasFixedSize(true);
|
||||
|
||||
// use a linear layout manager
|
||||
mLayoutManager = new LinearLayoutManager(this);
|
||||
mRecyclerView.setLayoutManager(mLayoutManager);
|
||||
|
||||
// specify an adapter (see also next example)
|
||||
mAdapter = new MyAdapter(myDataset);
|
||||
mRecyclerView.setAdapter(mAdapter);
|
||||
}
|
||||
...
|
||||
}
|
||||
</pre>
|
||||
|
||||
<p>To create a simple adapter:</p>
|
||||
|
||||
<pre>
|
||||
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
|
||||
private String[] mDataset;
|
||||
|
||||
// Provide a reference to the type of views that you are using
|
||||
// (custom viewholder)
|
||||
public static class ViewHolder extends RecyclerView.ViewHolder {
|
||||
public TextView mTextView;
|
||||
public ViewHolder(TextView v) {
|
||||
super(v);
|
||||
mTextView = v;
|
||||
}
|
||||
}
|
||||
|
||||
// Provide a suitable constructor (depends on the kind of dataset)
|
||||
public MyAdapter(String[] myDataset) {
|
||||
mDataset = myDataset;
|
||||
}
|
||||
|
||||
// Create new views (invoked by the layout manager)
|
||||
@Override
|
||||
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
|
||||
int viewType) {
|
||||
// create a new view
|
||||
View v = LayoutInflater.from(parent.getContext())
|
||||
.inflate(R.layout.my_text_view, 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;
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="cardview">CardView</h2>
|
||||
|
||||
<p><code>CardView</code> extends the <code>FrameLayout</code> class and lets you show information
|
||||
inside cards that have a consistent look on any app. <code>CardView</code> widgets can have
|
||||
shadows and rounded corners.</p>
|
||||
|
||||
<p>To create a card with a shadow, use the <code>android:elevation</code> attribute.
|
||||
<code>CardView</code> uses real elevation and dynamic shadows
|
||||
and falls back to a programmatic shadow implementation on earlier versions. For more information,
|
||||
see <a href="{@docRoot}preview/material/compatibility.html">Compatibility</a>.</p>
|
||||
|
||||
<p>Here's how to specify properties of <code>CardView</code>:</p>
|
||||
|
||||
<ul>
|
||||
<li>To set the corner radius in your layouts, use the <code>card_view:cardCornerRadius</code>
|
||||
attribute.</li>
|
||||
<li>To set the corner radius in your code, use the <code>CardView.setRadius</code> method.</li>
|
||||
<li>To set the background color of a card, use the <code>card_view:cardBackgroundColor</code>
|
||||
attribute.</li>
|
||||
</ul>
|
||||
|
||||
<p>To include a <code>CardView</code> in your layout:</p>
|
||||
|
||||
<pre>
|
||||
<!-- A CardView that contains a TextView -->
|
||||
<android.support.v7.widget.CardView
|
||||
xmlns:card_view="http://schemas.android.com/apk/res-auto"
|
||||
android:id="@+id/card_view"
|
||||
android:layout_gravity="center"
|
||||
android:layout_width="200dp"
|
||||
android:layout_height="200dp"
|
||||
card_view:cardCornerRadius="4dp">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/info_text"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent" />
|
||||
</android.support.v7.widget.CardView>
|
||||
</pre>
|
||||
@@ -1,95 +0,0 @@
|
||||
page.title=Views and Shadows
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="qv-wrapper">
|
||||
<div id="qv">
|
||||
<h2>In this document</h2>
|
||||
<ol>
|
||||
<li><a href="#elevation">View Elevation</a></li>
|
||||
<li><a href="#shadows">Shadows and Outlines</a></li>
|
||||
<li><a href="#clip">Clipping Views</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The elevation of a view determines the size of its shadow:
|
||||
views with higher Z values cast bigger shadows. Views only cast shadows on the Z=0 plane under an
|
||||
orthographic projection (the views do not scale for different values of Z).</p>
|
||||
|
||||
<p>Elevation is also useful to create animations where widgets temporarily rise above the
|
||||
view plane when performing some action.</p>
|
||||
|
||||
|
||||
<h2 id="elevation">View Elevation</h2>
|
||||
|
||||
<p>The Z value for a view has two components, elevation and translation. The elevation is the
|
||||
static component, and the translation is used for animations:</p>
|
||||
|
||||
<p><code>Z = elevation + translationZ</code></p>
|
||||
|
||||
<p>To set the elevation of a view:</p>
|
||||
|
||||
<ul>
|
||||
<li>In a layout definition, use the <code>android:elevation</code> attribute.</li>
|
||||
<li>In the code of an activity, use the <code>View.setElevation</code> method.</li>
|
||||
</ul>
|
||||
|
||||
<p>To set the translation of a view, use the <code>View.setTranslationZ</code> method.</p>
|
||||
|
||||
<p>The new <code>ViewPropertyAnimator.z</code> and <code>ViewPropertyAnimator.translationZ</code>
|
||||
methods enable you to easily animate the elevation of views. For more information, see
|
||||
the API reference for <code>ViewPropertyAnimator</code> and the <a
|
||||
href="{@docRoot}guide/topics/graphics/prop-animation.html#object-animator">Property Animation</a>
|
||||
developer guide.</p>
|
||||
|
||||
<p>The Z values are measured in the same units as the X and Y values.</p>
|
||||
|
||||
|
||||
<h2 id="shadows">Shadows and Outlines</h2>
|
||||
|
||||
<p>The bounds of a view's background drawable determine the default shape of its shadow.
|
||||
<strong>Outlines</strong> represent the outer shape of a graphics object and define the ripple
|
||||
area for touch feedback.</p>
|
||||
|
||||
<p>For example, if you define a view with a background drawable:</p>
|
||||
|
||||
<pre>
|
||||
<TextView
|
||||
android:id="@+id/myview"
|
||||
...
|
||||
android:elevation="2dp"
|
||||
android:background="@drawable/myrect" />
|
||||
</pre>
|
||||
|
||||
<p>where the background drawable is defined as a rectangle with rounded corners:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/drawable/myrect.xml -->
|
||||
<shape xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:shape="rectangle">
|
||||
<solid android:color="#42000000" />
|
||||
<corners android:radius="5dp" />
|
||||
</shape>
|
||||
</pre>
|
||||
|
||||
<p>Then this view and drawable cast the appropriate shadow.</p>
|
||||
|
||||
<p>You can also create outlines in your code using the methods in the <code>Outline</code> class,
|
||||
and you can assign them to views with the <code>View.setOutline</code> method.</p>
|
||||
|
||||
<p>To prevent a view from casting a shadow, set its outline to <code>null</code>.</p>
|
||||
|
||||
|
||||
<h2 id="clip">Clipping Views</h2>
|
||||
|
||||
<p>Clip a view to its outline area using the
|
||||
<code>View.setClipToOutline</code> method. Only rectangle, circle, and round rectangle outlines
|
||||
support clipping, as determined by the <code>Outline.canClip</code> method.</p>
|
||||
|
||||
<p>To clip a view to the shape of a drawable, set the drawable as the background of the view
|
||||
(as shown above) and call the <code>View.setClipToOutline</code> method.</p>
|
||||
|
||||
<p>Because clipping views is an expensive operation, don't animate the shape you use to
|
||||
clip a view. To achieve this effect, use a <a
|
||||
href="{@docRoot}preview/material/animations.html#reveal">Reveal Effect</a> animation.</p>
|
||||
548
docs/html/training/material/animations.jd
Normal file
548
docs/html/training/material/animations.jd
Normal file
@@ -0,0 +1,548 @@
|
||||
page.title=Defining Custom Animations
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="tb-wrapper">
|
||||
<div id="tb">
|
||||
<h2>This lesson teaches you to</h2>
|
||||
<ol>
|
||||
<li><a href="#Touch">Customize Touch Feedback</a></li>
|
||||
<li><a href="#Reveal">Use the Reveal Effect</a></li>
|
||||
<li><a href="#Transitions">Customize Activity Transitions</a></li>
|
||||
<li><a href="#ViewState">Animate View State Changes</a></li>
|
||||
<li><a href="#AnimVector">Animate Vector Drawables</a></li>
|
||||
</ol>
|
||||
<h2>You should also read</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.google.com/design/spec">Material design specification</a></li>
|
||||
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Animations in material design give users feedback on their actions and provide visual
|
||||
continuity as users interact with your app. The material theme provides some default animations
|
||||
for buttons and activity transitions, and Android 5.0 (API level 21) and above lets you customize
|
||||
these animations and create new ones:</p>
|
||||
|
||||
<ul>
|
||||
<li>Touch feedback</li>
|
||||
<li>Circular Reveal</li>
|
||||
<li>Activity transitions</li>
|
||||
<li>Curved motion</li>
|
||||
<li>View state changes</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id="Touch">Customize Touch Feedback</h2>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>In most cases, you should apply this functionality in your view XML by specifying the view
|
||||
background as:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>?android:attr/selectableItemBackground</code> for a bounded ripple</li>
|
||||
<li><code>?android:attr/selectableItemBackgroundBorderless</code> for a ripple that extends beyond
|
||||
the view</li>
|
||||
</ul>
|
||||
|
||||
<p class="note"><strong>Note:</strong> <code>selectableItemBackgroundBorderless</code> is a new
|
||||
attribute introduced in API level 21.</p>
|
||||
|
||||
|
||||
<p>Alternatively, you can define a {@link android.graphics.drawable.RippleDrawable}
|
||||
as an XML resource using the <code>ripple</code> element.</p>
|
||||
|
||||
<p>You can assign a color to {@link android.graphics.drawable.RippleDrawable} objects. To change
|
||||
the default touch feedback color, use the theme's <code>android:colorControlHighlight</code>
|
||||
attribute.</p>
|
||||
|
||||
<p>For more information, see the API reference for the {@link
|
||||
android.graphics.drawable.RippleDrawable} class.</p>
|
||||
|
||||
|
||||
<h2 id="Reveal">Use the Reveal Effect</h2>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>To reveal a previously invisible view using this effect:</p>
|
||||
|
||||
<pre>
|
||||
// previously invisible view
|
||||
View myView = findViewById(R.id.my_view);
|
||||
|
||||
// get the center for the clipping circle
|
||||
int cx = (myView.getLeft() + myView.getRight()) / 2;
|
||||
int cy = (myView.getTop() + myView.getBottom()) / 2;
|
||||
|
||||
// get the final radius for the clipping circle
|
||||
int finalRadius = myView.getWidth();
|
||||
|
||||
// create and start the animator for this view
|
||||
// (the start radius is zero)
|
||||
Animator anim =
|
||||
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
|
||||
anim.start();
|
||||
</pre>
|
||||
|
||||
<p>To hide a previously visible view using this effect:</p>
|
||||
|
||||
<pre>
|
||||
// previously visible view
|
||||
final View myView = findViewById(R.id.my_view);
|
||||
|
||||
// get the center for the clipping circle
|
||||
int cx = (myView.getLeft() + myView.getRight()) / 2;
|
||||
int cy = (myView.getTop() + myView.getBottom()) / 2;
|
||||
|
||||
// get the initial radius for the clipping circle
|
||||
int initialRadius = myView.getWidth();
|
||||
|
||||
// create the animation (the final radius is zero)
|
||||
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();
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="Transitions">Customize Activity Transitions</h2>
|
||||
|
||||
<!-- shared transition video -->
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay="">
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4">
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.webm">
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.ogv">
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Figure 1</strong> - A
|
||||
transition with shared elements.</p>
|
||||
<em>To replay the movie, click on the device screen</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<ul>
|
||||
<li>An <strong>enter</strong> transition determines how views in an activity enter the scene.
|
||||
For example, in the <em>explode</em> enter transition, the views enter the scene from the outside
|
||||
and fly in towards the center of the screen.</li>
|
||||
|
||||
<li>An <strong>exit</strong> transition determines how views in an activity exit the scene. For
|
||||
example, in the <em>explode</em> exit transition, the views exit the scene away from the
|
||||
center.</li>
|
||||
|
||||
<li>A <strong>shared elements</strong> transition determines how views that are shared between
|
||||
two activities transition between these activities. For example, if two activities have the same
|
||||
image in different positions and sizes, the <em>changeImageTransform</em> shared element transition
|
||||
translates and scales the image smoothly between these activities.</li>
|
||||
</ul>
|
||||
|
||||
<p>Android 5.0 (API level 21) supports these enter and exit transitions:</p>
|
||||
|
||||
<ul>
|
||||
<li><em>explode</em> - Moves views in or out from the center of the scene.</li>
|
||||
<li><em>slide</em> - Moves views in or out from one of the edges of the scene.</li>
|
||||
<li><em>fade</em> - Adds or removes a view from the scene by changing its opacity.</li>
|
||||
</ul>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>Android 5.0 (API level 21) also supports these shared elements transitions:</p>
|
||||
|
||||
<ul>
|
||||
<li><em>changeBounds</em> - Animates the changes in layout bounds of target views.</li>
|
||||
<li><em>changeClipBounds</em> - Animates the changes in clip bounds of target views.</li>
|
||||
<li><em>changeTransform</em> - Animates the changes in scale and rotation of target views.</li>
|
||||
<li><em>changeImageTransform</em> - Animates changes in size and scale of target images.</li>
|
||||
</ul>
|
||||
|
||||
<p>When you enable activity transitions in your app, the default cross-fading transition is
|
||||
activated between the entering and exiting activities.</p>
|
||||
|
||||
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405"
|
||||
style="margin-top:20px"/>
|
||||
<p class="img-caption">
|
||||
<strong>Figure 2</strong> - A scene transition with one shared element.
|
||||
</p>
|
||||
|
||||
<h3>Specify custom transitions</h3>
|
||||
|
||||
<p>First, enable window content transitions with the <code>android:windowContentTransitions</code>
|
||||
attribute when you define a style that inherits from the material theme. You can also specify
|
||||
enter, exit, and shared element transitions in your style definition:</p>
|
||||
|
||||
<pre>
|
||||
<style name="BaseAppTheme" parent="android:Theme.Material">
|
||||
<!-- enable window content transitions -->
|
||||
<item name="android:windowContentTransitions">true</item>
|
||||
|
||||
<!-- specify enter and exit transitions -->
|
||||
<item name="android:windowEnterTransition">@transition/explode</item>
|
||||
<item name="android:windowExitTransition">@transition/explode</item>
|
||||
|
||||
<!-- specify shared element transitions -->
|
||||
<item name="android:windowSharedElementEnterTransition">
|
||||
@transition/change_image_transform</item>
|
||||
<item name="android:windowSharedElementExitTransition">
|
||||
@transition/change_image_transform</item>
|
||||
</style>
|
||||
</pre>
|
||||
|
||||
<p>The <code>change_image_transform</code> transition in this example is defined as follows:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/transition/change_image_transform.xml -->
|
||||
<!-- (see also Shared Transitions below) -->
|
||||
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<changeImageTransform/>
|
||||
</transitionSet>
|
||||
</pre>
|
||||
|
||||
<p>The <code>changeImageTransform</code> element corresponds to the
|
||||
{@link android.transition.ChangeImageTransform} class. For more information, see the API
|
||||
reference for {@link android.transition.Transition}.</p>
|
||||
|
||||
<p>To enable window content transitions in your code instead, call the
|
||||
{@link android.view.Window#requestFeature Window.requestFeature()} method:</p>
|
||||
|
||||
<pre>
|
||||
// inside your activity (if you did not enable transitions in your theme)
|
||||
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
|
||||
|
||||
// set an exit transition
|
||||
getWindow().setExitTransition(new Explode());
|
||||
</pre>
|
||||
|
||||
<p>To specify transitions in your code, call these methods with a {@link
|
||||
android.transition.Transition} object:</p>
|
||||
|
||||
<ul>
|
||||
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
|
||||
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
|
||||
<li>{@link android.view.Window#setSharedElementEnterTransition
|
||||
Window.setSharedElementEnterTransition()}</li>
|
||||
<li>{@link android.view.Window#setSharedElementExitTransition
|
||||
Window.setSharedElementExitTransition()}</li>
|
||||
</ul>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>To get the full effect of a transition, you must enable window content transitions on both the
|
||||
calling and called activities. Otherwise, the calling activity will start the exit transition,
|
||||
but then you'll see a window transition (like scale or fade).</p>
|
||||
|
||||
<p>To start an enter transition as soon as possible, use the
|
||||
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
|
||||
method on the called activity. This lets you have more dramatic enter transitions.</p>
|
||||
|
||||
<h3>Start an activity using transitions</h3>
|
||||
|
||||
<p>If you enable transitions and set an exit transition for an activity, the transition is activated
|
||||
when you launch another activity as follows:</p>
|
||||
|
||||
<pre>
|
||||
startActivity(intent,
|
||||
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
|
||||
</pre>
|
||||
|
||||
<p>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 <code>null</code> options bundle.</p>
|
||||
|
||||
<h3>Start an activity with a shared element</h3>
|
||||
|
||||
<p>To make a screen transition animation between two activities that have a shared element:</p>
|
||||
|
||||
<ol>
|
||||
<li>Enable window content transitions in your theme.</li>
|
||||
<li>Specify a shared elements transition in your style.</li>
|
||||
<li>Define your transition as an XML resource.</li>
|
||||
<li>Assign a common name to the shared elements in both layouts with the
|
||||
<code>android:transitionName</code> attribute.</li>
|
||||
<li>Use the {@link android.app.ActivityOptions#makeSceneTransitionAnimation
|
||||
ActivityOptions.makeSceneTransitionAnimation()} method.</li>
|
||||
</ol>
|
||||
|
||||
<pre>
|
||||
// get the element that receives the click event
|
||||
final View imgContainerView = findViewById(R.id.img_container);
|
||||
|
||||
// get the common element for the transition in this activity
|
||||
final View androidRobotView = findViewById(R.id.image_small);
|
||||
|
||||
// define a click listener
|
||||
imgContainerView.setOnClickListener(new View.OnClickListener() {
|
||||
@Override
|
||||
public void onClick(View view) {
|
||||
Intent intent = new Intent(this, Activity2.class);
|
||||
// create the transition animation - the images in the layouts
|
||||
// of both activities are defined with android:transitionName="robot"
|
||||
ActivityOptions options = ActivityOptions
|
||||
.makeSceneTransitionAnimation(this, androidRobotView, "robot");
|
||||
// start the new activity
|
||||
startActivity(intent, options.toBundle());
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
|
||||
<p>For shared dynamic views that you generate in your code, use the
|
||||
{@link android.view.View#setTransitionName View.setTransitionName()} method to specify a common
|
||||
element name in both activities.</p>
|
||||
|
||||
<p>To reverse the scene transition animation when you finish the second activity, call the
|
||||
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
|
||||
method instead of {@link android.app.Activity#finish Activity.finish()}.</p>
|
||||
|
||||
<h3>Start an activity with multiple shared elements</h3>
|
||||
|
||||
<p>To make a scene transition animation between two activities that have more than one shared
|
||||
element, define the shared elements in both layouts with the <code>android:transitionName</code>
|
||||
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:</p>
|
||||
|
||||
<pre>
|
||||
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
|
||||
Pair.create(view1, "agreedName1"),
|
||||
Pair.create(view2, "agreedName2"));
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="CurvedMotion">Use Curved Motion</h2>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:controlX1="0.4"
|
||||
android:controlY1="0"
|
||||
android:controlX2="1"
|
||||
android:controlY2="1"/>
|
||||
</pre>
|
||||
|
||||
<p>The system provides XML resources for the three basic curves in the material design
|
||||
specification:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>@interpolator/fast_out_linear_in.xml</code></li>
|
||||
<li><code>@interpolator/fast_out_slow_in.xml</code></li>
|
||||
<li><code>@interpolator/linear_out_slow_in.xml</code></li>
|
||||
</ul>
|
||||
|
||||
<p>You can pass a {@link android.view.animation.PathInterpolator} object to the {@link
|
||||
android.animation.Animator#setInterpolator Animator.setInterpolator()} method.</p>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
ObjectAnimator mAnimator;
|
||||
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
|
||||
...
|
||||
mAnimator.start();
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="ViewState">Animate View State Changes</h2>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
<!-- animate the translationZ property of a view when pressed -->
|
||||
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<item android:state_pressed="true">
|
||||
<set>
|
||||
<objectAnimator android:propertyName="translationZ"
|
||||
android:duration="@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>
|
||||
</pre>
|
||||
|
||||
<p>To attach custom view state animations to a view, define an animator using the
|
||||
<code>selector</code> element in an XML resource file as in this example, and assign it to your
|
||||
view with the <code>android:stateListAnimator</code> 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.</p>
|
||||
|
||||
<p>When your theme extends the material theme, buttons have a Z animation by default. To avoid this
|
||||
behavior in your buttons, set the <code>android:stateListAnimator</code> attribute to
|
||||
<code>@null</code>.</p>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/drawable/myanimstatedrawable.xml -->
|
||||
<animated-selector
|
||||
xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
|
||||
<!-- provide a different drawable for each state-->
|
||||
<item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
|
||||
android:state_pressed="true"/>
|
||||
<item android:id="@+id/focused" android:drawable="@drawable/drawableF"
|
||||
android:state_focused="true"/>
|
||||
<item android:id="@id/default"
|
||||
android:drawable="@drawable/drawableD"/>
|
||||
|
||||
<!-- specify a transition -->
|
||||
<transition android:fromId="@+id/default" android:toId="@+id/pressed">
|
||||
<animation-list>
|
||||
<item android:duration="15" android:drawable="@drawable/dt1"/>
|
||||
<item android:duration="15" android:drawable="@drawable/dt2"/>
|
||||
...
|
||||
</animation-list>
|
||||
</transition>
|
||||
...
|
||||
</animated-selector>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="AnimVector">Animate Vector Drawables</h2>
|
||||
|
||||
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Vector Drawables</a> are
|
||||
scalable without losing definition. The {@link android.graphics.drawable.AnimatedVectorDrawable}
|
||||
class lets you animate the properties of a vector drawable.</p>
|
||||
|
||||
<p>You normally define animated vector drawables in three XML files:</p>
|
||||
|
||||
<ul>
|
||||
<li>A vector drawable with the <code><vector></code> element in
|
||||
<code>res/drawable/</code></li>
|
||||
<li>An animated vector drawable with the <code><animated-vector></code> element in
|
||||
<code>res/drawable/</code></li>
|
||||
<li>One or more object animators with the <code><objectAnimator></code> element in
|
||||
<code>res/anim/</code></li>
|
||||
</ul>
|
||||
|
||||
<p>Animated vector drawables can animate the attributes of the <code><group></code> and
|
||||
<code><path></code> elements. The <code><group></code> elements defines a set of
|
||||
paths or subgroups, and the <code><path></code> element defines paths to be drawn.</p>
|
||||
|
||||
<p>When you define a vector drawable that you want to animate, use the <code>android:name</code>
|
||||
attribute to assign a unique name to groups and paths, so you can refer to them from your animator
|
||||
definitions. For example:</p>
|
||||
|
||||
<pre>
|
||||
<!-- 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
|
||||
<strong>android:name="rotationGroup"</strong>
|
||||
android:pivotX="300.0"
|
||||
android:pivotY="300.0"
|
||||
android:rotation="45.0" >
|
||||
<path
|
||||
<strong>android:name="v"</strong>
|
||||
android:fillColor="#000000"
|
||||
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
|
||||
</group>
|
||||
</vector>
|
||||
</pre>
|
||||
|
||||
<p>The animated vector drawable definition refers to the groups and paths in the vector drawable
|
||||
by their names:</p>
|
||||
|
||||
<pre>
|
||||
<!-- 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>
|
||||
</pre>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/anim/rotation.xml -->
|
||||
<objectAnimator
|
||||
android:duration="6000"
|
||||
android:propertyName="rotation"
|
||||
android:valueFrom="0"
|
||||
android:valueTo="360" />
|
||||
</pre>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<pre>
|
||||
<!-- 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>
|
||||
</pre>
|
||||
|
||||
<p>For more information, see the API reference for {@link
|
||||
android.graphics.drawable.AnimatedVectorDrawable}.</p>
|
||||
172
docs/html/training/material/compatibility.jd
Normal file
172
docs/html/training/material/compatibility.jd
Normal file
@@ -0,0 +1,172 @@
|
||||
page.title=Maintaining Compatibility
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="tb-wrapper">
|
||||
<div id="tb">
|
||||
<h2>This lesson teaches you to</h2>
|
||||
<ol>
|
||||
<li><a href="#Theme">Define Alternative Styles</a></li>
|
||||
<li><a href="#Layouts">Provide Alternative Layouts</a></li>
|
||||
<li><a href="#SupportLib">Use the Support Library</a></li>
|
||||
<li><a href="#CheckVersion">Check the System Version</a></li>
|
||||
</ol>
|
||||
<h2>You should also read</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.google.com/design/spec">Material design specification</a></li>
|
||||
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
|
||||
<h2 id="Theme">Define Alternative Styles</h2>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<ol>
|
||||
<li>Define a theme that inherits from an older theme (like Holo) in
|
||||
<code>res/values/styles.xml</code>.</li>
|
||||
<li>Define a theme with the same name that inherits from the material theme in
|
||||
<code>res/values-v21/styles.xml</code>.</li>
|
||||
<li>Set this theme as your app's theme in the manifest file.</li>
|
||||
</ol>
|
||||
|
||||
<p class="note"><strong>Note:</strong>
|
||||
If 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.
|
||||
</p>
|
||||
|
||||
|
||||
<h2 id="Layouts">Provide Alternative Layouts</h2>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>Create your layout files for Android 5.0 (API level 21) inside <code>res/layout-v21/</code> and
|
||||
your alternative layout files for earlier versions of Android inside <code>res/layout/</code>.
|
||||
For example, <code>res/layout/my_activity.xml</code> is an alternative layout for
|
||||
<code>res/layout-v21/my_activity.xml</code>.</p>
|
||||
|
||||
<p>To avoid duplication of code, define your styles inside <code>res/values/</code>, modify the
|
||||
styles in <code>res/values-v21/</code> for the new APIs, and use style inheritance, defining base
|
||||
styles in <code>res/values/</code> and inheriting from those in <code>res/values-v21/</code>.</p>
|
||||
|
||||
|
||||
<h2 id="SupportLib">Use the Support Library</h2>
|
||||
|
||||
<p>The <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>
|
||||
r21 and above includes the following material design features:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="{@docRoot}training/material/theme.html">Material design styles</a> for some system
|
||||
widgets when you apply one of the <code>Theme.AppCompat</code> themes.</li>
|
||||
<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Color palette theme attributes</a>
|
||||
in the <code>Theme.AppCompat</code> themes.</li>
|
||||
<li>The {@link android.support.v7.widget.RecyclerView} widget to <a
|
||||
href="{@docRoot}training/material/lists-cards.html#RecyclerView">display data
|
||||
collections</a>.</li>
|
||||
<li>The {@link android.support.v7.widget.CardView} widget to <a
|
||||
href="{@docRoot}training/material/lists-cards.html#CardView">create cards</a>.</li>
|
||||
<li>The {@link android.support.v7.graphics.Palette} class to <a
|
||||
href="{@docRoot}training/material/drawables.html#ColorExtract">extract prominent colors from
|
||||
images</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>System widgets</h3>
|
||||
|
||||
<p>The <code>Theme.AppCompat</code> themes provide material design styles for these widgets:</p>
|
||||
|
||||
<ul>
|
||||
<li>{@link android.widget.EditText}</li>
|
||||
<li>{@link android.widget.Spinner}</li>
|
||||
<li>{@link android.widget.CheckBox}</li>
|
||||
<li>{@link android.widget.RadioButton}</li>
|
||||
<li>{@link android.support.v7.widget.SwitchCompat}</li>
|
||||
<li>{@link android.widget.CheckedTextView}</li>
|
||||
</ul>
|
||||
|
||||
<h3>Color Palette</h3>
|
||||
|
||||
<p>To obtain material design styles and customize the color palette with the Android v7 Support
|
||||
Library, apply one of the <code>Theme.AppCompat</code> themes:</p>
|
||||
|
||||
<pre>
|
||||
<!-- 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>
|
||||
</pre>
|
||||
|
||||
<h3>Lists and Cards</h3>
|
||||
|
||||
<p>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:</p>
|
||||
<ul>
|
||||
<li>{@link android.support.v7.widget.CardView} falls back to a programmatic shadow implementation
|
||||
using additional padding.</li>
|
||||
<li>{@link android.support.v7.widget.CardView} does not clip its children views that intersect
|
||||
with rounded corners.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
|
||||
<p>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 <a
|
||||
href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle dependency</a>:</p>
|
||||
|
||||
<pre>
|
||||
dependencies {
|
||||
compile 'com.android.support:appcompat-v7:+'
|
||||
compile 'com.android.support:cardview-v7:+'
|
||||
compile 'com.android.support:recyclerview-v7:+'
|
||||
}
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="CheckVersion">Check the System Version</h2>
|
||||
|
||||
<p>The following features are available only in Android 5.0 (API level 21) and above:</p>
|
||||
|
||||
<ul>
|
||||
<li>Activity transitions</li>
|
||||
<li>Touch feedback</li>
|
||||
<li>Reveal animations</li>
|
||||
<li>Path-based animations</li>
|
||||
<li>Vector drawables</li>
|
||||
<li>Drawable tinting</li>
|
||||
</ul>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
// 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
|
||||
}
|
||||
</pre>
|
||||
|
||||
<p class="note"><strong>Note:</strong> To specify which versions of Android your app supports,
|
||||
use the <code>android:minSdkVersion</code> and <code>android:targetSdkVersion</code>
|
||||
attributes in your manifest file. To use the material design features in Android 5.0, set
|
||||
the <code>android:targetSdkVersion</code> attribute to <code>21</code>. For more information, see
|
||||
the <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html"><uses-sdk> API
|
||||
guide</a>.</p>
|
||||
119
docs/html/training/material/drawables.jd
Normal file
119
docs/html/training/material/drawables.jd
Normal file
@@ -0,0 +1,119 @@
|
||||
page.title=Working with Drawables
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="tb-wrapper">
|
||||
<div id="tb">
|
||||
<h2>This lesson teaches you to</h2>
|
||||
<ol>
|
||||
<li><a href="#DrawableTint">Tint Drawable Resources</a></li>
|
||||
<li><a href="#ColorExtract">Extract Prominent Colors from an Image</a></li>
|
||||
<li><a href="#VectorDrawables">Create Vector Drawables</a></li>
|
||||
</ol>
|
||||
<h2>You should also read</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.google.com/design/spec">Material design specification</a></li>
|
||||
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The following capabilities for drawables help you implement material design in your apps:</p>
|
||||
|
||||
<ul>
|
||||
<li>Drawable tinting</li>
|
||||
<li>Prominent color extraction</li>
|
||||
<li>Vector drawables</li>
|
||||
</ul>
|
||||
|
||||
<p>This lesson shows you how to use these features in your app.</p>
|
||||
|
||||
|
||||
<h2 id="DrawableTint">Tint Drawable Resources</h2>
|
||||
|
||||
<p>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, <code>?android:attr/colorPrimary</code>). Usually, you create these assets
|
||||
only once and color them automatically to match your theme.</p>
|
||||
|
||||
<p>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 <code>android:tint</code> and
|
||||
<code>android:tintMode</code> attributes.</p>
|
||||
|
||||
|
||||
<h2 id="ColorExtract">Extract Prominent Colors from an Image</h2>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<ul>
|
||||
<li>Vibrant</li>
|
||||
<li>Vibrant dark</li>
|
||||
<li>Vibrant light</li>
|
||||
<li>Muted</li>
|
||||
<li>Muted dark</li>
|
||||
<li>Muted light</li>
|
||||
</ul>
|
||||
|
||||
<p>To extract these colors, pass a {@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.</p>
|
||||
|
||||
<p>You can retrieve the prominent colors from the image using the getter methods in the
|
||||
<code>Palette</code> class, such as <code>Palette.getVibrantColor</code>.</p>
|
||||
|
||||
<p>To use the {@link android.support.v7.graphics.Palette} class in your project, add the following
|
||||
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependency</a> to your
|
||||
app's module:</p>
|
||||
|
||||
<pre>
|
||||
dependencies {
|
||||
...
|
||||
compile 'com.android.support:palette-v7:+'
|
||||
}
|
||||
</pre>
|
||||
|
||||
<p>For more information, see the API reference for the {@link android.support.v7.graphics.Palette}
|
||||
class.</p>
|
||||
|
||||
|
||||
<h2 id="VectorDrawables">Create Vector Drawables</h2>
|
||||
|
||||
<p>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 <code><vector></code> XML element.</p>
|
||||
|
||||
<p>The following example defines a vector image with the shape of a heart:</p>
|
||||
|
||||
<pre>
|
||||
<!-- 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>
|
||||
</pre>
|
||||
|
||||
<p>Vector images are represented in Android as {@link android.graphics.drawable.VectorDrawable}
|
||||
objects. For more information about the <code>pathData</code> syntax, see the <a
|
||||
href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path reference</a>. For more information
|
||||
about animating the properties of vector drawables, see
|
||||
<a href="{@docRoot}training/material/animations.html#AnimVector">Animating Vector Drawables</a>.</p>
|
||||
173
docs/html/training/material/get-started.jd
Normal file
173
docs/html/training/material/get-started.jd
Normal file
@@ -0,0 +1,173 @@
|
||||
page.title=Getting Started
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="tb-wrapper">
|
||||
<div id="tb">
|
||||
<h2>This lesson teaches you to</h2>
|
||||
<ol>
|
||||
<li><a href="#ApplyTheme">Apply the Material Theme</a></li>
|
||||
<li><a href="#Layouts">Design Your Layouts</a></li>
|
||||
<li><a href="#Depth">Specify Elevation in Your Views</a></li>
|
||||
<li><a href="#ListsCards">Create Lists and Cards</a></li>
|
||||
<li><a href="#Animations">Customize Your Animations</a></li>
|
||||
</ol>
|
||||
<h2>You should also read</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.google.com/design/spec">Material design specification</a></li>
|
||||
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>To create apps with material design:</p>
|
||||
|
||||
<ol>
|
||||
<li style="margin-bottom:10px">
|
||||
Review the <a href="http://www.google.com/design/spec">material design specification</a>.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Apply the material <strong>theme</strong> to your app.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Create your <strong>layouts</strong> following material design guidelines.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Specify the <strong>elevation</strong> of your views to cast shadows.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Use system <strong>widgets</strong> for lists and cards.</li>
|
||||
<li style="margin-bottom:10px">
|
||||
Customize the <strong>animations</strong> in your app.</li>
|
||||
</ol>
|
||||
|
||||
<h3>Maintain backward compatibility</h3>
|
||||
|
||||
<p>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
|
||||
<a href="{@docRoot}training/material/compatibility.html">Maintaining Compatibility</a>.</p>
|
||||
|
||||
<h3>Update your app with material design</h3>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h3>Create new apps with material design</h3>
|
||||
|
||||
<p>If you are creating a new app with material design features, the <a
|
||||
href="http://www.google.com/design/spec">material design guidelines</a> 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.</p>
|
||||
|
||||
|
||||
<h2 id="ApplyTheme">Apply the Material Theme</h2>
|
||||
|
||||
<p>To apply the material theme in your app, specify a style that inherits from
|
||||
<code>android:Theme.Material</code>:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/values/styles.xml -->
|
||||
<resources>
|
||||
<!-- your theme inherits from the material theme -->
|
||||
<style name="AppTheme" parent="android:Theme.Material">
|
||||
<!-- theme customizations -->
|
||||
</style>
|
||||
</resources>
|
||||
</pre>
|
||||
|
||||
<p>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
|
||||
<a href="{@docRoot}training/material/theme.html">Using the Material Theme</a>.</p>
|
||||
|
||||
|
||||
<h2 id="Layouts">Design Your Layouts</h2>
|
||||
|
||||
<p>In addition to applying and customizing the material theme, your layouts should conform to
|
||||
the <a href="http://www.google.com/design/spec">material design guidelines</a>. When you design
|
||||
your layouts, pay special attention to the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>Baseline grids</li>
|
||||
<li>Keylines</li>
|
||||
<li>Spacing</li>
|
||||
<li>Touch target size</li>
|
||||
<li>Layout structure</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id="Depth">Specify Elevation in Your Views</h2>
|
||||
|
||||
<p>Views can cast shadows, and the elevation value of a view
|
||||
determines the size of its shadow and its drawing order. To set the elevation of a view, use the
|
||||
<code>android:elevation</code> attribute in your layouts:</p>
|
||||
|
||||
<pre>
|
||||
<TextView
|
||||
android:id="@+id/my_textview"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="@string/next"
|
||||
android:background="@color/white"
|
||||
android:elevation="5dp" />
|
||||
</pre>
|
||||
|
||||
<p>The new <code>translationZ</code> property lets you create animations that reflect temporary
|
||||
changes in the elevation of a view. Elevation changes can be useful when
|
||||
<a href="{@docRoot}training/material/animations.html#ViewState">responding to touch
|
||||
gestures</a>.</p>
|
||||
|
||||
<p>For more details, see <a href="{@docRoot}training/material/shadows-clipping.html">Defining
|
||||
Shadows and Clipping Views</a>.</p>
|
||||
|
||||
|
||||
<h2 id="ListsCards">Create Lists and Cards</h2>
|
||||
|
||||
<p>{@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:</p>
|
||||
|
||||
<pre>
|
||||
<android.support.v7.widget.CardView
|
||||
android:id="@+id/card_view"
|
||||
android:layout_width="200dp"
|
||||
android:layout_height="200dp"
|
||||
card_view:cardCornerRadius="3dp">
|
||||
...
|
||||
</android.support.v7.widget.CardView>
|
||||
</pre>
|
||||
|
||||
<p>For more information, see <a href="{@docRoot}training/material/lists-cards.html">Creating Lists
|
||||
and Cards</a>.</p>
|
||||
|
||||
|
||||
<h2 id="Animations">Customize Your Animations</h2>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
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());
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
|
||||
<p>When you start another activity from this activity, the exit transition is activated.</p>
|
||||
|
||||
<p>To learn more about the new animation APIs, see <a
|
||||
href="{@docRoot}training/material/animations.html">Defining Custom Animations</a>.</p>
|
||||
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
BIN
docs/html/training/material/images/SceneTransition.png
Normal file
BIN
docs/html/training/material/images/SceneTransition.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 61 KiB |
BIN
docs/html/training/material/images/shadows-depth.png
Normal file
BIN
docs/html/training/material/images/shadows-depth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
58
docs/html/training/material/index.jd
Normal file
58
docs/html/training/material/index.jd
Normal file
@@ -0,0 +1,58 @@
|
||||
page.title=Creating Apps with Material Design
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="tb-wrapper">
|
||||
<div id="tb">
|
||||
<h2>Dependencies and Prerequisites</h2>
|
||||
<ul>
|
||||
<li>Android 5.0 (API level 21)</li>
|
||||
<li>Android Studio 0.8</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>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
|
||||
<a href="http://www.google.com/design/spec/material-design/introduction.html">material design
|
||||
specification</a> and use the new components and functionality available in Android 5.0
|
||||
(API level 21).</p>
|
||||
|
||||
<p>This class shows you how to create material design apps with the following elements:</p>
|
||||
|
||||
<ul>
|
||||
<li>The material theme</li>
|
||||
<li>Widgets for cards and lists</li>
|
||||
<li>Custom shadows and view clipping</li>
|
||||
<li>Vector drawables</li>
|
||||
<li>Custom animations</li>
|
||||
</ul>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Lessons</h2>
|
||||
|
||||
<dl>
|
||||
<dt><a href="{@docRoot}training/material/get-started.html">Getting Started</a></dt>
|
||||
<dd>Learn how to update your app with material design features.</dd>
|
||||
|
||||
<dt><a href="{@docRoot}training/material/theme.html">Using the Material Theme</a></dt>
|
||||
<dd>Learn how to apply material design styles to your app.</dd>
|
||||
|
||||
<dt><a href="{@docRoot}training/material/lists-cards.html">Creating Lists and Cards</a></dt>
|
||||
<dd>Learn how to create lists and cards with a consistent look and feel using system widgets.</dd>
|
||||
|
||||
<dt><a href="{@docRoot}training/material/shadows-clipping.html">Defining Shadows and Clipping Views</a></dt>
|
||||
<dd>Learn how to set elevation for your views to create custom shadows and how to clip views.</dd>
|
||||
|
||||
<dt><a href="{@docRoot}training/material/drawables.html">Working with Drawables</a></dt>
|
||||
<dd>Learn how to create vector drawables and how to tint drawable resources.</dd>
|
||||
|
||||
<dt><a href="{@docRoot}training/material/animations.html">Defining Custom Animations</a></dt>
|
||||
<dd>Learn how to create custom animations for views and activity transitions with shared elements.</dd>
|
||||
|
||||
<dt><a href="{@docRoot}training/material/compatibility.html">Maintaining Compatibility</a></dt>
|
||||
<dd>Learn how to maintain compatibility with platform versions earlier than Android 5.0.</dd>
|
||||
</dl>
|
||||
266
docs/html/training/material/lists-cards.jd
Normal file
266
docs/html/training/material/lists-cards.jd
Normal file
@@ -0,0 +1,266 @@
|
||||
page.title=Creating Lists and Cards
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="tb-wrapper">
|
||||
<div id="tb">
|
||||
<h2>This lesson teaches you to</h2>
|
||||
<ol>
|
||||
<li><a href="#RecyclerView">Create Lists</a></li>
|
||||
<li><a href="#CardView">Create Cards</a></li>
|
||||
<li><a href="#Dependencies">Add Dependencies</a></li>
|
||||
</ol>
|
||||
<h2>You should also read</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.google.com/design/spec">Material design specification</a></li>
|
||||
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
|
||||
<h2 id="RecyclerView">Create Lists</h2>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>The {@link android.support.v7.widget.RecyclerView} class simplifies the display and handling of
|
||||
large data sets by providing:</p>
|
||||
|
||||
<ul>
|
||||
<li>Layout managers for positioning items</li>
|
||||
<li>Default animations for common item operations, such as removal or addition of items</li>
|
||||
</ul>
|
||||
|
||||
<p>You also have the flexibility to define custom layout managers and animations for {@link
|
||||
android.support.v7.widget.RecyclerView} widgets.</p>
|
||||
|
||||
<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106"/>
|
||||
<p class="img-caption">
|
||||
<strong>Figure 1</strong>. The <code>RecyclerView</code> widget.
|
||||
</p>
|
||||
|
||||
<p>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 <a href="#RVExamples">examples</a> below.</p>
|
||||
|
||||
<div style="float:right">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426"/>
|
||||
<p class="img-caption" style="margin-left:8px">
|
||||
<strong>Figure 2</strong> - Lists with <code>RecyclerView</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>A <strong>layout manager</strong> 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 <em>recycle</em>) 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.</p>
|
||||
|
||||
<p>{@link android.support.v7.widget.RecyclerView} provides these built-in layout managers:</p>
|
||||
|
||||
<ul>
|
||||
<li>{@link android.support.v7.widget.LinearLayoutManager} shows items in a vertical or horizontal
|
||||
scrolling list.</li>
|
||||
<li>{@link android.support.v7.widget.GridLayoutManager} shows items in a grid.</li>
|
||||
<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} shows items in a staggered grid.</li>
|
||||
</ul>
|
||||
|
||||
<p>To create a custom layout manager, extend the {@link
|
||||
android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} class.</p>
|
||||
|
||||
<h3>Animations</h3>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h3 id="RVExamples">Examples</h3>
|
||||
|
||||
<p>The following code example demonstrates how to add the
|
||||
{@link android.support.v7.widget.RecyclerView} to a layout:</p>
|
||||
|
||||
<pre>
|
||||
<!-- A RecyclerView with some commonly used attributes -->
|
||||
<android.support.v7.widget.RecyclerView
|
||||
android:id="@+id/my_recycler_view"
|
||||
android:scrollbars="vertical"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"/>
|
||||
</pre>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
public class MyActivity extends Activity {
|
||||
private RecyclerView mRecyclerView;
|
||||
private RecyclerView.Adapter mAdapter;
|
||||
private RecyclerView.LayoutManager mLayoutManager;
|
||||
|
||||
@Override
|
||||
protected void onCreate(Bundle savedInstanceState) {
|
||||
super.onCreate(savedInstanceState);
|
||||
setContentView(R.layout.my_activity);
|
||||
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
|
||||
|
||||
// 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);
|
||||
}
|
||||
...
|
||||
}
|
||||
</pre>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<pre>
|
||||
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;
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
|
||||
|
||||
<div style="float:right;margin-top:15px;margin-left:30px">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" alt="" width="225" height="383">
|
||||
<p class="img-caption" style="margin-left:12px">
|
||||
<strong>Figure 3</strong>. Card examples.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 id="CardView">Create Cards</h2>
|
||||
|
||||
<p>{@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.</p>
|
||||
|
||||
<p>To create a card with a shadow, use the <code>card_view:cardElevation</code> 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 <a href="{@docRoot}training/material/compatibility.html">Maintaining
|
||||
Compatibility</a>.</p>
|
||||
|
||||
<p>Use these properties to customize the appearance of the
|
||||
{@link android.support.v7.widget.CardView} widget:</p>
|
||||
|
||||
<ul>
|
||||
<li>To set the corner radius in your layouts, use the <code>card_view:cardCornerRadius</code>
|
||||
attribute.</li>
|
||||
<li>To set the corner radius in your code, use the <code>CardView.setRadius</code> method.</li>
|
||||
<li>To set the background color of a card, use the <code>card_view:cardBackgroundColor</code>
|
||||
attribute.</li>
|
||||
</ul>
|
||||
|
||||
<p>The following code example shows you how to include a {@link android.support.v7.widget.CardView}
|
||||
widget in your layout:</p>
|
||||
|
||||
<pre>
|
||||
<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>
|
||||
</pre>
|
||||
|
||||
<p>For more information, see the API reference for {@link android.support.v7.widget.CardView}.</p>
|
||||
|
||||
|
||||
<h2 id="Dependencies">Add Dependencies</h2>
|
||||
|
||||
<p>The {@link android.support.v7.widget.RecyclerView} and {@link android.support.v7.widget.CardView}
|
||||
widgets are part of the <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support
|
||||
Libraries</a>. To use these widgets in your project, add these
|
||||
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependencies</a> to your
|
||||
app's module:</p>
|
||||
|
||||
<pre>
|
||||
dependencies {
|
||||
...
|
||||
compile 'com.android.support:cardview-v7:+'
|
||||
compile 'com.android.support:recyclerview-v7:+'
|
||||
}
|
||||
</pre>
|
||||
127
docs/html/training/material/shadows-clipping.jd
Normal file
127
docs/html/training/material/shadows-clipping.jd
Normal file
@@ -0,0 +1,127 @@
|
||||
page.title=Defining Shadows and Clipping Views
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="tb-wrapper">
|
||||
<div id="tb">
|
||||
<h2>This lesson teaches you to</h2>
|
||||
<ol>
|
||||
<li><a href="#Elevation">Assign Elevation to Your Views</a></li>
|
||||
<li><a href="#Shadows">Customize View Shadows and Outlines</a></li>
|
||||
<li><a href="#Clip">Clip Views</a></li>
|
||||
</ol>
|
||||
<h2>You should also read</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.google.com/design/spec">Material design specification</a></li>
|
||||
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>Elevation is also useful to create animations where widgets temporarily rise above the
|
||||
view plane when performing some action.</p>
|
||||
|
||||
|
||||
<h2 id="Elevation">Assign Elevation to Your Views</h2>
|
||||
|
||||
<p>The Z value for a view has two components, elevation and translation. The elevation is the
|
||||
static component, and the translation is used for animations:</p>
|
||||
|
||||
<p><code>Z = elevation + translationZ</code></p>
|
||||
|
||||
<img src="{@docRoot}training/material/images/shadows-depth.png" width="680" height="177" alt=""/>
|
||||
<p class="img-caption"><strong>Figure 1</strong> - Shadows for different view elevations.</p>
|
||||
|
||||
<p>To set the elevation of a view in a layout definition, use the <code>android:elevation</code>
|
||||
attribute. To set the elevation of a view in the code of an activity, use the
|
||||
{@link android.view.View#setElevation View.setElevation()} method.</p>
|
||||
|
||||
<p>To set the translation of a view, use the {@link android.view.View#setTranslationZ
|
||||
View.setTranslationZ()} method.</p>
|
||||
|
||||
<p>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 <a
|
||||
href="{@docRoot}guide/topics/graphics/prop-animation.html">Property Animation</a> developer
|
||||
guide.</p>
|
||||
|
||||
<p>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
|
||||
<a href="{@docRoot}training/material/animations.html#ViewState">Animate View State Changes</a></p>.
|
||||
|
||||
<p>The Z values are measured in the same units as the X and Y values.</p>
|
||||
|
||||
|
||||
<h2 id="Shadows">Customize View Shadows and Outlines</h2>
|
||||
|
||||
<p>The bounds of a view's background drawable determine the default shape of its shadow.
|
||||
<strong>Outlines</strong> represent the outer shape of a graphics object and define the ripple
|
||||
area for touch feedback.</p>
|
||||
|
||||
<p>Consider this view, defined with a background drawable:</p>
|
||||
|
||||
<pre>
|
||||
<TextView
|
||||
android:id="@+id/myview"
|
||||
...
|
||||
android:elevation="2dp"
|
||||
android:background="@drawable/myrect" />
|
||||
</pre>
|
||||
|
||||
<p>The background drawable is defined as a rectangle with rounded corners:</p>
|
||||
|
||||
<pre>
|
||||
<!-- res/drawable/myrect.xml -->
|
||||
<shape xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:shape="rectangle">
|
||||
<solid android:color="#42000000" />
|
||||
<corners android:radius="5dp" />
|
||||
</shape>
|
||||
</pre>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>To define a custom outline for a view in your code:<p>
|
||||
|
||||
<ol>
|
||||
<li>Extend the {@link android.view.ViewOutlineProvider} class.</li>
|
||||
<li>Override the {@link android.view.ViewOutlineProvider#getOutline getOutline()} method.</li>
|
||||
<li>Assign the new outline provider to your view with the {@link
|
||||
android.view.View#setOutlineProvider View.setOutlineProvider()} method.</li>
|
||||
</ol>
|
||||
|
||||
<p>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 <code>null</code>.</p>
|
||||
|
||||
|
||||
<h2 id="Clip">Clip Views</h2>
|
||||
|
||||
<p>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 <code>android:clipToOutline</code> attribute. Only
|
||||
rectangle, circle, and round rectangle outlines support clipping, as determined by the
|
||||
{@link android.graphics.Outline#canClip Outline.canClip()} method.</p>
|
||||
|
||||
<p>To clip a view to the shape of a drawable, set the drawable as the background of the view
|
||||
(as shown above) and call the {@link android.view.View#setClipToOutline View.setClipToOutline()}
|
||||
method.</p>
|
||||
|
||||
<p>Clipping views is an expensive operation, so don't animate the shape you use to
|
||||
clip a view. To achieve this effect, use the <a
|
||||
href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a> animation.</p>
|
||||
131
docs/html/training/material/theme.jd
Normal file
131
docs/html/training/material/theme.jd
Normal file
@@ -0,0 +1,131 @@
|
||||
page.title=Using the Material Theme
|
||||
|
||||
@jd:body
|
||||
|
||||
<div id="tb-wrapper">
|
||||
<div id="tb">
|
||||
<h2>This lesson teaches you to</h2>
|
||||
<ol>
|
||||
<li><a href="#ColorPalette">Customize the Color Palette</a></li>
|
||||
<li><a href="#StatusBar">Customize the Status Bar</a></li>
|
||||
<li><a href="#Inheritance">Theme Individual Views</a></li>
|
||||
</ol>
|
||||
<h2>You should also read</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.google.com/design/spec">Material design specification</a></li>
|
||||
<li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>The new material theme provides:</p>
|
||||
|
||||
<ul>
|
||||
<li>System widgets that let you set their color palette</li>
|
||||
<li>Touch feedback animations for the system widgets</li>
|
||||
<li>Activity transition animations</li>
|
||||
</ul>
|
||||
|
||||
<p>You can customize the look of the material theme
|
||||
according to your brand identity with a color palette you control. You can tint the action bar and
|
||||
the status bar using theme attributes, as shown in <a href="#fig3">Figure 3</a>.</p>
|
||||
|
||||
<p>The system widgets have a new design and touch feedback animations. You can customize the
|
||||
color palette, the touch feedback animations, and the activity transitions for your app.</p>
|
||||
|
||||
<p>The material theme is defined as:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>@android:style/Theme.Material</code> (dark version)</li>
|
||||
<li><code>@android:style/Theme.Material.Light</code> (light version)</li>
|
||||
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
|
||||
</ul>
|
||||
|
||||
<p>For a list of material styles that you can use, see the API reference for
|
||||
{@link android.R.style R.style}.</p>
|
||||
|
||||
<!-- two columns, dark/light material theme example -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:10px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238">
|
||||
<div style="width:170px;margin:0 auto">
|
||||
<p style="margin-top:8px;font-size:12px"><strong>Figure 1</strong>. Dark material theme</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238">
|
||||
<div style="width:170px;margin:0 auto">
|
||||
<p style="margin-top:8px;font-size:12px"><strong>Figure 2</strong>. Light material theme</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left">
|
||||
</div>
|
||||
|
||||
<p class="note">
|
||||
<strong>Note:</strong> The material theme is only available in Android 5.0 (API level 21) and
|
||||
above. The <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>
|
||||
provide themes with material design styles for some widgets and support for customizing the color
|
||||
palette. For more information, see
|
||||
<a href="{@docRoot}training/material/compatibility.html">Maintaining Compatibility</a>.
|
||||
</p>
|
||||
|
||||
|
||||
<h2 id="ColorPalette">Customize the Color Palette</h2>
|
||||
|
||||
<p style="margin-bottom:30px">To customize the theme's base colors to fit your brand, define
|
||||
your custom colors using theme attributes when you inherit from the material theme:</p>
|
||||
|
||||
<pre>
|
||||
<resources>
|
||||
<!-- inherit from the material theme -->
|
||||
<style name="AppTheme" parent="android:Theme.Material">
|
||||
<!-- Main theme colors -->
|
||||
<!-- your app 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>
|
||||
</pre>
|
||||
|
||||
<div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3">
|
||||
<img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445"/>
|
||||
<p class="img-caption" style="margin-bottom:0px">
|
||||
<strong>Figure 3.</strong> Customizing the material theme.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="StatusBar">Customize the Status Bar</h2>
|
||||
|
||||
<p>The material theme lets you easily customize the status bar, so you can specify a
|
||||
color that fits your brand and provides enough contrast to show the white status icons. To
|
||||
set a custom color for the status bar, use the <code>android:statusBarColor</code> attribute when
|
||||
you extend the material theme. By default, <code>android:statusBarColor</code> inherits the
|
||||
value of <code>android:colorPrimaryDark</code>.</p>
|
||||
|
||||
<p>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 <code>android:statusBarColor</code> attribute to
|
||||
<code>@android:color/transparent</code> and adjust the window flags as required. You can
|
||||
also use the {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} method for
|
||||
animations or fading.</p>
|
||||
|
||||
<p class="note">
|
||||
<strong>Note:</strong> The status bar should almost always have a clear delineation from the
|
||||
primary toolbar, except for 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.
|
||||
</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
|
||||
<h2 id="Inheritance">Theme Individual Views</h3>
|
||||
|
||||
<p>Elements in XML layout definitions can specify the <code>android:theme</code> attribute,
|
||||
which references a theme resource. This attribute modifies the theme for the element and any
|
||||
child elements, which is useful for altering theme color palettes in a specific portion
|
||||
of an interface.</p>
|
||||
@@ -836,9 +836,9 @@ include the action bar on devices running Android 2.1 or higher."
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- End Building for wearables -->
|
||||
|
||||
|
||||
<!-- Start: Building for TV -->
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header">
|
||||
@@ -1241,6 +1241,45 @@ results."
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header">
|
||||
<a href="<?cs var:toroot ?>training/material/index.html"
|
||||
description=
|
||||
"How to implement material design on Android."
|
||||
>Creating Apps with Material Design</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="<?cs var:toroot ?>training/material/get-started.html">
|
||||
Getting Started
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/material/theme.html">
|
||||
Using the Material Theme
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/material/lists-cards.html">
|
||||
Creating Lists and Cards
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/material/shadows-clipping.html">
|
||||
Defining Shadows and Clipping Views
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/material/drawables.html">
|
||||
Working with Drawables
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/material/animations.html">
|
||||
Defining Custom Animations
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/material/compatibility.html">
|
||||
Maintaining Compatibility
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<!-- End User Interface -->
|
||||
|
||||
Reference in New Issue
Block a user