Smartwatches have smaller screen sizes than handheld devices, so it's critical to arrange and display elements in a manner that makes them simple to access and that efficiently uses the available screen space. To help your items fit the screen, use the right amount of padding and margins as specified by the Material guidelines.
Even when your design fits the screen, elements of your interface may be truncated or clipped when the user does one of the following:
- Changes the display language.
- Changes the text size.
- Enables the Bold text system setting.
It's crucial to test your designs with these considerations in mind to ensure they adapt seamlessly to different user environments.
Keep interactive elements fully visible
If your interface includes interactive elements, check that users can scroll
these elements fully into view, especially if these elements are placed at the
edges of a page. If your app uses the Horologist library, use the
responsive() layout factory. Otherwise, use spacers and add margins to
the top and bottom of a ScalingLazyColumn object to prevent the first and
last list items from always being clipped.
Use chips instead of cards for dense layouts
If you need a denser layout, use CompactChip instead of cards. The larger
surface area of cards makes it much more difficult to prevent text truncation
and content clipping.