Search code examples
androidandroid-xmlandroid-constraintlayout

ConstraintLayout margins not working


Using the xml below the marginTop is getting ignored if the view's visibility that I'm constrained to is gone.

This happens with the latest layout lib version at this time com.android.support.constraint:constraint-layout:1.0.0-beta4

Example:

tvMessage and ivCommentImage are visible - the 16dp top margin on llLeftActions and llRightActions is working fine. If the ivCommentImage is gone the margin is ignored.

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp">

<!-- some more views here -->

    <TextView
        android:id="@+id/tvMessage"
        style="@style/SocialFeed.Description"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ivProfile"
        app:layout_goneMarginTop="0dp"
        tools:text="@string/lorem_ipsum_140chars"/>

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/ivCommentImage"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:adjustViewBounds="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvMessage"
        app:layout_goneMarginTop="0dp"
        />

    <android.support.constraint.Guideline
        android:id="@+id/gCenter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

    <LinearLayout
        android:id="@+id/llLeftActions"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:gravity="center_vertical|left"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="@+id/tvMessage"
        app:layout_constraintRight_toLeftOf="@+id/gCenter"
        app:layout_constraintTop_toBottomOf="@+id/ivCommentImage"
        app:layout_goneMarginTop="0dp"
        />

    <LinearLayout
        android:id="@+id/llRightActions"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:gravity="center_vertical|right"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="@+id/gCenter"
        app:layout_constraintRight_toRightOf="@+id/tvMessage"
        app:layout_constraintTop_toBottomOf="@+id/ivCommentImage"
        app:layout_goneMarginTop="0dp"/>


</android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

Solution

  • It's working completely as intended -- note that you added layout_goneMarginTop="0dp" on @id/llLeftActions and @id/llRightActions...

    Which means that when the widget they are pointing to (@id/ivCommentImage) is marked as gone, the margin that will be used for the top connection will be... 0dp, and not the margin of 16dp. That's what those attributes are here for! :)

    check the documentation on visibility behavior and gone margin attributes