Tag Archives: canonical layouts

Widgets Take Center Stage with One UI 7

Posted by André Labonté – Senior Product Manager, Android Widgets

On April 7th, Samsung will begin rolling out One UI 7 to more devices globally. Included in this bold new design is greater personalization with an optimized widget experience and updated set of One UI 7 widgets. Ushering in a new era where widgets are more prominent to users, and integral to the daily device experience.

This update presents a prime opportunity for Android developers to enhance their app experience with a widget

    • More Visibility: Widgets put your brand and key features front and center on the user's device, so they're more likely to see it.
    • Better User Engagement: By giving users quick access to important features, widgets encourage them to use your app more often.
    • Increased Conversions: You can use widgets to recommend personalized content or promote premium features, which could lead to more conversions.
    • Happier Users Who Stick Around: Easy access to app content and features through widgets can lead to overall better user experience, and contribute to retention.

More discoverable than ever with Google Play’s Widget Discovery features!

    • Dedicated Widgets Search Filter: Users can now directly search for apps with widgets using a dedicated filter on Google Play. This means your apps/games with widgets will be easily identified, helping drive targeted downloads and engagement.
    • New Widget Badges on App Detail Pages: We’ve introduced a visual badge on your app’s detail pages to clearly indicate the presence of widgets. This eliminates guesswork for users and highlights your widget offerings, encouraging them to explore and utilize this capability.
    • Curated Widgets Editorial Page: We're actively educating users on the value of widgets through a new editorial page. This curated space showcases collections of excellent widgets and promotes the apps that leverage them. This provides an additional channel for your widgets to gain visibility and reach a wider audience.

Getting started with Widgets

Whether you are planning a new widget, or investing in an update to an existing widget, we have tools to help!

    • Quality Tiers are a great starting point to understand what makes a great Android widget. Consider making your widget resizable to the recommended sizes, so users can customize the size just right for them.

Leverage widgets for increased app visibility, enhanced user engagement, and ultimately, higher conversions. By embracing widgets, you're not just optimizing for a specific OS update; you're aligning with a broader trend towards user-centric, glanceable experiences.

Design with Widget Canonical Layouts

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

Widgets can bring more productive, delightful and customized experiences to users' home screens, but they can be tricky to design to ensure a high quality focused experience. In this blog post, we’ll cover how easy Widget Canonical Layouts can make this process.

But, what is a Canonical Layout? It is a common layout pattern that works for various screen sizes. You can use them as a starting point, ready-to-use compositions that help layouts adapt for common use cases and screen sizes. Widgets also provide Canonical Layouts to get started crafting higher quality widgets.

Widget Canonical Layouts

The Widget Canonical Layouts Figma makes previewing your widget content in multiple breakpoints and layout types. Join me in our Figma design resource to explore how they can simplify designing a widget for one of our sample apps, JetNews.

Three side-by-side examples of Widget Canonical Layouts in Figma being used to design a widget for JetNews

1. Content to adapt

Jetnews is a sample news reading app, built with Jetpack Compose. With the experience in mind, the primary user journey is reading articles.

    • A widget should be glanceable, so displaying a full article would not be a good use case.
    • Since they are timely news articles, surfacing newer content could be more productive for users.
    • We’ll want to give a condensed version of each article similar to the app home feed.
    • The addition of a bookmark action would allow the user to save and read later in the full app experience.
Examples of using Widget Canonical Layouts in Figma to design a widget for JetNews

2. Choosing a Canonical Layout

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

We want to show at least a few new articles with a headline, truncated description, and possible thumbnail. Which brings us to the Image + Text Grid layout and maybe the list layout.

Examples of using Widget Canonical Layouts in Figma to design a widget for JetNews

Within our new Figma Widget Canonical Layout preview, we can add in some mock content to check out how these layouts will look in various sizes.

Examples of using Widget Canonical Layouts in Figma to design a widget for JetNews

Moving example of using Widget Canonical Layouts in Figma to design a widget for JetNews

3. Adapting to breakpoint sizes

Now that we’ve previewed our content in both the grid and list layouts, we don’t have to choose between just one!

The grid layout better displays our content for larger sizes, where we have some more room to take advantage of multiple columns and a larger thumbnail image. While the list is working nicely for smaller sizes, giving a one column layout with a smaller thumbnail.

Examples of using Widget Canonical Layouts in Figma to design a widget for JetNews

But we can adapt even further to allow the user to have more resizing flexibility and anticipate different OEM grid sizing. For JetNews, we decided on an additional extra small layout to accommodate a smaller grid size and vertical height while still using the List layout. For this size I decided to remove the thumbnail all together to give the title and action space.

Consider these in-between design tweaks as needed (between any of the breakpoints), that can be applied as general rules in your widget designs.

Here are a few guidelines to borrow:

    • Establish a content hierarchy on what to hide as the widget shrinks.
    • Use a type scale so the type scales consistently.
    • Create some parameters for image scaling with aspect ratios and cropping techniques.
    • Use component presentation changes. For example, the title bar’s FAB can be reduced to a standard icon.
Examples of using Widget Canonical Layouts in Figma to design a widget for JetNews

Last, I’ll swap the app icon, round up all the breakpoint sizes, and provide an option with brand colors.

Examples of using Widget Canonical Layouts in Figma to design a widget for JetNews

These are ready to send over to dev! Tune in for the code along to check out how to implement the final widget.

Go try it out and explore more widgets

You can find the Widget Canonical Layouts at our new Figma Community Page: figma.com/@androiddesign. Stay tuned for more Android Figma resources.

Check out the official Android documentation for detailed information and best practices Widgets on Android and more on Widget Quality Tiers, and join us for the rest of Widget Spotlight week!

Android Banner

This blog post is part of our series: Spotlight Week on Widgets, where we provide resources—blog posts, videos, sample code, and more—all designed to help you design and create widgets. You can read more in the overview of Spotlight Week: Widgets, which will be updated throughout the week.