Why is widget small although using dp

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.

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.

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:

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:

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:

• chains
  
• barriers
  
• How to add different weight to ConstraintLayout views
  
• Autosizing TextViews

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, ...)