diff options
Diffstat (limited to 'docs/html/preview/material/get-started.jd')
| -rw-r--r-- | docs/html/preview/material/get-started.jd | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/docs/html/preview/material/get-started.jd b/docs/html/preview/material/get-started.jd new file mode 100644 index 0000000..9c0e55d --- /dev/null +++ b/docs/html/preview/material/get-started.jd @@ -0,0 +1,146 @@ +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>
\ No newline at end of file |