• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.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
44versi 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
50panduan desain bahan. Juga pastikan memasukkan kedalaman, umpan balik sentuh, dan
51animasi.</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
56kerangka kerja desain yang kohesif. Ikuti panduan itu dan gunakan fungsionalitas baru di
57kerangka 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&lt;!-- res/values/styles.xml -->
67&lt;resources>
68  &lt;!-- your theme inherits from the material theme -->
69  &lt;style name="AppTheme" parent="android:Theme.Material">
70    &lt;!-- theme customizations -->
71  &lt;/style>
72&lt;/resources>
73</pre>
74
75<p>Tema bahan menyediakan widget sistem terbaru yang memungkinkan Anda mengatur palet warnanya dan
76animasi 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
84layout, 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
98menentukan ukuran bayangan dan urutan penggambarannya. Untuk mengatur ketinggian tampilan, gunakan
99atribut <code>android:elevation</code> dalam layout:</p>
100
101<pre>
102&lt;TextView
103    android:id="&#64;+id/my_textview"
104    android:layout_width="wrap_content"
105    android:layout_height="wrap_content"
106    android:text="&#64;string/next"
107    android:background="&#64;color/white"
108    android:elevation="5dp" />
109</pre>
110
111<p>Properti <code>translationZ</code> baru memungkinkan Anda membuat animasi yang mencerminkan
112perubahan sementara pada ketinggian tampilan. Perubahan ketinggian bisa berguna saat
113<a href="{@docRoot}training/material/animations.html#ViewState">merespons
114gerakan sentuh</a>.</p>
115
116<p>Untuk detail selengkapnya, lihat <a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan
117Bayangan 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
123android.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
125tampilan 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&lt;android.support.v7.widget.CardView
130    android:id="&#64;+id/card_view"
131    android:layout_width="200dp"
132    android:layout_height="200dp"
133    card_view:cardCornerRadius="3dp">
134    ...
135&lt;/android.support.v7.widget.CardView>
136</pre>
137
138<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/lists-cards.html">Membuat Daftar
139dan 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.
145Misalnya, Anda bisa mengaktifkan transisi aktivitas dan mendefinisikan transisi keluar di
146aktivitas:</p>
147
148<pre>
149public class MyActivity extends Activity {
150
151    &#64;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