برچسب: Widget

Android Developers Blog: Introducing Widget Quality Tiers

Posted by Ivy Knight – Senior Design Advocate

Level up your app Widgets with new quality tiers

Widgets can be a powerful tool for engaging users and increasing the visibility of your app. They can also help you to improve the user experience by providing users with a more convenient way to access your app’s content and features.

To build a great Android widget, it should be helpful, adaptive, and visually cohesive with the overall aesthetic of the device home screen.

In order to help you achieve a great widget, we are pleased to introduce Android Widget Quality Tiers!

The new Widget quality tiers are here to help guide you towards a best practice implementation of widgets, that will look great and bring your user’s value across the ecosystem of Android Phone, Tablets and Foldables.

What does this mean for widget makers?

Whether you are planning a new widget, or investing in an update to an existing widget, the Widget Quality Tiers will help you evaluate and plan for a high quality widget.

Just like Large Screen quality tiers help optimize app experiences, these Widget tiers guide you in creating great widgets across all Android devices. Now, similar tiers are being introduced for widgets to ensure they’re not just functional, but also visually appealing and user-friendly.

Widgets that meet quality tier guidelines will be discoverable under the new Widget filter in Google Play.

Consider using our Canonical Widget layouts, which are based on Jetpack Glance components, to make it easier for you to design and build a Tier 1 widget your users will love.

Let’s take a look at the Widget Quality Tiers

There are three tiers built with required system defaults and suggested guidance to create an enhanced widget experience:

Tier 1: Differentiated

Differentiated widgets go further by implementing theming and adapting to resizing.

Tier 1 widgets are exemplary widgets offering hero experiences that are personalized, and create unique and productive homescreens. These widgets meet Tier 2 standards plus enhancements for layout, color, discovery, and system coherence criteria.

For example, use the system provided corner radius, and don’t set a custom corner radius on Widgets.

Add more personalization with dynamic color and generated previews while ensuring your widgets look good across devices by not overriding system defaults.

Tier 1 widgets that, from the top left, properly crop content, fill the layout bounds, have appropriately sized headers and touch targets, and make good use of colors and contrast.

Tier 2: Quality Standard

These widgets are helpful, usable, and provide a quality experience. They meet all criteria for layout, color, discovery, and content.

Make sure your widget has appropriate touch targets.

Tier 2 widgets are functional but simple, they meet the basic criteria for a usable app. But if you want to create a truly stellar experience for your users, tier 1 criteria introduce ways to make a more personal, interactive, and coherent widget.

Tier 3: Low Quality

These widgets don’t meet the minimum quality bar and don’t provide a great user experience, meaning they are not following or missing criteria from Tier 2.

Clockwise from the top left not filling the bounds, poorly cropped content, low color contrast, mis-sized header, and small touch targets.

For example, ensure content is visible and not cropped

Build and elevate your Android widgets with Widget Quality Tiers

Dive deeper into the widget quality tiers and start building widgets that not only look great but also provide an amazing user experience! Check out the official Android documentation for detailed information and best practices.

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.

Source link

02/05/2025
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.

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.

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.
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.

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.

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.

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:
Last, I’ll swap the app icon, round up all the breakpoint sizes, and provide an option with brand colors.

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!

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.
Source link
02/05/2025