How to make Imageview not overlap Textview in ConstraintLayout

Question

I have problem to make this widget not overlap each other, what i found like below

(preview when imageview invisible) (preview when imageview visible) Here my xml snippet code:

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraits"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="5dp">
        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/title_news"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/date_published"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4 Menit lalu"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textStyle="italic" />

        </LinearLayout>

        <ImageView
            android:id="@+id/image_news"
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:src="@drawable/sample_headline_img2"
            android:adjustViewBounds="true"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toEndOf="@+id/linearLayout"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

is there a better solution?

Answer 1

Try below code:

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraits"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="5dp">

            <TextView
                android:id="@+id/title_news"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/image_news"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/date_published"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4 Menit lalu"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textStyle="italic"
                app:layout_constraintStart_toStartOf="@+id/title_news"
                app:layout_constraintTop_toBottomOf="@+id/title_news"
                app:layout_constraintEnd_toStartOf="@+id/image_news" />

        <ImageView
            android:id="@+id/image_news"
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:src="@drawable/sample_headline_img2"
            android:adjustViewBounds="true"
            android:visibility="visible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

Note: If you are using ConstraintLayout then try to manage every view by setting constraints of view. Here you used LinereLayout to display two TextView vertically which can be done by setting constraints like I did.

Answer 2

In the TextView:

<TextView
    android:id="@+id/textView_01"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="The text"
    app:layout_constraintEnd_toStartOf="@+id/imageView_01"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

Create a constraint from the end of the textView to the start of the ImageView app:layout_constraintEnd_toStartOf="@+id/imageView_01"

If you want the text to remain left justified, set the bias to 0.0.

app:layout_constraintHorizontal_bias="0.0"

And the key is making sure setting the width to 0dp:

android:layout_width="0dp"