Docs: Material Design L10N update. All languages except es, ja.

page.title=Desain Bahan untuk Android

page.tags=Material,design

page.image=images/cards/design-material-for-android_2x.jpg

@jd:body

<!-- developer docs box -->

<a class="notice-developers right" href="{@docRoot}training/material/index.html">

  <div>

    <h3>Dokumen Pengembang</h3>

    <p>Membuat Aplikasi dengan Desain Bahan</p>

  </div>

</a>

<!-- video box -->

<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">

<div>

    <h3>Video</h3>

    <p>Pengantar Desain Bahan</p>

</div>

</a>

<!-- video box -->

<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">

<div>

    <h3>Video</h3>

    <p>Kertas dan Tinta: Bahan Penting</p>

</div>

</a>

<!-- video box -->

<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">

<div>

    <h3>Video</h3>

    <p>Desain Bahan di Aplikasi Google I/O</p>

</div>

</a>

<p itemprop="description">Desain bahan adalah panduan komprehensif untuk desain visual, gerak, dan

interaksi lintas platform dan perangkat. Android kini menyertakan dukungan untuk

aplikasi desain bahan. Untuk menggunakan desain bahan di aplikasi Android, ikuti panduan yang didefinisikan

dalam <a href="http://www.google.com/design/spec">spesifikasi desain bahan</a> dan gunakan

komponen dan fungsionalitas baru yang tersedia di Android 5.0 (API level 21) ke atas.</p>

<p>Android menyediakan elemen berikut untuk membangun aplikasi desain bahan:</p>

<ul>

  <li>Tema baru</li>

  <li>Widget baru untuk tampilan yang kompleks</li>

  <li>API baru untuk animasi dan bayangan custom</li>

</ul>

<p>Untuk informasi selengkapnya tentang mengimplementasikan desain bahan pada Android, lihat

<a href="{@docRoot}training/material/index.html">Membuat Aplikasi dengan Desain Bahan</a>.</p>

<h3>Tema Bahan</h3>

<p>Tema bahan menyediakan gaya baru untuk aplikasi Anda, widget sistem yang memungkinkan Anda mengatur

palet warnanya, dan animasi default untuk umpan balik sentuh dan transisi aktivitas.</p>

<!-- two columns -->

<div style="width:700px;margin-top:25px;margin-bottom:20px">

<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:140px;margin:0 auto">

  <p style="margin-top:8px">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:140px;margin:0 auto">

  <p style="margin-top:8px">Tema bahan terang</p>

  </div>

</div>

<br style="clear:left"/>

</div>

<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/theme.html">Menggunakan Tema

Bahan</a>.</p>

<h3>Daftar dan Kartu</h3>

<p>Android menyediakan dua widget baru untuk menampilkan kartu dan daftar dengan gaya desain bahan

dan animasi:</p>

<!-- two columns -->

<div style="width:700px;margin-top:25px;margin-bottom:20px">

<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">

  <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />

  <p>Widget <code>RecyclerView</code> baru adalah versi <code>ListView</code>

 yang lebih mudah dimasukkan dan mendukung beragam tipe layout serta memberikan peningkatan kinerja.</p>

</div>

<div style="float:left;width:250px;margin-right:0px;">

  <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />

  <p>Widget <code>CardView</code> baru memungkinkan Anda menampilkan potongan informasi penting dalam

  kartu yang memiliki tampilan dan cara kerja yang konsisten.</p>

</div>

<br style="clear:left"/>

</div>

<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/lists-cards.html">Membuat Daftar

dan Kartu</a>.</p>

<h3>Bayangan Tampilan</h3>

<p>Selain properti X dan Y, tampilan di Android kini memiliki

properti Z. Properti baru ini mewakili ketinggian tampilan, yang menentukan:</p>

<ul>

<li>Ukuran bayangan: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan lebih besar.</li>

<li>Urutan penggambaran: tampilan dengan nilai Z lebih tinggi muncul di atas tampilan lainnya.</li>

</ul>

<div style="width:290px;margin-left:35px;float:right">

  <div class="framed-nexus5-port-span-5">

  <video class="play-on-hover" autoplay>

    <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>

    <source src="{@docRoot}design/videos/ContactsAnim.webm"/>

    <source src="{@docRoot}design/videos/ContactsAnim.ogv"/>

  </video>

  </div>

  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">

    <em>Untuk memutar ulang film, klik layar perangkat</em>

  </div>

</div>

<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan

Bayangan dan Memangkas Tampilan</a>.</p>

<h3>Animasi</h3>

<p>API animasi baru memungkinkan Anda membuat animasi custom untuk umpan balik sentuh dalam kontrol UI,

perubahan status tampilan, dan transisi aktivitas.</p>

<p>API ini memungkinkan Anda:</p>

<ul>

<li style="margin-bottom:15px">

Merespons kejadian sentuh dalam tampilan Anda dengan animasi <strong>umpan balik sentuh</strong>.

</li>

<li style="margin-bottom:15px">

Menyembunyikan dan memperlihatkan tampilan dengan animasi <strong>membuka melingkar</strong>.

</li>

<li style="margin-bottom:15px">

Peralihan antar aktivitas dengan animasi <strong>transisi aktivitas</strong> custom.

</li>

<li style="margin-bottom:15px">

Membuat animasi yang lebih alami dengan <strong>gerak melengkung</strong>.

</li>

<li style="margin-bottom:15px">

Menganimasikan perubahan dalam satu atau beberapa properti tampilan dengan animasi <strong>perubahan status tampilan</strong>.

</li>

<li style="margin-bottom:15px">

Menampilkan animasi di <strong>drawable daftar status</strong> di antara perubahan status tampilan.

</li>

</ul>

<p>Animasi umpan balik sentuh dimasukkan ke dalam beberapa tampilan standar, misalnya tombol. API baru

ini memungkinkan Anda menyesuaikan animasi ini dan menambahkannya ke tampilan custom Anda.</p>

<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/animations.html">Mendefinisikan Animasi

Custom</a>.</p>

<h3>Drawable</h3>

<p>Kemampuan baru untuk drawable ini membantu Anda mengimplementasikan aplikasi desain bahan:</p>

<ul>

<li><strong>Drawable vektor</strong> bisa diubah skalanya tanpa kehilangan definisi dan cocok

untuk ikon satu-warna dalam-aplikasi.</li>

<li><strong>Pewarnaan drawable</strong> memungkinkan Anda mendefinisikan bitmap sebagai alpha-mask dan mewarnainya

saat runtime.</li>

<li><strong>Ekstraksi warna</strong> memungkinkan Anda mengekstrak warna mencolok secara otomatis dari

gambar bitmap.</li>

</ul>

<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/drawables.html">Bekerja dengan

Drawable</a>.</p>

page.title=Mempertahankan Kompatibilitas

@jd:body

<div id="tb-wrapper">

<div id="tb">

<h2>Pelajaran ini mengajarkan Anda cara</h2>

<ol>

  <li><a href="#Theme">Mendefinisikan Gaya Alternatif</a></li>

  <li><a href="#Layouts">Menyediakan Layout Alternatif</a></li>

  <li><a href="#SupportLib">Menggunakan Support Library</a></li>

  <li><a href="#CheckVersion">Memeriksa Versi Sistem</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>Sebagian fitur desain bahan seperti tema bahan dan transisi aktivitas custom

hanya tersedia pada Android 5.0 (API level 21) ke atas. Akan tetapi, Anda bisa mendesain aplikasi untuk menggunakan

fitur-fitur ini saat dijalankan pada perangkat yang mendukung desain bahan dan tetap kompatibel

dengan perangkat yang menjalankan rilis Android sebelumnya.</p>

<h2 id="Theme">Mendefinisikan Gaya Alternatif</h2>

<p>Anda bisa mengonfigurasi aplikasi untuk menggunakan tema bahan pada perangkat yang mendukungnya dan mengembalikan

ke tema lama pada perangkat yang menjalankan versi Android terdahulu:</p>

<ol>

<li>Definisikan tema yang mewarisi tema lama (seperti Holo) di

    <code>res/values/styles.xml</code>.</li>

<li>Definisikan tema bernama sama yang mewarisi tema bahan di

    <code>res/values-v21/styles.xml</code>.</li>

<li>Atur tema ini sebagai tema aplikasi Anda dalam file manifes.</li>

</ol>

<p class="note"><strong>Catatan:</strong>

Jika aplikasi Anda menggunakan tema bahan namun tidak menyediakan tema alternatif dengan cara ini,

aplikasi itu tidak akan berjalan pada versi Android sebelum 5.0.

</p>

<h2 id="Layouts">Menyediakan Layout Alternatif</h2>

<p>Jika layout yang Anda desain sesuai dengan panduan desain bahan tidak menggunakan salah satu

atribut XML baru yang diperkenalkan di Android 5.0 (API level 21), layout itu akan berfungsi pada

versi Android sebelumnya. Jika tidak, Anda bisa menyediakan layout alternatif. Anda juga bisa menyediakan

layout alternatif untuk menyesuaikan cara aplikasi ditampilkan pada versi Android terdahulu.</p>

<p>Buatlah file layout untuk Android 5.0 (API level 21) dalam <code>res/layout-v21/</code> dan

file layout alternatif untuk versi Android terdahulu dalam <code>res/layout/</code>.

Misalnya, <code>res/layout/my_activity.xml</code> adalah layout alternatif untuk

<code>res/layout-v21/my_activity.xml</code>.</p>

<p>Untuk menghindari duplikasi kode, definisikan gaya dalam <code>res/values/</code>, modifikasi

gaya di <code>res/values-v21/</code> untuk API baru, dan gunakan pewarisan gaya, dengan mendefinisikan

gaya dasar di <code>res/values/</code> dan mewarisi gaya di <code>res/values-v21/</code>.</p>

<h2 id="SupportLib">Menggunakan Support Library</h2>

<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Library</a>

r21 ke atas menyertakan fitur desain bahan berikut:</p>

<ul>

<li><a href="{@docRoot}training/material/theme.html">Gaya desain bahan</a> untuk beberapa widget sistem

    bila Anda menerapkan salah satu tema <code>Theme.AppCompat</code>.</li>

<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Atribut tema palet warna</a>

    dalam tema <code>Theme.AppCompat</code>.</li>

<li>Widget {@link android.support.v7.widget.RecyclerView} untuk <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">

menampilkan kumpulan data.</a></li>

<li>Widget {@link android.support.v7.widget.CardView} untuk <a href="{@docRoot}training/material/lists-cards.html#CardView">membuat kartu</a>.</li>

<li>Kelas {@link android.support.v7.graphics.Palette} untuk <a href="{@docRoot}training/material/drawables.html#ColorExtract">mengekstrak warna mencolok dari

    gambar</a>.</li>

</ul>

<h3>Widget sistem</h3>

<p>Tema-tema <code>Theme.AppCompat</code> menyediakan gaya desain bahan untuk widget ini:</p>

<ul>

  <li>{@link android.widget.EditText}</li>

  <li>{@link android.widget.Spinner}</li>

  <li>{@link android.widget.CheckBox}</li>

  <li>{@link android.widget.RadioButton}</li>

  <li>{@link android.support.v7.widget.SwitchCompat}</li>

  <li>{@link android.widget.CheckedTextView}</li>

</ul>

<h3>Palet Warna</h3>

<p>Untuk memperoleh gaya desain bahan dan menyesuaikan palet warna dengan Android v7 Support

Library, terapkan salah satu tema <code>Theme.AppCompat</code>:</p>

<pre>

<!-- extend one of the Theme.AppCompat themes -->

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">

    <!-- customize the color palette -->

    <item name="colorPrimary">@color/material_blue_500</item>

    <item name="colorPrimaryDark">@color/material_blue_700</item>

    <item name="colorAccent">@color/material_green_A200</item>

</style>

</pre>

<h3>Daftar dan Kartu</h3>

<p>Widget {@link android.support.v7.widget.RecyclerView} dan {@link

android.support.v7.widget.CardView} tersedia di versi Android terdahulu melalui

Android v7 Support Library dengan pembatasan ini:</p>

<ul>

<li>{@link android.support.v7.widget.CardView} memundurkan ke implementasi bayangan terprogram

    dengan menggunakan pengisi tambahan.</li>

<li>{@link android.support.v7.widget.CardView} tidak memangkas tampilan anaknya yang berpotongan

    dengan sudut melengkung.</li>

</ul>

<h3>Dependensi</h3>

<p>Untuk menggunakan fitur-fitur ini di versi Android sebelum 5.0 (API level 21), sertakan

Android v7 Support Library dalam proyek Anda sebagai <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">dependensi Gradle</a>:</p>

<pre>

dependencies {

    compile 'com.android.support:appcompat-v7:21.0.+'

    compile 'com.android.support:cardview-v7:21.0.+'

    compile 'com.android.support:recyclerview-v7:21.0.+'

}

</pre>

<h2 id="CheckVersion">Memeriksa Versi Sistem</h2>

<p>Fitur berikut hanya tersedia di Android 5.0 (API level 21) ke atas:</p>

<ul>

<li>Transisi aktivitas</li>

<li>Umpan balik sentuh</li>

<li>Animasi membuka</li>

<li>Animasi berbasis path</li>

<li>Drawable vektor</li>

<li>Pewarnaan drawable</li>

</ul>

<p>Untuk menjaga kompatibilitas dengan versi Android terdahulu, periksa {@link

android.os.Build.VERSION#SDK_INT version} sistem saat runtime sebelum Anda memanggil API untuk salah satu

fitur ini:</p>

<pre>

// Check if we're running on Android 5.0 or higher

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

    // Call some material design APIs here

} else {

    // Implement this feature without material design

}

</pre>

<p class="note"><strong>Catatan:</strong> Untuk menetapkan versi Android yang didukung aplikasi Anda,

gunakan atribut <code>android:minSdkVersion</code> dan <code>android:targetSdkVersion</code>

dalam file manifes. Untuk menggunakan fitur desain bahan di Android 5.0, atur

atribut <code>android:targetSdkVersion</code> ke <code>21</code>. Untuk informasi selengkapnya, lihat

panduan <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">API

&lt;uses-sdk&gt;</a>.</p>

page.title=Bekerja dengan Drawable

@jd:body

<div id="tb-wrapper">

<div id="tb">

<h2>Pelajaran ini mengajarkan Anda cara</h2>

<ol>

  <li><a href="#DrawableTint">Mewarnai Sumber Daya Drawable</a></li>

  <li><a href="#ColorExtract">Mengekstrak Warna Mencolok dari Gambar</a></li>

  <li><a href="#VectorDrawables">Membuat Drawable Vektor</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>Kemampuan berikut untuk drawable membantu Anda mengimplementasikan desain bahan dalam aplikasi Anda:</p>

<ul>

<li>Pewarnaan drawable</li>

<li>Ekstraksi warna mencolok</li>

<li>Drawable vektor</li>

</ul>

<p>Pelajaran ini menampilkan cara menggunakan fitur-fitur ini dalam aplikasi Anda.</p>

<h2 id="DrawableTint">Mewarnai Sumber Daya Drawable</h2>

<p>Dengan Android 5.0 (API level 21) ke atas, Anda bisa mewarnai bitmap dan sembilan-tambalan yang didefinisikan sebagai

alpha-mask. Anda bisa mewarnainya dengan sumber daya warna atau atribut tema yang mencocokkan ke

sumber daya warna (misalnya, <code>?android:attr/colorPrimary</code>). Biasanya, Anda membuat aset ini

hanya sekali dan mewarnainya secara otomatis agar cocok dengan tema Anda.</p>

<p>Anda bisa menerapkan warna ke objek {@link android.graphics.drawable.BitmapDrawable} atau {@link

android.graphics.drawable.NinePatchDrawable} dengan metode {@code setTint()}. Anda juga bisa

mengatur warna dan mode dalam layout dengan atribut <code>android:tint</code> dan

<code>android:tintMode</code>.</p>

<h2 id="ColorExtract">Mengekstrak Warna Mencolok dari Gambar</h2>

<p>Android Support Library r21 ke atas menyertakan kelas {@link

android.support.v7.graphics.Palette}, yang memungkinkan Anda mengekstrak warna mencolok dari gambar.

Kelas ini mengekstrak warna mencolok berikut:</p>

<ul>

<li>Menyala</li>

<li>Menyala pekat</li>

<li>Menyala pucat</li>

<li>Pudar</li>

<li>Pudar pekat</li>

<li>Pudar pucat</li>

</ul>

<p>Untuk mengekstrak warna-warna ini, teruskan objek {@link android.graphics.Bitmap} ke

metode statis {@link android.support.v7.graphics.Palette#generate Palette.generate()} dalam

thread latar belakang tempat Anda memuat gambar. Jika Anda tidak bisa menggunakan thread itu, panggil metode

{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} dan

sediakan listener sebagai gantinya.</p>

<p>Anda bisa mengambil warna mencolok dari gambar dengan metode getter di kelas

<code>Palette</code>, misalnya <code>Palette.getVibrantColor</code>.</p>

<p>Untuk menggunakan kelas {@link android.support.v7.graphics.Palette} dalam proyek Anda, tambahkan 

<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependensi Gradle</a> berikut ke

modul aplikasi Anda:</p>

<pre>

dependencies {

    ...

    compile 'com.android.support:palette-v7:21.0.0'

}

</pre>

<p>Untuk informasi selengkapnya, lihat referensi API untuk kelas {@link android.support.v7.graphics.Palette}.

</p>

<h2 id="VectorDrawables">Membuat Drawable Vektor</h2>

<!-- video box -->

<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">

<div>

    <h3>Video</h3>

    <p>Grafis Vektor Android</p>

</div>

</a>

<p>Di Android 5.0 (API Level 21) ke atas, Anda bisa mendefinisikan drawable vektor, yang berubah skala tanpa

kehilangan definisi. Anda hanya memerlukan satu file aset per gambar vektor, bukan file aset untuk

setiap densitas layar seperti pada gambar bitmap. Untuk membuat gambar vektor, Anda mendefinisikan detail

bentuknya dalam sebuah elemen XML <code>&lt;vector&gt;</code>.</p>

<p>Contoh berikut mendefinisikan gambar vektor berbentuk hati:</p>

<pre>

<!-- res/drawable/heart.xml -->

<vector xmlns:android="http://schemas.android.com/apk/res/android"

    <!-- intrinsic size of the drawable -->

    android:height="256dp"

    android:width="256dp"

    <!-- size of the virtual canvas -->

    android:viewportWidth="32"

    android:viewportHeight="32">

  <!-- draw a path -->

  <path android:fillColor="#8fff"

      android:pathData="M20.5,9.5

                        c-1.955,0,-3.83,1.268,-4.5,3

                        c-0.67,-1.732,-2.547,-3,-4.5,-3

                        C8.957,9.5,7,11.432,7,14

                        c0,3.53,3.793,6.257,9,11.5

                        c5.207,-5.242,9,-7.97,9,-11.5

                        C25,11.432,23.043,9.5,20.5,9.5z" />

</vector>

</pre>

<p>Gambar vektor direpresentasikan di Android sebagai objek {@link android.graphics.drawable.VectorDrawable}.

 Untuk informasi selengkapnya tentang sintaks <code>pathData</code>, lihat <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Referensi Path SVG</a>. Untuk informasi selengkapnya

tentang menganimasikan properti drawable vektor, lihat

<a href="{@docRoot}training/material/animations.html#AnimVector">Menganimasikan Drawable Vektor</a>.</p>