Android Home Screen Widget (icon, label - style)

Question

I'm trying to create an icon/widget (1 cell x 1 cell) that can be placed on the home screen of android. The widget will look and act exactly like the other standard shortcuts in android. It will have an icon and under that a label, it will be selectable with the trackball (highlight able) it will be highlighted when it is selected/clicked.

How do I go about creating this home screen widget?

Do I have to create the widget myself using code/xml or is there some standard xml, style, theme, code that I can use to ensure that the widget will have the same style/theme as the other home screen widgets?

I currently have the following

res/drawable/corners.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Corners">
    <stroke android:width="4dp" android:color="#CC222222"  />
    <padding android:left="4dp" android:top="1dp" android:right="4dp" android:bottom="1dp" />
    <corners android:radius="4dp" />
</shape>

res/layout/widget.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Widget"
    android:layout_width="72dip"
    android:layout_height="72dip"
    android:orientation="vertical"
    android:focusable="true"
    android:gravity="center_horizontal"
    style="@android:style/Widget"   
    >

    <ImageView
        android:id="@+id/WidgetIcon"
        android:src="@drawable/icon"
        android:layout_width="fill_parent" 
        android:layout_height="50dip"
        android:paddingTop="3dip"
        android:gravity="center"
        />

    <TextView
        android:id="@+id/WidgetLabel"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="@string/app_name"
        android:textSize="15dip"
        android:background="@drawable/corners"
        />

</LinearLayout>

The resulting widget looks some what close, but its not selectable, it doesn't get highlighted when clicked and the label isn't exactly in the correct location or the correct style.

Any ideas, if there is a correct way to do this, or should I just keep working away on the above until I am closer?

Answer 1

The "correct way to do this" is to make a shortcut, and not try to mimic it with an app widget. This has been pointed out repeatedly by the core Android team (notably Romain Guy) on the [android-developers] discussion list, such as:

Widgets should look like widgets, not like shortcuts. The main reason is that there is absolutely NO guarantee about what a shortcut will look like. Other devices (especially ones with custom system UIs like MOTOBLUR or HTC Sense) might have a different look and feel. Or in the next update of Android we might change the way shortcuts are presented.

Answer 2

To make your item consistent with the system look and feel is not hard by referencing the system attribute android:attr/selectableItemBackground. For example, if you want to make an ImageView in your widget look "selectable" with proper highlighting etc: just do

<ImageView
    ...
    android:background="?android:attr/selectableItemBackground"
    ...
    />

There are a lot in android_sdk_path/platforms/android-x. Happy digging!

EDIT: I found out later that this simple attribute does not live in SDK < v11. So the best way I know now is to download the appwidget template pack and use it.