Constraint Layout - Android - Avoid Overlapping

Question

I have an issue with constraint Layout overlapping. Basically, I have an image on the left and text view on the right. I am trying to have the text in the text view to appear in the centre of the screen, and it's appearing as expected. But when the text size is too big, the text view is overlapping with the image view.

If I set the TextView left constraint to the right of ImageView, the overlapping is not occurring. But when the text is small, the text is not appearing in the centre of the screen.

I tried to implement solutions from this post. But, it's not working for me. Kindly help me with this issue.

 <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imgBack"
            android:layoutWidth="wrap_content"
            android:layoutHeight="match_parent"
            android:contentDescription="@null"
            android:src="@drawable/image"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        
        <TextView
            android:id="@+id/tvUserName"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:ellipsize="end"
            android:text="I have a problem when the text is so big. It's overlapping"
            android:fontFamily="@font/proxima_nova_semibold"
            android:gravity="center"
            android:lines="1"
            android:textColor="@color/white"
            android:textSize="@dimen/header_sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
           />


    </androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Please try this solution.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imgBack"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tvUserName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/backgrounds/scenic" />

    <TextView
        android:id="@+id/tvUserName"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:ellipsize="end"
        android:gravity="center"
        android:lines="1"
        android:text="I have a problem when the text is so big. It's overlapping"
        android:textColor="@color/white"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>