Dp unit does not scale layouts in different screens

João Marcos

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!

Daniel Nugent

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"

    />

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

different layouts for multiple screens

From Dev

different layouts for multiple screens

From Dev

Alternative to using dp-width as discriminator for different layouts?

From Dev

Alternative to using dp-width as discriminator for different layouts?

From Dev

Android: proper way to size UI elements for different size screens - dp vs?

From Dev

Why does the textbox and button looks out of layout on different screens?

From Dev

React-Native: How to scale font size to support many different resolutions and screens in both Android and iOS?

From Dev

How do I make text labels scale the font size with different Apple product screens?

From Dev

How do I scale a block element to appear the same size on different mobile screens?

From Dev

React-Native: How to scale font size to support many different resolutions and screens in both Android and iOS?

From Dev

How does bootstrap4's class="card-img" scale images for smaller screens

From Dev

Can X11 scale to virtual resoltions on HiDPI/Retina screens the way OS X does?

From Dev

Supporting Different Screens

From Dev

Emulator screens look different

From Dev

Handling a Player in Different Screens?

From Dev

Supporting Different Screens

From Dev

Different effects with different screens sizes

From Dev

Different window managers on different screens?

From Dev

Sectioned RecyclerView with different layouts

From Dev

Layouts with two different colors

From Dev

Different layouts - bad for SEO

From Dev

Different portrait and landscape layouts

From Dev

Different layouts on firefox and chrome

From Dev

Facebook login with different layouts

From Dev

Layouts Issue on Different Components?

From Dev

Layouts look different on devices

From Dev

Different layouts on firefox and chrome

From Dev

Multiple keyboards with different layouts

From Dev

Support different layouts sizes

Related Related

  1. 1

    different layouts for multiple screens

  2. 2

    different layouts for multiple screens

  3. 3

    Alternative to using dp-width as discriminator for different layouts?

  4. 4

    Alternative to using dp-width as discriminator for different layouts?

  5. 5

    Android: proper way to size UI elements for different size screens - dp vs?

  6. 6

    Why does the textbox and button looks out of layout on different screens?

  7. 7

    React-Native: How to scale font size to support many different resolutions and screens in both Android and iOS?

  8. 8

    How do I make text labels scale the font size with different Apple product screens?

  9. 9

    How do I scale a block element to appear the same size on different mobile screens?

  10. 10

    React-Native: How to scale font size to support many different resolutions and screens in both Android and iOS?

  11. 11

    How does bootstrap4's class="card-img" scale images for smaller screens

  12. 12

    Can X11 scale to virtual resoltions on HiDPI/Retina screens the way OS X does?

  13. 13

    Supporting Different Screens

  14. 14

    Emulator screens look different

  15. 15

    Handling a Player in Different Screens?

  16. 16

    Supporting Different Screens

  17. 17

    Different effects with different screens sizes

  18. 18

    Different window managers on different screens?

  19. 19

    Sectioned RecyclerView with different layouts

  20. 20

    Layouts with two different colors

  21. 21

    Different layouts - bad for SEO

  22. 22

    Different portrait and landscape layouts

  23. 23

    Different layouts on firefox and chrome

  24. 24

    Facebook login with different layouts

  25. 25

    Layouts Issue on Different Components?

  26. 26

    Layouts look different on devices

  27. 27

    Different layouts on firefox and chrome

  28. 28

    Multiple keyboards with different layouts

  29. 29

    Support different layouts sizes

HotTag

Archive