Posted by Summers Pitman – Developer Relations Engineer, and Ivy Knight – Senior Design Advocate

Widgets can deliver extra productive, pleasant and customised experiences to customers’ house screens, however they are often difficult to design to make sure a top quality centered expertise. On this weblog put up, we’ll cowl how straightforward Widget Canonical Layouts could make this course of.

However, what’s a Canonical Format? It’s a widespread format sample that works for varied display sizes. You should use them as a place to begin, ready-to-use compositions that assist layouts adapt for widespread use circumstances and display sizes. Widgets additionally present Canonical Layouts to get began crafting larger high quality widgets.

The Widget Canonical Layouts Figma makes previewing your widget content material in a number of breakpoints and format sorts. Be part of me in our Figma design useful resource to discover how they will simplify designing a widget for one in every of our pattern apps, JetNews.

1. Content material to adapt

Jetnews is a pattern information studying app, constructed with Jetpack Compose. With the expertise in thoughts, the first consumer journey is studying articles.

• A widget must be glanceable, so displaying a full article wouldn’t be an excellent use case.
• Since they’re well timed information articles, surfacing newer content material may very well be extra productive for customers.
• We’ll need to give a condensed model of every article just like the app house feed.
• The addition of a bookmark motion would permit the consumer to save lots of and browse later within the full app expertise.

2. Selecting a Canonical Format

With our content material and consumer journey established, we’ll take a look at which canonical layouts would make sense.

We need to present at the least a number of new articles with a headline, truncated description, and doable thumbnail. Which brings us to the Picture + Textual content Grid format and perhaps the checklist format.

Inside our new Figma Widget Canonical Format preview, we will add in some mock content material to take a look at how these layouts will look in varied sizes.

3. Adapting to breakpoint sizes

Now that we’ve previewed our content material in each the grid and checklist layouts, we don’t have to decide on between only one!

The grid format higher shows our content material for bigger sizes, the place we now have some extra room to make the most of a number of columns and a bigger thumbnail picture. Whereas the checklist is working properly for smaller sizes, giving a one column format with a smaller thumbnail.

However we will adapt even additional to permit the consumer to have extra resizing flexibility and anticipate completely different OEM grid sizing. For JetNews, we selected a further additional small format to accommodate a smaller grid measurement and vertical top whereas nonetheless utilizing the Record format. For this measurement I made a decision to take away the thumbnail all collectively to offer the title and motion area.

Think about these in-between design tweaks as wanted (between any of the breakpoints), that may be utilized as common guidelines in your widget designs.

Listed here are a number of pointers to borrow:

• Set up a content material hierarchy on what to cover because the widget shrinks.
• Use a sort scale so the kind scales constantly.
• Create some parameters for picture scaling with facet ratios and cropping strategies.
• Use part presentation adjustments. For instance, the title bar’s FAB could be lowered to an ordinary icon.

Final, I’ll swap the app icon, spherical up all of the breakpoint sizes, and supply an choice with model colours.

These are able to ship over to dev! Tune in for the code alongside to take a look at easy methods to implement the ultimate widget.

Go strive it out and discover extra widgets

You will discover the Widget Canonical Layouts at our new Figma Neighborhood Web page: figma.com/@androiddesign. Keep tuned for extra Android Figma assets.

Try the official Android documentation for detailed data and finest practices Widgets on Android and extra on Widget High quality Tiers, and be a part of us for the remainder of Widget Highlight week!

This weblog put up is a part of our sequence: Highlight Week on Widgets, the place we offer assets—weblog posts, movies, pattern code, and extra—all designed that will help you design and create widgets. You possibly can learn extra within the overview of Highlight Week: Widgets, which will likely be up to date all through the week.