1 page.title=Memulai 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="#ApplyTheme">Menerapkan Tema Bahan</a></li> 10 <li><a href="#Layouts">Mendesain Layout Anda</a></li> 11 <li><a href="#Depth">Menetapkan Ketinggian di Tampilan Anda</a></li> 12 <li><a href="#ListsCards">Membuat Daftar dan Kartu</a></li> 13 <li><a href="#Animations">Menyesuaikan Animasi Anda</a></li> 14 </ol> 15 <h2>Anda juga harus membaca</h2> 16 <ul> 17 <li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li> 18 <li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li> 19 </ul> 20 </div> 21 </div> 22 23 24 <p>Untuk membuat aplikasi dengan desain bahan:</p> 25 26 <ol> 27 <li style="margin-bottom:10px"> 28 Tinjaulah <a href="http://www.google.com/design/spec">spesifikasi desain bahan</a>.</li> 29 <li style="margin-bottom:10px"> 30 Terapkan <strong>tema</strong> bahan ke aplikasi Anda.</li> 31 <li style="margin-bottom:10px"> 32 Buat <strong>layout</strong> agar mengikuti panduan desain bahan.</li> 33 <li style="margin-bottom:10px"> 34 Tetapkan <strong>ketinggian</strong> tampilan Anda untuk menghasilkan bayangan.</li> 35 <li style="margin-bottom:10px"> 36 Gunakan <strong>widget</strong> sistem untuk daftar dan kartu.</li> 37 <li style="margin-bottom:10px"> 38 Sesuaikan <strong>animasi</strong> di aplikasi Anda.</li> 39 </ol> 40 41 <h3>Mempertahankan kompatibilitas mundur</h3> 42 43 <p>Anda bisa menambahkan banyak fitur desain bahan ke aplikasi sekaligus mempertahankan kompatibilitas dengan 44 versi Android sebelum 5.0. Untuk informasi selengkapnya, lihat 45 <a href="{@docRoot}training/material/compatibility.html">Mempertahankan Kompatibilitas</a>.</p> 46 47 <h3>Memperbarui aplikasi dengan desain bahan</h3> 48 49 <p>Untuk memperbarui aplikasi yang ada guna memasukkan desain bahan, perbarui layout Anda dengan mengikuti 50 panduan desain bahan. Juga pastikan memasukkan kedalaman, umpan balik sentuh, dan 51 animasi.</p> 52 53 <h3>Membuat aplikasi baru dengan desain bahan</h3> 54 55 <p>Jika Anda sedang membuat aplikasi baru dengan fitur desain bahan, <a href="http://www.google.com/design/spec">panduan desain bahan</a> akan memberi Anda 56 kerangka kerja desain yang kohesif. Ikuti panduan itu dan gunakan fungsionalitas baru di 57 kerangka kerja Android untuk mendesain dan mengembangkan aplikasi Anda.</p> 58 59 60 <h2 id="ApplyTheme">Menerapkan Tema Bahan</h2> 61 62 <p>Untuk menerapkan tema bahan dalam aplikasi Anda, tetapkan gaya yang mewarisi 63 <code>android:Theme.Material</code>:</p> 64 65 <pre> 66 <!-- res/values/styles.xml --> 67 <resources> 68 <!-- your theme inherits from the material theme --> 69 <style name="AppTheme" parent="android:Theme.Material"> 70 <!-- theme customizations --> 71 </style> 72 </resources> 73 </pre> 74 75 <p>Tema bahan menyediakan widget sistem terbaru yang memungkinkan Anda mengatur palet warnanya dan 76 animasi default untuk umpan balik sentuh dan transisi aktivitas. Untuk detail selengkapnya, lihat 77 <a href="{@docRoot}training/material/theme.html">Menggunakan Tema Bahan</a>.</p> 78 79 80 <h2 id="Layouts">Mendesain Layout Anda</h2> 81 82 <p>Selain menerapkan dan menyesuaikan tema bahan, layout Anda harus mematuhi 83 <a href="http://www.google.com/design/spec">panduan desain bahan</a>. Bila Anda mendesain 84 layout, berikan perhatian khusus pada hal-hal berikut:</p> 85 86 <ul> 87 <li>Petak patokan</li> 88 <li>Garis utama</li> 89 <li>Pengaturan Jarak</li> 90 <li>Ukuran target sentuh</li> 91 <li>Struktur layout</li> 92 </ul> 93 94 95 <h2 id="Depth">Menetapkan Ketinggian di Tampilan Anda</h2> 96 97 <p>Tampilan bisa menghasilkan bayangan, dan nilai ketinggian tampilan 98 menentukan ukuran bayangan dan urutan penggambarannya. Untuk mengatur ketinggian tampilan, gunakan 99 atribut <code>android:elevation</code> dalam layout:</p> 100 101 <pre> 102 <TextView 103 android:id="@+id/my_textview" 104 android:layout_width="wrap_content" 105 android:layout_height="wrap_content" 106 android:text="@string/next" 107 android:background="@color/white" 108 android:elevation="5dp" /> 109 </pre> 110 111 <p>Properti <code>translationZ</code> baru memungkinkan Anda membuat animasi yang mencerminkan 112 perubahan sementara pada ketinggian tampilan. Perubahan ketinggian bisa berguna saat 113 <a href="{@docRoot}training/material/animations.html#ViewState">merespons 114 gerakan sentuh</a>.</p> 115 116 <p>Untuk detail selengkapnya, lihat <a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan 117 Bayangan dan Memangkas Tampilan</a>.</p> 118 119 120 <h2 id="ListsCards">Membuat Daftar dan Kartu</h2> 121 122 <p>{@link android.support.v7.widget.RecyclerView} adalah versi {@link 123 android.widget.ListView} yang lebih mudah dimasukkan dan mendukung beragam tipe layout serta memberikan peningkatan kinerja. 124 {@link android.support.v7.widget.CardView} memungkinkan Anda menampilkan potongan informasi dalam kartu dengan 125 tampilan konsisten di seluruh aplikasi. Contoh kode berikut memperagakan cara menyertakan 126 {@link android.support.v7.widget.CardView} dalam layout Anda:</p> 127 128 <pre> 129 <android.support.v7.widget.CardView 130 android:id="@+id/card_view" 131 android:layout_width="200dp" 132 android:layout_height="200dp" 133 card_view:cardCornerRadius="3dp"> 134 ... 135 </android.support.v7.widget.CardView> 136 </pre> 137 138 <p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/lists-cards.html">Membuat Daftar 139 dan Kartu</a>.</p> 140 141 142 <h2 id="Animations">Menyesuaikan Animasi Anda</h2> 143 144 <p>Android 5.0 (API level 21) menyertakan API baru untuk membuat animasi custom di aplikasi Anda. 145 Misalnya, Anda bisa mengaktifkan transisi aktivitas dan mendefinisikan transisi keluar di 146 aktivitas:</p> 147 148 <pre> 149 public class MyActivity extends Activity { 150 151 @Override 152 protected void onCreate(Bundle savedInstanceState) { 153 super.onCreate(savedInstanceState); 154 // enable transitions 155 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); 156 setContentView(R.layout.activity_my); 157 } 158 159 public void onSomeButtonClicked(View view) { 160 getWindow().setExitTransition(new Explode()); 161 Intent intent = new Intent(this, MyOtherActivity.class); 162 startActivity(intent, 163 ActivityOptions 164 .makeSceneTransitionAnimation(this).toBundle()); 165 } 166 } 167 </pre> 168 169 <p>Bila Anda memulai aktivitas lain dari aktivitas ini, transisi keluar akan diaktifkan.</p> 170 171 <p>Untuk mengetahui selengkapnya tentang API animasi yang baru, lihat <a href="{@docRoot}training/material/animations.html">Mendefinisikan Animasi Custom</a>.</p> 172
