146 lines
5.1 KiB
Plaintext
146 lines
5.1 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 Depth in Your Views</a></li>
|
|
<li><a href="#widgets">Use the New UI Widgets</a></li>
|
|
<li><a href="#apis">Use the New APIs</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="">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>depth</strong> for 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 <strong>APIs</strong> to customize the animations 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 material design
|
|
guidelines provide you with a solid design framework for your app. Follow these guidelines and
|
|
use the new functionality in the Android framework to design and develop your app.</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 material design guidelines. 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>
|
|
|
|
<p>You still define layouts inside XML files using the standard tools from the Android framework.
|
|
For details on the material design guidelines, see the <a href="">material design
|
|
specification</a>.</p>
|
|
|
|
|
|
<h2 id="depth">Specify Depth in Your Views</h2>
|
|
|
|
<p>In the Android L Developer Preview, views can cast shadows. The elevation value of a view
|
|
determines the size of its shadow. To set the elevation of a view, use the
|
|
<code>android:elevation</code> attribute in your layouts:</p>
|
|
|
|
<pre>
|
|
<Button
|
|
android:id="@+id/my_button"
|
|
android:layout_width="wrap_content"
|
|
android:layout_height="wrap_content"
|
|
android:text="@string/next"
|
|
<strong>android:elevation</strong>="10dp" />
|
|
</pre>
|
|
|
|
<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>The Android L Developer Preview includes two new UI widgets for complex views,
|
|
<code>RecyclerView</code> and <code>CardView</code>. <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="apis">Use the APIs to 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> |