Limiting layout for different screen sizes

how to automatically adjust the gap or margins between two widgets for different screen sizes like ios using Constraint layout. Different screen sizes can be 4.7.5.0 or 5.5. All these devices select dimen from dimens-normal, so is there any other way to automatically adjust the margin between the two widgets.

enter image description here

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.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="0dp"
    android:layout_height="190dp"
    android:layout_marginLeft="16dp"
    android:layout_marginStart="0dp"
    android:layout_marginTop="0dp"
    android:contentDescription="dummy"
    android:scaleType="centerCrop"
    android:src="@drawable/lion"
    app:layout_constraintBottom_creator="1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_creator="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_creator="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_creator="1"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="16dp" />

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="0dp"
    app:layout_constraintTop_toBottomOf="@+id/imageView"
    tools:layout_editor_absoluteX="8dp">

    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="abc" />


    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="xyz" />
</android.support.design.widget.TabLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_et_email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="24dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tabLayout">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/et_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:hint="@string/et_email_hint" />

</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="24dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/til_et_email">

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:hint="@string/et_password_hint" />
</android.support.design.widget.TextInputLayout>

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="24dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="16dp"
    android:text="@string/bt_sign_in"
    app:layout_constraintEnd_toEndOf="@+id/til_password"
    app:layout_constraintStart_toStartOf="@+id/til_password"
    app:layout_constraintTop_toBottomOf="@+id/til_password"
    tools:layout_editor_absoluteY="403dp" />

<TextView
    android:id="@+id/tv_forgot_password"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:autoSizeMaxTextSize="41sp"
    android:autoSizeMinTextSize="17sp"
    android:autoSizeStepGranularity="2sp"
    android:autoSizeTextType="uniform"
    android:gravity="center"
    android:text="@string/tv_forgot_password"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button" />

      

In the part above, I am setting the margin values ​​to hard. So if I run the code with a 5.0 screen size, that's ok. But if I run it at 5.5 screen size, then instead of adjusting the border, it leaves a blank space at the bottom.

+3


source to share


1 answer


Use Guideline constraint to provide a percentage of your view based on screen size.

 <android.support.constraint.Guideline
                android:id="@+id/top_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.09" />

      



Refer to the following google link. https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

+1


source







All Articles