Android: Optimize Design for different Screen Sizes

Question

I designed a .xml file, with a relative Layout where the distance between the elements is definied by the use of "dp". I thought this would work well, until I got a new Smartphone, with a much bigger screen than my old one had. At the Top there is a TextView which should use 12% of the screen, than there is a ScrollView which should use 84% of the screen, and the last 4% should be empty.

This is the .xml file:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.96"
android:background="@drawable/hintergrund"
android:orientation="vertical" >

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="35dp"
    android:layout_marginTop="17dp"
    android:text="Prüfung"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#000000" />

<ScrollView 
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="437dp" 
    android:layout_marginTop="58dp">

<LinearLayout 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" > 
<TextView
    android:id="@+id/textView5"
    android:layout_width="293dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:textColor="#000000"
    android:textSize="16dp" />

<TableLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:layout_gravity="center_horizontal"
    >
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >
        <TextView
            android:layout_height="wrap_content"
            android:text="@string/sf"
            android:textColor="#000000" />
    </TableRow>
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >
        <Spinner 
            android:id="@+id/spinner1"
            android:text="@string/sf"
            android:prompt="@string/sf"
            android:drawSelectorOnTop="true"
            />
    </TableRow>
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >
        <TextView
            android:layout_height="wrap_content"
            android:text="@string/odf"
            android:textColor="#000000" />
    </TableRow>
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >
        <Spinner 
            android:id="@+id/spinner2"
            android:layout_width="237dp"
            android:text="@string/odf"
            android:prompt="@string/odf"
            android:drawSelectorOnTop="true"
            />
    </TableRow>
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >
        <TextView
            android:layout_height="wrap_content"
            android:text="@string/ps"
            android:textColor="#000000" />
    </TableRow>
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >
        <Spinner 
            android:id="@+id/spinner3"
            android:text="@string/ps"
            android:prompt="@string/ps"
            android:drawSelectorOnTop="true"
            />
    </TableRow>
</TableLayout>
<ProgressBar
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="109dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    android:id="@+id/progressBar1" />
<TextView
    android:id="@+id/textView14"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:layout_gravity="center_horizontal"
    android:textSize="12sp" />

<TableLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_gravity="center_horizontal"
    >
    <TableRow 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >
        <Button 
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Vorherige" /> 

        <Button 
            android:id="@+id/btn6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nächste" /> 
    </TableRow>
</TableLayout>  
</LinearLayout>
</ScrollView>

</RelativeLayout>

Answer 1

I changed your RelativeLayout with LinearLayout and i set weightSum to LinearLayout as 100. Last step is share it for its child as you want:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="100"
android:background="@drawable/hintergrund"
android:orientation="vertical" >

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginLeft="35dp"
    android:layout_marginTop="17dp"
    android:text="Prüfung"
    android:layout_weight="12"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#000000" />

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
       android:layout_weight="84"
    android:layout_marginTop="58dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView5"
            android:layout_width="293dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="#000000"
            android:textSize="16dp" />

        <TableLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="30dp" >

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" >

                <TextView
                    android:layout_height="wrap_content"
                    android:text="@string/sf"
                    android:textColor="#000000" />
            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" >

                <Spinner
                    android:id="@+id/spinner1"
                    android:drawSelectorOnTop="true"
                    android:prompt="@string/sf"
                    android:text="@string/sf" />
            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" >

                <TextView
                    android:layout_height="wrap_content"
                    android:text="@string/odf"
                    android:textColor="#000000" />
            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" >

                <Spinner
                    android:id="@+id/spinner2"
                    android:layout_width="237dp"
                    android:drawSelectorOnTop="true"
                    android:prompt="@string/odf"
                    android:text="@string/odf" />
            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" >

                <TextView
                    android:layout_height="wrap_content"
                    android:text="@string/ps"
                    android:textColor="#000000" />
            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" >

                <Spinner
                    android:id="@+id/spinner3"
                    android:drawSelectorOnTop="true"
                    android:prompt="@string/ps"
                    android:text="@string/ps" />
            </TableRow>
        </TableLayout>

        <ProgressBar
            android:id="@+id/progressBar1"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="109dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="30dp" />

        <TextView
            android:id="@+id/textView14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="#000000"
            android:textSize="12sp" />

        <TableLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="20dp" >

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" >

                <Button
                    android:id="@+id/btn5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Vorherige" />

                <Button
                    android:id="@+id/btn6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Nächste" />
            </TableRow>
        </TableLayout>
    </LinearLayout>
</ScrollView>

Answer 2

Using this textview as an example

<TextView
android:id="@+id/textView5"
android:layout_width="293dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#000000"
android:textSize="16dp" />

the problem is you have hard width's ie. android:layout_width="293dp"

instead it should read android:layout_width="match_parent"

then add a margin to the right or where ever: android:layout_marginLeft="20dp"

so this will make the width of you textview go all the way to the other side of the screen but indent the right margin 20dp so you would see the space you want