Dp unit does not scale layouts in different screens

Question

After reading this (http://developer.android.com/guide/practices/screens_support.html), I have developed an entire app using the dp unit inside the xml files. However, when I test the app in different screens, the layouts are either too big or too small.

I thought the dp unit would fix that for me. Why didn't it? I do not want to use the weight attribute since everything is already done.

One xml layout:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:src="@drawable/logo3"
    android:scaleType="centerCrop"

    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/select_level"
    android:textColor="#4cb122"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:textSize="20dp"
    android:layout_marginTop="20dp"
    />

<Button
    android:background="@drawable/red_button"
    android:layout_width="200dp"
    android:layout_height="55dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="25dp"
    android:text="@string/easy"
    android:textSize="15dp"
    android:onClick="playEasy"
    style="custom_button"
    />

<Button
    android:background="@drawable/green_button"
    android:layout_width="200dp"
    android:layout_height="55dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:text="@string/medium"
    android:textSize="15dp"
    android:onClick="playMedium"
    style="custom_button"
    />

<Button
    android:background="@drawable/blue_button"
    android:layout_width="200dp"
    android:layout_height="55dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:textSize="15dp"
    android:text="@string/unbeatable"
    android:onClick="playUnbeatable"
    style="custom_button"
    />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:layout_marginTop="113dp"
    android:textSize="15dp"
    android:textColor="@color/secondTextColor"
    android:text="@string/developed_by"
    />

What could I do? Thanks!

Answer 1

Using dp for dimensions is not a truly one size fits all solution for this problem.

Note that you should use layout weight when possible, and in general one dp value should work for all screen sizes. However, sometimes you will run in to a edge case that causes problems, and you just need to do something to make it work (For example I had to use this technique for positioning a badge on a tab in a TabLayout correctly for all screen sizes).

What I do to get around it is to put a dimens.xml file for each supported screen size:

• res/values-small/dimens.xml

• res/values-normal/dimens.xml

• res/values-large/dimens.xml

• res/values-xlarge/dimens.xml

You can use other qualifiers as well to target tablets if that is needed, see here for a guide to configuration qualifier names.

Then, specify each dimension for each screen size qualifier in each file (note that this only needs to be done for the dimension values that are causing problems on very large or very small screens).

For example in res/values-large/dimens.xml you might have this:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <dimen name="image_view_height">140dp</dimen>

</resources>

Then in res/values-small/dimens.xml you might have this to make it fit on the smaller screens:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <dimen name="image_view_height">96dp</dimen>

</resources>

Then, in your layout, reference it with @dimen/your_dimens_id, and the framework will choose the correct one to take for the screen size of the device:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="@dimen/image_view_height"
    android:src="@drawable/logo3"
    android:scaleType="centerCrop"

    />