| page.title=Material Design for Android |
| page.tags=Material,design |
| page.type=design |
| page.image=images/cards/design-material-for-android_2x.jpg |
| |
| @jd:body |
| |
| <!-- developer docs box --> |
| <a class="notice-developers right" href="{@docRoot}training/material/index.html"> |
| <div> |
| <h3>Dokumen Pengembang</h3> |
| <p>Membuat Aplikasi dengan Desain Bahan</p> |
| </div> |
| </a> |
| |
| <!-- video box --> |
| <a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw"> |
| <div> |
| <h3>Video</h3> |
| <p>Pengantar Desain Bahan</p> |
| </div> |
| </a> |
| |
| <!-- video box --> |
| <a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw"> |
| <div> |
| <h3>Video</h3> |
| <p>Kertas dan Tinta: Bahan Penting</p> |
| </div> |
| </a> |
| |
| <!-- video box --> |
| <a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc"> |
| <div> |
| <h3>Video</h3> |
| <p>Desain Bahan di Aplikasi Google I/O</p> |
| </div> |
| </a> |
| |
| |
| |
| <p itemprop="description">Desain bahan adalah panduan komprehensif untuk desain visual, gerak, dan |
| interaksi lintas platform dan perangkat. Android kini menyertakan dukungan untuk |
| aplikasi desain bahan. Untuk menggunakan desain bahan di aplikasi Android, ikuti panduan yang didefinisikan |
| dalam <a href="http://www.google.com/design/spec">spesifikasi desain bahan</a> dan gunakan |
| komponen dan fungsionalitas baru yang tersedia di Android 5.0 (API level 21) ke atas.</p> |
| |
| <p>Android menyediakan elemen berikut untuk membangun aplikasi desain bahan:</p> |
| |
| <ul> |
| <li>Tema baru</li> |
| <li>Widget baru untuk tampilan yang kompleks</li> |
| <li>API baru untuk animasi dan bayangan custom</li> |
| </ul> |
| |
| <p>Untuk informasi selengkapnya tentang mengimplementasikan desain bahan pada Android, lihat |
| <a href="{@docRoot}training/material/index.html">Membuat Aplikasi dengan Desain Bahan</a>.</p> |
| |
| |
| <h3>Tema Bahan</h3> |
| |
| <p>Tema bahan menyediakan gaya baru untuk aplikasi Anda, widget sistem yang memungkinkan Anda mengatur |
| palet warnanya, dan animasi default untuk umpan balik sentuh dan transisi aktivitas.</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 bahan gelap</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 bahan terang</p> |
| </div> |
| </div> |
| <br style="clear:left"/> |
| </div> |
| |
| <p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/theme.html">Menggunakan Tema |
| Bahan</a>.</p> |
| |
| |
| <h3>Daftar dan Kartu</h3> |
| |
| <p>Android menyediakan dua widget baru untuk menampilkan kartu dan daftar dengan gaya desain bahan |
| dan animasi:</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>Widget <code>RecyclerView</code> baru adalah versi <code>ListView</code> |
| yang lebih mudah dimasukkan dan mendukung beragam tipe layout serta memberikan peningkatan kinerja.</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>Widget <code>CardView</code> baru memungkinkan Anda menampilkan potongan informasi penting dalam |
| kartu yang memiliki tampilan dan cara kerja yang konsisten.</p> |
| </div> |
| <br style="clear:left"/> |
| </div> |
| |
| <p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/lists-cards.html">Membuat Daftar |
| dan Kartu</a>.</p> |
| |
| |
| <h3>Bayangan Tampilan</h3> |
| |
| <p>Selain properti X dan Y, tampilan di Android kini memiliki |
| properti Z. Properti baru ini mewakili ketinggian tampilan, yang menentukan:</p> |
| |
| <ul> |
| <li>Ukuran bayangan: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan lebih besar.</li> |
| <li>Urutan penggambaran: tampilan dengan nilai Z lebih tinggi muncul di atas tampilan lainnya.</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>Untuk memutar ulang film, klik layar perangkat</em> |
| </div> |
| </div> |
| |
| <p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan |
| Bayangan dan Memangkas Tampilan</a>.</p> |
| |
| |
| <h3>Animasi</h3> |
| |
| <p>API animasi baru memungkinkan Anda membuat animasi custom untuk umpan balik sentuh dalam kontrol UI, |
| perubahan status tampilan, dan transisi aktivitas.</p> |
| |
| <p>API ini memungkinkan Anda:</p> |
| |
| <ul> |
| <li style="margin-bottom:15px"> |
| Merespons kejadian sentuh dalam tampilan Anda dengan animasi <strong>umpan balik sentuh</strong>. |
| </li> |
| <li style="margin-bottom:15px"> |
| Menyembunyikan dan memperlihatkan tampilan dengan animasi <strong>membuka melingkar</strong>. |
| </li> |
| <li style="margin-bottom:15px"> |
| Peralihan antar aktivitas dengan animasi <strong>transisi aktivitas</strong> custom. |
| </li> |
| <li style="margin-bottom:15px"> |
| Membuat animasi yang lebih alami dengan <strong>gerak melengkung</strong>. |
| </li> |
| <li style="margin-bottom:15px"> |
| Menganimasikan perubahan dalam satu atau beberapa properti tampilan dengan animasi <strong>perubahan status tampilan</strong>. |
| </li> |
| <li style="margin-bottom:15px"> |
| Menampilkan animasi di <strong>drawable daftar status</strong> di antara perubahan status tampilan. |
| </li> |
| </ul> |
| |
| <p>Animasi umpan balik sentuh dimasukkan ke dalam beberapa tampilan standar, misalnya tombol. API baru |
| ini memungkinkan Anda menyesuaikan animasi ini dan menambahkannya ke tampilan custom Anda.</p> |
| |
| <p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/animations.html">Mendefinisikan Animasi |
| Custom</a>.</p> |
| |
| |
| <h3>Drawable</h3> |
| |
| <p>Kemampuan baru untuk drawable ini membantu Anda mengimplementasikan aplikasi desain bahan:</p> |
| |
| <ul> |
| <li><strong>Drawable vektor</strong> bisa diubah skalanya tanpa kehilangan definisi dan cocok |
| untuk ikon satu-warna dalam-aplikasi.</li> |
| <li><strong>Pewarnaan drawable</strong> memungkinkan Anda mendefinisikan bitmap sebagai alpha-mask dan mewarnainya |
| saat runtime.</li> |
| <li><strong>Ekstraksi warna</strong> memungkinkan Anda mengekstrak warna mencolok secara otomatis dari |
| gambar bitmap.</li> |
| </ul> |
| |
| <p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/drawables.html">Bekerja dengan |
| Drawable</a>.</p> |