\n
![](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiH_mnRGKAFuMgW_5hFFweQnpabQQSEVHlnTdQtDLouhoeJ0YF87-IJTVIg00TGC9dGpq36pUteNZBuh8idyXIkU16-1lxNmCncfoy64XO3uNiaKxu8oXh3Ne-tNIWiiW5jNif6E-L5yFV16bWM-NMl4T_N-qMTe5bYzjGWb5zAUVbZ6xjV5Wr32elJj1U\/s1600\/Android-Widgets-Spotlight-Week-Overview.png\")
<\/p>\nPosted by Summers Pitman \u2013 Developer Relations Engineer, and Ivy Knight \u2013 Senior Design Advocate<\/em><\/p>\n 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\u2019ll cover how easy Widget Canonical Layouts<\/a> can make this process.<\/p>\n 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<\/a> to get started crafting higher quality widgets.<\/p>\n <\/image><\/p>\n The Widget Canonical Layouts Figma makes previewing your widget content in multiple breakpoints and layout types. Join me in our Figma design resource<\/a> to explore how they can simplify designing a widget for one of our sample apps, JetNews.<\/p>\n <\/image><\/p>\n Jetnews<\/a> is a sample news reading app, built with Jetpack Compose. With the experience in mind, the primary user journey is reading articles.<\/p>\n <\/image><\/p>\n With our content and user journey established, we\u2019ll take a glance at which canonical layouts would make sense.<\/p>\n 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.<\/p>\n <\/image><\/p>\n 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.<\/p>\n <\/image><\/p>\n <\/image><\/p>\n Now that we\u2019ve previewed our content in both the grid and list layouts, we don\u2019t have to choose between just one! <\/p>\n 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. <\/p>\n <\/image><\/p>\n 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.<\/p>\n Consider these in-between design tweaks as needed (between any of the breakpoints), that can be applied as general rules in your widget designs.<\/p>\n Here are a few guidelines to borrow:<\/p>\n <\/image><\/p>\n Last, I\u2019ll swap the app icon, round up all the breakpoint sizes, and provide an option with brand colors.<\/p>\n <\/image><\/p>\n These are ready to send over to dev! Tune in for the code along to check out how to implement the final widget.<\/p>\n You can find the Widget Canonical Layouts<\/a> at our new Figma Community Page: figma.com\/@androiddesign<\/a>. Stay tuned for more Android Figma resources.<\/p>\n Check out the official Android documentation for detailed information and best practices Widgets on Android<\/a> and more on Widget Quality Tiers<\/a>, and join us for the rest of Widget Spotlight week<\/a>!<\/p>\n <\/image><\/p>\n This blog post is part of our series: Spotlight Week on Widgets<\/b>, where we provide resources\u2014blog posts, videos, sample code, and more\u2014all designed to help you design and create widgets. You can read more in the overview of Spotlight Week: Widgets<\/a>, which will be updated throughout the week.<\/i><\/p>\n<\/div>\n![](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgHcT1IGB5MJdGipEzF3jwxF0fwpQJ5POe2Ff-FItWGX5xBurAW6BOa95Hu9rEEnpLzdQTY_p_WzktmtXeN3rdZF9_TfrSY5mphaZgLsWmHJZ7LyJCJq6NEUw26HX1hJob8rFxsN7rDuBRn2pY_KNHlrP3glBYNTEbbVFMRWyeqXpCcHYaHx7wInBwycNM\/s1600\/Widgets-Spotlight-Week-Banner.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n 1. Content to adapt<\/h3>\n
\n
\n
<\/div>\n 2. Choosing a Canonical Layout<\/h3>\n
<\/div>\n<\/div>\n<\/div>\n 3. Adapting to breakpoint sizes<\/h3>\n
<\/div>\n\n
\n
<\/div>\n<\/div>\nGo try it out and explore more widgets<\/h3>\n
<\/div>\n