Supporting multiple screen sizes in Android?

Question

Why my layout does not expand to fit other screens? I'm developing on the nexus 7, the layout should fix to fit the whole page but it does not. Here is my layout code:

<?xml version="1.0" encoding="utf-8"?>
<!--

-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />

        <ImageView style="@style/TitleBarSeparator"
            android:contentDescription="@string/description_title" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/title_about"
            android:onClick="onClickAbout" />
         <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_connect"
            android:src="@drawable/title_connect"
            android:onClick="onClickConnect" />
          <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_connect"
            android:src="@drawable/title_facebook"
            android:onClick="onClickFacebook" />
          <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_connect"
            android:src="@drawable/title_twitter"
            android:onClick="onClickTwitter" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">


        <!--  Main Title -->


        <TextView
            android:id="@+id/header1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/heading_1" 
            android:textSize="20sp"/>

        <TextView
            android:id="@+id/distance_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/distance"

            android:layout_below="@+id/header1"
            android:textSize="60sp" />


        <TextView
            android:id="@+id/header2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/distance_text"
            android:layout_marginLeft="210sp"
            android:text="@string/heading_2"
            android:textSize="20sp" />


        <!-- First column -->


        <TextView
            android:id="@+id/consumption_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="0dp"
            android:layout_marginTop="330dp"
            android:text="@string/heading_consumption"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/consumption_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/consumption_header"
            android:text="@string/text_consumption" />

        <TextView
            android:id="@+id/avg_consumption_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/heading_avg_consumption"
            android:layout_below="@+id/consumption_text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/avg_consumption_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/avg_consumption_header"
            android:text="@string/text_avg_consumption" />

        <TextView
            android:id="@+id/total_consumption_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/heading_total_consumption"
            android:layout_below="@+id/avg_consumption_text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/total_consumption_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/total_consumption_header"
            android:text="@string/text_total_consumption" />



        <!-- Second column -->

        <TextView
            android:id="@+id/speed_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/heading_speed"
            android:layout_marginLeft="100dp"
            android:layout_marginTop="150dp"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/speed_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text_speed"
            android:layout_marginLeft="100dp"
            android:layout_marginTop="170dp" />


        <TextView
            android:id="@+id/avg_speed_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/heading_avg_speed"
            android:layout_marginLeft="100dp"
            android:layout_below="@+id/speed_text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/avg_speed_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text_avg_speed"
            android:layout_marginLeft="100dp"
            android:layout_below="@+id/avg_speed_header" />

        <TextView
            android:id="@+id/max_speed_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/heading_maximum_speed"
            android:layout_marginLeft="100dp"
            android:layout_below="@+id/avg_speed_text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/max_speed_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="100dp"
            android:layout_below="@+id/max_speed_header"
            android:text="@string/text_maximum_speed" />
    </RelativeLayout>

</LinearLayout>

manifest file

 android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="12"
                android:targetSdkVersion="17" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
    <uses-permission android:name="android.permission.BLUETOOTH" />

    <permission
        android:name="com.example.burtoncruiser.permission.MAPS_RECEIVE"
        android:protectionLevel="signature"/>
    <uses-permission android:name="com.example.burtoncruiser.permission.MAPS_RECEIVE"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
    <!-- The following two permissions are not required to use
        Google Maps Android API v2, but are recommended. -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>  

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true"/>

<supports-screens
            android:smallScreens="true"
                android:normalScreens="true"
                android:largeScreens= "true"
                android:anyDensity="true"
                android:compatibleWidthLimitDp="120"/>

    <application 
      android:allowBackup="true"
      android:theme="@style/Theme.D1"
      android:icon="@drawable/icon" 
      android:label="@string/app_name">

      <activity android:name=".MainActivity"
                  android:label="@string/app_name">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>

      <activity android:name=".CarStatistics"
            android:theme="@style/Theme.D1"
            android:label="@string/title_feature1"
            />
      <activity android:name=".Battery"
            android:theme="@style/Theme.D1"
            android:label="@string/title_feature2"
            />
      <activity android:name=".Map"
            android:theme="@style/Theme.D1"
            android:label="@string/title_feature3"
            />
      <activity android:name=".CarControl"
            android:theme="@style/Theme.D1"
            android:label="@string/title_feature4"
            />
      <activity android:name=".Profile"
            android:theme="@style/Theme.D1"
            android:label="@string/title_feature5"
            />
      <activity android:name=".BluetoothDebugging"
            android:theme="@style/Theme.D1"
            android:label="@string/title_feature6"
            />
      <activity android:name=".AboutActivity"
            android:theme="@style/Theme.D1"
            android:label="@string/title_about"
            />
      <activity android:name=".SearchActivity"
            android:theme="@style/Theme.D1"
            android:label="@string/title_search"
            />
      <activity android:name=".DeviceListActivity"
            android:label="@string/select_device"
            android:theme="@android:style/Theme.Dialog"
            android:configChanges="orientation|keyboardHidden" />
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="AIzaSyAJstC_UQnirAU1enW1g-_xRZdHWm8prnA"/>


      </application>


</manifest>

here is a print of how it looks on the sdk and this is how it looks on the phone

Answer 1

you just don't have enough content to fit the screen. You can set the layouts gravity to center to center everything.

You could make custom layouts for phones and tablets (7" + 10") and try to reorder elements to use the real estate better

BTW: The SDK preview is set to Nexus One, which has a much much smaller screen size. That's why it looks so different in the sdk.

Read this: Supporting Multiple Screens