Adding constraint in ConstraintLayout wrapped in ScrollView cuts off bottom

Question

I wrapped the ConstraintLayout inside ScrollView. However, something cuts off the last widget if I add the constraint and without constraint, it will scroll down without cutting off.

The following picture is with the constraint. All widgets are connected to the top in the same manner. It doesn't matter how big the distance is.

Here is the picture without the constraint.

I have tried margins and paddings. With added padding, it just created white space above the bottom toolbar. I have also tried to restart the AndroidStudio and Invalidate Caches/Restart. Without success so far.

Here's the code

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true"
    tools:context="com.example.boss.abeacon.DataAcquisitionActivity">

    <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="wrap_content"
        tools:context="com.example.boss.abeacon.DataAcquisitionActivity">

        <EditText
            android:id="@+id/yCoordinate_editor"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:digits="0123456789"
            android:ems="10"
            android:imeOptions="actionDone"
            android:inputType="numberSigned"
            android:textSize="12sp"
            app:layout_constraintStart_toStartOf="@+id/position_id_editor"
            app:layout_constraintTop_toBottomOf="@+id/xCoordinate_editor" />

        <EditText
            android:id="@+id/xCoordinate_editor"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:digits="0123456789"
            android:ems="10"
            android:imeOptions="actionDone"
            android:inputType="numberSigned"
            android:textSize="12sp"
            app:layout_constraintStart_toStartOf="@+id/position_id_editor"
            app:layout_constraintTop_toBottomOf="@+id/position_id_editor" />

        <TextView
            android:id="@+id/label_number_of_data_editor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:text="Number of data \nin a position"
            app:layout_constraintBottom_toBottomOf="@+id/number_of_data_editor"
            app:layout_constraintEnd_toStartOf="@+id/number_of_data_editor" />

        <EditText
            android:id="@+id/inliers_window_editor"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:digits="1234567890"
            android:ems="10"
            android:hint="#"
            android:imeOptions="actionDone"
            android:inputType="number"
            android:textSize="12sp"
            app:layout_constraintStart_toStartOf="@+id/room_name_editor"
            app:layout_constraintTop_toBottomOf="@+id/number_of_data_editor" />

        <TextView
            android:id="@+id/label_inliers_window_editor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:text="Inliers' window size"
            app:layout_constraintBottom_toBottomOf="@+id/inliers_window_editor"
            app:layout_constraintEnd_toStartOf="@+id/inliers_window_editor" />

        <TextView
            android:id="@+id/label_minor_bracon_editor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:text="Minor values \nof beacons"
            app:layout_constraintBottom_toBottomOf="@+id/minor_beacon_editor"
            app:layout_constraintEnd_toStartOf="@+id/minor_beacon_editor" />

        <EditText
            android:id="@+id/number_of_data_editor"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:digits="1234567890"
            android:ems="10"
            android:hint="#"
            android:imeOptions="actionNext"
            android:inputType="number"
            android:textSize="12sp"
            app:layout_constraintStart_toStartOf="@+id/room_name_editor"
            app:layout_constraintTop_toBottomOf="@+id/minor_beacon_editor" />

        <EditText
            android:id="@+id/minor_beacon_editor"
            android:layout_width="150dp"
            android:layout_height="0dp"
            android:layout_marginTop="16dp"
            android:digits="1234567890 "
            android:ems="10"
            android:hint="1 2 3 10 21"
            android:imeOptions="actionNext"
            android:inputType="number"
            android:textSize="12sp"
            app:layout_constraintStart_toStartOf="@+id/room_name_editor"
            app:layout_constraintTop_toBottomOf="@+id/room_name_editor" />

        <TextView
            android:id="@+id/label_position_id_editor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:text="Position ID"
            app:layout_constraintBottom_toBottomOf="@+id/position_id_editor"
            app:layout_constraintEnd_toStartOf="@+id/position_id_editor" />

        <EditText
            android:id="@+id/position_id_editor"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:digits="0123456789"
            android:ems="10"
            android:imeOptions="actionDone"
            android:inputType="number"
            android:textSize="12sp"
            app:layout_constraintStart_toStartOf="@+id/room_name_editor"
            app:layout_constraintTop_toBottomOf="@+id/auto_position_id_checkBox" />

        <TextView
            android:id="@+id/label_room_name_editor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:text="Room name"
            app:layout_constraintBottom_toBottomOf="@+id/room_name_editor"
            app:layout_constraintEnd_toStartOf="@+id/room_name_editor" />

        <EditText
            android:id="@+id/room_name_editor"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="150dp"
            android:layout_marginTop="32dp"
            android:ems="10"
            android:hint="Enter file name"
            android:inputType="textPersonName"
            android:textSize="12sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/scan_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="32dp"
            android:layout_marginStart="32dp"
            android:text="Start"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:layout_editor_absoluteY="515dp" />

        <TextView
            android:id="@+id/kazoeru"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_marginStart="32dp"
            android:text="#"
            app:layout_constraintBottom_toTopOf="@+id/scan_btn"
            app:layout_constraintStart_toStartOf="parent" />

        <CheckBox
            android:id="@+id/auto_position_id_checkBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="Auto position ID"
            android:textSize="12sp"
            app:layout_constraintStart_toStartOf="@+id/position_id_editor"
            app:layout_constraintTop_toBottomOf="@+id/setParameters_btn" />

        <TextView
            android:id="@+id/last_position_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginStart="8dp"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="@+id/position_id_editor"
            app:layout_constraintStart_toEndOf="@+id/position_id_editor" />

        <TextView
            android:id="@+id/label_xCoordinate_editor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:text="X"
            app:layout_constraintBottom_toBottomOf="@+id/xCoordinate_editor"
            app:layout_constraintEnd_toStartOf="@+id/xCoordinate_editor" />

        <TextView
            android:id="@+id/label_yCoordinate_editor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:text="Y"
            app:layout_constraintBottom_toBottomOf="@+id/yCoordinate_editor"
            app:layout_constraintEnd_toStartOf="@+id/yCoordinate_editor" />

        <TextView
            android:id="@+id/last_xCoordinate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginStart="8dp"
            app:layout_constraintBottom_toBottomOf="@+id/xCoordinate_editor"
            app:layout_constraintStart_toEndOf="@+id/xCoordinate_editor" />

        <TextView
            android:id="@+id/last_yCoordinate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginStart="8dp"
            app:layout_constraintBottom_toBottomOf="@+id/yCoordinate_editor"
            app:layout_constraintStart_toEndOf="@+id/yCoordinate_editor" />

        <Button
            android:id="@+id/setParameters_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="32dp"
            android:layout_marginStart="32dp"
            android:layout_marginTop="8dp"
            android:onClick="setParametersButtonOnClick"
            android:text="Set parameters"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/inliers_window_editor" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>

I am running Ubuntu 16.04.LTS and the latest version of the AndroidStudio.

Have you experimented with app:layout_constraintBottom_toBottomOf="Parent" on the button? — Adam
– Adam, Commented Nov 28, 2017 at 14:57
@Adam I want the distance between the button and the last widget to be 32dp. Adding app:layout_constraintBottom_toBottomOf="Parent" doesn't really solve the problem. With this, I can see the text of the button but the rest of the button still cuts off. — Filip
– Filip, Commented Nov 29, 2017 at 1:50

Cheticamp · Accepted Answer · 2017-11-29 15:15:57Z

1

Update The layout works in the latest beta release. Upgrading to 1.1.0-beta3 will resolve the problem.

Regarding the differences in the designer layout, take a look at the XML for scan_btn. Without a top constraint, the designer imposes a position on it which is 515dp from the top. This is there just to keep things in place before all the constraints can be laid in.

tools:layout_editor_absoluteY="515dp"

When you constrain the top with 32dp, the above designer position is not used and 32dp from the upper widget is used instead. This will account for the difference in position with and without the top constraint. You have to constrain the top or the widget will float to the top since designer constraints do not work except in the designer, so choose a top constraint and a top margin that works for you.

edited Nov 29, 2017 at 15:15

answered Nov 28, 2017 at 19:08

Cheticamp

63k10 gold badges81 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Filip Over a year ago

Dear @Cheticamp wherever I add the constraint, the problem still occurs. I can see just a tip of the button regardless the distance. Except for the very top of the layout and the bottom of the first widget from the top.

Cheticamp Over a year ago

@Filipko What version of ConstraintLayout are you using? Are you seeing the problem on an emulator/device or just in the designer? The image with the constraint just seems to be scrolled up. I don't really see any difference. That why I am interested in knowing about if you are seeing the issue on an emulator/device.

Filip Over a year ago

I set constraint of the button scan_btn from the top of the layout android:layout_marginTop="530dp" and added new Button, the same as the scan_btn (ctrl+c ctrl+v) and set its top constraint to the bottom of the scan_btn. Now it is ok. However, when I change the top constraint of the scan_btn to the bottom of the last witged, the new button is being cut off...

Cheticamp Over a year ago

@Filipko It looks like the only difference between the two images is that one is scrolled up and the other is not. I can tell because the top field on one is "Minor value of beacons" and the top field on the other is "Number of data in a position" which is the field below "Minor value of beacons". In any case, you have to constraint each widget in a ConstraintLayout vertically and horizontally, so you should not rely on a large margin to position your button. Constraint it to the widget that makes sense and make it work. Put it in an emulator to see how things really look and how it scrolls.

Filip Over a year ago

I am testing it on the real device HUAWEI P9 so what you see in the pictures is the same I can see on the device. All widgets have constraint vertical and horizontal. The first widget is constrained to the layout and all others are constrained to it. Am I doing the constraints wrong?

|

Collectives™ on Stack Overflow

Adding constraint in ConstraintLayout wrapped in ScrollView cuts off bottom

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related