How to scale UI elements for different screen sizes in Android using ConstraintLayout

Question

my goal is to design a layout using ConstraintLayout in Android that scales to different screen sizes and thus to devices. I read quite often that you should use dp and sp for designing layouts. Basically I think that using dp and sp does not make the layout scalable for different screen sizes so I don't agree on that. Here you can see how a designed layout looks on a 5' and 7' screen.

You can clearly see (the screenshots have the same zoom level) that on the 7' display the buttoms and imageviews (whose height and width was specified with dp) and the textviews (whose size was specified with sp) look smaller or the same size as in the 5' device. But on a 7' display the elemnts should be larger and scale to the display size which I do not think is possible using dp and sp.

So my question is how can I design the layout in a way that it scales to the current screen size meaning that the elements should be smaller in small devices and larger in large-screen devices.

Here you can see the XML layout file:

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


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="265dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="ContentDescription" />







    <ImageButton
        android:id="@+id/commentButton"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@null"
        android:contentDescription="comment_Button"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.82"
        app:srcCompat="@mipmap/comment" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/comment"
        android:textSize="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.025"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.753" />



    <Button
        android:id="@+id/button"
        android:layout_width="163dp"
        android:layout_height="72dp"
        android:background="@drawable/custom_button"
        android:text="Button"
        android:textAllCaps="false"
        android:textColor="#121212"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.867" />


    <TextView
        android:id="@+id/textViewS"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Textview"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.012"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.581" />

</androidx.constraintlayout.widget.ConstraintLayout>

I'd appreciate every comment and would be quite thankful for your advices.

Answer 1

My apps have different dimension resources, scaling all dp and sp values for smaller screens. For example in res/values/dimens.xml

<dimen name="dp20">20dp</dimen>
<dimen name="dp24">24dp</dimen>
<dimen name="dp28">28dp</dimen>
<dimen name="dp30">30dp</dimen>
<dimen name="dp32">32dp</dimen>
<dimen name="dp36">36dp</dimen>

and in res/values-w320dp/dimens.xml :

<dimen name="dp16">12dp</dimen>
<dimen name="dp18">14dp</dimen>
<dimen name="dp20">15dp</dimen>
<dimen name="dp24">18dp</dimen>
<dimen name="dp28">21dp</dimen>
<dimen name="dp30">23dp</dimen>
<dimen name="dp32">24dp</dimen>
<dimen name="dp36">27dp</dimen>

Then, when setting sizes with @dimen/dp16 instead od 16dp , the screen scales better. You can add more qualified resources for more types of screens.

Answer 2

There is one third-party library that can manage your issue easily.

check this for the different size for the component: https://github.com/intuit/sdp

And this is for text size: https://github.com/intuit/ssp