androidandroid-layoutandroid-constraintlayoutandroid-screen-support

Compatibility with different resolutions/inches


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.


Solution

  • 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.