Question

I have a simple linear layout that I would like to change based on the screen size of the device. What I am trying to do is something like

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="@string/cover_orientation"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

I have created different dimen.xml files under values and values-xlarge so that the cover_orientation variable will take on a different value (either ‘vertical’ or ‘horizontal’) based on the screen size.

string name="cover_orientation">"vertical"

But this doesn’t work. I have found a temporary work around that involves checking the screen size and changing the orientation manually:

if(getResources().getString(R.string.screen_size) == "xlarge"){
    ((LinearLayout)convertView).setOrientation(1);
}

but it seems like you should be able to do it the first way (much more elegant/less code).

I considered just having a different layout for each screen size, but the layout is actually quite big and this is the only change I need for the different screen sizes. So it didn’t make much sense to me to duplicate the entire layout.

Thanks!

Answer 1

I eventually found a solution to the problem by looking around the android docs. What I originally had was a LinearLayout, that contained an image an text inside of it (there was actually a lot more content inside of it but I’ll keep it simple for this example), that looked something like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<ImageView android:id="@+id/cover"
        android:layout_width="@dimen/cover_width"
        android:layout_height="@dimen/cover_height"/>

<TextView android:id="@+id/title"
        android:gravity="top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textSize="@dimen/title_font_size"
        android:scrollHorizontally="true"
        android:maxLines="1"
        android:ellipsize="end" />

</LinearLayout>

What I wanted was to be able to dynamically change whether the text was beside the image or below the image, based on the device screen size. In other words i wanted to dynamically change the android:orientation dynamically. My first thought, which I posted in my question, was to have a string variable declared in the res/values/dimen.xml as

<string name="orientation">horizontal</string>

and another string variable declared in res/values-large/dimen.xml as

<string name="orientation">vertical</string>

Then when I was setting the orientation in the LinearLayout I thought I could use

android:orientation="@string/orientation"

But this didn’t work. What I ended up doing was splitting the layout up. I originally had reservations about having two separate layouts because I thought I would have a lot of duplicated code for one simple change. That was before I learned about include and merge. First I created a common layout file that was the image and text in res/layout/content.xml that looked like:

<merge xmlns:android="http://schemas.android.com/apk/res/android"  >

    <ImageView android:id="@+id/cover"
            android:layout_width="@dimen/cover_width"
            android:layout_height="@dimen/cover_height"/>

    <TextView android:id="@+id/title"
            android:gravity="top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:textSize="@dimen/title_font_size"
            android:scrollHorizontally="true"
            android:maxLines="1"
            android:ellipsize="end" />
</merge>

(Sidenote: I was originally confused at what the merge tag did. It is not merging what is inside the merge tag (in this example the image and the text) it is basically saying whatever parent file includes this file, merge the contents in between the tags into the parent file)

Then I created two separate files for just the LinearLayout that included the image and description xml file. One in res/layout/container.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/library_item_container"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <include layout="@layout/content"/>

</LinearLayout>

and one in res/layout-large/container.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/library_item_container"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <include layout="@layout/library_item_contents"/>

</LinearLayout>

Notice the only difference between the two container.xml files is that the orientation has changed from vertical to horizontal. Now there is minimal code that is repeated and problem is solved!