Question

I have been designing/creating buttons for my apps, but when I compare to them to highly successful commercial apps like Google+ or Facebook, the image quality just does not look the same. I have viewed the buttons on the emulator and on devices.

I use Photoshop CS5 and always make sure I am designing the .png in RGB and 300 DPI.

I then create the button in XML specifying the pressed and focused states:

about_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/about_down"
          android:state_pressed="true" />
    <item android:drawable="@drawable/about_down"
          android:state_focused="true" />
    <item android:drawable="@drawable/about_up" />
</selector>

I then use the button in my layout like so:

main.xml

        <Button
            android:id="@+id/about_button_xml"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/about_btn"
            android:paddingTop="5dp" />

Is there some type of flaw in the way the buttons are being scaled in the layout or am i saving/designing the buttons a bad format, am I using the wrong software….i am just not sure.

What do design specifications and software do you recommend? Any suggestions or tutorials would be greatly appreciated.

Answer 1

To add a little specificity to m0skit0’s answer: You should probably be designing at 320dpi. Take the 320dpi version and put it in drawable-xhdpi, and put 240 and 160 dpi scaled versions in drawable-hdpi and drawable-mdpi. If you don’t provide a resource at the density of the device’s screen, the system will attempt to scale up a lower-density image (or scale down a higher-density one if one is provided, but it rarely does it as well as Photoshop and can’t use judgment about how to scale odd-sized parts of the image crisply when necessary).

If you only provide an image in the drawable folder, the system will assume it’s 160dpi for historical reasons – and that’s almost certainly not what you want; you’ll end up with a fuzzy, overly large, and upscaled version of your original image.

Concretely: a 100px image in drawable-mdpi or just plain drawable will be rendered as a 200px image on an xhdpi screen using scaling. If you really designed that image at ~320dpi to be 100px, the right thing is to put the 100px version in drawable-xhdpi, a 50px version in drawable-mdpi, and a 75px version in drawable-hdpi.

Google writes a lot about this on their site; see their designer info and dev info. Visually:

(CC Attribution 2.5 licensed image from the above Android Designer site).