1 page.title=Material Design for Android 2 page.tags=Material,design 3 page.type=design 4 page.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 43 interaksi lintas platform dan perangkat. Android kini menyertakan dukungan untuk 44 aplikasi desain bahan. Untuk menggunakan desain bahan di aplikasi Android, ikuti panduan yang didefinisikan 45 dalam <a href="http://www.google.com/design/spec">spesifikasi desain bahan</a> dan gunakan 46 komponen 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 63 palet 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 83 Bahan</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 89 dan 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 107 dan Kartu</a>.</p> 108 109 110 <h3>Bayangan Tampilan</h3> 111 112 <p>Selain properti X dan Y, tampilan di Android kini memiliki 113 properti 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 134 Bayangan 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, 140 perubahan status tampilan, dan transisi aktivitas.</p> 141 142 <p>API ini memungkinkan Anda:</p> 143 144 <ul> 145 <li style="margin-bottom:15px"> 146 Merespons kejadian sentuh dalam tampilan Anda dengan animasi <strong>umpan balik sentuh</strong>. 147 </li> 148 <li style="margin-bottom:15px"> 149 Menyembunyikan dan memperlihatkan tampilan dengan animasi <strong>membuka melingkar</strong>. 150 </li> 151 <li style="margin-bottom:15px"> 152 Peralihan antar aktivitas dengan animasi <strong>transisi aktivitas</strong> custom. 153 </li> 154 <li style="margin-bottom:15px"> 155 Membuat animasi yang lebih alami dengan <strong>gerak melengkung</strong>. 156 </li> 157 <li style="margin-bottom:15px"> 158 Menganimasikan perubahan dalam satu atau beberapa properti tampilan dengan animasi <strong>perubahan status tampilan</strong>. 159 </li> 160 <li style="margin-bottom:15px"> 161 Menampilkan 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 166 ini 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 169 Custom</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 178 untuk ikon satu-warna dalam-aplikasi.</li> 179 <li><strong>Pewarnaan drawable</strong> memungkinkan Anda mendefinisikan bitmap sebagai alpha-mask dan mewarnainya 180 saat runtime.</li> 181 <li><strong>Ekstraksi warna</strong> memungkinkan Anda mengekstrak warna mencolok secara otomatis dari 182 gambar bitmap.</li> 183 </ul> 184 185 <p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/drawables.html">Bekerja dengan 186 Drawable</a>.</p> 187
