Compatibility with different resolutions/inches

Question

I'm developing an app and my Constraint Layout isn't compatible with any screen size.

I have a button with the following width and height:

android:layout_width="283dp"
android:layout_height="57dp"

Here's how it look using a Google Pixel. And here's how it looks using a Nexus S

I also sent the apk to a person that has an Galaxy J7 (1280x720, 5.5'), and my buttons, textviews and imageviews don't fit well in the screen, just like the Nexus S (800x480, 4').

After reading the documentation and other sources, I got that I can create different layouts for different screens (hdpi, for example, which is the case of the Nexus S).

But it looks that the problem is more related to the display inches than with the device dpi. Because the Nexus S has an 800x480, hdpi and 4' screen. But when I change to a 800x480, mdpi and 5.1' screen (1.1' more inch), it looks way better than in the Nexus S, even with a lower dpi (mdpi). It also looks better than in the Galaxy J7 real device, even with a lower screen size (5.1' x 5.5') and resolution (800x480 vs 1280x720).

So, how can it fit well in a 800x480 5.1' mdpi screen, but not in a 1280x720 5.5' Galaxy J7 and in a 800x480 4.0' hdpi screen (Nexus S)?

Also, if I create a virtual device with the same screen specs of the Galaxy J7 real device (1280x720 and 5.5'), It fits really well, unlike the real phone.

Answer 1

You can replace your fixed size (what you are currently giving to your views) with something more responsive.

If this was your non responsive button:

<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" />

Just replace it with this:

<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" />

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. This is how you can make one screen responsive to all screen sizes and not create a lot of layouts for different screens.

Answer 2

These images are OK, it's not a problem itself. That's usually what happens when you set the width and height manually.

Best thing you can do is set the right constraints and then set width and/or height to 0dp. This will make your view expand as much as possible without breaking any constraint. This way you will still get different widths and heights, but hopefully less noticable ones.

Be aware that if you set top and bottom constraints to parent, and you set the height to 0dp, it will expand to fill its contraints, it will fill your whole parent.

And for positioning you can use guidelines if you want. A a horizontal guideline in 50% will be in the middle of the screen in every phone. So you can constrain views to that as well.

Answer 3

I advise you to use Adobe XD and use it to determine the size

android:layout_width="283dp"
android:layout_height="57dp"

and after that extract the pictures for all sizes Then make the width and height wrap_content In the XML file