1

I created an android app that looks perfect on large screens. But the view gets distorted or in other terms the upper and bottom parts get cut off on smaller screens. I used sp and dp interchangably without me knowing they are different, if not same. I used sp for fonts and dp for dimensions as a rule. But this didn't work. What is the difference between sp and dp and when to use what? Thanks in advance. The xml layout file is

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tempLabel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CC66FF"
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="com.example.coolweather.MainActivity" >

<TextView
    android:id="@+id/actualTemp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/hundred"
    android:textColor="#FFFFFF"
    android:textSize="150sp" />

<ImageView
    android:id="@+id/degreeImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/actualTemp"
    android:layout_toRightOf="@+id/actualTemp"
    android:paddingTop="50dp"
    android:src="@drawable/degree" />

<ImageView
    android:id="@+id/imageIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/cityLabel"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="55dp"
    android:src="@drawable/cloudy" />

<TextView
    android:id="@+id/summary"
    android:textSize="19sp"
    android:textColor="#FFFFFF"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/linearLayout1"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="38dp"
    android:text="Pleasant cool day with flowers!" />

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/degreeImageView"
    android:layout_below="@+id/actualTemp"
    android:layout_marginTop="15dp"
    android:orientation="horizontal"
    android:weightSum="2" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:paddingLeft="15dp" >

        <TextView
            android:id="@+id/humidityLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Humidity"
            android:textColor="#FFFFFF"
            android:textSize="17sp" />

        <TextView
            android:id="@+id/humidity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="80%"
            android:textColor="#FFFFFF"
            android:textSize="17sp" />
    </LinearLayout>

    <LinearLayout
         android:paddingLeft="15dp"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/precLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Rain/Snow"
            android:textColor="#FFFFFF"
            android:textSize="17sp" />

        <TextView
            android:id="@+id/prcip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="100%"
            android:textColor="#FFFFFF"
            android:textSize="17sp" />
    </LinearLayout>
</LinearLayout>

<TextView
    android:id="@+id/timeLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/actualTemp"
    android:layout_centerHorizontal="true"
    android:text="At 5:00pm it will be"
    android:textColor="#80FFFFFF"
    android:textSize="20sp" />

<TextView
    android:id="@+id/cityLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/timeLabel"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="37dp"
    android:text="Roorkee"
    android:textColor="#FFFFFF"
    android:textSize="22sp"
    android:layout_marginLeft="10dp" />

<ProgressBar
   android:layout_marginBottom="15dp"
    android:id="@+id/progressBar1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/imageIcon"
    android:layout_centerHorizontal="true" />

<ImageView
    android:id="@+id/refreshImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/progressBar1"
    android:layout_centerHorizontal="true"
    android:src="@drawable/refresh" />

Stephane Mathis
  • 6,542
  • 6
  • 43
  • 69
Nagabhushan Baddi
  • 1,164
  • 10
  • 18
  • 1
    possible duplicate of [Difference between px, dp, dip and sp in Android?](http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android) – Shayan Pourvatan Feb 09 '15 at 17:13
  • `dp` is used for general layout, `sp` is used for fonts. – jyoonPro Feb 09 '15 at 17:13
  • `sp` or "scalable pixels" are used for text. `dp` or "density independent pixels" are used for layouting. – Xaver Kapeller Feb 09 '15 at 17:14
  • @shayanpourvatan I needed answer to my layout problem. please comment according to the question. – Nagabhushan Baddi Feb 09 '15 at 17:45
  • why have you given `textSize` **150sp** in textview `id=actualTemp`? Maybe its the reason because your layout is not scrollable and you have given very big font size – Apurva Feb 09 '15 at 18:06
  • This I have done by purpose... but my doubt is if the layout appears properly on large screens then why not it appears properly in small screens.. Is there a way to universalize the layout view which would fit properly in all screens..... – Nagabhushan Baddi Feb 09 '15 at 18:39
  • If you have other question about other topics, please create a new question instead of editing the content of this one. – Stephane Mathis Mar 15 '15 at 14:32

3 Answers3

4

Android recommends to use sp when you are setting font size and dp for everything else like width, length, height, margin, padding

Apurva
  • 7,871
  • 7
  • 40
  • 59
0

You can use both of them for anything : heights, margins, font size, etc.

The difference is that dp is a fixed unit and sp will be scaled according to the phone font size settings.

Stephane Mathis
  • 6,542
  • 6
  • 43
  • 69
0

sp is the recommended unit for font sizes because a user may enable low-visibility settings to increase font sizes on the device.

dp is a physical unit of measurement to translate screen resolution into a real world size. dp is calculated as resolution / density, where density is 1.0 for an mdpi screen (160dpi) and scaled accordingly based on dpi (ie. an xxhdpi screen of 480 dpi will have a density of 3.0). dp is used for all other physical elements that you wish to take up a fixed, real world size.

You need to post your layout code for us to figure out why it is getting cut off on smaller screens rather than larger ones. It is most likely because you are defining a fixed layout height/width (ie. 600 dp) which will appear fine on a tablet (which generally have minimum widths of at least 600 dp) but most phones in portrait mode will have a width of 360 dp.

ekchang
  • 939
  • 5
  • 11