Solution 1 :
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:
Solution 2 :
My idea is that you can create different layouts for different screen sizes. As it is described here at Android Developers: Create alternative layouts.
To do it you should place your different layout files in different ‘layout’ directories. E.g. as in the docs: res/layout/ as a ‘default’ directory and res/layout-w600dp/ for layouts that are prepared to be used on screens with a width of 600dp or wider.
Problem :
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.
Comments
Comment posted by Tamir Abutbul
create different layouts for different screen sizes
Comment posted by Daniel Galion
Of course, it’s also a good idea to consider. I haven’t concluded percentage height and width layout parameters. But, I am not sure that it’d be always a nice thing. Sure, it’s faster to implement – it’s a very good advantage. You should consider if you want scalable layouts or a static width on different screen sizes. It’s a design matter. Scalable views could look bad with e.g. some font sizes.
