![](http://android.devsite.corp.google.com/static/images/design/ui/widget/widget-hero.png)  

### Widgets on Android

Add widgets to level up your user experience. Widgets are customizable home screen elements that display a clear and actionable view of an app's content or actions.  
[Go to design foundations](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets) [Download the Widget Figma kit](https://goo.gle/android-ui-kit)

## Getting started

[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/layouts.svg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/layouts)  
Guides

### [Layouts](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/layouts)

Layouts dictate how information and interactive elements are organized within your widget. Learn more about the pre-built layouts for text, list \& grid-type widgets.  
[See guidance](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/layouts)  
[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/sizing.svg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing)  
Guides

### [Sizing](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing)

Learn more about designing widgets that scale seamlessly to multiple sizes. See the default widget sizes and learn how to make full use of the available grid space.  
[See guidance](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing)  
[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/style.svg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style)  
Guides

### [Style](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style)

Learn how to style your widget to enhance your widget's visual impact and to fit with the user's device theme.  
[See guidance](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style)  
[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/discovery-promotion.svg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/discovery-promotion)  
Guides

### [Discovery \& promotion](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/discovery-promotion)

Learn to promote your widget on the widget picker by using appropriate sizing and displaying appropriate preview content.  
[See guidance](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/discovery-promotion)

## Layouts

[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/layouts-content.jpg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets)  

### [Content](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets)

Before deciding on a layout, think about the content you want to display in your widget. Do you want your widget to be image-rich or text-heavy? Find layout examples for a variety of content types.  
[Learn more](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets) [![](http://android.devsite.corp.google.com/static/images/design/ui/widget/layouts-canonical.jpg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/layouts)  

### [Canonical widget layouts](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/layouts)

Get up and running with our ready-made, responsive layouts that cater to the most common widget types.  
[Learn more](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/layouts)

## Sizing

[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/sizing-responsive.jpg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing)  

### [Responsive layouts](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing)

Make sure your widget is flexible and consider how your widget could be resized. How might it look in portrait, square, or landscape layout?  
[Learn more](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing) [![](http://android.devsite.corp.google.com/static/images/design/ui/widget/sizing-bounds.jpg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing#fill_the_bounds)  

### [Filling the bounds](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing#fill_the_bounds)

Home screen space is precious so it's important to make sure your widget is built to make best use of the space it's been allocated.  
[Learn more](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/sizing#fill_the_bounds)

## Style

[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/style-anatomy.jpg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style)  

### [Anatomy and specs](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style)

Understand the core components and detailed design specs to ensure your widget meets our quality bar.  
[Learn more](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style) [Download figma kit](https://goo.gle/android-ui-kit) [![](http://android.devsite.corp.google.com/static/images/design/ui/widget/style-tokens.jpg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style#color)  

### [Color tokens](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style#color)

To better fit in with a user's home screen, allow your widget to adapt to system device theming so your widget can use features like light and dark themes and contrast settings.  
[Learn more](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/style#color)

## Discovery \& promotion

[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/discovery-promotion-requirements.jpg)](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/discovery-promotion)  

### [Widget picker requirements](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/discovery-promotion)

From recommended widget sizes to high quality previews, review our guidance to help your widget get noticed and stand out from the crowd.  
[Learn more](http://android.devsite.corp.google.com/design/ui/mobile/guides/widgets/discovery-promotion) [![](http://android.devsite.corp.google.com/static/images/design/ui/widget/widgets_tiers_card.png)](http://android.devsite.corp.google.com/docs/quality-guidelines/widget-quality)  

### [Widget quality tiers](http://android.devsite.corp.google.com/docs/quality-guidelines/widget-quality)

Widget quality affects how users interact with or find your widget. Check out the quality tiers to help your widget stand out and get noticed.  
[Learn more](http://android.devsite.corp.google.com/docs/quality-guidelines/widget-quality)

## Download the kit

[![](http://android.devsite.corp.google.com/static/images/design/ui/widget/figma-community.jpg)](https://goo.gle/android-ui-kit)  
Figma

### [Android Figma file](https://goo.gle/android-ui-kit)

Use our design components to create beautiful \& functional widgets. These components and patterns ensure an optimal user experience with widgets, while maintaining consistency \& showing your brand.  
[Join the community!](https://goo.gle/android-ui-kit)