page.title=Get Started @jd:body

In this document

  1. Apply the Material Theme
  2. Design Your Layouts
  3. Specify Elevation in Your Views
  4. Use the New UI Widgets
  5. Customize Your Animations

To create apps with material design:

  1. Take a look at the material design specification.
  2. Apply the material theme to your app.
  3. Define additional styles to customize the material theme.
  4. Create your layouts following material design guidelines.
  5. Specify the elevation of your views to cast appropriate shadows.
  6. Use the new widgets for complex views, such as lists and cards.
  7. Use the new APIs to customize the animations in your app.

Update Your App for the Android L Developer Preview

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.

Create New Apps for the Android L Developer Preview

If you are creating a new app for the Android L Developer Preview, the material design guidelines 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.

Apply the Material Theme

To apply the material theme in your app, specify a style that inherits from android:Theme.Material:

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

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 Material Theme.

Design Your Layouts

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:

Specify Elevation in Your Views

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 android:elevation attribute in your layouts:

<TextView
    android:id="@+id/my_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/next"
    android:background="@color/white"
    android:elevation="5dp" />

The new translationZ 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.

For more details, see Views and Shadows.

Use the New UI Widgets

RecyclerView is a more advanced version of ListView that provides performance improvements and is easier to use. CardView lets you show pieces of information inside cards with a consistent look across apps. To include a CardView in your layout:

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

For more information, see UI Widgets.

Customize Your Animations

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:

// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

When you start another activity from this activity, the exit transition is activated.

To learn about all the features in the new APIs, see Animations.