The birth of an Android app


Get Material Colors Wallpaper from Google Play

I have been inspired by Color Wallpaper from Ellipse Lab since I saw it on Google Play. It is a simple idea but the developer have kept a keen eye on the details. The background have a small gradient which makes it lighter at the top and darker at the bottom. A little noise has been added to give the wallpaper texture and each color is presented along with its name and color code.

Screenshots of Color Wallpaper by Ellipse Lab

However, it seems like Color Wallpaper has been abandoned by its developer. It is last updated in 2011 and their website has been down for a while. The age is showing in the UI as it seems to follow Android Design guidelines from the long lost era of Android Cupcake and Donut.

So we have set out to create the new Color Wallpaper app. We would like to preserve the love for the aesthetics that has been put into the old one, but we want to update the interface so that it follows the new guidelines for material design.

First we discussed the overall structure. Should we downright copy the lists of Color Wallpaper or should we go with a more explorative interface where one could start out experimenting with colors? In the end we decided that the user experience of full color surfaces is the main theme of the app and thus the app should let you dive head first into a pool of colors. With that idea in mind we went to work in Photoshop.

I have included some images from the design process here to give you a bit of insight into the steps of designing Material Color Wallpapers.

Four wireframes from the design process

These wireframes was created in Photoshop with the Google Nexus 5 Mockup PSD by Stefan Hinck.

We did a lot of experimenting, adding a overlay of random noise and gradient to the colors. This provides a more paper like feel to the colors and makes them more easy on the eyes. The following three wireframes demonstrate the impact. In the first wireframe no overlays are added. In the second we have added a little gradient (white to black) and set the blending mode to overlay. In the last wireframe, noise is added as well.

Three screenshots. First one has no overlays, second has gradient, third noise and gradient

When the wireframes were mostly finished we loaded Android Studio and went to work. The size of the current project is about 1600 lines of code.

You can interact with the colors by scrolling with your finger on the screen. Vertical scroll changes the color lightness and horizontal scroll switches between different color categories. A click on the palette icon in the action bar will bring up a list of all the available categories.

To see the final result of our efforts, download the Material Colors Wallpaper from Google Play or watch the video below.



By: Tobias Alr√łe