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>

this diff is due to diff device density or diff ppi. use image with that ratio might solve ur prob.but this way u can't do it right for all set of devices. — Manmohan Badaya, Feb 25 '14 at 19:52
So what you are saying is: there will always be some Android devices that scales the UI differently from what it is supposed to no matter what you do ? In what way should you build the UI then ? *confused* — Jesper Martensson, Feb 25 '14 at 20:05
for multiple devices, take multiple layout/drawable folders set which nearly/exactly match ur device set. If their are some device that still doesn't fit ur UI then take available width or smallest width layout/drawable folder. — Manmohan Badaya, Feb 25 '14 at 20:20
One thing I forgot to mention in my answer is that in Android 3.2 and later, you can define your own buckets, so you could potentially avoid this issue, but I think you would have to create many buckets to make all devices look very similar. Info here: http://android-developers.blogspot.com/2011/07/new-tools-for-managing-screen-sizes.html — Tenfour04, Mar 10 '14 at 12:36

score 0 · Accepted Answer · answered Feb 25 '14 at 20:30

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.

Android UI scaling strange?

1 Answers1