androidandroid-layoutandroid-constraintlayoutandroid-cardview
How to create a responsive layout?
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.
Solution
If you want one responsive layout can use:
app:layout_constraintWidth_percent="0.x"app:layout_constraintHeight_percent="0.y"
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:
