Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit dee655c4 authored by David Friedman's avatar David Friedman
Browse files

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

Bug: 23090399
Change-Id: I0389fcff3b012a4ae4d92529574847e4a1685729
parent 066b4acf
Loading
Loading
Loading
Loading
+185 −0
Original line number Diff line number Diff line
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>
+550 −0

File added.

Preview size limit exceeded, changes collapsed.

+168 −0
Original line number Diff line number Diff line
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>
&lt;!-- extend one of the Theme.AppCompat themes -->
&lt;style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    &lt;!-- customize the color palette -->
    &lt;item name="colorPrimary">@color/material_blue_500&lt;/item>
    &lt;item name="colorPrimaryDark">@color/material_blue_700&lt;/item>
    &lt;item name="colorAccent">@color/material_green_A200&lt;/item>
&lt;/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>
+126 −0
Original line number Diff line number Diff line
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>
&lt;!-- res/drawable/heart.xml -->
&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
    &lt;!-- intrinsic size of the drawable -->
    android:height="256dp"
    android:width="256dp"
    &lt;!-- size of the virtual canvas -->
    android:viewportWidth="32"
    android:viewportHeight="32">

  &lt;!-- draw a path -->
  &lt;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" />
&lt;/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>
+171 −0

File added.

Preview size limit exceeded, changes collapsed.

Loading