Search code examples
androidandroid-layoutandroid-constraintlayoutandroid-databinding

How to remove the margin of the view in the constraint layout when the anchor constraint is removed


I have a constraint view as follows, the image of which is given below

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/SellerProfileContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:layout_marginEnd="16dp"
            android:visibility="@{sellerFullName != null ? View.VISIBLE : View.GONE}"
            app:layout_constraintTop_toBottomOf="@id/Title"
            app:layout_constraintStart_toStartOf="@id/Title"
            app:layout_goneMarginTop="24dp">

            <ImageView
                android:id="@+id/SellerProfileImage"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp"
                android:layout_marginEnd="16dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:contentDescription="@{sellerProfileImageAccessibilityText}"
                android:scaleType="centerCrop"
                android:visibility="@{sellerProfileImage != null ? View.VISIBLE : View.GONE}"
                android:src="@{sellerProfileImage}" />

            <TextView
                android:id="@+id/SellerProfile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:contentDescription="@{sellerFullName}"
                android:text="@{sellerFullName.text}"
                android:visibility="@{sellerFullName != null ? View.VISIBLE : View.GONE}"
                app:layout_constraintTop_toTopOf="@id/SellerProfileImage"
                app:layout_constraintBottom_toBottomOf="@id/SellerProfileImage"
                app:layout_constraintStart_toEndOf="@id/SellerProfileImage"
                app:layout_constraintEnd_toEndOf="parent"
                tools:text="Seller Profile Name"
                />

            <TextView
                android:id="@+id/SellerRatings"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{sellerFeedbackPercent}"
                android:contentDescription="@{sellerFeedbackPercent}"
                android:textColor="@color/style_guide_neutral6"
                android:visibility="@{sellerFeedbackPercent != null ? View.VISIBLE : View.GONE}"
                app:layout_constraintStart_toStartOf="@id/SellerProfile"
                app:layout_constraintTop_toBottomOf="@id/SellerProfile"
                tools:text = "100% positive rating"/>
        </androidx.constraintlayout.widget.ConstraintLayout>

Constraint layout image

I am trying implement the layout as follows:

  1. If the sellerProfileImage is not null, then sellerProfileImage and sellerProfile should have a margin of 16dp between them.
  2. If the sellerProfileImage is null, then sellerProfile should have zero margin between the parent (constraint layout) and itself.

I tried the following approach

  1. For sellerProfile, I did the following android:layout_marginStart="@{uxContent.sellerProfileImage != null ? @dimen/margin_16dp : @dimen/margin_0dp}" where the margin_16dp and margin_0dp equals 16dp and 0dp respectively.

But when I compiled the code, I got the following error

Cannot find a setter for <android.widget.TextView android:layout_marginStart> that accepts parameter type 'float'

If a binding adapter provides the setter, check that the adapter is annotated correctly and that the parameter type matches.

How can I conditionally adjust the start margin of the layout depending on whether the seller profile is present or not?


Solution

  • You will want to adjust the margins in your layout to make use of "gone" margins. See Margins when connected to a GONE widget.

    Here is a simplified version of your layout as an example:

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/SellerProfileContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintEnd_toEndtOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_goneMarginTop="24dp">
    
        <ImageView
            android:id="@+id/SellerProfileImage"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher_foreground"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/SellerProfile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:text="sellerFullName"
            android:visibility="@{sellerFullName != null ? View.VISIBLE : View.GONE}"
            app:layout_constraintBottom_toBottomOf="@id/SellerProfileImage"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@id/SellerProfileImage"
            app:layout_constraintTop_toTopOf="@id/SellerProfileImage"
            app:layout_goneMarginStart="0dp"
            tools:text="Seller Profile Name" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    I made adjustments to the margins of the two widgets. The key change is setting app:layout_goneMarginStart="0dp" on the TextView. This will set the start margin to 0dp when the image is gone.

    enter image description here

    and to 16dp when the image is visible.

    enter image description here

    You should be able to accomplish this aspect of your layout without the use of data binding.