1page.title=Material Design for Android
2page.tags=Material,design
3page.type=design
4page.image=images/cards/design-material-for-android_2x.jpg
5
6@jd:body
7
8<!-- developer docs box -->
9<a class="notice-developers right" href="{@docRoot}training/material/index.html">
10  <div>
11    <h3>Dokumen Pengembang</h3>
12    <p>Membuat Aplikasi dengan Desain Bahan</p>
13  </div>
14</a>
15
16<!-- video box -->
17<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
18<div>
19    <h3>Video</h3>
20    <p>Pengantar Desain Bahan</p>
21</div>
22</a>
23
24<!-- video box -->
25<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
26<div>
27    <h3>Video</h3>
28    <p>Kertas dan Tinta: Bahan Penting</p>
29</div>
30</a>
31
32<!-- video box -->
33<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
34<div>
35    <h3>Video</h3>
36    <p>Desain Bahan di Aplikasi Google I/O</p>
37</div>
38</a>
39
40
41
42<p itemprop="description">Desain bahan adalah panduan komprehensif untuk desain visual, gerak, dan
43interaksi lintas platform dan perangkat. Android kini menyertakan dukungan untuk
44aplikasi desain bahan. Untuk menggunakan desain bahan di aplikasi Android, ikuti panduan yang didefinisikan
45dalam <a href="http://www.google.com/design/spec">spesifikasi desain bahan</a> dan gunakan
46komponen dan fungsionalitas baru yang tersedia di Android 5.0 (API level 21) ke atas.</p>
47
48<p>Android menyediakan elemen berikut untuk membangun aplikasi desain bahan:</p>
49
50<ul>
51  <li>Tema baru</li>
52  <li>Widget baru untuk tampilan yang kompleks</li>
53  <li>API baru untuk animasi dan bayangan custom</li>
54</ul>
55
56<p>Untuk informasi selengkapnya tentang mengimplementasikan desain bahan pada Android, lihat
57<a href="{@docRoot}training/material/index.html">Membuat Aplikasi dengan Desain Bahan</a>.</p>
58
59
60<h3>Tema Bahan</h3>
61
62<p>Tema bahan menyediakan gaya baru untuk aplikasi Anda, widget sistem yang memungkinkan Anda mengatur
63palet warnanya, dan animasi default untuk umpan balik sentuh dan transisi aktivitas.</p>
64
65<!-- two columns -->
66<div style="width:700px;margin-top:25px;margin-bottom:20px">
67<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
68  <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
69  <div style="width:140px;margin:0 auto">
70  <p style="margin-top:8px">Tema bahan gelap</p>
71  </div>
72</div>
73<div style="float:left;width:250px;margin-right:0px;">
74  <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
75  <div style="width:140px;margin:0 auto">
76  <p style="margin-top:8px">Tema bahan terang</p>
77  </div>
78</div>
79<br style="clear:left"/>
80</div>
81
82<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/theme.html">Menggunakan Tema
83Bahan</a>.</p>
84
85
86<h3>Daftar dan Kartu</h3>
87
88<p>Android menyediakan dua widget baru untuk menampilkan kartu dan daftar dengan gaya desain bahan
89dan animasi:</p>
90
91<!-- two columns -->
92<div style="width:700px;margin-top:25px;margin-bottom:20px">
93<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
94  <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
95  <p>Widget <code>RecyclerView</code> baru adalah versi <code>ListView</code>
96 yang lebih mudah dimasukkan dan mendukung beragam tipe layout serta memberikan peningkatan kinerja.</p>
97</div>
98<div style="float:left;width:250px;margin-right:0px;">
99  <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
100  <p>Widget <code>CardView</code> baru memungkinkan Anda menampilkan potongan informasi penting dalam
101  kartu yang memiliki tampilan dan cara kerja yang konsisten.</p>
102</div>
103<br style="clear:left"/>
104</div>
105
106<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/lists-cards.html">Membuat Daftar
107dan Kartu</a>.</p>
108
109
110<h3>Bayangan Tampilan</h3>
111
112<p>Selain properti X dan Y, tampilan di Android kini memiliki
113properti Z. Properti baru ini mewakili ketinggian tampilan, yang menentukan:</p>
114
115<ul>
116<li>Ukuran bayangan: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan lebih besar.</li>
117<li>Urutan penggambaran: tampilan dengan nilai Z lebih tinggi muncul di atas tampilan lainnya.</li>
118</ul>
119
120<div style="width:290px;margin-left:35px;float:right">
121  <div class="framed-nexus5-port-span-5">
122  <video class="play-on-hover" autoplay>
123    <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
124    <source src="{@docRoot}design/videos/ContactsAnim.webm"/>
125    <source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
126  </video>
127  </div>
128  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
129    <em>Untuk memutar ulang film, klik layar perangkat</em>
130  </div>
131</div>
132
133<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan
134Bayangan dan Memangkas Tampilan</a>.</p>
135
136
137<h3>Animasi</h3>
138
139<p>API animasi baru memungkinkan Anda membuat animasi custom untuk umpan balik sentuh dalam kontrol UI,
140perubahan status tampilan, dan transisi aktivitas.</p>
141
142<p>API ini memungkinkan Anda:</p>
143
144<ul>
145<li style="margin-bottom:15px">
146Merespons kejadian sentuh dalam tampilan Anda dengan animasi <strong>umpan balik sentuh</strong>.
147</li>
148<li style="margin-bottom:15px">
149Menyembunyikan dan memperlihatkan tampilan dengan animasi <strong>membuka melingkar</strong>.
150</li>
151<li style="margin-bottom:15px">
152Peralihan antar aktivitas dengan animasi <strong>transisi aktivitas</strong> custom.
153</li>
154<li style="margin-bottom:15px">
155Membuat animasi yang lebih alami dengan <strong>gerak melengkung</strong>.
156</li>
157<li style="margin-bottom:15px">
158Menganimasikan perubahan dalam satu atau beberapa properti tampilan dengan animasi <strong>perubahan status tampilan</strong>.
159</li>
160<li style="margin-bottom:15px">
161Menampilkan animasi di <strong>drawable daftar status</strong> di antara perubahan status tampilan.
162</li>
163</ul>
164
165<p>Animasi umpan balik sentuh dimasukkan ke dalam beberapa tampilan standar, misalnya tombol. API baru
166ini memungkinkan Anda menyesuaikan animasi ini dan menambahkannya ke tampilan custom Anda.</p>
167
168<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/animations.html">Mendefinisikan Animasi
169Custom</a>.</p>
170
171
172<h3>Drawable</h3>
173
174<p>Kemampuan baru untuk drawable ini membantu Anda mengimplementasikan aplikasi desain bahan:</p>
175
176<ul>
177<li><strong>Drawable vektor</strong> bisa diubah skalanya tanpa kehilangan definisi dan cocok
178untuk ikon satu-warna dalam-aplikasi.</li>
179<li><strong>Pewarnaan drawable</strong> memungkinkan Anda mendefinisikan bitmap sebagai alpha-mask dan mewarnainya
180saat runtime.</li>
181<li><strong>Ekstraksi warna</strong> memungkinkan Anda mengekstrak warna mencolok secara otomatis dari
182gambar bitmap.</li>
183</ul>
184
185<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/drawables.html">Bekerja dengan
186Drawable</a>.</p>
187