1page.title=Como iniciar
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>Esta lição ensina a</h2>
8<ol>
9  <li><a href="#ApplyTheme">Aplicar o tema do Material</a></li>
10  <li><a href="#Layouts">Projetar layouts</a></li>
11  <li><a href="#Depth">Especificar a elevação em visualizações</a></li>
12  <li><a href="#ListsCards">Criar listas e cartões</a></li>
13  <li><a href="#Animations">Personalizar animações</a></li>
14</ol>
15<h2>Você também deve ler</h2>
16<ul>
17  <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
18  <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
19</ul>
20</div>
21</div>
22
23
24<p>Para criar aplicativos com o Material Design:</p>
25
26<ol>
27  <li style="margin-bottom:10px">
28    Reveja as <a href="http://www.google.com/design/spec">especificações do Material Design</a>.</li>
29  <li style="margin-bottom:10px">
30    Aplique o <strong>tema</strong> do Material no seu aplicativo.</li>
31  <li style="margin-bottom:10px">
32    Crie <strong>layouts</strong> de acordo com as orientações do Material Design.</li>
33  <li style="margin-bottom:10px">
34    Especifique a <strong>elevação</strong> das visualizações para inserir sombras.</li>
35  <li style="margin-bottom:10px">
36    Use <strong>widgets</strong> do sistema para listas e cartões.</li>
37  <li style="margin-bottom:10px">
38    Personalize <strong>animações</strong> no aplicativo.</li>
39</ol>
40
41<h3>Manter compatibilidade com versões anteriores</h3>
42
43<p>Você pode adicionar muitos recursos do Material Design ao aplicativo e, ao mesmo tempo, manter
44a compatibilidade com versões anteriores ao Android 5.0. Para obter mais informações, consulte
45<a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.</p>
46
47<h3>Atualizar o aplicativo com o Material Design</h3>
48
49<p>Para atualizar um aplicativo existente para incorporar o Material Design, atualize os layouts
50de acordo com as orientações do Material Design. Certifique-se também de incorporar profundidade, feedbacks de toque e
51animações.</p>
52
53<h3>Criar novos aplicativos com o Material Design</h3>
54
55<p>Se você está criando um novo aplicativo com recursos do Material Design, as <a href="http://www.google.com/design/spec">orientações do Material Design</a> fornecem uma
56estrutura de projeto coesa. Siga tais orientações e use a nova funcionalidade na estrutura do Android para
57projetar e desenvolver o aplicativo.</p>
58
59
60<h2 id="ApplyTheme">Aplicar o tema do Material</h2>
61
62<p>Para aplicar o tema do Material no aplicativo, especifique um estilo herdado de
63<code>android:Theme.Material</code>:</p>
64
65<pre>
66&lt;!-- res/values/styles.xml -->
67&lt;resources>
68  &lt;!-- your theme inherits from the material theme -->
69  &lt;style name="AppTheme" parent="android:Theme.Material">
70    &lt;!-- theme customizations -->
71  &lt;/style>
72&lt;/resources>
73</pre>
74
75<p>O tema do Material fornece widgets do sistema atualizados que permitem definir a paleta de cores e as animações
76padrão para feedback de toque e transições de atividades. Para obter mais detalhes, consulte
77<a href="{@docRoot}training/material/theme.html">Como usar o tema do Material</a>.</p>
78
79
80<h2 id="Layouts">Projetar layouts</h2>
81
82<p>Além de aplicar e personalizar o tema do Material, os layouts devem estar em conformidade
83com as <a href="http://www.google.com/design/spec">orientações do Material Design</a>. Ao projetar os
84layouts, dê atenção especial ao seguinte:</p>
85
86<ul>
87<li>Grades das linhas de base</li>
88<li>Linhas-chave</li>
89<li>Espaçamento</li>
90<li>Tamanho do alvo de toque</li>
91<li>Estrutura do layout</li>
92</ul>
93
94
95<h2 id="Depth">Especificar a elevação em visualizações</h2>
96
97<p>As visualizações podem lançar sombras e o valor da elevação delas
98determina o tamanho da sombra e a ordem dos desenhos. Para definir a elevação de uma visualização, use o atributo
99<code>android:elevation</code> nos layouts:</p>
100
101<pre>
102&lt;TextView
103    android:id="&#64;+id/my_textview"
104    android:layout_width="wrap_content"
105    android:layout_height="wrap_content"
106    android:text="&#64;string/next"
107    android:background="&#64;color/white"
108    android:elevation="5dp" />
109</pre>
110
111<p>A nova propriedade <code>translationZ</code> permite a criação de animações que refletem mudanças
112temporárias na elevação de uma visualização. As mudanças de elevação podem ser úteis ao
113<a href="{@docRoot}training/material/animations.html#ViewState">responder a gestos
114de toque</a>.</p>
115
116<p>Para obter mais detalhes, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como definir
117sombras e recortar visualizações</a>.</p>
118
119
120<h2 id="ListsCards">Criar listas e cartões</h2>
121
122<p>{@link android.support.v7.widget.RecyclerView} é uma versão mais completa de {@link
123android.widget.ListView} compatível com diferentes tipos de layout e que fornece melhor desempenho.
124{@link android.support.v7.widget.CardView} permite a exibição de informações dentro dos cartões com uma
125aparência consistente nos aplicativos. O exemplo de código a seguir mostra como incluir um
126{@link android.support.v7.widget.CardView} no layout:</p>
127
128<pre>
129&lt;android.support.v7.widget.CardView
130    android:id="&#64;+id/card_view"
131    android:layout_width="200dp"
132    android:layout_height="200dp"
133    card_view:cardCornerRadius="3dp">
134    ...
135&lt;/android.support.v7.widget.CardView>
136</pre>
137
138<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar
139listas e cartões</a>.</p>
140
141
142<h2 id="Animations">Personalizar animações</h2>
143
144<p>O Android 5.0 (API de nível 21) inclui novas APIs para criar animações personalizadas no aplicativo.
145Por exemplo, você pode habilitar transições de atividades e definir uma transição de saída dentro
146de uma atividade:</p>
147
148<pre>
149public class MyActivity extends Activity {
150
151    &#64;Override
152    protected void onCreate(Bundle savedInstanceState) {
153        super.onCreate(savedInstanceState);
154        // enable transitions
155        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
156        setContentView(R.layout.activity_my);
157    }
158
159    public void onSomeButtonClicked(View view) {
160        getWindow().setExitTransition(new Explode());
161        Intent intent = new Intent(this, MyOtherActivity.class);
162        startActivity(intent,
163                      ActivityOptions
164                          .makeSceneTransitionAnimation(this).toBundle());
165    }
166}
167</pre>
168
169<p>Ao iniciar outra atividade a partir desta, a transição de saída é ativada.</p>
170
171<p>Para saber mais sobre as novas APIs de animação, consulte <a href="{@docRoot}training/material/animations.html">Como definir animações personalizadas</a>.</p>
172