Panel kontrol

Panel kontrol menyediakan kontrol yang terkait dengan tampilan tertentu. Panel ini menampilkan hingga 5 kontrol dalam versi yang belum diperluas, dan hingga 5 kontrol tambahan saat diperluas.

Di aplikasi media, panel kontrol digunakan di tampilan pemutaran untuk kontrol Putar/Jeda, Sebelumnya, Berikutnya, dan lainnya, termasuk kontrol untuk tindakan pihak ketiga khusus.


Anatomi

Panel kontrol memiliki dua format: tidak diluaskan dan diluaskan. Versi yang tidak diperluas dapat menyertakan maksimal 5 kontrol. Di aplikasi media, salah satunya adalah Putar/Jeda.

Jika diluaskan, panel kontrol dapat menyertakan hingga 5 kontrol tambahan di baris kedua. Pengguna bisa memilih tombol tambahan untuk meluaskan atau menciutkan panel kontrol.

1. Bagian batang kontrol terlihat sebelum perluasan
2. Bagian yang diluaskan pada panel tindakan
3. Salah satu kontrol
4. Tombol luapan (meluaskan dan menciutkan panel kontrol)

Spesifikasi

Panel kontrol

Panel kontrol diluaskan

Penempatan 1–4 kontrol pada panel kontrol dengan kontrol tengah yang ditambatkan

Kontrol tengah dengan anchor adalah kontrol dengan penempatan yang diinginkan di tengah panel kontrol, seperti tombol putar/jeda musik.

Penempatan 1–4 kontrol pada panel kontrol tanpa kontrol anchor

Penempatan 6–9 kontrol pada panel kontrol


Menskalakan tata letak

Tata letak referensi ini menunjukkan cara menyesuaikan panel kontrol untuk mengakomodasi layar dengan berbagai lebar dan tinggi. (Kategori lebar dan tinggi ditentukan di bagian Tata Letak.) Perlu diketahui bahwa semua nilai piksel dalam piksel yang dirender, sebelum pengambilan sampel menurun atau pengambilan sampel naik terjadi.

Layar ekstra lebar dengan batas antar-margin lebih dari 1028 dp

Jika lebar di antara margin lebih besar dari lebar maksimum panel kontrol (1028 dp), posisikan panel kontrol secara horizontal. Panel kontrol tidak akan membentang hingga ke margin.

Layar ekstra lebar dengan margin kurang dari 1028 dp

Layar lebar

Layar lebar standar

Pada layar dengan lebar standar, posisikan panel kontrol secara horizontal. Panel kontrol akan meluas ke margin. Pada layar dengan lebar standar tepat 690 dp, seperti dalam contoh ini, gunakan padding samping P5 di antara tepi panel kontrol dan tepi layar.

Layar pendek

Panel kontrol diperluas di layar yang lebih pendek dari 1.000 dp

Panel kontrol diperluas di layar pendek

Panel kontrol diperluas di layar yang lebih tinggi dari 1.000 dp


Gaya

Warna

Elemen Warna(mode hari) Warna (mode malam)
Ikon utama Putih Putih @ 88%
Scrim layar penuh Hitam @ 78% Hitam @ 84%
Scrim gradien TBD TBD

Ukuran

Elemen Ukuran (dp)
Panel kontrol 96 (layar pendek) / 128 (tinggi standar ke atas)
Ikon utama 44

Contoh

Panel kontrol dalam tampilan pemutaran
Panel kontrol yang diperluas dalam tampilan pemutaran
Kolom kontrol di antrean media
Panel kontrol yang diperluas di antrean media
Kolom kontrol di antrean media
Panel kontrol yang diperluas di antrean media
Panel kontrol diperluas dan diperkecil saat pengguna mengetuk tombol tambahan