4

Sounds like a basic question but I have no idea why this behaviour is that way I am using a button that is 200 dp by 60dp and with 15sp text size

It looks good on my phone, emulator and multiple other 5 even low 6 inches phones

However on note 10+ which is 6.8 inches, the button looks smaller and the text is smaller

I thought when using dp and sp, it will occupy the same size on all phones given that it is in terms of density independent pixels

Why is this behaviour?

Thank you

Snake
  • 14,228
  • 27
  • 117
  • 250

3 Answers3

3

Update:

Based on this page about dp size of devices and the link provided at the top of it, I've reached to this article how to calculate metrics of any device including dp. Based on my calculations Note 10+(3040*1440 pixel, 495 ppi) is a 465 * 982 dp device. Google pixel you can see from the first link is a 411 * 731 dp device. So, if you create a size 200 dp layout it would be smaller on the note 10 + than on the google pixel for example. To be honest I thought all small screen devices are something close to a 360 width dp and expected that one design by dp would be seen roughly the same on all devices. I was wrong apparently. It seems if the layout is supposed to be seen exactly the same width on all devices there is no way but to set its width by a percentage of screen width. Google doc has it too: converting pixel to dp.

enter image description here

This image from Support different pixel densities lead me to incorrectly think that designing by dp would be seen the same on all devices. But it would be seen the same only on same dp devices.

Sina
  • 2,683
  • 1
  • 13
  • 25
  • I read all posts about supporting screensizes. My question is not about supporting screen size, it is about the behavior of dp. I don't have maxAspectRatio btw – Snake Jul 19 '20 at 15:04
  • I updated my answer. I think I had a misunderstanding about dp myself. Thank you for your question. – Sina Jul 19 '20 at 15:51
  • Does this mean asymmetric aspect ratio and resolution will always result in such behaviour?...even then looks like percentage would be the way to truly make it same on all devices – Chakradhar Vyza Jul 24 '20 at 15:03
  • Even then it is not possible because aspect ratios differ. For a universal design one can only fixate height or width exclusively but not both. – Sina Jul 24 '20 at 15:10
1

It looks good on my phone, emulator and multiple other 5 even low 6 inches phones,

As @Mr. Patel mentioned in his comment, you can use ssp and sdp but I want to offer another solution.

First - why is this happening:

You have a lot of different phones with a lot of different screen sizes, when you are using dp you are actually using a fixed size value - it can not be scaled for large screen.

How to fix it:

You can use ConstraintLayout with percentage to make your views scale according to the screen size.

Example:

Let`s have a look at this layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<Button
    android:layout_width="200dp"
    android:layout_height="400dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this:

enter image description here

In this layout, the button size is 200dp and 400dp. This may look good on one phone but will not look good on another phone, because as I have mentioned before:

different phones = different screen sizes.

Let`s take a look at how to make your layout responsive according to the screen size:

All I need to do Is to change my layout to this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintWidth_percent="0.3"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

And now the layout will look like this:

enter image description here

Looks... kind of the same?

Well, the new layout is actually looking not so different from the original but now because I have added those attributes:

    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintWidth_percent="0.3"
    app:layout_constraintHeight_percent="0.5"

For every phone, small or large this button will adjust according to the screen size and will take 30% of the screen width and 50% of the screen Width.

Another tools that can help in the prosses of making some screen responsive:

Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
  • Thank you so much Tamir. I am well aware of these mechanism and I use them(thanks again) but I am trying to understand an issue here. I never said in the question that I want the button to be scaled according to screen size. I am wondering why it is not occupying same size. If I take a ruler an measure the button and let's say it is 3 inches wide. On the note 10+, it is showing around 2 inchs. Shouldnt be physically the same size ? – Snake Jul 16 '20 at 02:52
  • Btw you can simulate this on you phone by going to developer setting and making the density go from 320 to something like 480 – Snake Jul 16 '20 at 02:54
  • I think I have the answer for you. Different phones also have different pixle density. the formula `px = dp * (dpi / 160)` *The pixel density is the number of pixels within a physical area of the screen and is referred to as dpi (dots per inch). This is different from the resolution, which is the total number of pixels on a screen.* so the pixle density will for sure affect how our views will look – Tamir Abutbul Jul 16 '20 at 07:05
  • Even though I use dp for views sides? I mean the point if dp is to be density independent as it takes the resulting and dpi . So 20dp on low density should occupy the same size on inches as 20dp on high density, no? – Snake Jul 17 '20 at 03:37
  • I dont have a proper answer for the last question because I have used responsive layouts for most of my layouts so I can tell you a lot about do for the size of your views – Tamir Abutbul Jul 17 '20 at 14:14
  • 2
    I agree but it is not always feasible option to do it the way you suggested. Sometimes you might have many widgets with all sort of margins and padding using absolute values , you cant do all that constraint and it you do the layout is super complex to follow – Snake Jul 18 '20 at 15:07
0

dp is base on screen resolution (px) and dpi.

Example: 1280x720px screen of xhdpi (x2)(320dpi) will have 640x360 dp => 1dp = 2 px in that screen.

640x360px screen of mdpi (1x)(160dpi) will have 640x360 dp => 1dp = 1 px in that screen.

The result will look the same for 2 devices

But when the device have a smaller dpi (240) but remain the same resolution: 1280x720px it will have ~854x480 dp => 1 = 1.5px in that screen => Your button and text will look smaller. To make your button look the same on multi screen, you have to provide many dimens file for many screen.

You will have to use many dimens file to make your button show the correct size on other screen. (ssp and sdp is use this way) - (My project have tons of dimens file for each 10dp different screen size to make sure app show the same on any device) Or you have to use percent supported layout (ConstraintLayout, PercentRelativeLayout, ...)

Thuan Tang
  • 261
  • 1
  • 6