Android UI scaling strange?

Question

The UI in our app does not scale properly in different phones. The screenshots below are from Samsung 2 and Xperia Z1 Compact. Both phones are using medium sized screens so thereby I thought the black navigation-bar introduced since API 14 caused the scaling problem. I added the following code to my project but the outcome was still the same:

mMainView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);//sets the layout as if the navigation bar is hidden (even if it’s not)

mMainView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);//help your app maintain a stable layout. 

= Xperia Z1 Compact

= Samsung 2

As you can see in screen captures the height is not what it is supposed to be in Xperia (We want the UI to scale as it does in Samsung 2). The text is smaller in Xperia, our logo is smaller (mostly on the height) and so on. It seems like the Xperia UI has a wider width or? What may cause this if it is not the navigation bar? I will post the XML-file aswell even if I am 99% sure there is nothing wrong with it:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="4sp"
android:paddingLeft="35dp"
android:paddingRight="35dp"
android:weightSum="1.0" >

<ViewSwitcher
    android:id="@+id/landing_search_switcher_banner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inAnimation="@anim/fadein"
    android:outAnimation="@anim/fadeout" >

    <ImageView
        android:id="@+id/landing_search_image_banner_license"
        android:layout_width="wrap_content"
        android:layout_height="230dp"
        android:layout_gravity="center"
        android:layout_marginTop="1sp"
        android:contentDescription="@string/ContentDescriptionLogo"
        android:gravity="center"
        android:scaleType="fitCenter"
        android:src="@drawable/app" />

    <ImageView android:id="@+id/landing_search_image_banner" 
        android:layout_width="wrap_content" 
        android:layout_height="230dp" 
        android:layout_marginTop="1sp" 
        android:contentDescription="@string/ContentDescriptionLogo" 
        android:gravity="center" 
        android:layout_gravity="center"
        android:scaleType="centerInside" 
        android:src="@drawable/app"/>
</ViewSwitcher>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="1dp"
    android:orientation="horizontal"
    android:weightSum="1.0" >

    <EditText
        android:id="@+id/landing_search_field"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="0.75"
        android:background="@android:drawable/edit_text"
        android:digits="/0123456789.abcdefghijklmnopqrstuvwxyz"
        android:gravity="left|center"
        android:hint="xlarge res"
        android:inputType="number"
        android:maxLines="1" 
        android:textSize="35sp"/>

    <ImageButton
        android:id="@+id/landing_search_button"
        android:layout_width="0dip"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:layout_weight="0.25"
        android:background="@android:drawable/btn_default"
        android:contentDescription="@string/ContentDescriptionSearchButton"
        android:scaleType="center"
        android:src="@drawable/ic_button_search" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2sp"
    android:layout_marginRight="4sp"
    android:layout_marginTop="6sp"
    android:background="#ffffff"
    android:orientation="vertical" >

    <LinearLayout style="@style/BarTitleStyle"
        android:layout_height="58dp"
         android:layout_width="fill_parent"
          >

        <TextView
            android:id="@+id/landing_search_list_topbar_label"
            style="@style/TitleTextStyle"
            android:text="@string/LabelInformation"
            android:textSize="32sp"
             >
        </TextView>

        <include layout="@layout/menu_button" 

            />
    </LinearLayout>

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

        <ListView
            android:id="@+id/landing_search_list"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.9"
            android:background="@color/white"
            android:cacheColorHint="@color/white"
            android:gravity="left"
            android:isScrollContainer="false"
            android:visibility="gone" />

        <LinearLayout
            android:id="@+id/landing_search_search_information_section"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_weight="0.9"
            android:orientation="vertical"
            android:paddingBottom="9sp"
            android:visibility="visible" >

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:orientation="vertical"
                android:weightSum="1.0" >

                 <TextView
                android:id="@+id/landing_search_current_book_label"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="-9.5dp"
                android:gravity="center|bottom"
                android:text="@string/LabelCurrentBook"
                android:textColor="#515151"
                android:textSize="39sp"
                android:textStyle="bold" />


                <Button
                    android:id="@+id/landing_search_button_book"
                    android:layout_width="wrap_content"
                    android:layout_height="80dp"
                    android:layout_gravity="center|top"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:minWidth="170sp"
                    android:textSize="39.5sp"
                    android:scrollHorizontally="true"
                    android:singleLine="true"
                    android:background="@null"
                    android:text="@string/ButtonLabelChooseBook"
                    android:textColor="#1453DB" />

                <Button
                    android:id="@+id/landing_search_button_school"
                    android:layout_width="wrap_content"
                    android:layout_height="92sp"
                    android:layout_gravity="center|top"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:minWidth="170sp"
                    android:scrollHorizontally="true"
                    android:singleLine="true"
                    android:text="@string/ButtonLabelChooseSchool"
                    android:textColor="#1453DB"
                    android:visibility="gone" />
            </LinearLayout>


            <!--
            <Button
                android:id="@+id/landing_search_choose_book_button"
                android:layout_width="wrap_content"
                android:layout_height="18.5dp"
                android:layout_gravity="center|top"
                android:autoLink="web"
                android:background="@null"
                android:gravity="center|top"
                android:text="@string/ButtonLabelChooseBook"
                android:textColor="#5c5cff"
                android:textSize="14sp" >
            </Button>
            -->

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="3sp"
                android:layout_marginTop="-5.5sp"
                android:gravity="center"
                android:text="@string/LabelNoSearchResult"
                android:textColor="#7f7f7f"
                android:textSize="28.5sp" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="6.5sp"
                android:gravity="center"
                android:text="@string/LabelNoSearchResult2"
                android:textColor="#515151"
                android:textSize="28.5sp"
                android:layout_marginBottom="7.5dp" >
            </TextView>

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:autoLink="email"
                android:gravity="center"
                android:text="@string/LabelContactEmail"
                android:textColor="#1453DB"
                android:textColorLink="#1453DB"
                android:textSize="32.5sp"
                android:layout_marginBottom="7.5dp" >
            </TextView>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

<Button
    android:id="@+id/landing_search_button_buy"
    android:layout_width="420dp"
    android:layout_height="130dp"
    android:layout_gravity="center"
    android:layout_marginTop="9dp"
    android:background="@drawable/button_buy"
    android:contentDescription="@string/ButtonLabelSubscribe"
    android:gravity="center"
    android:paddingBottom="0sp"
    android:textColor="#515151"
    android:textSize="14.5sp"
    android:textStyle="bold" >
</Button>
<Button
    android:id="@+id/landing_search_premium"
    android:layout_width="825sp"
    android:layout_height="220sp"
    android:layout_gravity="center"
    android:layout_marginTop="-12dp"
    android:background="@drawable/premium_logo"
    android:gravity="center"
    android:paddingBottom="0sp"
    android:textColor="#515151"
    android:textSize="14.5sp"
    android:textStyle="bold" >
</Button>

</LinearLayout>

Answer 1

These two devices may not have exactly the same width in DP units.

Assuming you are talking about the Galaxy S2:

They both have approximately the same size screen. However, the S2 is 217ppi, which is toward the low end of the hdpi bucket, while the Xperia is 342ppi, which is toward the high end of the xhdpi bucket. It is because of where they fall within their own density buckets that they scale somewhat differently, and there's not much you can do about this.

DP and SP units only ensure that your elements are approximately the same size on all devices.

Think about older versions of Windows you may have used, where apps ignored dpi of the monitor. If you used a monitor with a higher dpi, you simply saw smaller text. This is like all monitors were in the same dpi bucket.

Android's multiple dpi buckets help support a much wider range of screen densities, but you still get the same effect as you do in Windows when comparing devices that are at different ends of their respective dpi buckets.

iOS doesn't have this problem because each "bucket" corresponds with exactly one dpi, not a range of dpi.