Kontrol media
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Layar kontrol media sangat penting untuk membantu pengguna mengontrol media yang
sedang mereka dengarkan. Buat kontrol media menggunakan tata letak 5 tombol untuk memverifikasi
bahwa target ketuk minimum terpenuhi. Pada layar yang lebih besar dengan ukuran 225 dp atau lebih besar,
Anda dapat menambahkan nilai dengan menyertakan tombol pintasan untuk tindakan penting seperti
antrean pemutaran.
Bagian tata letak
Layar kontrol media adalah layar dengan tinggi tetap. Bagian ini terdiri dari tiga bagian vertikal yang memiliki tata letak dan perilaku responsif yang berbeda.
- Bagian atas: Berisi detail media
- Bagian tengah: Kontrol media
- Bagian bawah: Tombol sekunder yang dapat dikonfigurasi
Pertimbangan untuk layar yang lebih besar
Adaptasi layar besar untuk media hanya berfokus pada layar kontrol media. Semua elemen lainnya dicatat dalam item chip, tombol, dan dialog atau dalam
perincian daftar perilaku layar besar.
Anda dapat menambahkan nilai dengan menyertakan tombol pintasan untuk tindakan penting, seperti antrean pemutaran. Menggunakan menu tambahan memverifikasi bahwa fungsi tambahan tetap konsisten dan dapat diakses, apa pun ukuran layar. Bagian bawah mendapatkan slot tambahan untuk tombol setelah titik henti 225 dp
yang membuat jumlah maksimum tombol menjadi 2 di layar yang lebih kecil dan 3 di
layar yang lebih besar.
Kontrol utama
Kontrol utama biasanya berupa tombol putar dan jeda. Setelah titik henti sementara 225 dp, kontrol diskalakan dari 64 dp menjadi 80 dp, yang meningkatkan target ketuk untuk semua kontrol di dalamnya.
Layar yang lebih kecil (lebih kecil dari 225 dp)
- Diagram progres = 64 x 64 dp / goresan 3 dp
- Tombol = 54 x 54 dp / ukuran ikon 26
Layar yang lebih besar (225 dp dan lebih besar)
- Diagram progres = 80 x 80 dp / goresan 4 dp
- Tombol = 70 x 70 dp / ukuran ikon 32
Untuk mengikuti prinsip ukuran target sentuh, tampilkan hanya tata letak 2 tombol sebelum titik henti sementara 225 dp dan tata letak 3 tombol setelahnya.
Contoh berikut menunjukkan berbagai konfigurasi tombol:
<img 1.2%="" 14 dp="" 18 dp="" 24 dp="" 32 dp="" 44 dp="" 60 dp="" 6 dp="" aligned.""="" alt="" and="" area="" be="" beneath="" bottom="" button="" center="" dots="" entire="" equal="" have="" height.="" high="" icon="" icon,="" main="" margin="" of="" optional="" right="" screen's="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-small.png" the="" to="" top="" wide.="" with="" />
Tata Letak 1 Tombol dengan overflow, layar yang lebih kecil (192 dp)
<img 14 dp="" 18 dp="" 24 dp="" 44 dp="" 48 dp="" 72,5 dp="" aligned.""="" alt="" and="" area="" be="" bottom="" button="" center="" entire="" high="" icon="" icon,="" main="" of="" optional="" right="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-large.png" the="" to="" top="" wide.="" with="" />
1 Tata Letak Tombol dengan overflow, layar yang lebih besar (225 dp)
Tata Letak 2 Tombol dengan overflow, layar yang lebih kecil (192 dp)
Tata Letak 2 Tombol dengan overflow, layar yang lebih besar (225 dp)
Tata Letak 2 Tombol (maks.) dengan overflow, layar yang lebih kecil (192 dp)
Tata Letak 3 Tombol dengan overflow, layar yang lebih besar (225 dp)
Perilaku marquee
Header memiliki sejumlah pembaruan untuk meningkatkan keterbacaan dan pengalaman
umum:
- Margin atas sebesar 12% di layar yang lebih kecil dan 13,2% di layar yang lebih besar.
- Margin samping untuk judul lagu sebesar 17,6%
- Margin judul artis sebesar 12,5% di layar yang lebih kecil dan 14,5% di layar yang lebih besar.
- Judul artis dipangkas, sementara gradien 8 dp digunakan untuk men-scroll judul lagu. Jika ada ikon, jarak 8 dp tambahan akan memisahkan judul lagu
dari ikon. (Ikon tidak di-scroll bersama judul lagu.)
Dengan ikon
Judul lagu yang tidak dapat di-scroll (pendek) di layar yang lebih kecil (192 dp)
Judul lagu yang tidak dapat di-scroll (pendek) di layar yang lebih besar (225 dp)
Judul lagu yang di-scroll (panjang) (rata kiri) di layar yang lebih kecil (192 dp)
Judul lagu yang di-scroll (panjang) (rata kiri) di layar yang lebih besar (225 dp)
Judul lagu yang panjang (rata tengah) yang di-scroll pada layar yang lebih kecil (192 dp)
Judul lagu yang panjang dan dapat di-scroll (rata tengah) di layar yang lebih besar (225 dp)
Tanpa ikon
Judul lagu yang tidak dapat di-scroll (pendek) di layar yang lebih kecil (192 dp)
Judul lagu yang tidak dapat di-scroll (pendek) di layar yang lebih besar (225 dp)
Judul lagu yang rata kiri / tidak dapat di-scroll (panjang) di layar yang lebih kecil (192 dp)
Judul lagu yang rata kiri / tidak dapat di-scroll (panjang) di layar yang lebih besar (225 dp)
Judul lagu yang panjang (rata tengah) yang di-scroll pada layar yang lebih kecil (192 dp)
Judul lagu yang panjang dan dapat di-scroll (rata tengah) di layar yang lebih besar (225 dp)
Target ketuk
Kontrol utama dan tombol bawah menggunakan ruang yang tersedia untuk memaksimalkan target ketukan. Ukuran target ketuk minimum adalah 48 x 48 dp di perangkat Wear OS, dengan
ikon dan tombol yang disejajarkan ke tengah target ketuk.
Kontrol utama
Layar kecil (192 dp):
- Kontrol utama = 64 x 64 dp
- Kontrol samping = 64 x 64 dp
Layar besar (225 dp):
- Kontrol utama = 80 x 80 dp
- Kontrol samping = 72,5 x 80 dp
Kontrol bawah
Layar yang lebih kecil (192 dp) dengan maksimal 2 tombol:
Kedua tombol = 68 x 60 dp
Layar yang lebih besar (225 dp) dengan maksimal 3 tombol:
Semua tombol = 58 x 72,5 dp
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Media controls\n\nThe media controls screen is essential to help users control the media that\nthey're listening to. Create media controls using a 5-button layout to verify\nthat minimum tap targets are met. On larger screens that are 225 dp or larger,\nyou can add value by including a shortcut button for an important action such as\nplayback queue.\n\nLayout sections\n---------------\n\nThe media controls screen is a fixed height screen. It's made up of three\nvertical sections that have different responsive layouts and behavior.\n\n1. **Top section:** Contains media details\n2. **Middle section:** Media controls\n3. **Bottom section:** Configurable secondary buttons\n\nConsiderations for larger screen\n--------------------------------\n\nThe large screen adaptations for media are solely focused on the media controls\nscreen. All other elements are captured in chip, button, and dialog items or in\nthe lists breakdown of large screen behavior.\n\n### Buttons\n\nYou can add value by including a shortcut button for an important action, such\nas playback queue. Using the overflow menu verifies that the additional\nfunctionality is still consistent and accessible no matter what's the screen\nsize. The bottom section gains an additional slot for a button after the 225 dp\nbreakpoint making the maximum number of buttons 2 on smaller screens and 3 on\nlarger screens.\n\n### Main control\n\nThe main control is usually a play and pause button. After the 225 dp\nbreakpoint, the control scales from 64dp to 80dp, which increases tap targets\nfor all controls within it.\n\nSmaller screen (smaller than 225 dp)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 64 x 64 dp / 3 dp stroke\n- **Button** = 54 x 54 dp / 26 icon size \nLarger screen (225 dp and larger)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 80 x 80 dp / 4 dp stroke\n- **Button** = 70 x 70 dp / 32 icon size\n\n\u003cbr /\u003e\n\nButton configuration\n--------------------\n\nTo follow touch target size principles, show only the 2-button layout before the\n225 dp breakpoint and 3-button layouts past it.\n\nThe following examples show different button configurations: \n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button (max) Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n3 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\nMarquee behavior\n----------------\n\nThe header has a number of updates to improve readability and general\nexperience:\n\n- A top margin of 12% on smaller screens and 13.2% on larger screens.\n- Side margins for the song title of 17.6%\n- Artist title margin of 12.5% on smaller screens and 14.5% on larger screens.\n- Artist title truncates, while 8-dp gradients are used for scrolling song titles. If an icon is present, an additional 8 dp gap separates the song title from the icon. (The icon doesn't scroll with the song title.)\n\n### With an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n### Without an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\nTap targets\n-----------\n\nMain controls and bottom buttons use the available space to maximize the tap\ntarget. The minimum tap target size is 48 x 48 dp on Wear OS devices, with\nicons and buttons aligned to the center of the tap target.\n\n### Main controls\n\n\u003cbr /\u003e\n\nSmall screen (192dp):\n\n- **Main control** = 64 x 64 dp\n- **Side controls** = 64 x 64 dp \n\nLarge screen (225dp):\n\n- **Main control** = 80 x 80 dp\n- **Side controls** = 72.5 x 80 dp\n\n### Bottom controls\n\n\u003cbr /\u003e\n\nSmaller screens (192 dp) with a maximum of 2 buttons:\n\n**Both buttons** = 68 x 60 dp\n\n\u003cbr /\u003e\n\nLarger screens (225 dp) with a maximum of 3 buttons:\n\n**All buttons** = 58 x 72.5 dp\n\n\u003cbr /\u003e"]]
