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>

shafayat hossain · Answer 1 · 2020-07-24T12:42:24.403

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>

The reason I have set app:layout_constraintStart_toStartOf="parent" for TextView is because when the text is small, I want the text to appear in the middle of the screen. And the problem is textview overlapping the imageview, not the other way around. — Sethuraman Srinivasan, Jul 24 '20 at 10:54
When you set text in center, and text is big, then there will be no room for image. If you want to show image view and text view both and text in center then you have to set a fixed width of text view. I'll update the answer if you are ok with that. — shafayat hossain, Jul 24 '20 at 11:00

score 0 · Answer 2 · answered Jul 24 '20 at 11:07

It doesn't overlap anymore:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imgBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvUserName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="I have a problem when the text is so big. It's overlapping"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imgBack"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Beside the issues the other user respond, i.e app:layout_constraintStart_toStartOf="parent" or wrap_content to the ImageView and the like, these attributes:

        android:layoutWidth="wrap_content"
        android:layoutHeight="match_parent"

Had typo.

If the text is small, does this appear on the center of the screen (not the textview)? I think smaller text won't be in the center of the screen. It'll be skewed to the right. — Sethuraman Srinivasan, Jul 24 '20 at 12:53

Constraint Layout - Android - Avoid Overlapping

2 Answers2