Indikator progres media

Komponen indikator kemajuan media merupakan fitur unik pada aplikasi media .

Indikator kemajuan adalah representasi visual dari durasi dan waktu pemutaran yang telah berlalu untuk sumber media. Indikator kemajuan 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 melapisi trek tidak aktif untuk menunjukkan waktu pemutaran yang telah berlalu.

Anatomi indikator kemajuan media
1. Jalur aktif
2. Jalur tidak aktif

Indikator kemajuan media dapat berupa linear atau melingkar .

Indikator kemajuan media linier

Indikator kemajuan linier menampilkan durasi dan waktu yang telah berlalu pada sumbu horizontal. Bagian trek yang terlihat berada di tengah area target sentuh 76 dp. Mengetuk atau menyeret waktu yang telah berlalu memungkinkan pengguna untuk berpindah ke lokasi berbeda dalam sumber media. Indikator kemajuan media linier ini dirancang untuk layar dengan tinggi 800 dp atau lebih.
Anatomi indikator kemajuan melingkar

Indikator kemajuan berbentuk lingkaran menampilkan durasi dan waktu yang telah berlalu sebagai lingkaran. Mengetuk atau menyeret waktu yang telah berlalu tidak didukung untuk berpindah ke lokasi yang berbeda. Indikator kemajuan media berbentuk lingkaran ini ditujukan untuk layar dengan tinggi kurang dari 800 dp, dan untuk digunakan saat kontrol pemutaran media diminimalkan.

Indikator kemajuan media menyatakan

Selama pemutaran, indikator kemajuan berada dalam salah satu dari empat keadaan berikut:

  • Sedang diputar: Media sedang diputar dan trek aktif bergerak maju melintasi trek tidak aktif untuk menunjukkan waktu yang telah berlalu.
  • Dijeda: Pengguna menjeda pemutaran. Trek aktif tetap diam pada titik di mana pemutaran dijeda.
  • Buffering: Aplikasi media sedang memuat konten untuk diputar. Indikator menampilkan garis putih yang berulang kali bergerak maju melintasi trek yang tidak aktif saat konten sedang dimuat.
  • Kesalahan: Media tidak dapat diputar. Tidak ada trek aktif dan trek tidak aktif dinonaktifkan.

    Lagu yang aktif akan bergeser melintasi lagu yang tidak aktif saat media diputar.
    Status pemutaran: Trek aktif bergerak maju melewati trek tidak aktif saat media diputar.
    Trek aktif tetap diam saat pemutaran media dijeda.
    Status jeda: Trek aktif tetap diam saat pemutaran media dijeda.
    Garis putih berulang kali bergerak maju melintasi jalur yang tidak aktif sementara konten sedang dimuat.
    Status buffering: Garis putih berulang kali bergerak melintasi trek yang tidak aktif saat konten sedang dimuat.
    Trek yang tidak aktif dinonaktifkan ketika terjadi kesalahan pemutaran media.
    Status kesalahan: Saat terjadi kesalahan media, tidak ada trek aktif yang ditampilkan dan trek yang tidak aktif dinonaktifkan.

Spesifikasi

Indikator kemajuan media linier

Garis merah indikator kemajuan media linier

Indikator kemajuan media melingkar

Garis merah indikator kemajuan media melingkar

Kustomisasi

Selama pemutaran media, trek aktif indikator kemajuan media ditampilkan menggunakan warna aksen. Warna aksen default adalah warna biru. Pengembang aplikasi dapat memilih untuk menyediakan warna aksen aplikasi yang mencerminkan merek media mereka. Demikian pula, OEM dapat menyediakan warna aksen yang mencerminkan merek mobil mereka. Jika disediakan, warna aksen OEM akan diutamakan daripada warna aksen aplikasi.

Bilah kemajuan media linier yang menampilkan trek aktif menggunakan warna aksen default, pihak ketiga, dan OEM.
Tampilan default untuk indikator kemajuan adalah warna biru. Pengembang aplikasi dapat mengganti tampilan default aplikasi dengan warna aksen merek mereka sendiri (hijau dalam contoh ini). Produsen perangkat (OEM) juga dapat mengganti tampilan default dan tampilan aplikasi dengan warna aksen merek mereka sendiri (oranye dalam contoh ini).

Bilah kemajuan media melingkar yang menampilkan trek aktif menggunakan warna aksen default, pihak ketiga, dan OEM.
Contoh gaya warna aksen default, aplikasi, dan OEM yang diterapkan pada indikator kemajuan berbentuk lingkaran.

Panduan Integrasi Pustaka UI Mobil memberikan panduan kepada OEM untuk menyesuaikan komponen.

Contoh

Indikator kemajuan media linier beraksi
Indikator kemajuan media linear pada tampilan pemutaran aplikasi media.

Indikator kemajuan media sirkular dalam praktiknya
Di sini, indikator kemajuan media berbentuk lingkaran muncul pada kontrol pemutaran yang diminimalkan. Kontrol yang diminimalkan tersebut menutupi layar daftar putar.