How Smart Launcher implemented Super Responsive Widgets: A Behind-the-Scenes Look

Widgets are a great way to bring relevant information to your Android home screen without the need to launch an app. But how often have you been disappointed by a widget that didn’t fit well on your screen? At Smart Launcher, we believe that widgets should always look great and be easy to use. That’s why we created a framework to design responsive widgets that are optimized to fit any possible size and that provide a seamless user experience.

We introduced our new widgets a few months ago here. In this article, we’ll share some of the keys behind this result.

The Design Grid

We started by creating a grid where each cell side is 80 density points large. Then, for each possible combination of width and height in cells, we designed a specific UI to use the available space as efficiently as possible.
In some cases, we had to draw over 144 layouts, but this process helped us to understand how many different UI designs were needed for each widget and the best UI design for each widget size.

In the example above, we designed our calendar widgets in 64 different sizes, then we identified 9 different layouts (enlighted in the screenshot with different colors)

Using Jetpack Compose

Once identified the layouts to realize, we used Compose to implement them. Compose gave us a flexibility that was previously inconceivable in the traditional Android View framework. For each widget, we created a set of components, then we created each layout by customizing and rearranging the existing components. This allowed us to efficiently create widgets that were both visually appealing and highly functional.

The “Smart” advantage

Although everyone could create highly responsive widgets, there is still a key point that gave us an important advantage.

Our widgets are integrated into our Smart Launcher, so they don’t need to use the Android Widget API. We have full access to the power of Compose, and this allows us to create widgets that have real-time updates, transitions, better performance and that are more customizable. It also means more control over the UI, so we can create widgets that make better use of every available pixel.

The final result

This comparison shows the difference between one of our widgets and the Google Weather widget when adapting to the available space.

In conclusion, our framework for designing super-responsive widgets has allowed us to create widgets that are optimized for any screen size, look great, and provide a seamless user experience. We used a grid system to identify the best design for each widget size, we used Compose to create flexible UIs, and we integrated our widgets with our launcher to have more control over the UI and better performance.

If you’re an Android developer, we encourage you to try out these techniques to create widgets that your users will love. Even if you don’t have your own launcher, you can use Jetpack Glance to build your widget with Compose. Let us know if you want to know more about the process behind the creation of our widgets and we will eventually share more details in new articles.

And if you’re a Smart Launcher user, we hope you’ll enjoy our widgets that have been designed with you in mind!