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](https://m3.material.io/styles/color/system/overview).

## Shape

The shape of your widget sets the mood of your widget. For rectangular widgets,
use the [system corner radius property](https://developer.android.com/reference/android/R.dimen#system_app_widget_background_radius). This property creates consistency
across different devices and helps prevent widget content from being clipped.

For more details, see [Implement rounded corners](https://developer.android.com/develop/ui/views/appwidgets#rounded-corner).

## 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.
![](https://developer.android.com/static/images/design/ui/mobile/widgets/01_Dynamic_theme.jpg) **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.
![](https://developer.android.com/static/images/design/ui/mobile/widgets/02_Light_and_Dark.jpg) **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.
![](https://developer.android.com/static/images/design/ui/mobile/widgets/03_Typography.jpg) **Figure 3:** A widget showing the use of different type scales.