| 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> |