I've been using Constraint Layouts for a while but today I faced a strange problem, all my layouts that contain constraint layouts are shifted down over the lower screen edge although the width and height of the parent constraint layout are (match-parent), the result is below

enter image description here

and here's is the XML code for the layout

    <?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"
    android:background="@color/colorPrimary"
    tools:context=".Setup_SettingsActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/setup_pharmacy_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView5">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/setup_pharmacy_name" />
    </android.support.design.widget.TextInputLayout>

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="68dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/setup_welcome"
        android:textColor="@color/common_google_signin_btn_text_dark_default"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/setup_pharmacy_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/setup_pharmacy_name">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/setup_pharmacy_address"
            android:inputType="textMultiLine" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/setup_save_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="84dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:backgroundTint="@color/colorAccent"
        android:text="@string/setup_save_btn_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/setup_has_delivery_switch" />

    <Switch
        android:id="@+id/setup_has_delivery_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/setup_has_delivery_switch_text"
        android:textColor="@color/common_google_signin_btn_text_dark_default"
        android:textOff="@string/setup_delivery_switch_off"
        android:textOn="@string/setup_delivery_switch_on"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/divider" />

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="36dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:backgroundTint="@color/colorAccent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.476"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/setup_pharmacy_address"
        app:srcCompat="@mipmap/position_btn" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="42dp"
        android:layout_height="38dp"
        android:layout_marginStart="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="52dp"
        android:visibility="invisible"
        app:layout_constraintStart_toEndOf="@+id/imageButton"
        app:layout_constraintTop_toBottomOf="@+id/setup_pharmacy_address"
        app:srcCompat="@mipmap/position_done" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="12dp"
        android:layout_marginRight="12dp"
        android:text="@string/setup_record_position_text"

        android:textColor="@color/common_google_signin_btn_text_dark_default"
        android:textSize="12sp"
        app:layout_constraintEnd_toStartOf="@+id/imageButton"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/setup_pharmacy_address" />

    <View
        android:id="@+id/divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="40dp"
        android:background="@color/divider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageButton" />

    <View
        android:id="@+id/divider2"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="20dp"
        android:background="@color/divider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/setup_has_delivery_switch" />

</android.support.constraint.ConstraintLayout>

what might be the cause of this problem?

2 Answers

1
yxtqwf On Best Solutions
  • Your layout got pushed down because you are using way too large margins - you are using constraintLayout but you are also using large fixed size for your margins (android:layout_marginTop="60dp" for example) and because different phones got different screen size, when you are using a fixed size on your view you are making your layout less responsive(small margins are ok but the problem starts with the large margins).

  • If you want to place some view somewhere at your screen I would recommend using guielines and constraint your views into the guideline rather then give your view a lot of margins.

You can simply use chains to achieve your desired layout.

Here is an example of the layout that you want to achieve using cnostraintLayout and chains:

<?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">

<android.support.design.widget.TextInputLayout
    android:id="@+id/setup_pharmacy_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintBottom_toTopOf="@+id/setup_pharmacy_address"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView5">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="setup_pharmacy_name" />
</android.support.design.widget.TextInputLayout>

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="setup_welcome"
    android:textColor="@color/common_google_signin_btn_text_dark_default"
    android:textSize="24sp"
    app:layout_constraintBottom_toTopOf="@+id/setup_pharmacy_name"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.design.widget.TextInputLayout
    android:id="@+id/setup_pharmacy_address"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintBottom_toTopOf="@+id/textView6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/setup_pharmacy_name">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="setup_pharmacy_address"
        android:inputType="textMultiLine" />
</android.support.design.widget.TextInputLayout>

<Button
    android:id="@+id/setup_save_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:backgroundTint="@color/colorAccent"
    android:text="setup_save_btn_text"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/divider2" />

<Switch
    android:id="@+id/setup_has_delivery_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="setup_has_delivery_switch_text"
    android:textColor="@color/common_google_signin_btn_text_dark_default"
    android:textOff="setup_delivery_switch_off"
    android:textOn="setup_delivery_switch_on"
    app:layout_constraintBottom_toTopOf="@+id/divider2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/divider" />

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/colorAccent"
    app:layout_constraintBottom_toBottomOf="@+id/textView6"
    app:layout_constraintEnd_toStartOf="@+id/imageView2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/textView6"
    app:layout_constraintTop_toTopOf="@+id/textView6"
    app:srcCompat="position_btn" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="42dp"
    android:layout_height="38dp"
    android:src="@drawable/new_question"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="@+id/textView6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/imageButton"
    app:layout_constraintTop_toTopOf="@+id/textView6" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="setup_record_position_text"

    android:textColor="@color/common_google_signin_btn_text_dark_default"
    android:textSize="12sp"
    app:layout_constraintBottom_toTopOf="@+id/divider"
    app:layout_constraintEnd_toStartOf="@+id/imageButton"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/setup_pharmacy_address" />

<View
    android:id="@+id/divider"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginEnd="8dp"
    android:background=""
    app:layout_constraintBottom_toTopOf="@+id/setup_has_delivery_switch"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView6" />

<View
    android:id="@+id/divider2"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintBottom_toTopOf="@+id/setup_save_btn"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/setup_has_delivery_switch" />
</android.support.constraint.ConstraintLayout>

And it will look like this:

enter image description here

0
Ankit ihelper Sharma On

It's depend upon screen size.Sometime our layout is optimial for medium or large screen size device which cause issue to small device. In order to fix this issue for smaller device too, add ScrollView as parent layout of constraint layout

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
    <android.support.constraint.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
....
</android.support.constraint.ConstraintLayout>
</ScrollView>