I'm working on an Android app which is based on material design principles. Since I'm not a developer, I struggle to understand what can be built with the Android SDK and what needs to be exported/provided to a developer.

Here is an example image.

app screenshot
The play button sits on the 'now playing bar' and transitions to a 'pause' state on tap. I suppose I need to export the icon and not the purple background.

Here is an animated prototype I made. https://goo.gl/y9aCXz

It would be really nice if you guys could just give me some sort of an insight on what to export and what to leave to a developer.

  • This is a really, really good question. I will invite people from the UX forum to join this discussion.
    – Rafael
    Commented Sep 11, 2015 at 17:00
  • Yes. Ill spam the overflow forum too Xo)
    – Rafael
    Commented Sep 11, 2015 at 17:07

2 Answers 2


Generally I go on the principle that it's better to generate as much in code as possible, so I try to provide as few pre made assets as I can.

The reason for this is the "fragmentation" that Android is famous for- there are so many different screen sizes and so assets need to be provided in so many different sizes (hdpi, xhdpi, xxhdpi etc). Anything generated in code can be scaled up and down as desired without the need to generate multiple images.

In this case I think you're right, the developer can generate the pink/purple circle in code, just give them the # code for the colour and the dimensions of the button at your base size (probably xxhdpi if you're designing at the biggest screen size). You can then either generate the icons at the different sizes or use a font that includes icons. I use FontAwesome fairly often, it includes lots of standard icons. Again the benefit of using a font is that the developer can just place the icon in and then set an appropriate font size for the different screen sizes.

Another alternative, since you’re designing for Android 5, is to use the funky icon transition that Google calls the “Delightful Details” (the play icon morphs into the pause icon). I’m not a developer so I’m not sure how this is done in code, but I’m pretty sure it’s one of the material theme’s default transitions. It’s probably explained in the animation section of the Developer Guide.

  • What my dev team find really useful is a good list of all the colours and dimensions of the assets, the margins and all the font info (size, weight etc.). I usually create what seems to be generally referred to as a "generic skin"- an extra section of my prototype where I lay out a few template screens and add notes all over with all the design information.
    – Annie
    Commented Sep 11, 2015 at 16:23
  • This is a great answer. Thanks for taking your time. In terms of specs, I'll use Zeplin for all paddings, sizing etc. I found this to be the easiest and least time consuming way to deal will of that.
    – Robert
    Commented Sep 14, 2015 at 9:13
  • Glad it was helpful. I'd not heard of Zeplin, it looks really interesting. I shall try it out. Thanks
    – Annie
    Commented Sep 16, 2015 at 9:37

A generic answer:

Ask your developer.

As a designer

If you want to control the sikn, for example uploading a new color scheme for the icons, and you can just upload a new set of icons (in the correct size and format)... export all the circle and the pause / stop graphic all together.

As a developer

Here is the tricky part.

I asked in StackOverflow chat, and someone responded this:

easwee @Rafael just send whole psd file but regarding that exact design: I never worked on android apps, but at least as far as CSS goes that design requires no assets, maybe exported play/pause buttons as svg, but even those seem pretty generic.

cimmanon An svg or a symbol font like fontawesome/wingdings/etc would be all i would imagine a design like that would need.

Rafael Hum. Do you like to export the parts as you need them?

easwee @Rafael I try to make as much of the design as I can with code only, avoiding unnecessary assets - so yes - I just extract what I need from the design.

An analisis

I think this depends on 2 things. 1) How much do you know about developing and 2) How much control each person needs.

1) I recently had a web project where I asked one person to give me a photo. He use it on a mockup in Ilustrator and exported it from there... Of course it was exported at the wrong resolution and in cmyk. I asked the original photo after that.

But if you really know how to do it, it is helpfull to have a real teamwork.

2) For example. In this chat cimmanon coments about fontawesome. Developers are used to use online resources that works in diferent way than designer´s resources. This particular one is a font set that gives you icons that they just can link and it will be inserted in the design. This gives them control on the project as they need it.

But as I comented, if you want acces to a folder where you need to change icons to experiment without touching the code, do it that way.

  • Thanks for going an extra mile and even asking others. I really appreciate it! Your answer gave me a really good insight.
    – Robert
    Commented Sep 14, 2015 at 9:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.