docs/html/preview/material/get-started.jd

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>
&lt;!-- res/values/styles.xml -->
&lt;resources>
  &lt!-- your app's theme inherits from the Material theme -->
  &lt;style name="AppTheme" parent="android:Theme.Material">
    &lt!-- theme customizations -->
  &lt;/style>
&lt;/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>
&lt;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>
&lt;android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="3dp">
    ...
&lt;/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>