CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Calco
Calco

Reputation: 1460

Extra margin appearing in ConstraintLayout

I have been building my user interface in Android Studio using ConstraintLayouts. However I have got an issue where I am getting some mystery extra margin at the bottom of a child ConstraintLayout that throws everything out of alignment.

As you can see in this gif, as soon as I constrain the EditText to the ImageView a large margin appears at the bottom of the ConstraintLayout. I cannot seem to figure out why this is happening.

enter image description here

As a result of this, as soon as I constrain any other ConstraintLayouts to the dodgy ConstraintLayout, all the alignments go wrong and elements are no longer centered, as shown in the gif below.

enter image description here

Here is the code for the entire layout (the dodgy form has id 'createTaskViewFormContainer'):

link to gist of code

<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:animateLayoutChanges="true"
    android:background="#E8ECEE"
    tools:context="apps.cal.lonesafe.CreateTaskFragment.CreateTaskView">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/createTaskViewFormContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:background="#ffffff"
        android:elevation="2dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/createTaskViewTeamName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:elevation="2dp"
            android:text="New Task"
            android:textColor="#000000"
            android:textSize="25dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/createTaskViewLabelIcon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginStart="32dp"
            android:src="@drawable/ic_label_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewTaskNameEditText"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewTaskNameEditText" />

        <EditText
            android:id="@+id/createTaskViewTaskNameEditText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="32dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="32dp"
            android:background="@drawable/edittext_alignment_background_grey"
            android:elevation="2dp"
            android:hint="Task Name"
            android:textSize="25dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/createTaskViewLabelIcon"
            app:layout_constraintTop_toBottomOf="@+id/createTaskViewTeamName" />

        <ImageView
            android:id="@+id/createTaskViewClockIcon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginBottom="8dp"
            android:layout_marginStart="32dp"
            android:layout_marginTop="8dp"
            android:src="@drawable/ic_clock_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewTimePickerTextView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewTimePickerTextView" />

        <TextView
            android:id="@+id/createTaskViewTimePickerTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="32dp"
            android:background="@drawable/edittext_alignment_background_grey"
            android:elevation="2dp"
            android:text="00h 00m"
            android:textColor="#94989a"
            android:textSize="25dp"
            app:layout_constraintEnd_toEndOf="@+id/createTaskViewTaskNameEditText"
            app:layout_constraintStart_toEndOf="@+id/createTaskViewClockIcon"
            app:layout_constraintTop_toBottomOf="@+id/createTaskViewTaskNameEditText" />

        <Button
            android:id="@+id/createTaskViewRecordMessageButton"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginTop="32dp"
            android:background="@drawable/button_blue_roundsquare"
            android:text="Record Message"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="18dp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="@+id/createTaskViewTimePickerTextView"
            app:layout_constraintStart_toStartOf="@+id/createTaskViewClockIcon"
            app:layout_constraintTop_toBottomOf="@+id/createTaskViewTimePickerTextView" />

    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/createTaskViewTeamSettingsLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:background="#ffffff"
        android:elevation="2dp"
        app:layout_constraintBottom_toTopOf="@+id/createTaskViewPanicButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/createTaskViewStartButton">

        <View
            android:id="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            android:layout_width="1dp"
            android:layout_height="1dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/createTaskViewGuardianSettingsFirstPinIcon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginBottom="16dp"
            android:layout_marginEnd="24dp"
            android:layout_marginTop="16dp"
            android:src="@drawable/ic_mic_32dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/createTaskViewGuardianSettingsSecondPinIcon"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/createTaskViewGuardianSettingsSecondPinIcon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginEnd="11.5dp"
            android:src="@drawable/ic_checkin_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            app:layout_constraintEnd_toStartOf="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewGuardianSettingsPinIconCentreView" />

        <ImageView
            android:id="@+id/createTaskViewGuardianSettingsThirdPinIcon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginStart="11.5dp"
            android:src="@drawable/ic_pin_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            app:layout_constraintStart_toEndOf="@+id/createTaskViewGuardianSettingsPinIconCentreView"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewGuardianSettingsPinIconCentreView" />

        <ImageView
            android:id="@+id/createTaskViewGuardianSettingsFifthPinIcon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginStart="24dp"
            android:src="@drawable/ic_alert_pin_32dp"
            app:layout_constraintBottom_toBottomOf="@+id/createTaskViewGuardianSettingsThirdPinIcon"
            app:layout_constraintStart_toEndOf="@+id/createTaskViewGuardianSettingsThirdPinIcon"
            app:layout_constraintTop_toTopOf="@+id/createTaskViewGuardianSettingsThirdPinIcon" />

    </android.support.constraint.ConstraintLayout>

    <Button
        android:id="@+id/createTaskViewStartButton"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:background="@drawable/button_blue_roundsquare"
        android:elevation="2dp"
        android:text="Start Task"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="26dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/createTaskViewFormContainer" />

    <Button
        android:id="@+id/createTaskViewPanicButton"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:background="@drawable/button_red_roundsquare_unfocused"
        android:elevation="2dp"
        android:text="Request Help"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="26dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <include
        android:id="@+id/voiceRecordOverlayLayout"
        layout="@layout/overlay_voice_record"
        android:visibility="gone" />

    <include
        android:id="@+id/teamSettingsOverlayLayout"
        layout="@layout/overlay_team_settings"
        android:visibility="gone" />

    <include
        android:id="@+id/submitCreateTaskOverlayLayout"
        layout="@layout/overlay_submit_create_task"
        android:visibility="gone" />

    <include
        android:id="@+id/updatingTeamRulesOverlayLayout"
        layout="@layout/overlay_updating_team_rules"
        android:visibility="gone" />

</android.support.constraint.ConstraintLayout>

Has anyone encountered a similar issue?

Is there something wrong with how I have setup my layout?

I am out of ideas on how to fix it. Thanks!

Upvotes: 3

Views: 838

Answers (1)

Pawel Laskowski
Pawel Laskowski

Reputation: 6316

I have reproduced this behaviour using ConstraintLayout 1.0.2. However, just changing the dependency in the gradle file to the latest version (1.1.0-beta6)

'com.android.support.constraint:constraint-layout:1.1.0-beta6'

automatically solved the issue without any changes to the XML. The unnecessary space disappeared and the views are positioned correctly.

Upvotes: 2

Related Questions