Media controls
Stay organized with collections
Save and categorize content based on your preferences.
The media controls screen is essential to help users control the media that
they're listening to. Create media controls using a 5-button layout to verify
that minimum tap targets are met. On larger screens that are 225 dp or larger,
you can add value by including a shortcut button for an important action such as
playback queue.
Layout sections
The media controls screen is a fixed height screen. It's made up of three
vertical sections that have different responsive layouts and behavior.
- Top section: Contains media details
- Middle section: Media controls
- Bottom section: Configurable secondary buttons
Considerations for larger screen
The large screen adaptations for media are solely focused on the media controls
screen. All other elements are captured in chip, button, and dialog items or in
the lists breakdown of large screen behavior.
You can add value by including a shortcut button for an important action, such
as playback queue. Using the overflow menu verifies that the additional
functionality is still consistent and accessible no matter what's the screen
size. The bottom section gains an additional slot for a button after the 225 dp
breakpoint making the maximum number of buttons 2 on smaller screens and 3 on
larger screens.
Main control
The main control is usually a play and pause button. After the 225 dp
breakpoint, the control scales from 64dp to 80dp, which increases tap targets
for all controls within it.
Smaller screen (smaller than 225 dp)
- Progress ring = 64 x 64 dp / 3 dp stroke
- Button = 54 x 54 dp / 26 icon size
Larger screen (225 dp and larger)
- Progress ring = 80 x 80 dp / 4 dp stroke
- Button = 70 x 70 dp / 32 icon size
To follow touch target size principles, show only the 2-button layout before the
225 dp breakpoint and 3-button layouts past it.
The following examples show different button configurations:
1 Button Layout with overflow, smaller screen (192 dp)
1 Button Layout with overflow, larger screen (225 dp)
2 Button Layout with overflow, smaller screen (192 dp)
2 Button Layout with overflow, larger screen (225 dp)
2 Button (max) Layout with overflow, smaller screen (192 dp)
3 Button Layout with overflow, larger screen (225 dp)
Marquee behavior
The header has a number of updates to improve readability and general
experience:
- A top margin of 12% on smaller screens and 13.2% on larger screens.
- Side margins for the song title of 17.6%
- Artist title margin of 12.5% on smaller screens and 14.5% on larger screens.
- 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.)
With an icon
Non-scrolling (short) song title on smaller screens (192 dp)
Non-scrolling (short) song title on larger screens (225 dp)
Scrolling (long) song title (left-aligned) on smaller screens (192 dp)
Scrolling (long) song title (left-aligned) on larger screens (225 dp)
Scrolling (long) song title (center-aligned) on smaller screens (192 dp)
Scrolling (long) song title (center-aligned) on larger screens (225 dp)
Without an icon
Non-scrolling (short) song title on smaller screens (192 dp)
Non-scrolling (short) song title on larger screens (225 dp)
Left aligned / non-scrolling (long) song title on smaller screens (192 dp)
Left aligned / non-scrolling (long) song title on larger screens (225 dp)
Scrolling (long) song title (center-aligned) on smaller screens (192 dp)
Scrolling (long) song title (center-aligned) on larger screens (225 dp)
Tap targets
Main controls and bottom buttons use the available space to maximize the tap
target. The minimum tap target size is 48 x 48 dp on Wear OS devices, with
icons and buttons aligned to the center of the tap target.
Main controls
Small screen (192dp):
- Main control = 64 x 64 dp
- Side controls = 64 x 64 dp
Large screen (225dp):
- Main control = 80 x 80 dp
- Side controls = 72.5 x 80 dp
Bottom controls
Smaller screens (192 dp) with a maximum of 2 buttons:
Both buttons = 68 x 60 dp
Larger screens (225 dp) with a maximum of 3 buttons:
All buttons = 58 x 72.5 dp
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-07-02 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-02 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"]]
