Tiles share some fundamental design elements. By understanding tile templates and tile components, you can easily build unique tiles for your apps.
Fundamental elements
The following table describes fundamental tile design elements.
|
|
|
|
|
|
App icon |
Design area |
Bottom button |
| App icons are provided by the app developer, and shown temporarily on screen. | Each tile template has its own rules concerning the primary content area. Be sure to refer to the layout guidance. | Buttons are important for enabling secondary actions on the tile. Place buttons 2.1% above the bottom of the screen. |
App icon
Wear displays the app icon automatically as the user scrolls through the tile carousel. The app icon fades away and should not be implemented within the tile.
For more information on creating app icons, see Product icons.
Figure 1. Examples of app icons
Button
Choose short text for your buttons. Use text that is specific to the action and destination of the call to action. Ensure that the translation of the button text accommodates the character count. If the translated button text is too long, set your button to say More instead.
|
|
|
Placement |
Button Spec |
Type |
| Margin: Place your button 6.3% from the bottom if the watch face. | Padding: Leave 12dp padding from both sides. | Font size: Font sizes are not scalable. Set a minimum font size of nine. For non latin languages use a minimum font size of seven. |
Tile Templates
There are four type of tile templates available. Download Tile Design Kit (Figma) to see the examples.
|
|
| Text centric template | Button centric template |
|
|
| Info centric template | Data centric template |
Components
Use components to build your tiles. Customize the colors of the component to express your brand by following the Wear Material Theming guidelines.
Download the Tile Design Kit (Figma) to see component examples.
| Component | Variant | Example |
| Button | Standard button | Available sizes: Standard, Large and Extra Large  |
| Button | Standard text button | Available sizes: Standard, Large and Extra Large  |
| Chip | Primary standard chip |
 |
| Chip | Secondary standard chip |
 |
| Chip | Small avatar chip |
 |
| Chip | Large avatar chip |
 |
| Chip | Compact (bottom) chip |
 |
| Progress indicator | Standard progress indicator |
 |
| Progress indicator | Progress indicator with gap |
 |
Resources
For more information, see the Tile design guidelines.