A smartphone is a deeply personal thing. It’s no surprise that the Personalization category on Google Play is home to some of Android’s most popular apps. Wallpapers, widgets, home screen replacements, and other apps that let you personalize every little nook and cranny of your device are intensely popular on the platform.
So back in the latter half of 2012, when I first heard about the new lock screen widget feature in Android 4.2 in an internal email (I work on Android at Google), I immediately started hacking together custom clocks for my lock screen. Some were basic typographic variations, while others were custom-drawn analog clocks. The real “aha” moment though was when I realized there was enough space for the current temperature and weather icon—that added a ton of value for me, as I didn’t have to specially open Google Now in the morning to see if I should bring an umbrella.
Around this time my colleague Adam and I would regularly chat about this kind of stuff over lunch. We eventually arrived at the idea of a more “pluggable” lock screen, one where you could add and remove additional status items to create the “dashboard” view that best suited your needs.
And thus, DashClock was born.
DashClock and the color white
After a week or two of internal dogfooding, it became clear that people wanted DashClock on their home screen, not just on their lock screen. Simple enough—just one line of code! However, much like the rest of the lock screen, the clock and status items in DashClock were entirely white. While the stock Android lock screen protects the foreground legibility of these elements by automatically darkening the wallpaper, the home screen offers no such assistance. Most folks’ wallpapers are high-contrast landscapes, distinctive abstract patterns or their favorite family photos. While these are generally quite beautiful and meaningful, they don’t exactly play nice with the stuff on your home screen—things like app icons and labels. And they especially don’t play nice with white-on-transparent widgets like DashClock.
So I took the easy way out and threw a semitransparent black rectangle behind the clock and status icons. Case closed, right? Well, not exactly… actually no, not even close.
This is Android! People want more options! Customize ALL the things! Almost immediately after adding that black rectangle background, a fellow Googler sent me the equivalent of this request:
Feature request: change widget foreground color from white to holo blue, holo red, etc. or black.
I sat on that request, but after launching DashClock in February 2013 and accruing 80+ votes for this feature, I eventually did add the option to change the foreground color to black. While that largely alleviated the immediate issue, I was never really happy with the solution. It stuck in my mind for a long time—about 9 months actually—and I kept thinking about it almost every day on the walk home from work.
The walk home from work
It’s a funny thing, how ideas seem to come about. They can be pretty serendipitous, making themselves known in the most unexpected of situations. I kind of think sitting in front of your computer waiting for the right idea to present itself is an exercise in futility. No, more likely something will strike you while out on a run or something like that.
So anyway, I was speed-walking home through the Lincoln Center area of Manhattan in the bitter cold of an early winter in New York, my hands desperately seeking refuge from the cold in the deepest parts of my coat pockets, my eyes in a trance, fixed on the pavement ahead, and my mind entirely on the idea of wallpaper contrast and other related nerdy things. You can miss out on quite a lot if you don’t look up every once in a while—but read on.
I wanted to solve that pesky DashClock foreground color problem much more elegantly; I got stuck on the idea that it was the wallpaper’s fault, not mine. How could I fix the wallpaper?—How could I improve the legibility of not just DashClock but other widgets, home screen icon labels, and all the other meaty stuff on my home screen?
During that walk I recalled an abstract artwork I saw on Medium from the other day that was essentially a composition of well-chosen color gradients (the Design/UX collection’s background image). It seemed ideal for legibility, but wasn’t very personal, and it probably took the designer a great deal of time and effort to devise a palette that achieved the desired mood. I also remembered that Timely, one of my favorite apps, had an excellent theme designer that resulted in very effective backgrounds. Very few edges, and you could choose dark enough colors to ensure white foregrounds were legible.
I got home and immediately threw together a mockup in Photoshop. How would these composed radial and linear gradients look as home screen wallpapers? Pretty quickly I realized that while the results looked okay, there were two issues. First, the amount of effort needed to choose great color combinations and gradient ramps was prohibitively large. Second, and more importantly, what about all those family photos and beautiful landscapes? Remember, these are deeply personal devices. A bunch of colors slapped together didn’t make for a very fun wallpaper. It wasn’t quite magical. So I gave up.
The walk home from work, redux
The next day, on that same way home from work, I decided to look up—to actively pay attention to my surroundings. And that’s when it hit me. There it was—the answer to the problem, happily awaiting me every day on the walk home.
On 65th St. between Broadway and Amsterdam, are 20 or so of these massive dynamic LED billboards. They cycle through photo ads for shows and events playing at Lincoln Center. The transitions vary, ranging from slide-ins to fade-ins to… blur-ins. Brilliant! Photos started out mysterious and blurry, but after a few seconds came into focus and were accompanied by text details. “This is how it should be on your home screen,” I thought. A blurred wallpaper conveyed enough of the original photo’s meaning while losing the sharp edges that stole your attention.
Blurred photos on your Android home screen
I raced home to further explore ways in which this relatively simple technique could be applied to the problem of home screen wallpapers. One approach could be to simply let you choose a photo, blur it, and set the result as your wallpaper (I later found out there’s a great app that does exactly that). That left something to be desired though; at some point (probably on a regular basis) you’re going to want to see the normal, unblurred photo of your kids or that beautiful landscape.
Enter Live Wallpapers. Since Android 2.1, apps have had the ability to expose dynamic wallpapers in place of the more static default backgrounds. These wallpapers could even intercept touch events, so something like temporarily focusing a photo could be achieved through a simple double-tap gesture. It was the perfect fit from a technical standpoint.
That night in November 2013, I began prototyping a proof-of-concept live wallpaper, appropriately named BlurTest. I soon realized blurring wasn’t quite enough, and decided to add a darkening filter for additional background protection. A couple hundred lines of code in Android Studio and a Ctrl+R later, my wallpaper would never be the same again.
On museums and inspiration
While working on BlurTest, I was thinking a lot about the concept of inspiration: what inspired me? New York City was a huge inspiration—that block on 65th St. and Lincoln Center in general are amazing feats of modern technology and architecture. The city is also known for its legendary museums like the MoMA, filled with imaginative installations and beautiful works of art that compelled thoughts not just of the art itself but of the artist in her environment and of even deeper notions like human history itself, the passage of time and the universe as we know it.
I realized that what I really wanted to do with this live wallpaper project was not only to improve my users’ home screens, but to inspire them. Just like a trip to the MoMA leaves me with countless questions and ideas, the technology in our pockets can strive for just as lofty a goal. We look at our home screens probably about a hundred times a day. What better way to be inspired than to immerse our devices in beautiful artifacts from human history?
The beginning of a journey
What followed was a four-month journey building Muzei Live Wallpaper, culminating in a stressful yet satisfying public launch in February 2014.
During that four-month period, I learned about the amazing WikiPaintings project, recruited my wonderful art teacher fiancée to curate the paintings, learned a bit more about OpenGL ES 2.0 than I would’ve liked, added an API for external art sources (akin to DashClock extensions), built a tiny server-side artwork administration interface and image-serving system on the Google Cloud Platform, got a lot of great feedback from other Googlers, and of course, spent many a long night troubleshooting caching bugs.
The journey and its results have been incredibly rewarding. Kenton, a friend from London, recently shared this post with me on Google+:
“Muzei” is a transliteration of the Russian word музей, which means “museum,” and that’s a big part of what Muzei aims to be: a living museum for your Android home screen. But it also aims to be a subconscious nod in the direction of your nearest museum, where you can continue to be inspired by the world and its many wonders. Success.
So, yeah, it’s definitely a funny thing, how ideas seem to come about. DashClock was born out of opportunity in the form of a new API that lended itself nicely to new lock screen personalization options. Muzei was envisioned as a solution to the problem of DashClock’s poor legibility on high-contrast wallpapers, but became a lot more. It became a way to motivate developers through open source code and extensibility. It became a celebration of the things I love most about Android and the amazing city I’m lucky enough to reside in. But most of all, it became a way to inspire people through beautiful artifacts of our species’ time on this planet.