Thanks to Material Design, a visual language developed by Google, designing user interfaces for the Android platform is easier than ever. Once you spend a few minutes skimming through its spec, which is updated every now and then, you can start designing Android apps which match the native look and feel of recent Android releases, including Marshmallow and Nougat. What’s more, to help you save time and effort, Google have published a sticker sheet for Material Design.
In this tutorial, I’ll show you how to use the sticker sheet for Adobe Photoshop to quickly design an Android app’s user interface.
Why Use the Sticker Sheet?
User interfaces that conform to the Material Design spec are, for the most part, composed of simple shapes, solid colors, and a few shadows. Consequently, unlike skeuomorphic user interfaces, they don’t vary much. In fact, except for their colors, sizes, and elevations, UI widgets look the same in almost all Material Design apps. The Material Design sticker sheet contains images of those widgets and, by using it, you can effectively follow a drag-and-drop approach to user interface design.
Although we’ll be using Adobe Photoshop in this tutorial, it’s worth noting that the sticker sheet is available for Sketch, Adobe Illustrator, and After Effects too.
Prerequisites
To be able to follow along, you’ll need:
- Adobe Photoshop CC
- The latest Material Design sticker sheet for Adobe Photoshop
1. Opening the Sticker Sheet
Fire up Adobe Photoshop and go to File > Open... to open the sticker sheet you downloaded. Unless you have the Roboto font installed on your computer already, you’ll see a dialog prompting you to either sync it from Adobe Typekit, or download it from another source (such as Google Fonts).
If you use Typekit, press the Resolve Fonts button to continue. Of course, you must be signed in to your Creative Cloud account for the sync to complete.
Once the sticker sheet opens, you’ll see that it’s a very large document—its dimensions are 5688×6790 px—with several layers and layer groups. I suggest you spend a few minutes looking at everything it has to offer.
2. Creating the Global Elements
The status bar, the navigation bar, and the app bar are together often referred to as the “global elements” of an app. By creating them first, we define the area inside which the rest of the UI widgets will be placed.
In the sticker sheet, all the global elements are present inside the layer group called Global elements. It contains global elements for mobile, tablet, and desktop user interfaces too. For now, however, let’s focus only on the MOBILE layer group by selecting it and Alt-clicking its eye icon.
As you can see, the layer group contains all the elements we need, along with a few guides that’ll help us precisely position other UI widgets. Go to Layer > Duplicate Group... to create a copy of it in a new document called MyMaterialApp.
In this tutorial, we are creating the user interface of an Android app that will serve as a calorie counter. Therefore, in the newly created document, expand the App bar layer group and use the Horizontal Type Tool (T) to change the title of the app to “Calories”.
Additionally, our design will have a chart in the app bar region. To make room for it, select both the key shadow and ambient shadow layers, press Ctrl+T, and make them both 250px tall. Don’t forget to commit the transformation by hitting Enter.
3. Adding a List
Switch back to the sticker sheet tab and look for the LISTS layer group. There are eight different types of lists available inside it. We, however, will be using the seventh type only. Therefore, select the layer group called List7 and go to Layer > Duplicate Group... to create its duplicate in the MyMaterialApp document.
Back in the MyMaterialApp tab, make sure that you place the List7 layer right below the App bar layer. Once you do so, you’ll see that the guides and the contents of the list align perfectly.
It’s always a good idea to give meaningful names to your layer groups. Therefore, rename the list’s layer group to “Foods list”.
4. Modifying the List
Let us now change the list such that it displays food items along with their portion sizes. Doing so is easy. Select the appropriate type layers and use the Horizontal Type Tool (T) to change their contents. I suggest you also change the font weight of the food items to “Bold”.
A calorie counter app wouldn’t be very useful if it didn’t display calories. Our list, however, currently has no room for more text. Therefore, delete the layers called “square” from the layer groups named list_01, list_02, and list_03.
You can now use the Horizontal Type Tool (T) to add new type layers that display the calories. Change the font size of the layers to 24px, their font name to Roboto Regular, and their color to #333333.
5. Adding Material Design Icons
We can make our user interface a lot more appealing by adding Material Design icons to it. For now, let’s download three different icons for the three list items of our interface.
Go to the Material Icons page and first choose the icon named local pizza. In the bottom sheet that pops up, change its size to 36dp and click on the PNGS button to download a ZIP file containing the icon.
Extract the ZIP file and go to the folder android/drawable-mdpi to find the actual image file. Drag it and drop it inside the MyMaterialApp tab of the Adobe Photoshop window.
Repeat the same steps for icons labeled local cafe and local dining.
We can now replace the circles in the list items with the icons. Let’s start with the local pizza icon. Select its layer and the layer called circle, the one that’s inside the list_01 layer group. Go to Layer > Align > Vertical Centers to align their centers vertically. Similarly, go to Layer > Align > Horizontal Centers to align their centers horizontally.
At this point, you can delete the “circle” layer in list_01.
Repeat the same steps for the other two icons.
6. Adding Color
Let’s add some colors now, because Material Design user interfaces tend to be bright and colorful.
Select the layer named “ic_local_pizza_black_36dp”, right-click on it, and select Blending Options.... In the dialog that pops up, go to the Color Overlay section and pick the color #ffc107, which is referred to as Amber 500 in the Material Design color palette.
Repeat the same steps for the layers named “ic_local_cafe_black_36dp” and “ic_local_dining_black_36dp”. Make sure that you choose a different color each time.
Let’s color the global elements now. To change the color of the background, select the layer named “Background”, press A to select the rectangle inside it, and change the Fill color to white.
To change the color of the status bar, open the “Status bar” layer group, select the layer named “bar”, press A, and change the Fill color to Red 900, whose hex value is #b71c1c.
Similarly, to change the color of the app bar, open the “App bar” layer group, select the layer named “key shadow”, press A, and set the Fill color to Red 500, or #f44336.
7. Adding a Floating Action Button
A floating action button is one of the most prominent widgets in a Material Design user interface. You can get it by duplicating the “Floating action button” layer group of the sticker sheet. If you have trouble finding it, look for it inside the “METRICS AND KEYLINES” layer group.
In your document, place the “Floating action button” layer group above the “Foods list” layer group.
Next, use the Move Tool (V) and position the floating action button at the bottom right corner of the user interface.
The floating action button must have an accent color. Therefore, select the “key shadow” layer inside its layer group group, press A to select the circle inside it, and change the Fill color to Red Accent 700, or #d50000.
Similarly, change the color of the “ic_add” layer, which contains the plus symbol, to white. Furthermore, open its Blending Options... and change the value of its Opacity to 100%.
8. Trimming the Document
You might have noticed that our document is very large, and the design occupies only a small region inside it. To change the size of the document such that it matches the size of the design, go to Image > Trim. In the dialog that pops up, go ahead with the default values and press OK.
9. Adding a Chart
As I mentioned earlier, the app bar region in our user interface will have a chart. Because the sticker sheet doesn’t have any stickers for charts, we’ll have to create it manually.
Start by turning the grid on. To do so, go to View > Show > Grid.
Press Shift+Ctrl+N to create a new layer inside the App bar layer group, and use the Pencil Tool (B) to draw four horizontal lines, which are white and 1 px thick, below the app’s title.
Use the Horizontal Type Tool (T) to add three dates below the last horizontal line. The font size of the dates can be 13px.
You can now turn the grid off by going to View > Show > Grid again.
Select all the layers you created in this step and press Ctrl+G to create a new layer group for them. Name the layer group “Chart”.
Next, inside the “Chart” layer group, create a new layer and call it “Data”. Inside the layer, draw a closed path using the Pen Tool (P). The shape of the path isn’t very important, so long as it looks like a smooth curve.
To fill the path with the foreground color, go to the Paths panel, right click on Work Path and choose Fill Path.... In the dialog that pops up, choose the defaults and press OK.
In order to make the chart look less overbearing, reduce the Opacity of the “Chart” layer group to 75%.
Lastly, use the Horizontal Type Tool (T) to display the total number of calories consumed below the chart. Let the font size of the number be 24px, and that of the label be 14px.
Our design is now complete. Go ahead and hide the “Guides” layer group because we won’t be needing it anymore.
10. Generating Device Art
Wrapping your design in a real device’s frame and adding a screen glare to it tends to make it look more polished and realistic. Although you can use Adobe Photoshop to do so, it’s far easier to use Google’s Device Art Generator instead.
First, export your design as a PNG file by going to File > Save As....
You can now drag the PNG file onto any of the devices you see in the device art generator. Note that you will have to scale your image up to at least 1080×1920px to use the frames of the latest devices.
Once the device art has been generated, you can drag it to any folder on your computer to save it.
Conclusion
In this tutorial, you learned how to use the Material Design sticker sheet and Adobe Photoshop to design an Android app’s user interface. Feel free to add more widgets to it, change its colors, and experiment with its layout.
I’d also like to remind you that the Material Design spec is merely a collection of recommended guidelines. You don’t have adhere to it all the time, so long as you make sure that the end result is consistent and intuitive.
To learn more about designing apps for Android, and to find more design resources, you can visit Google Design.
