Layout screwed up on bigger screen sizes, not taking advantage of the extra space?

Question

Nearly finished with my app and I hit a huge bug. As the title says; I have just tested my app on a Galaxy Nexus. A bigger screen than what I've been testing my app on so far. A Desire HD. The app looks fine on the DesireHD and really bad on the GNexus.

Here is what I mean: Desire HD screenshot and the GNexus screenshot

I've created images for each folder -hdpi -xhdpi etc. I followed the 3:4:6:8 ratio from the dev guide to create them correctly. It's definitely taking the images from xhdpi as it should. I can tell this because the aboutus and feedback ImageViews change design.

Everything there is an ImageView, I should mention that. I don't know why they are not showing up correctly. I tried creating a main.xml in layout-xlarge and afterwards in layout-sw360dp but neither fixed the issue. Things look really out of place. Considering it's picking up the xhdpi images I don't know why they won't scale correctly. I will post my XML if need be. I've gone back to only having a res-layout folder since it seems to make no difference.

Might as well just add my XML now: Here we go, http://pastebin.com/PkzSDxxw - I've colour coded it with the screenshots above.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:fillViewport="true"
   android:background="@color/mainback">

    <!-- Title contains application info and content starts immediately below. -->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
    <!-- red -->
    <ImageView
       android:id="@+id/ColourTitle"
       android:layout_height="wrap_content"
       android:layout_width="fill_parent"
       android:src="@drawable/main_colourtitle"
       android:contentDescription="@string/ContentDescColourTitle"/>
    <!-- blue -->          
    <ImageView
       android:id="@+id/PastSeason"
       android:layout_height="wrap_content"
       android:layout_width="fill_parent"
       android:layout_below="@id/ColourTitle"
       android:contentDescription="@string/ContentDescHistory"
       android:layout_marginBottom="12dp"
       android:layout_marginTop="12dp"
       android:onClick="PastSeason"
       android:src="@drawable/main_history"/>
    <!-- green first row -->
                                <LinearLayout
                                    android:id="@+id/DriveCurrent"
                                    android:layout_height="wrap_content"
                                    android:layout_width="match_parent"
                                    android:layout_below="@id/PastSeason"
                                    android:gravity="center"
                                    android:layout_marginTop="7dp">

                                        <ImageView
                                                android:id="@+id/Drivers"
                                                android:layout_height="wrap_content"
                                                android:layout_width="wrap_content"
                                                android:onClick="F1Drivers"
                                                android:src="@drawable/main_driver"
                                                android:contentDescription="@string/ContentDescDriver"
                                                android:layout_marginRight="30dp"/>

                                        <ImageView
                                                android:id="@+id/CurrentF1"
                                                android:layout_height="wrap_content"
                                                android:layout_width="wrap_content"
                                                android:onClick="CurrentSeason"
                                                android:src="@drawable/main_currentseason"
                                                android:contentDescription="@string/ContentDescCurrentF1"
                                                android:layout_marginLeft="15dp"/>

                                </LinearLayout>  
   <!-- green 2nd line -->
                                <LinearLayout
                                    android:layout_below="@id/DriveCurrent"
                                    android:layout_height="wrap_content"
                                    android:layout_width="match_parent"
                                    android:gravity="center"
                                    android:layout_marginTop="10dp"
                                    android:id="@+id/TeamDriverRecord">

                                            <ImageView
                                                android:layout_height="wrap_content"
                                                android:layout_width="wrap_content"
                                                android:src="@drawable/main_driver_record"
                                                android:contentDescription="@string/ContentDescDriverRecord"
                                                android:layout_marginRight="30dp"
                                                android:onClick="DriverRecord"/>

                                            <ImageView
                                                android:id="@+id/teamrecord"
                                                android:layout_height="wrap_content"
                                                android:layout_width="wrap_content"
                                                android:src="@drawable/main_team_record"
                                                android:contentDescription="@string/ContentDescTeamRecord"
                                                android:layout_marginLeft="15dp"
                                                android:onClick="TeamRecord"/>

                                </LinearLayout>

        <!-- faq aboutus feedback -->                  
                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentBottom="true"
                                    android:layout_below="@id/TeamDriverRecord">       

                                        <ImageView
                                                android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:src="@drawable/main_faq"
                                        android:contentDescription="@string/ContentDescFAQ"
                                        android:onClick="FAQPage">
                                        </ImageView>

                                        <ImageView
                                                android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:src="@drawable/main_feedback"
                                        android:contentDescription="@string/ContentDescFeedback"
                                        android:onClick="FeedbackPage">
                                        </ImageView>

                                        <ImageView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:contentDescription="@string/ContentDescAboutUs"
                                            android:src="@drawable/main_aboutus"
                                            android:onClick="AboutUs">
                                        </ImageView>                               
                                </LinearLayout>

</RelativeLayout>

</ScrollView>

I could really do with some help, this is driving me nuts, I thought I had it all covered. :( Thanks.

EDIT: In Eclipse when selecting different screen sizes in the "Graphically Layout" tab next to the XML coding it doesn't scale the images properly for any screen that is bigger than 4inches. If I select the Nexus S is shows it scaling fine. The next up is the GNexus, and onwards you get the same problem. The ImageViews don't scale up to meet the bigger screensize.

Answer 1

RelativeLayouts can be tricky to work with at times, sometimes it can be as subtle as reversing the operations (for example, A above B is not always the same as B below A). I'd recommend the following:

Set the following properties on each child (red, blue, and the three LinearLayouts)

android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"

in order to get them to scale up to fill the screen.

For each of the green ImageViews, put android:gravity="center" in order to get each green square to be in the middle of it's available space - this should ensure as consistent a spacing as possible.

In green 2nd line LinearLayout, put

android:layout_above="@+id/TeamDriverRecord"

and remove the following from the FAQ/about us/feedback lines

android:layout_below="@id/TeamDriverRecord"

The reason for this is that it's laying out the green 2nd line first, then putting the FAQ/other stuff line in all the space below that, overriding the height=wrap_content in the process - that's why that line is appearing higher on the larger screen instead of properly snapping to the bottom. You could also address that by adding android:layout_alignParentBottom="true" to each child of the FAQ LinearLayout.