Style

Styling widgets effectively is crucial for achieving a visually appealing and consistent user experience. This section delves into the key concepts and techniques for defining the color and typography to create the most helpful and engaging Android widgets.

Color

Use color to express style and communicate meaning. Setting appropriate colors for your widget colors are crucial for legibility, personalization, and of course expressing your app's brand identity.

Use Material color roles and tokens to fulfill accessibility contrast guidelines and support dynamic color features, such as user-generated color and dark or light themes.

For more information see the Material Design Color guidance.

Dynamic themes

Starting in Android 12, a widget can use the device theme colors for buttons, backgrounds, and other components. This provides visual consistency across different widgets, home screen icons, and wallpapers, offering Android users a more cohesive user experience. Using the provided color tokens ensures your widget will look integrated across device themes provided by different device manufacturers and the dynamic themes set by the user.

**Figure 1:** Image of a widget with color tokens called out.

Light and dark mode

A dark mode is a low-light version of the device UI that displays mostly dark surface colors. Users are increasingly switching to dark mode for better battery life and eye comfort. If your widget doesn't adapt to dark mode, it will appear out of place and could potentially frustrate users.

**Figure 2:** A widget in light mode on the left screen and dark on the right.

Typography

Typography helps make writing legible and beautiful. Utilize font sizes and weights to establish a clear hierarchy, guiding the user's eye to the most important elements. Pay attention to line spacing and letter spacing (kerning) to improve readability, especially for smaller text displays within the restricted space of a widget.

Hierarchy

Hierarchy is communicated through differences in font weight, size, line height, and letter spacing. The updated type scale organizes text styles into five roles that are named to describe their purposes. The five text styles are display, headline, title, subtitle and body. The new roles are device-agnostic, allowing easier application across a variety of use cases.