147 lines
5.2 KiB
Plaintext
147 lines
5.2 KiB
Plaintext
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> |