Android form elements have different sizes on different emulators

Question

Update #1

I observed that setting <item name="android:textSize">14sp</item> as 20sp in /res/values/styles.xml will cause the input elements to appear normally on devices smaller than 5". It seems that reducing the text size did not reduce the size of the input box. Is this supposed to be normal?

TLDR version

Hi there,

I am facing a problem with the size of input elements in my Android project. The input elements appear larger on devices that are < 5" in size, but appear otherwise normal on my larger devices.

The below screenshots illustrate this. Any idea what could be the cause?

Detailed version

Hi there,

I am currently facing an odd problem with the size of my form elements in my Android project across different emulators. As this is the first time I am creating a mobile application, please feel free to enlighten me if this is a "feature", rather than a bug.

On the Nexus 7 layout preview, the form elements appear as I expected:

However, on the Galaxy Nexus layout preview, the form elements appear larger than expected, which is not desirable:

I have tried many methods, but have been unable to resolve this problem. This problem occurs on all devices that are less than 5" in screen size.

Here is my layout XML file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/register_link"
        style="@style/FormFont.Label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="3dp"
        android:clickable="true"
        android:onClick="onClickRegisterLink"
        android:text="@string/register_link_text" />

    <RelativeLayout
        android:id="@+id/layout_layout_form"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_above="@+id/register_link"
        android:gravity="center" >

        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/layout_form"
            android:layout_alignRight="@+id/layout_form"
            android:layout_marginBottom="50dp"
            android:contentDescription="@string/logo_description"
            android:src="@drawable/logo" />

        <RelativeLayout
            android:id="@+id/layout_form"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/logo"
            android:gravity="center" >

            <TextView
                android:id="@+id/label_username"
                style="@style/FormFont.Label"
                android:layout_alignBottom="@+id/input_username"
                android:layout_alignLeft="@+id/label_password"
                android:layout_alignRight="@+id/label_password"
                android:layout_alignTop="@+id/input_username"
                android:layout_toLeftOf="@+id/input_username"
                android:gravity="right"
                android:text="@string/label_username" />

            <TextView
                android:id="@+id/label_password"
                style="@style/FormFont.Label"
                android:layout_alignBottom="@+id/input_password"
                android:layout_alignTop="@+id/input_password"
                android:layout_below="@+id/label_username"
                android:layout_marginRight="50dp"
                android:layout_toLeftOf="@+id/input_password"
                android:gravity="right"
                android:text="@string/label_passphrase" />

            <EditText
                android:id="@+id/input_username"
                style="@style/FormFont.Input"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:inputType="text" />

            <EditText
                android:id="@+id/input_password"
                style="@style/FormFont.Input"
                android:layout_alignLeft="@+id/input_username"
                android:layout_alignRight="@+id/input_username"
                android:layout_below="@+id/input_username"
                android:layout_marginTop="30dp"
                android:inputType="textPassword" />

            <Button
                android:id="@+id/button_login"
                style="@style/FormFont.Label"
                android:layout_alignLeft="@+id/input_password"
                android:layout_alignRight="@+id/input_password"
                android:layout_below="@+id/input_password"
                android:layout_marginTop="35dp"
                android:gravity="center"
                android:text="@string/button_login" />
        </RelativeLayout>

    </RelativeLayout>

</RelativeLayout>

My /res/values/styles.xml:

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

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

    <style name="FormFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:textSize">14sp</item>
    </style>

    <style name="FormFont.Label">
    </style>

    <style name="FormFont.Input">
        <item name="android:ems">12</item>
    </style>

</resources>

My /res/values-large/styles.xml:

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    
    <style name="FormFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="FormFont.Label">
    </style>

    <style name="FormFont.Input">
        <item name="android:ems">12</item>
    </style>

</resources>

Please let me know if you have encountered this before and have an idea of what could be the cause :) Thank you very much!

Answer 1

I resolved this problem by specifing a different value for the property android:layout_height in /res/values-xlarge/styles.xml, /res/values-large/styles.xml, /res/values/styles.xml, /res/values-small/styles.xml.

This allowed me to control the exact height of each input field in Android devices of different sizes.