How to deal with Android XLarge screen?

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...

Superintendency

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.

Polyamide

layout-xlarge does not work the xml inside this folder never gets loaded. Why? – Superintendency

Sorry my mistakes it should be layout-large. Btw, how come 800x1280 with 149 dpi is LARGE not XLARGE. According to developer.android.com/guide/practices/… 1280x800(WXGA) with 160dpi is considered XLARGE – Superintendency

I have edited my answer for future use and to cover any detail. I don't know the specifications of each phone but in the docs that I have provided there are full details on every screen width and screen density that you can find available in the market and what you need to add to customize it. Although the new layout-xxx/ folder is a very easy way to provide a new layout please check in more detail the @dimen solution I mentioned, is much more efficient and you should not have ...=45dp. Just a suggestion... :) – Polyamide

Yes, I'm gonna try the dimen solution too. But it would be the same effort right? I.E. providing 2 or more layouts / values dimen according to each screen size. In what way dimen solution would be more efficient? Anyway can you tell me more about Xdp? I never heard about it. – Superintendency

no you got it wrong. Xdp is just a factor, like X equals to any number you want, just to provide an example. Check my updated answer. – Polyamide

Oh ok I got it. So using dimen is like a styling. It is more manageable. Yet still we need to provide multiple dimens values for multiple screen sizes. Ok this is feasible solution for this moment. In future, I will try to figure out solution no 1 (combination of Layout) that hopefully can "stretch" to multiple devices with just 1 layout. Thanks. – Superintendency