Prevent text truncation and content clipping

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.