How to create crisp background image for 1x1 Android widget?

Question

I'm creating an a 1x1 widget, and no matter what I try, I just can't get the background image looking nice and crisp. I've read just about any resource I can find, yet I still can't win.

I'm designing for the HTC Desire/Nexus 1, and would love someone to tell me when creating the background in Photoshop, what dpi/height/width to use (currently using 72/100/80). I'll worry about other devices resolutions once I can get it looking nice on my test device first.

Also, if there's anything special I need to be putting in the @layout/main.xml and Widget_Provider.xml files. I simply can't find any examples for 1x1 gadgets, so have the following:

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widget"
android:layout_width="fill_parent"
android:orientation="vertical"
android:background="@drawable/background" 
android:layout_gravity="center" 
android:layout_height="wrap_content">

Widget_Provider.xml

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="72dip"
android:minHeight="72dip"
android:updatePeriodMillis="6000000"
android:initialLayout="@layout/main"
/>

Any help would be greatly appreciated.

Answer 1

You may want to have a look at Google's Supporting Multiple Screen Sizes document. Basically what is happening here is that the screens on Android devices have different pixel densities. These are categorized as low, medium, high (ldpi, mdpi, hdpi). If an asset isn't large enough for a larger density screen, it is blown up to the proper size - this is probably what is happening to you.

The Nexus One has a DPI somewhere around 250 which puts it into the hdpi class. Using the google formula of (number of cells * 74) - 2 to calculate dp for your 1x1 widget would make the widget dimensions 72x72 dp.

The conversion from dp to pixels is:

pixels = dp * (density / 160)

So for a 72x72 dp image, the corresponding image sizes based on density would be:

ldpi  (120 DPI) = 72 * (120 / 160) == 54 x 54 pixels
mdpi  (160 DPI) = 72 * (160 / 160) == 72 x 72 pixels
hdpi  (240 DPI) = 72 * (240 / 160) == 108 x 108 pixels
xhdpi (320 DPI) = 72 * (320 / 160) == 144 x 144 pixels

Use these formulas to create your assets and you should get crisp images.