1 page.title=Menggunakan Tema Bahan 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Pelajaran ini mengajarkan Anda cara</h2> 8 <ol> 9 <li><a href="#ColorPalette">Menyesuaikan Palet Warna</a></li> 10 <li><a href="#StatusBar">Menyesuaikan Baris Status</a></li> 11 <li><a href="#Inheritance">Tampilan Setiap Tema</a></li> 12 </ol> 13 <h2>Anda juga harus membaca</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li> 17 </ul> 18 </div> 19 </div> 20 21 22 <p>Tema bahan yang baru menyediakan:</p> 23 24 <ul> 25 <li>Widget sistem yang memungkinkan Anda mengatur palet warnanya</li> 26 <li>Animasi umpan balik sentuh untuk widget sistem</li> 27 <li>Animasi transisi aktivitas</li> 28 </ul> 29 30 <p>Anda bisa menyesuaikan tampilan tema bahan 31 sesuai dengan identitas merek Anda dengan palet warna yang Anda kontrol. Anda bisa mewarnai action-bar dan 32 baris status dengan menggunakan atribut tema, seperti yang ditampilkan dalam <a href="#fig3">Gambar 3</a>.</p> 33 34 <p>Widget sistem memiliki desain baru dan animasi umpan balik sentuh. Anda bisa menyesuaikan 35 palet warna, animasi umpan balik sentuh, dan transisi aktivitas untuk aplikasi.</p> 36 37 <p>Tema bahan didefinisikan sebagai:</p> 38 39 <ul> 40 <li><code>@android:style/Theme.Material</code> (versi gelap)</li> 41 <li><code>@android:style/Theme.Material.Light</code> (versi terang)</li> 42 <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> 43 </ul> 44 45 <p>Untuk daftar gaya bahan yang bisa Anda gunakan, lihat referensi API untuk 46 {@link android.R.style R.style}.</p> 47 48 <!-- two columns, dark/light material theme example --> 49 <div style="width:700px;margin-top:25px;margin-bottom:10px"> 50 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 51 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238"> 52 <div style="width:170px;margin:0 auto"> 53 <p style="margin-top:8px;font-size:12px"><strong>Gambar 1</strong>. Tema bahan gelap</p> 54 </div> 55 </div> 56 <div style="float:left;width:250px;margin-right:0px;"> 57 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238"> 58 <div style="width:170px;margin:0 auto"> 59 <p style="margin-top:8px;font-size:12px"><strong>Gambar 2</strong>. Tema bahan terang</p> 60 </div> 61 </div> 62 <br style="clear:left"> 63 </div> 64 65 <p class="note"> 66 <strong>Catatan:</strong> Tema bahan hanya tersedia di Android 5.0 (API level 21) 67 ke atas. <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Library</a> 68 menyediakan tema dengan gaya desain bahan untuk beberapa widget dan dukungan untuk menyesuaikan 69 palet warna. Untuk informasi selengkapnya, lihat 70 <a href="{@docRoot}training/material/compatibility.html">Mempertahankan Kompatibilitas</a>. 71 </p> 72 73 74 <h2 id="ColorPalette">Menyesuaikan Palet Warna</h2> 75 76 <p style="margin-bottom:30px">Untuk menyesuaikan warna dasar tema agar cocok dengan merek Anda, definisikan 77 warna custom menggunakan atribut tema saat Anda mewariskan dari tema bahan:</p> 78 79 <pre> 80 <resources> 81 <!-- inherit from the material theme --> 82 <style name="AppTheme" parent="android:Theme.Material"> 83 <!-- Main theme colors --> 84 <!-- your app branding color for the app bar --> 85 <item name="android:colorPrimary">@color/primary</item> 86 <!-- darker variant for the status bar and contextual app bars --> 87 <item name="android:colorPrimaryDark">@color/primary_dark</item> 88 <!-- theme UI controls like checkboxes and text fields --> 89 <item name="android:colorAccent">@color/accent</item> 90 </style> 91 </resources> 92 </pre> 93 94 <div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3"> 95 <img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" /> 96 <p class="img-caption" style="margin-bottom:0px"> 97 <strong>Gambar 3.</strong> Menyesuaikan tema bahan.</p> 98 </div> 99 100 101 <h2 id="StatusBar">Menyesuaikan Baris Status</h2> 102 103 <p>Tema bahan memungkinkan Anda menyesuaikan baris status dengan mudah; jadi Anda bisa menetapkan 104 warna yang cocok dengan merek Anda dan memberikan kontras yang cukup untuk menampilkan ikon status putih. Untuk 105 mengatur warna custom bagi baris status, gunakan atribut <code>android:statusBarColor</code> bila 106 Anda memperluas tema bahan. Secara default, <code>android:statusBarColor</code> mewarisi 107 nilai <code>android:colorPrimaryDark</code>.</p> 108 109 <p>Anda juga bisa menggambar sendiri di belakang baris status. Misalnya, jika Anda ingin menampilkan 110 baris status secara transparan di atas foto, dengan gradasi gelap yang halus untuk memastikan 111 ikon status putih tetap terlihat. Caranya, atur atribut <code>android:statusBarColor</code> ke 112 <code>@android:color/transparent</code> dan sesuaikan flag jendela seperti yang diperlukan. Anda juga bisa 113 menggunakan metode {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} untuk 114 animasi atau pemudaran.</p> 115 116 <p class="note"> 117 <strong>Catatan:</strong> Baris status harus selalu memiliki delineasi yang jelas dari 118 toolbar utama, kecuali bila Anda menampilkan gambar detail atau konten media tepi-ke-tepi di belakang 119 baris ini dan bila Anda menggunakan gradasi untuk memastikan ikon tetap terlihat. 120 </p> 121 122 <p>Bila Anda menyesuaikan baris navigasi dan baris status, jadikan keduanya transparan atau modifikasi 123 baris status saja. Baris navigasi harus tetap hitam di semua kasus lainnya.</p> 124 125 126 <h2 id="Inheritance">Tampilan Setiap Tema</h3> 127 128 <p>Elemen dalam definisi layout XML bisa menetapkan atribut <code>android:theme</code>, 129 yang merujuk sumber daya tema. Atribut ini memodifikasi tema untuk elemen itu dan setiap 130 elemen anak, yang berguna untuk mengubah palet warna tema dalam porsi tertentu 131 pada antarmuka.</p> 132
