How to make a responsive design for a Native Application?

Question

I have a problem with an application that I am building. I don´t know how exactly we can do to make the Application responsive for the many dimensions of the devices. I created a dimens file with all the dimensions for every layout I have created with the dimensions for a Nexus 5 (360dp x 640dp). Then I downloaded the Dimenify plugin and tried to scale it for the Nexus 5X (411dp x 731dp). I created a new file named dimens.xml (sw411dp) increasing 15% than the dimensions for the Nexus 5X. The problem is that the width is something that I can control but there are many devices with the same width but with different height.

Here is an example of the MenuBar of the bottom:

<layout 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:id="@+id/menu_bar_fragment"
android:orientation="vertical">

<data>
    <variable
        name="menuBarViewModelFragment"
        type="com.app.multired.viewmodel.MenuBarViewModelFragment" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.Fragments.MenuBarFragment">

    <ImageView
        android:id="@+id/ivMenuFondo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/menufondo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/ivMenuFondoSuperior"
        android:layout_width="match_parent"
        android:layout_height="@dimen/layoutHeightIvMenuFondoSuperior"
        android:background="@drawable/menufondosuperior"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/ivMenuFondoInferior"
        android:layout_width="match_parent"
        android:layout_height="@dimen/layoutHeightIvMenuFondoInferior"
        android:background="@drawable/menufondoinferior"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/ivNotificacion"
        android:layout_width="@dimen/layoutWidthNotificacion"
        android:layout_height="@dimen/layoutHeightNotificacion"
        android:layout_marginStart="@dimen/marginStartNotificacion"
        android:layout_marginTop="@dimen/marginTopNotificacion"
        android:layout_marginBottom="@dimen/marginBottomNotificacion"
        app:layout_constraintBottom_toBottomOf="@+id/ivMenuFondoSuperior"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/notificacionoff" />

    <ImageView
        android:id="@+id/ivMas"
        android:layout_width="@dimen/layoutWidthAyuda"
        android:layout_height="@dimen/layoutHeightAyuda"
        android:layout_marginStart="@dimen/marginStartAyuda"
        android:layout_marginTop="@dimen/marginTopAyuda"
        android:layout_marginEnd="@dimen/marginEndAyuda"
        android:layout_marginBottom="@dimen/marginBottomAyuda"
        app:layout_constraintBottom_toBottomOf="@+id/ivMenuFondoSuperior"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/ivNotificacion"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/botonmas" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/layoutHeightLayoutMenuFragment"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="@+id/ivMenuFondoInferior"
        app:layout_constraintEnd_toEndOf="@+id/ivMenuFondoInferior"
        app:layout_constraintStart_toStartOf="@id/ivMenuFondoInferior"
        app:layout_constraintTop_toTopOf="@+id/ivMenuFondoInferior">

        <LinearLayout
            android:layout_width="@dimen/layoutWidthLayoutInicio"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/marginStartLayoutInicio"
            android:layout_marginTop="@dimen/marginTopLinearLayoutButton"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/ivInicio"
                android:layout_width="match_parent"
                android:layout_height="@dimen/layoutHeightIvInicio"
                android:layout_gravity="center"
                app:srcCompat="@drawable/botoninicio" />

            <TextView
                android:id="@+id/tvInicio"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/layoutHeightTvInicio"
                android:layout_gravity="center"
                android:fontFamily="@font/opensans"
                android:text="@string/inicio"
                android:textColor="@color/blanco"
                android:textSize="@dimen/textSizeTvInicio" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="@dimen/layoutWidthLayoutQR"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/_35sdp"
            android:orientation="vertical"
            android:layout_marginTop="@dimen/marginTopLinearLayoutButton">

            <ImageView
                android:id="@+id/ivQR"
                android:layout_width="match_parent"
                android:layout_height="@dimen/layoutHeightIvQR"
                android:layout_gravity="center"
                app:srcCompat="@drawable/botonqr" />

            <TextView
                android:id="@+id/tvQR"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/layoutHeightTvQR"
                android:layout_gravity="center"
                android:fontFamily="@font/opensans"
                android:text="@string/retirar"
                android:textColor="@color/blanco"
                android:textSize="@dimen/textSizeTvQR" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="@dimen/layoutWidthLayoutHistorial"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/_35sdp"
            android:orientation="vertical"
            android:layout_marginTop="@dimen/marginTopLinearLayoutButton">

            <ImageView
                android:id="@+id/ivHistorial"
                android:layout_width="match_parent"
                android:layout_height="@dimen/layoutHeightIvHistorial"
                android:layout_gravity="center"
                app:layout_constraintBottom_toBottomOf="@+id/ivMenuFondoInferior"
                app:layout_constraintStart_toEndOf="@+id/ivRetirar"
                app:layout_constraintTop_toTopOf="@+id/ivMenuFondoInferior"
                app:srcCompat="@drawable/botonhistorial" />

            <TextView
                android:id="@+id/tvHistorial"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/layoutHeightTvHistorial"
                android:layout_gravity="center"
                android:fontFamily="@font/opensans"
                android:text="@string/historial"
                android:textColor="@color/blanco"
                android:textSize="@dimen/textSizeTvHistorial" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="@dimen/layoutWidthLayoutTuCuenta"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/_35sdp"
            android:orientation="vertical"
            android:layout_marginTop="@dimen/marginTopLinearLayoutButton">

            <ImageView
                android:id="@+id/ivCuenta"
                android:layout_width="match_parent"
                android:layout_height="@dimen/layoutHeightIvTuCuenta"
                android:layout_gravity="center"
                app:srcCompat="@drawable/botoncuenta" />

            <TextView
                android:id="@+id/tvCuenta"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/layoutHeightTvTuCuenta"
                android:layout_gravity="center"
                android:fontFamily="@font/opensans"
                android:text="@string/cuenta"
                android:textColor="@color/blanco"
                android:textSize="@dimen/textSizeTvTuCuenta"
                app:layout_constraintStart_toEndOf="@+id/tvHistorial"
                app:layout_constraintTop_toBottomOf="@+id/ivCuenta" />
        </LinearLayout>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

I added fot every LinearLayout: android:layout_marginStart="@dimen/_35sdp" using implementation 'com.intuit.sdp:sdp-android:1.0.6'

Answer 1

You can use a library to handle your UI on different size devices.

Try using the SDP library. For more info & usage, you can check it out over here

Add this to your Gradle for using the SDP library.

dependencies {
  implementation 'com.intuit.sdp:sdp-android:1.0.6'
}

And in your layouts instead of dp use spd as

instead of

android:layout_width="35dp"

use

android:layout_width="@dimen/_35sdp"

Let me know if you have any issues.