Why different android versions display different GUI?

Question

Please have a look at the following code

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFF"
    android:gravity="right"
    android:padding="5dp"
    android:paddingBottom="5dp"
    android:stretchColumns="1,2,3"
    tools:context=".MainActivity" >

    <TableRow
        android:id="@+id/tableRow0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/billTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:padding="5dp"
            android:text="@string/billTextView"
            android:textColor="#000" />

        <EditText
            android:id="@+id/billEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:layout_weight="1"
            android:inputType="numberDecimal"
            android:longClickable="false" >

            <requestFocus />
        </EditText>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tenTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_weight="1"
            android:gravity="center"
            android:text="10%"
            android:textColor="#000" />

        <TextView
            android:id="@+id/fifteenTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="15%"
            android:textColor="#000" />

        <TextView
            android:id="@+id/twentyTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="20%"
            android:textColor="#000" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tipTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:padding="5dp"
            android:text="@string/tipTxtView"
            android:textColor="#000" />

        <EditText
            android:id="@+id/tip10EditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:cursorVisible="false"
            android:focusable="false"
            android:gravity="center"
            android:longClickable="false"
            android:textSize="14sp" />

        <EditText
            android:id="@+id/tip15EditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:cursorVisible="false"
            android:focusable="false"
            android:gravity="center"
            android:longClickable="false"
            android:textSize="14sp" />

        <EditText
            android:id="@+id/tip20EditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:cursorVisible="false"
            android:focusable="false"
            android:gravity="center"
            android:longClickable="false"
            android:textSize="14sp" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/totalTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:padding="5dp"
            android:text="@string/totalTextView"
            android:textColor="#000" />

        <EditText
            android:id="@+id/total10EditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:cursorVisible="false"
            android:focusable="false"
            android:gravity="center"
            android:longClickable="false"
            android:textSize="14sp" />

        <EditText
            android:id="@+id/total15EditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:cursorVisible="false"
            android:focusable="false"
            android:gravity="center"
            android:longClickable="false"
            android:textSize="14sp" />

        <EditText
            android:id="@+id/total20EditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:cursorVisible="false"
            android:focusable="false"
            android:gravity="center"
            android:longClickable="false"
            android:textSize="14sp" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/customTextView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="right|center_vertical"
            android:padding="5dp"
            android:text="@string/customTextView"
            android:textColor="#000" />

        <SeekBar
            android:id="@+id/customSeekBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_weight="1"
            android:focusable="false"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:progress="18" />

        <TextView
            android:id="@+id/customTipTextView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:paddingLeft="5dp"
            android:text="a"
            android:textColor="#000" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tipCustomTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:padding="5dp"
            android:text="@string/tipCustomTextView"
            android:textColor="#000" />

        <EditText
            android:id="@+id/tipCustomEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:cursorVisible="false"
            android:focusable="false"
            android:gravity="center"
            android:longClickable="false"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/totalCustomTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center|right"
            android:padding="5dp"
            android:text="@string/totalCustomTextView"
            android:textColor="#000" />

        <EditText
            android:id="@+id/totalCustomEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:cursorVisible="false"
            android:focusable="false"
            android:gravity="center"
            android:longClickable="false"
            android:textSize="14sp" />
    </TableRow>

</TableLayout>

The project is created using Android Version 3.2.

This is how it get displayed in Galaxy Nexus, which is set to Android version 2.3.3

This is how it get displayed in Galaxy Nexus, which is set to Android version 3.2

As you can see, in that new version one, the GUI is bit upset. It seems like the components are overlapping. That is why it doesn't show the borders of the components. Please help!

Answer 1

Yep, this is normal. The visual appearance of Android has been greatly polished with Android 4.0. It has nothing to do with your code directly. Android does this automatically.

If you want all your users to see the old style, you can set down the targetVersion within the <uses-sdk> tag of your manifest file. However, I discourage you from doing this.