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.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=0&hl=id)
2. Bagian yang diluaskan pada panel tindakan
3. Salah satu kontrol
4. Tombol luapan (meluaskan dan menciutkan panel kontrol)
Spesifikasi
Panel kontrol
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=0&hl=id)
Panel kontrol diluaskan
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=0&hl=id)
Penempatan 1–4 kontrol pada panel kontrol dengan kontrol tengah yang ditambatkan
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=0&hl=id)
Penempatan 1–4 kontrol pada panel kontrol tanpa kontrol anchor
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=0&hl=id)
Penempatan 6–9 kontrol pada panel kontrol
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=0&hl=id)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=0&hl=id)
Layar ekstra lebar dengan margin kurang dari 1028 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=0&hl=id)
Layar lebar
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=0&hl=id)
Layar lebar standar
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=0&hl=id)
Layar pendek
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=0&hl=id)
Panel kontrol diperluas di layar yang lebih pendek dari 1.000 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=0&hl=id)
Panel kontrol diperluas di layar pendek
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=0&hl=id)
Panel kontrol diperluas di layar yang lebih tinggi dari 1.000 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=0&hl=id)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=0&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=0&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=0&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=0&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=0&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=0&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=0&hl=id)