How to create a responsive layout?

Afdal Dev :

i'm trying to create a login layout.

Preview phone 5.0" looks good: https://imgur.com/oAukTkZ

If i run in device 6.0" look good. But, device 5.0" i see is very big https://imgur.com/muMon2U

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/lightBlue"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/background_5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="112dp"
        android:scaleType="fitXY"
        android:src="@drawable/background_3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/imageView" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="38dp"
        android:scaleType="fitXY"
        android:src="@drawable/background_4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/imageView1" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/background_1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/background_2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageViewLogo"
        android:layout_width="137dp"
        android:layout_height="53dp"
        android:layout_marginBottom="18dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toTopOf="@id/imageView2"
        app:layout_constraintStart_toStartOf="@id/textViewWelcome" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/textViewWelcome"
        style="@style/tv24spffffff_googlesansmedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:text="@string/selamat_datang"
        app:layout_constraintBottom_toTopOf="@id/textViewWelcomeDesc"
        app:layout_constraintStart_toStartOf="@id/textViewWelcomeDesc" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/textViewWelcomeDesc"
        style="@style/tv14spffffff_robotomedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="55dp"
        android:layout_marginBottom="35dp"
        android:text="@string/silahkan_login_untuk_masuk_ke_akun_anda"
        app:layout_constraintBottom_toTopOf="@id/cardView"
        app:layout_constraintStart_toStartOf="parent" />

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginEnd="25dp"
        android:layout_marginBottom="20dp"
        app:cardCornerRadius="10dp"
        app:layout_constraintBottom_toTopOf="@id/txtForgotPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/textInputLayoutEmailOrNoTelp"
                style="@style/AppTextFields"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginTop="30dp"
                android:layout_marginEnd="30dp"
                android:hint="@string/email_no_telp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/edtEmailOrNoTelp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:lines="1" />

            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/textInputLayoutPassword"
                style="@style/AppTextFields"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginTop="29.61dp"
                app:passwordToggleEnabled="true"
                android:layout_marginEnd="30dp"
                android:hint="@string/password"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/textInputLayoutEmailOrNoTelp">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/edtPassword"
                    android:layout_width="match_parent"
                    android:inputType="textPassword"
                    android:layout_height="wrap_content"
                    android:lines="1" />

            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:id="@+id/buttonLogin"
                style="@style/AppButtonBlue"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginTop="48.7dp"
                android:enabled="true"
                android:layout_marginEnd="30dp"
                android:layout_marginBottom="15dp"
                android:text="@string/log_in"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/textInputLayoutPassword" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/txtForgotPassword"
        style="@style/tv13spffffff_googlesansmedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="@string/lupa_password"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.some more details.

Tamir Abutbul :

If you want one responsive layout can use:

• app:layout_constraintWidth_percent="0.x"

• app:layout_constraintHeight_percent="0.y"

• Guideline

Example layout:

  <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:cardCornerRadius="10dp"
        app:cardBackgroundColor="@color/colorPrimary"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constraintHorizontal_bias="0.512"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintWidth_percent="0.9" >

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/button"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintWidth_percent="0.3"
                android:text="button"
                app:layout_constraintBottom_toTopOf="@+id/button2"
                app:layout_constraintStart_toStartOf="@+id/button3"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@+id/button2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintWidth_percent="0.3"
                android:text="Button"
                app:layout_constraintBottom_toTopOf="@+id/button3"
                app:layout_constraintStart_toStartOf="@+id/button3"
                app:layout_constraintTop_toBottomOf="@+id/button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintWidth_percent="0.9"
                android:text="Button"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/button2" />
        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintHeight_percent="0.05"
        app:layout_constraintStart_toStartOf="@+id/cardView"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:gravity="center"
        app:layout_constraintHeight_percent="0.05"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/cardView"

        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:gravity="center"
        app:layout_constraintHeight_percent="0.05"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="@+id/cardView"
        app:layout_constraintStart_toStartOf="@+id/cardView"
        app:layout_constraintTop_toBottomOf="@+id/cardView" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/textView3"
        app:layout_constraintHeight_percent="0.05"
        app:layout_constraintStart_toStartOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.4" />
</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this: