Komponen indikator progres media bersifat unik untuk aplikasi media.
Indikator progres adalah representasi visual dari durasi dan waktu pemutaran yang telah berlalu untuk sumber media. Muncul di aplikasi media selama pemutaran.
Anatomi
Indikator kemajuan media terdiri dari trek tidak aktif (ditampilkan dalam warna abu-abu) yang mewakili durasi sumber media, dan trek aktif (ditampilkan dengan warna aksen) yang menempatkan trek nonaktif untuk menunjukkan waktu pemutaran yang telah berlalu.
![Anatomi indikator progres media](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Anatomy.png?authuser=6&hl=id)
2. Trek tidak aktif
Indikator progres media dapat berupa linear atau melingkar.
![Indikator progres media linear](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Linearbar.png?authuser=6&hl=id)
Indikator kemajuan linear menampilkan durasi dan waktu yang telah berlalu pada sumbu horizontal. Bagian trek yang terlihat di tengah area target sentuh 76 dp. Dengan mengetuk atau menarik waktu yang berlalu, pengguna dapat berpindah ke lokasi lain di sumber media. Indikator progres media linear ditujukan untuk layar yang berukuran 800 dp atau lebih tinggi.
![Anatomi indikator progres melingkar](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Circularbar.png?authuser=6&hl=id)
Indikator progres melingkar menampilkan durasi dan waktu yang berlalu sebagai lingkaran. Mengetuk atau menarik waktu yang berlalu tidak didukung untuk berpindah ke lokasi lain. Indikator progres media sirkular ditujukan untuk layar dengan tinggi kurang dari 800 dp dan untuk digunakan saat kontrol pemutaran media diperkecil.
Status indikator progres media
Selama pemutaran, indikator progres berada dalam salah satu dari empat status:
- Diputar: Media sedang diputar dan trek aktif dilanjutkan pada trek yang tidak aktif untuk menunjukkan waktu yang sudah lewat.
- Dijeda: Pengguna menjeda pemutaran. Trek yang aktif akan tidak bergerak pada titik pemutaran dijeda.
- Buffering: Aplikasi media memuat konten untuk diputar. Indikator menampilkan garis putih yang berulang kali maju di jalur yang tidak aktif saat konten dimuat.
- Error: Media tidak dapat diputar. Tidak ada jalur yang aktif dan jalur yang tidak aktif dinonaktifkan.
![Trek aktif maju ke trek tidak aktif saat media diputar](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-active.gif?authuser=6&hl=id)
![Trek aktif tidak bergerak saat pemutaran media dijeda](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-restingState.png?authuser=6&hl=id)
![Garis putih berulang kali maju di jalur yang tidak aktif saat konten dimuat](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-buffering.gif?authuser=6&hl=id)
![Trek tidak aktif dinonaktifkan saat terjadi error pemutaran medai](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-error.png?authuser=6&hl=id)
Spesifikasi
Indikator progres media linear
![Garis merah indikator progres media linear](https://developers.google.cn/cars/design/automotive-os/components/images/ProgressBarLinearRedline.png?authuser=6&hl=id)
Indikator progres media melingkar
![Garis merah indikator progres media melingkar](https://developers.google.cn/cars/design/automotive-os/components/images/Redline_circular.jpg?authuser=6&hl=id)
Penyesuaian
Selama pemutaran media, jalur aktif indikator progres media ditampilkan menggunakan warna aksen. Warna aksen default adalah bayangan biru. Developer aplikasi dapat memilih untuk memberikan warna aksen aplikasi yang mencerminkan brand media mereka. Demikian pula, OEM dapat memberikan warna aksen yang mencerminkan merek mobil mereka. Jika disediakan, warna aksen OEM lebih diutamakan daripada warna aksen aplikasi.
![Status progres media linear yang menampilkan jalur aktif menggunakan warna aksen default, pihak ketiga, dan OEM](https://developers.google.cn/cars/design/automotive-os/components/images/default_linear.jpg?authuser=6&hl=id)
![Status progres media melingkar yang menampilkan jalur aktif menggunakan warna aksen default, pihak ketiga, dan OEM](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-theme-styling.png?authuser=6&hl=id)
Panduan Integrasi Library UI Mobil menyediakan panduan OEM untuk menyesuaikan komponen.
Untuk mengetahui panduan khusus tentang penggunaan warna guna menyesuaikan komponen, buka Warna.
Contoh
![Cara kerja indikator progres media linear](https://developers.google.cn/cars/design/automotive-os/components/images/02DMediaPlaybackView.png?authuser=6&hl=id)
![Cara kerja indikator progres media melingkar](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-circular-indicator-example.png?authuser=6&hl=id)