Question

I have developed a clock widget. Looks fine on many devices. Except Motorola Xoom since it falls under XLARGE category.

This is the clock.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#00000000"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

<AnalogClock android:id="@+id/AnalogClock" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:dial="@drawable/widgetclock" 
    android:hand_hour="@drawable/widgethour" 
    android:hand_minute="@drawable/widgetminute" /> 

    <!-- Time Row -->
    <LinearLayout
        android:id="@+id/lltimeheaderrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        
        android:orientation="horizontal"
        android:layout_gravity="center|top"
        android:layout_marginTop="45dp"
        android:visibility="gone">

        <!-- TIME -->
        <LinearLayout android:id="@+id/llTimeDefault"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

            <TextView
                android:id="@+id/HOUR"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/my_gray"
                android:textStyle="bold"
                android:textSize="15sp"/>

            <TextView
                android:id="@+id/MINUTE"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/my_gray"
                android:textStyle="bold"
                android:textSize="15sp" />
            </LinearLayout>

            <TextView
                android:id="@+id/AM_PM"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/my_gray"
                android:textStyle="bold"
                android:textSize="13sp"
                android:padding="1dp" />                        
        </LinearLayout> 
    </LinearLayout>     

    <!-- Calendar Graph -->
    <LinearLayout
        android:id="@+id/llCalGraph"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center|left"    
        android:layout_marginLeft="45dp">   
            <FrameLayout android:layout_width="fill_parent"
                android:layout_height="fill_parent">
                <ImageView
                    android:id="@+id/CalendarImg"
                    android:src="@drawable/calendar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>                      
                <TextView android:id="@+id/DateDayG"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center|top"
                    android:layout_marginTop="3dp"
                    android:textSize="11sp"
                    android:textStyle="bold"
                    android:textColor="@color/my_gray"
                    android:shadowColor="@color/my_black"
                    android:shadowDx="1"
                    android:shadowDy="1"
                    android:shadowRadius="2"                
                    ></TextView>       
                <TextView android:id="@+id/DateNoG"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="5dp"
                    android:textSize="25sp"
                    android:textColor="@color/my_gray"
                    ></TextView>    
            </FrameLayout>              

    </LinearLayout>             

    <!-- BATTERY -->
    <LinearLayout
        android:id="@+id/llBattGraph"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:layout_gravity="center|right"
        android:layout_marginRight="45dp">              
            <FrameLayout android:layout_width="fill_parent"
                android:layout_height="fill_parent">
                <ImageView
                    android:id="@+id/BatteryImg"
                    android:src="@drawable/batt_00"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <ImageView
                    android:id="@+id/BatteryFlashing"
                    android:src="@drawable/flashing"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="13dp"
                    android:layout_marginLeft="2dp"
                    android:visibility="gone" />                        
                <TextView
                    android:id="@+id/BatteryLevel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/my_gray"
                    android:textSize="18sp"
                    android:layout_gravity="center" />


            </FrameLayout>              
    </LinearLayout>                     

    <!-- Weather Row -->
    <LinearLayout
        android:id="@+id/llweatherrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        
        android:orientation="horizontal"
        android:layout_gravity="center|bottom"
        android:layout_marginBottom="45dp"> 

        <!-- WEATHER IMAGE -->
        <LinearLayout
            android:id="@+id/llWeatherImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:layout_gravity="center">

            <ImageView android:id="@+id/ivWeather"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/w3200"
                />
        </LinearLayout> 

    </LinearLayout>     

</FrameLayout>

Basically it has 4 elements on the widget. Upper, Bottom. Left and Right Part.
I simply use FrameLayout as a base Layout and each element is using LinearLayout with gravity 45dp to each corner.

This is how the widget looks on Xoom
I am expecting the elements position should be on the red circle I draw.

1. What is the best Layout combination should I use? Can you suggest?
2. Let’s say I’m sticking to this layout. How do I provide alternative layout for Xoom device? I tried to put clock.xml on layout-xlarge and on drawable-xlarge but nothing…

Answer 1

The best and neater way is to create a folder layout-xlarge and in there include the clock.xml that will be loaded when the target device has a xlarge layout.

In that way you can make different layouts according to the screen size, density etc. Got from the developer docs http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts

Another solution is to have all your sizes that are in a certain 45dp or Xdp into the values folder in a file named dimen and then declare them in your xml as: ...="@dimen/largeButton" and with the same way as mentioned before create a corresponding values-xlarge and add the appropriate dimen file in it.

This is very useful mechanisms because you can create different layouts according to the size of the screen and enable it to obtain different density pixels per size. If you haven’t heard any of these terms ask me to provide more details.

EDIT: from the docs

res/layout/my_layout.xml             // layout for normal screen size ("default")

res/layout-small/my_layout.xml       // layout for small screen size

res/layout-large/my_layout.xml       // layout for large screen size

res/layout-xlarge/my_layout.xml      // layout for extra large screen size

res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

Are you sure exactly this kind of directories? With the same filename as the layout like clock.xml everywhere?

ANOTHER EDIT to comment:

It is much more efficient because the transition in replacing just numbers rather than loading a full layout folder is much more efficient as you can guess. Despite that, you can reuse dimensions and not going back and forth among layouts to check “what was that dimension again?” like in a fix dimension of a big button.

And something more critical, each folder can be extended for a specific reason. If you want the same layout but different dimensions then you should override dimensions not copy-paste the whole layout. Makes more sense, doesn’t it?

And for the effort is pretty much the same thing. Like layout-large/ folder you will have values-large/. There is a very good example in the documents I have provided and across the internet.