To create apps with material design:
- Take a look at the material design specification.
- Apply the material theme to your app.
- Define additional styles to customize the material theme.
- Create your layouts following material design guidelines.
- Specify the elevation of your views to cast appropriate shadows.
- Use the new widgets for complex views, such as lists and cards.
- 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:
- Baseline grids
- Keylines
- Spacing
- Touch target size
- Layout structure
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.