1. Web Design
  2. Material Design

Designing an App Using the Material Design Sticker Sheet

Final product image
What You'll Be Creating

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.

Sticker sheet

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.

Drag and drop sticker sheet
Drag-and-drop UI 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.


To be able to follow along, you’ll need:

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.

Contents of the Sticker sheet

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.

Contents of the MOBILE layer group

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.

Duplicate Group dialog for the MOBILE layer group

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”.

App title changed 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.

Height of the app bar changed to 250px

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.

Duplicate Group dialog for List7

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.

List7 layer group positioned below the app bar

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”.

List items displaying foods and portion sizes

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.

List items with the squares removed

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.

Calories added to each list item

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.

Material Icons page

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.

Aligning the icons with the circles

At this point, you can delete the “circle” layer in list_01.

Repeat the same steps for the other two icons.

All icons in their final positions

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.

Color overlay for the pizza icon

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.

All icons colored

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.

The Fill field set 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.

The colored global elements

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 placed at the bottom right corner

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%.

The colored floating action button

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.

The Trim dialog

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.

The four lines drawn using the Pencil tool

Use the Horizontal Type Tool (T) to add three dates below the last horizontal line. The font size of the dates can be 13px.

3 dates added below the last line

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.

The path drawn using the Pen tool

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.

The Fill Path dialog

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.

The completed design

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.


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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.