| page.title=Menggunakan Tema Bahan |
| |
| @jd:body |
| |
| <div id="tb-wrapper"> |
| <div id="tb"> |
| <h2>Pelajaran ini mengajarkan Anda cara</h2> |
| <ol> |
| <li><a href="#ColorPalette">Menyesuaikan Palet Warna</a></li> |
| <li><a href="#StatusBar">Menyesuaikan Baris Status</a></li> |
| <li><a href="#Inheritance">Tampilan Setiap Tema</a></li> |
| </ol> |
| <h2>Anda juga harus membaca</h2> |
| <ul> |
| <li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li> |
| <li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <p>Tema bahan yang baru menyediakan:</p> |
| |
| <ul> |
| <li>Widget sistem yang memungkinkan Anda mengatur palet warnanya</li> |
| <li>Animasi umpan balik sentuh untuk widget sistem</li> |
| <li>Animasi transisi aktivitas</li> |
| </ul> |
| |
| <p>Anda bisa menyesuaikan tampilan tema bahan |
| sesuai dengan identitas merek Anda dengan palet warna yang Anda kontrol. Anda bisa mewarnai action-bar dan |
| baris status dengan menggunakan atribut tema, seperti yang ditampilkan dalam <a href="#fig3">Gambar 3</a>.</p> |
| |
| <p>Widget sistem memiliki desain baru dan animasi umpan balik sentuh. Anda bisa menyesuaikan |
| palet warna, animasi umpan balik sentuh, dan transisi aktivitas untuk aplikasi.</p> |
| |
| <p>Tema bahan didefinisikan sebagai:</p> |
| |
| <ul> |
| <li><code>@android:style/Theme.Material</code> (versi gelap)</li> |
| <li><code>@android:style/Theme.Material.Light</code> (versi terang)</li> |
| <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> |
| </ul> |
| |
| <p>Untuk daftar gaya bahan yang bisa Anda gunakan, lihat referensi API untuk |
| {@link android.R.style R.style}.</p> |
| |
| <!-- two columns, dark/light material theme example --> |
| <div style="width:700px;margin-top:25px;margin-bottom:10px"> |
| <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:170px;margin:0 auto"> |
| <p style="margin-top:8px;font-size:12px"><strong>Gambar 1</strong>. 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:170px;margin:0 auto"> |
| <p style="margin-top:8px;font-size:12px"><strong>Gambar 2</strong>. Tema bahan terang</p> |
| </div> |
| </div> |
| <br style="clear:left"> |
| </div> |
| |
| <p class="note"> |
| <strong>Catatan:</strong> Tema bahan hanya tersedia di Android 5.0 (API level 21) |
| ke atas. <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Library</a> |
| menyediakan tema dengan gaya desain bahan untuk beberapa widget dan dukungan untuk menyesuaikan |
| palet warna. Untuk informasi selengkapnya, lihat |
| <a href="{@docRoot}training/material/compatibility.html">Mempertahankan Kompatibilitas</a>. |
| </p> |
| |
| |
| <h2 id="ColorPalette">Menyesuaikan Palet Warna</h2> |
| |
| <p style="margin-bottom:30px">Untuk menyesuaikan warna dasar tema agar cocok dengan merek Anda, definisikan |
| warna custom menggunakan atribut tema saat Anda mewariskan dari tema bahan:</p> |
| |
| <pre> |
| <resources> |
| <!-- inherit from the material theme --> |
| <style name="AppTheme" parent="android:Theme.Material"> |
| <!-- Main theme colors --> |
| <!-- your app branding color for the app bar --> |
| <item name="android:colorPrimary">@color/primary</item> |
| <!-- darker variant for the status bar and contextual app bars --> |
| <item name="android:colorPrimaryDark">@color/primary_dark</item> |
| <!-- theme UI controls like checkboxes and text fields --> |
| <item name="android:colorAccent">@color/accent</item> |
| </style> |
| </resources> |
| </pre> |
| |
| <div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3"> |
| <img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" /> |
| <p class="img-caption" style="margin-bottom:0px"> |
| <strong>Gambar 3.</strong> Menyesuaikan tema bahan.</p> |
| </div> |
| |
| |
| <h2 id="StatusBar">Menyesuaikan Baris Status</h2> |
| |
| <p>Tema bahan memungkinkan Anda menyesuaikan baris status dengan mudah; jadi Anda bisa menetapkan |
| warna yang cocok dengan merek Anda dan memberikan kontras yang cukup untuk menampilkan ikon status putih. Untuk |
| mengatur warna custom bagi baris status, gunakan atribut <code>android:statusBarColor</code> bila |
| Anda memperluas tema bahan. Secara default, <code>android:statusBarColor</code> mewarisi |
| nilai <code>android:colorPrimaryDark</code>.</p> |
| |
| <p>Anda juga bisa menggambar sendiri di belakang baris status. Misalnya, jika Anda ingin menampilkan |
| baris status secara transparan di atas foto, dengan gradasi gelap yang halus untuk memastikan |
| ikon status putih tetap terlihat. Caranya, atur atribut <code>android:statusBarColor</code> ke |
| <code>@android:color/transparent</code> dan sesuaikan flag jendela seperti yang diperlukan. Anda juga bisa |
| menggunakan metode {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} untuk |
| animasi atau pemudaran.</p> |
| |
| <p class="note"> |
| <strong>Catatan:</strong> Baris status harus selalu memiliki delineasi yang jelas dari |
| toolbar utama, kecuali bila Anda menampilkan gambar detail atau konten media tepi-ke-tepi di belakang |
| baris ini dan bila Anda menggunakan gradasi untuk memastikan ikon tetap terlihat. |
| </p> |
| |
| <p>Bila Anda menyesuaikan baris navigasi dan baris status, jadikan keduanya transparan atau modifikasi |
| baris status saja. Baris navigasi harus tetap hitam di semua kasus lainnya.</p> |
| |
| |
| <h2 id="Inheritance">Tampilan Setiap Tema</h3> |
| |
| <p>Elemen dalam definisi layout XML bisa menetapkan atribut <code>android:theme</code>, |
| yang merujuk sumber daya tema. Atribut ini memodifikasi tema untuk elemen itu dan setiap |
| elemen anak, yang berguna untuk mengubah palet warna tema dalam porsi tertentu |
| pada antarmuka.</p> |