How to stop ImageView from overlapping elements below it after programmatically setting the image?

Question

I have the following elements defined in the XML layout

<ScrollView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:fillViewport="true">

   <android.support.constraint.ConstraintLayout
      android:id="@+id/inputLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:focusableInTouchMode="true"
      android:visibility="visible">

        <!--some more elements up here that I left out -->

        <TextView
            android:id="@+id/assetImageTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:text="@string/asset_photo_header"
            android:textAppearance="@android:style/TextAppearance.Material.Medium"
            android:textColor="@color/colorAccent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/uploadRemarksEditText" />
        <ImageView
            android:id="@+id/assetImageView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:adjustViewBounds="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView10"
            />

        <TextView
            android:id="@+id/barcodeImageTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:text="@string/asset_barcode_photo_header"
            android:textAppearance="@android:style/TextAppearance.Material.Medium"
            android:textColor="@color/colorAccent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/assetImageView" />
        <ImageView
            android:id="@+id/assetBarcodeImageView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:adjustViewBounds="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/barcodeImageTextView" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>

The desired structure would be to have:

---

Asset photo header

Asset photo ImageView

Barcode photo header

Barcode photo ImageView

---

Now, when the layout is first inflated, everything looks OK. When the asset ImageView's image is set, it will obviously expand the ImageView height -- however, in doing so it seems to overlap (and hides) the rest of the elements that are supposed to be below it.

I've included screenshots below for demonstration:

Before

After

Things I have tried:

1. Calling imageView.getParent().requestLayout();
2. Calling imageView.requestLayout();
3. Calling barcodeImageTextView.requestLayout();

Would appreciate any ideas from you.

---

It turns out it may have been a bug with ConstraintLayout, I stumbled upon this answer for a different question which suggested using the beta version.

implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta5'

The problem is now resolved!

Answer 1

It turns out it may have been a bug with ConstraintLayout, I stumbled upon this answer for a different question which suggested using the beta version.

The problem is now resolved!