XML Layout on Sony Smartwatch

Question

I am having issues getting a proper layout on the 128x128 smartwatch screen.

This is an interesting issue because the layout on the watch is clearly inheriting the screen density from the device it's running on. So when ran on the tablet vs the handset the layout elements on the watch are sized completely different.

I'm basing my layout on one of the sample projects in the smart extensions SDK.

With this xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/smart_watch_control_width"
    android:layout_height="@dimen/smart_watch_control_height"
    android:id="@+id/rlayout"
>

    <Button
        android:id="@+id/imageViewUp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:tag="button"
        android:background="@drawable/up_selector" />
    ...more Buttons
</RelativeLayout>

Initializing the layout, SmartView is just an extended LinearLayout

private LinearLayout createLayout() {
    mSmartView = new SmartView(mContext);
    mSmartView.setLayoutParams(new LayoutParams(WIDTH, HEIGHT));

    LinearLayout sampleLayout = (LinearLayout) LinearLayout.inflate(
            mContext, R.layout.xbmc, mSmartView);

    sampleLayout.measure(WIDTH, HEIGHT);

    Log.i(TAG, "layout width: " + sampleLayout.getMeasuredWidth()
            + " height: " + sampleLayout.getMeasuredHeight());

    sampleLayout.layout(0, 0, sampleLayout.getMeasuredWidth(),
            sampleLayout.getMeasuredHeight());

    return sampleLayout;
}

The result of createLayout is stored in mLayout and then drawn using:

Bitmap bitmap = Bitmap.createBitmap(128, 128, BITMAP_CONFIG);

// Set default density to avoid scaling.
bitmap.setDensity(DisplayMetrics.DENSITY_DEFAULT);

Canvas canvas = new Canvas(bitmap);
mLayout.draw(canvas);

showBitmap(bitmap);

With the XML above, on my handset I get this:

On the tablet it looks like this:

Also, if I hard code my XML to use the exact pixel values of the image it looks like the tablet version. The arrow images are 44px, the center one is slightly larger.

It feels like I need a way to set the density of the device programatically to force it to the density of the watch. How do I make the layout look correct on the watch? I would prefer a solution where I can avoid hard-coding the pixel values since it's not how we do things on Android.

Answer 1

Try storing your drawables in the res/drawable-nodpi folder, that should stop Android from applying density.

This is e.g. done in the 8 puzzle game that is available here.