• Home
  • History
  • Annotate
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Getting Started
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>This lesson teaches you to</h2>
8<ol>
9  <li><a href="#ApplyTheme">Apply the Material Theme</a></li>
10  <li><a href="#Layouts">Design Your Layouts</a></li>
11  <li><a href="#Depth">Specify Elevation in Your Views</a></li>
12  <li><a href="#ListsCards">Create Lists and Cards</a></li>
13  <li><a href="#Animations">Customize Your Animations</a></li>
14</ol>
15<h2>You should also read</h2>
16<ul>
17  <li><a href="http://www.google.com/design/spec">Material design specification</a></li>
18  <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li>
19</ul>
20</div>
21</div>
22
23
24<p>To create apps with material design:</p>
25
26<ol>
27  <li style="margin-bottom:10px">
28    Review the <a href="http://www.google.com/design/spec">material design specification</a>.</li>
29  <li style="margin-bottom:10px">
30    Apply the material <strong>theme</strong> to your app.</li>
31  <li style="margin-bottom:10px">
32    Create your <strong>layouts</strong> following material design guidelines.</li>
33  <li style="margin-bottom:10px">
34    Specify the <strong>elevation</strong> of your views to cast shadows.</li>
35  <li style="margin-bottom:10px">
36    Use system <strong>widgets</strong> for lists and cards.</li>
37  <li style="margin-bottom:10px">
38    Customize the <strong>animations</strong> in your app.</li>
39</ol>
40
41<h3>Maintain backward compatibility</h3>
42
43<p>You can add many material design features to your app while maintaining compatibility with
44versions of Android earlier than 5.0. For more information, see
45<a href="{@docRoot}training/material/compatibility.html">Maintaining Compatibility</a>.</p>
46
47<h3>Update your app with material design</h3>
48
49<p>To update an existing app to incorporate material design, update your layouts following
50material design guidelines. Also make sure to incorporate depth, touch feedback, and
51animations.</p>
52
53<h3>Create new apps with material design</h3>
54
55<p>If you are creating a new app with material design features, the <a
56href="http://www.google.com/design/spec">material design guidelines</a> provide you with a
57cohesive design framework. Follow those guidelines and use the new functionality in the Android
58framework to design and develop your app.</p>
59
60
61<h2 id="ApplyTheme">Apply the Material Theme</h2>
62
63<p>To apply the material theme in your app, specify a style that inherits from
64<code>android:Theme.Material</code>:</p>
65
66<pre>
67&lt;!-- res/values/styles.xml -->
68&lt;resources>
69  &lt;!-- your theme inherits from the material theme -->
70  &lt;style name="AppTheme" parent="android:Theme.Material">
71    &lt;!-- theme customizations -->
72  &lt;/style>
73&lt;/resources>
74</pre>
75
76<p>The material theme provides updated system widgets that let you set their color palette and
77default animations for touch feedback and activity transitions. For more details, see
78<a href="{@docRoot}training/material/theme.html">Using the Material Theme</a>.</p>
79
80
81<h2 id="Layouts">Design Your Layouts</h2>
82
83<p>In addition to applying and customizing the material theme, your layouts should conform to
84the <a href="http://www.google.com/design/spec">material design guidelines</a>. When you design
85your layouts, pay special attention to the following:</p>
86
87<ul>
88<li>Baseline grids</li>
89<li>Keylines</li>
90<li>Spacing</li>
91<li>Touch target size</li>
92<li>Layout structure</li>
93</ul>
94
95
96<h2 id="Depth">Specify Elevation in Your Views</h2>
97
98<p>Views can cast shadows, and the elevation value of a view
99determines the size of its shadow and its drawing order. To set the elevation of a view, use the
100<code>android:elevation</code> attribute in your layouts:</p>
101
102<pre>
103&lt;TextView
104    android:id="&#64;+id/my_textview"
105    android:layout_width="wrap_content"
106    android:layout_height="wrap_content"
107    android:text="&#64;string/next"
108    android:background="&#64;color/white"
109    android:elevation="5dp" />
110</pre>
111
112<p>The new <code>translationZ</code> property lets you create animations that reflect temporary
113changes in the elevation of a view. Elevation changes can be useful when
114<a href="{@docRoot}training/material/animations.html#ViewState">responding to touch
115gestures</a>.</p>
116
117<p>For more details, see <a href="{@docRoot}training/material/shadows-clipping.html">Defining
118Shadows and Clipping Views</a>.</p>
119
120
121<h2 id="ListsCards">Create Lists and Cards</h2>
122
123<p>{@link android.support.v7.widget.RecyclerView} is a more pluggable version of {@link
124android.widget.ListView} that supports different layout types and provides performance improvements.
125{@link android.support.v7.widget.CardView} lets you show pieces of information inside cards with
126a consistent look across apps. The following code example demonstrates how to include a
127{@link android.support.v7.widget.CardView} in your layout:</p>
128
129<pre>
130&lt;android.support.v7.widget.CardView
131    android:id="&#64;+id/card_view"
132    android:layout_width="200dp"
133    android:layout_height="200dp"
134    card_view:cardCornerRadius="3dp">
135    ...
136&lt;/android.support.v7.widget.CardView>
137</pre>
138
139<p>For more information, see <a href="{@docRoot}training/material/lists-cards.html">Creating Lists
140and Cards</a>.</p>
141
142
143<h2 id="Animations">Customize Your Animations</h2>
144
145<p>Android 5.0 (API level 21) includes new APIs to create custom animations in your app.
146For example, you can enable activity transitions and define an exit transition inside an
147activity:</p>
148
149<pre>
150public class MyActivity extends Activity {
151
152    &#64;Override
153    protected void onCreate(Bundle savedInstanceState) {
154        super.onCreate(savedInstanceState);
155        // enable transitions
156        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
157        setContentView(R.layout.activity_my);
158    }
159
160    public void onSomeButtonClicked(View view) {
161        getWindow().setExitTransition(new Explode());
162        Intent intent = new Intent(this, MyOtherActivity.class);
163        startActivity(intent,
164                      ActivityOptions
165                          .makeSceneTransitionAnimation(this).toBundle());
166    }
167}
168</pre>
169
170<p>When you start another activity from this activity, the exit transition is activated.</p>
171
172<p>To learn more about the new animation APIs, see <a
173href="{@docRoot}training/material/animations.html">Defining Custom Animations</a>.</p>
174