1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
page.title=Material Design
page.tags=Material,design
page.type=design
page.image=design/material/images/MaterialLight.png
@jd:body
<!-- developer docs box -->
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
<div>
<h3>Documentos do desenvolvedor</h3>
<p>Criação de aplicativos com o Material Design</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
<div>
<h3>Vídeo</h3>
<p>Introdução ao Material Design</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
<div>
<h3>Vídeo</h3>
<p>Papel e tinta: Os materiais que importam</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
<div>
<h3>Vídeo</h3>
<p>Material Design no aplicativo Google I/O</p>
</div>
</a>
<p itemprop="description">O Material Design é um guia abrangente para design visual, de movimento e de
interação para diversas plataformas e dispositivos. O Android agora é compatível com
aplicativos do Material Design. Para usar o Material Design nos aplicativos Android, siga as orientações definidas
nas <a href="http://www.google.com/design/spec">especificações do Material Design</a> e use os novos
componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21) e em posteriores.</p>
<p>O Android fornece os seguintes elementos para criar aplicativos do Material Design:</p>
<ul>
<li>Um novo tema</li>
<li>Novos widgets para vistas complexas</li>
<li>Novas APIs para sombras e animações personalizadas</li>
</ul>
<p>Para obter mais informações sobre a implementação do Material Design no Android, consulte
<a href="{@docRoot}training/material/index.html">Criação de aplicativos com o Material Design</a>.</p>
<h3>Tema do Material</h3>
<p>O tema do Material fornece um novo estilo para o seu aplicativo, widgets de sistema que permitem
definir a paleta de cores e as animações padrão para feedback de toque e transições de atividades.</p>
<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
<div style="width:140px;margin:0 auto">
<p style="margin-top:8px">Tema escuro do Material</p>
</div>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
<div style="width:140px;margin:0 auto">
<p style="margin-top:8px">Tema claro do Material</p>
</div>
</div>
<br style="clear:left"/>
</div>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/theme.html">Como usar o tema
do Material</a>.</p>
<h3>Listas e cartões</h3>
<p>O Android fornece dois novos widgets para exibir cartões e listas com estilos e animações do
Material Design:</p>
<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
<p>O novo widget <code>RecyclerView</code> é uma versão mais completa de <code>ListView</code>
com suporte para diferentes tipos de layout e melhorias no desempenho.</p>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
<p>O novo widget <code>CardView</code> permite exibir informações importantes dentro de
cartões que têm aparência consistente.</p>
</div>
<br style="clear:left"/>
</div>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar
listas e cartões</a>.</p>
<h3>Sombras de vistas</h3>
<p>Além das propriedades X e Y, vistas no Android agora têm uma propriedade
Z. Essa nova propriedade representa a elevação de uma vista, que determina:</p>
<ul>
<li>O tamanho da sombra: vistas com valores maiores de Z lançam sombras maiores.</li>
<li>A ordem de desenho: vistas com valores maiores de Z aparecem sobre outras vistas.</li>
</ul>
<div style="width:290px;margin-left:35px;float:right">
<div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay>
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<em>Para reproduzir o filme, clique na tela do dispositivo</em>
</div>
</div>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como
definir sombras e recortar visualizações</a>.</p>
<h3>Animações</h3>
<p>As novas APIs de animação permitem criar animações personalizadas para feedback de toque em controles de IU,
mudanças no estado da vista e transições de atividades.</p>
<p>Essas APIs permitem:</p>
<ul>
<li style="margin-bottom:15px">
Responder a eventos de toque nas vistas com animações de <strong>feedback de toque</strong>.
</li>
<li style="margin-bottom:15px">
Ocultar e exibir vistas com animações de <strong>revelação circular</strong>.
</li>
<li style="margin-bottom:15px">
Alternar entre atividades com animações de <strong>transição de atividades</strong>.
</li>
<li style="margin-bottom:15px">
Criar animações mais naturais com <strong>movimento curvado</strong>.
</li>
<li style="margin-bottom:15px">
Animar mudanças em uma ou mais propriedades da vista com animações de <strong>mudança de estado da vista</strong>.
</li>
<li style="margin-bottom:15px">
Exibir animações em <strong>desenháveis da lista de estado</strong> entre mudanças de estado da vista.
</li>
</ul>
<p>Animações de feedback de toque são integradas em várias vistas padrões, como botões. As novas APIs
permitem personalizar essas animações e adicioná-las às vistas personalizadas.</p>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/animations.html">Como definir
animações personalizadas</a>.</p>
<h3>Desenháveis</h3>
<p>Essas novas capacidades dos desenháveis ajudam na implementação de aplicativos do Material Design:</p>
<ul>
<li><strong>Desenháveis de vetor</strong> são dimensionáveis sem perder definição e são perfeitos
para ícones de uma cor dentro do aplicativo.</li>
<li><strong>Tingimento desenhável</strong> permite definir mapas de bits como uma máscara alfa e tingi-los com
uma cor em tempo de execução.</li>
<li><strong>Extração de cor</strong> permite extrair automaticamente cores proeminentes de uma
imagem de mapa de bits.</li>
</ul>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/drawables.html">Como trabalhar
com desenháveis</a>.</p>
|
